26 replies [Last post]
pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

I've been using CSS for a while but I'm missing a building block concept.

I have a page that is two column laid out like this:
Wrapper (877px)
header (877px)
top Navigation (877 px)
content 623px
Content Links 264
Footer

The content and content links are the two columns in the center and I've tried defining px, or using 80% and 20% - then tried adding clear left, or clear right, or float left or float right - and whatever I do the content links portion displays below the content.

Can someone point me in the right direction? Below is the style sheet - I've stopped where I couldnt go any further.

body { font-family: "Trebuchet MS", Arial, sans-serif, Verdana; font-size: 10px; font-style: normal; text-decoration: none; background-image: url(img/background.jpg); background-repeat: repeat; margin: 0 0 0 0; }

#wrapper {
width:887px;
height:auto;
margin-left:10%;
margin-right:10%;
}
#top_banner {
width:887px;
height:188px;
background:url(img/top_banner.png);
}

#top_nav {
width:887px;
height:44px;
}
#content_top {
width:621px;
height:23px;
background:url(img/content_top.png);

}
#content_link_top {
width:266;
height:18;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Place the content link

Place the content link markup before the other (right side stuff) and float it left. To the right side element remove width and just use a left margin slightly greater than left column width.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

ok thanks, i'll give it a

I want the content link to be on the left side - so does that make a difference?

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

ok, I'm still not getting

ok, I'm still not getting it, grrr..

http://pylorns.boldlygoingnowhere.org/settlement/

there is the link where you can see it - here is what i've changed:

#content_top {
width:621px;
height:23px;
background:url(img/content_top.png);
}
#content_link_top {
margin-left:622px;
height:18;
background:url(img/content_link_top.png);
float:left;
}

here is the HTML

The Settlement II Subdivision in Round Rock Texas HOA Website

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And is that not what I

And is that not what I described? content_links I presume are the links that you want on the left hand side, so you must place them first in the source order of your markup (they seem to still be after) then you float them left, the right side(content_top) is just margined away from the left.

You seem to have margined the links and left them after the content_top

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

The content top is the

The content top is the content on the left hand side - which is where i want it.

The content link top needs to be on the right hand side. I adjusted what you initially suggested but doesn't seem to work.

here is what it is going to look like:

http://pylorns.boldlygoingnowhere.org/settlement/img/thesettlement_final.jpg

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 24 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

With the margin, you don't

With the margin, you don't float the links. Plus, you left the units off the height, so height is likely ignored making the zero height container 'disappear'.

#content_top {
  float: left;
  width: 621px;
  height: 50px;
  background: yellow url(img/content_top.png) no-repeat;
}

#content_link_top {
  margin-left: 622px;
  height: 50px;
  background: yellow url(img/content_link_top.png) no-repeat;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm sorry but you're just

Quote:
I want the content link to be on the left side -

Quote:
The content top is the content on the left hand side - which is where i want it.

The content link top needs to be on the right hand side

:?

I'm sorry but you're just confusing the heck out of me , you must describe and name things very clearly, when you're referring to links then one assumes an identifier with the word links in is in fact the one that is.... anyway I'm sure Gary has straightened it out Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

ok, well there was part of

ok, well there was part of my dumb mistake - leaving the units off - that kept the image from not being displayed correctly I think. Thanks.
here is what I have done now - i've made it a bit more understandable with the nameing.

/* The area in question */ #content_left_top { width:619px; height:23px; background:url(img/content_top.png); clear:left; }

#content_right_nav_box_top {
margin-left:620px;
height:18px;
background:url(img/content_link_top.png);
}
/* end area in question */

Now it displays the image - but its still off.. is this unit problem or because my margin is too long? See below link. http://pylorns.boldlygoingnowhere.org/settlement/

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

hmm, this is bugging the

hmm, this is bugging the heck out of me. I was thinking this was something simple that I was missing?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 24 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Why clear? What happened to

Why clear? What happened to float?

/* The area in question */
#content_left_top {
width:619px;
height:23px;
background:url(img/content_top.png);
clear:left;
}

And the background image needs to be no-repeat, as I showed you. Else you will have a nasty surprise when you add content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

When I did the float, the

When I did the float, the whole thing (wrapper, everything shifted to the left and the nav bar disapeared.) - the clear doesnt seem to work.

Here is a pic with the float.
http://pylorns.boldlygoingnowhere.org/settlement/settlement2.png

And here is a pic with no float, no clear or if i leave the clear it doesnt matter.

http://pylorns.boldlygoingnowhere.org/settlement/settlement3.png

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

I made this even simpler,

I made this even simpler, got rid of the images - it still displays on the next line instead of inline.

/* The area in question */ #content_left_top { width:600px; height:23px; background:green;

}

#content_right_nav_box_top {
margin-left:600px;
height:23px;
background:yellow;

}
/* end area in question */

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kk5st wrote:Why clear? What

kk5st wrote:
Why clear? What happened to float?
/* The area in question */
#content_left_top {
width:619px;
height:23px;
background:url(img/content_top.png);
clear:left;
}

And the background image needs to be no-repeat, as I showed you. Else you will have a nasty surprise when you add content.

cheers,

gary

:shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

nope, i've gotten rid of the

nope, i've gotten rid of the backgrounds to make it simpler thinking somehting was going on with my images...

body { font-family: "Trebuchet MS", Arial, sans-serif, Verdana; font-size: 10px; font-style: normal; text-decoration: none; background-image: url(img/background.jpg); background-repeat: repeat; margin: 0 0 0 0; }

#wrapper {
width:800px;
height:auto;

}
#top_banner {
width:800px;
height:23px;
background:green;
}
#top_nav {
width:800px;
height:44px;
}

/* The area in question */
#content_left_top {
width:600px;
height:23px;
background:green;
clear:left;
}

#content_right_nav_box_top {
margin-left:600px;
height:23px;
background:yellow;

}
/* end area in question */

HTML

The Settlement II Subdivision in Round Rock Texas HOA Website

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Screenshot of what its doing:
http://pylorns.boldlygoingnowhere.org/settlement/settlementnowork.jpg

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 24 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

When someone gives you a

When someone gives you a suggestion, apply it exactly. Don't try to second guess or get ahead of the step. If the suggested code doesn't work, upload/post your new page with the exact changes. Clearly describe the wrongness. "It doesn't work" is not a problem description. There may be something as simple as a typo (by you or your respondent), or another issue that can be cleared up if only we can see the code.

You can be sure that any suggestion I make has been tested in your page, and was found to work, or it is a common issue with a pat fix. If not, I will clearly state that it is not tested.

Now, go back to the step where I gave you some changes and plug them in.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

kk5st wrote:When someone

kk5st wrote:
When someone gives you a suggestion, apply it exactly. Don't try to second guess or get ahead of the step. If the suggested code doesn't work, upload/post your new page with the exact changes. Clearly describe the wrongness. "It doesn't work" is not a problem description. There may be something as simple as a typo (by you or your respondent), or another issue that can be cleared up if only we can see the code.

You can be sure that any suggestion I make has been tested in your page, and was found to work, or it is a common issue with a pat fix. If not, I will clearly state that it is not tested.

Now, go back to the step where I gave you some changes and plug them in.

cheers,

gary

Gary, I'm sorry I think I've confused everyone here including myself. I was previously trying to simpliy it all. So ive gone back to the begining where I first posted, used the same code - and then took what you suggested and applied it:

CSS

body {
font-family: "Trebuchet MS", Arial, sans-serif, Verdana;
font-size: 10px;
font-style: normal;
text-decoration: none;
background-image: url(img/background.jpg);
background-repeat: repeat;
margin: 0 0 0 0;
}

#wrapper {
width:887px;
height:auto;
margin-left:10%;
margin-right:10%;
}
#top_banner {
width:887px;
height:188px;
background:url(img/top_banner.png) no-repeat;
}

#top_nav {
width:887px;
height:44px;
}
/* content box on the left side */
/* gary suggested not using floats since its margin, but on another post there was a float here */
/* I've left it out */
#content_top {
width:621px;
height:50px;
background:yellow url(img/content_top.png) no-repeat;

}

/* this is the navigation on the right side*/

#content_link_top {
margin-left:622px;
height:50px;
background:yellow url(img/content_link_top.png) no-repeat;
}

HTML

The Settlement II Subdivision in Round Rock Texas HOA Website

As you can see I ran through and fixed my typo where I missed the units (px) on the height. I also left out the float as you suggested since its not needed with a margin. Here is where I'm confused. I know I'm missing something really dumb and its my fault, this is what I'm trying to learn so I don't have to keep asking stupid questions. In applying your initial suggestions I am back to square one almost - what displays on my end is the navigation bar that is on the right has dropped to the next line.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 24 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

I didn't say to rid yourself

I didn't say to rid yourself of the float globally, only on that right column.

#content_top {
  float: left;
  width: 621px;
  height: 50px;
  background: yellow url(img/content_top.png) no-repeat;
}

#content_link_top {
  margin-left: 622px;
  height: 50px;
  background: yellow url(img/content_link_top.png) no-repeat;
  }

Use these sets as direct replacements for what you have.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

That was it - it displays

That was it - it displays correctly in ie, but not correctly in dreamweaver, which doesn't make sense.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 24 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Why does DW's faulty

Why does DW's faulty behavior matter? It's not a browser.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

pylorns wrote:That was it -

pylorns wrote:
That was it - it displays correctly in ie, but not correctly in dreamweaver, which doesn't make sense.

It makes perfect sense if you don't let yourself be fooled by the claims of someone who wants to separate you from your money and pay attention instead to the actual facts. Dreamweaver is lousy at rendering html and CSS, it's so bad it's even worse than Internet Explorer, which is some bad. That's a fact.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

pylorns wrote:That was it -

pylorns wrote:
That was it - it displays correctly in ie, but not correctly in dreamweaver, which doesn't make sense.

Oh for the love of... You mean to say all this odd confusion was due to flipping DW, please don't bring code editors problems into the mix, especially DW ones, all we are ever interested in is true browser rendition not some facsimile.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So I for one am assuming

So I for one am assuming that you have now got your head around what we have been trying to impart about float columns and that we can mark this thread as resolved?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smirkingdude
Offline
Enthusiast
Last seen: 12 years 17 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

*raising hand*

I'm a Dreamweaver user. I only believe what I see on browsers, not on DW8. I hope that DW CS3 have better CSS rendering.

Tip for any DW users out there: Believe what you see on browsers, not on your own DWs. Smile

"Imagination is more important than knowledge"
Albert Einstein

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

smirkingdude wrote:I'm a

smirkingdude wrote:
I'm a Dreamweaver user. I only believe what I see on browsers, not on DW8. I hope that DW CS3 have better CSS rendering.

So am I, and your advice is good.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

kk5st wrote:Why does DW's

kk5st wrote:
Why does DW's faulty behavior matter? It's not a browser.

cheers,

gary

True. I went back and figured out what was wrong with dreamweaver, my image sizes and div sizes were wrong. The browsers displayed them correctly but not the dreamweaver previewer.

pylorns
pylorns's picture
Offline
Regular
Austin
Last seen: 11 years 21 weeks ago
Austin
Joined: 2005-07-14
Posts: 40
Points: 0

yes, Thanks to all for the

yes, Thanks to all for the advice. I've opened up a whole 'nother can of worms as i've changed how I'm laying it out again. I'm searching around first before asking though.