13 replies [Last post]
Iain
Offline
newbie
Ipswich, UK
Last seen: 17 years 12 weeks ago
Ipswich, UK
Joined: 2005-11-17
Posts: 6
Points: 0

Forgive me if this has been covered many times on this site, I would search, but I simply don't know the name for what I'm trying to do Smile

I've used html tables to make the layout of websites before, but I'm trying to move onto doing the same with CSS.

I want to use a simple 3 column with header layout, example:-

To learn the basics of CSS, I've been through a few tutorials but I don't fully understand them tbh. If I were to make this with tables, I'd make a 3coumn x 2row table, merge the columns in row 1, then stick my images in and content. Easy. In CSS.. I don't know how Stare

Been looking at these <div> tags and I've been able to make the various cells (if that's what they're called in CSS??) appear but not all in a row like I want them.

Here's the CSS code I'm using:-

#layout {
width: 1000px;
background-color: #FFFFFF;
}

#header {
width: 1000px;
height: 139px;
}

#leftNav {
left: 0px;
width: 175px;
background-image: url(navL_bg.gif);
}

#content {
left: 175px;
width: 650px;
}

#rightNav {
left: 825px;
width: 175px;
background-image: url(navR_bg.gif);
}

..and the HTML:-

<div id="layout">
  <div id="header">
  <img src="header.jpg">
  </div>
  <div id="leftNav">
  leftNav
  </div>
  <div id="content">
  content
  </div>
  <div id="rightNav">
  rightNav
  </Div>
</div>

Problem is rather than going across the page like i want them to, they're stacking on top of each other down the page :/

Please can someone tell me the best way to achieve what I want to do, and where I'm going wrong.

Btw, Sorry for the long post, just wanted to make myself understood Smile

Cheers.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 47 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

CSS layout

Welcome! You are on the right track. Laughing out loud

I replaced 'left:' with floats, gave #content some margins and rearranged your divs. See if it works.

- r

#layout {
width: 1000px;
background-color: #FFFFFF;
}

#header {
width: 1000px;
height: 139px;
}

#leftNav {
float:left;
width: 175px;
background-image: url(navL_bg.gif);
}

#content {
margin-left: 175px;
margin-right: 175px;
width: 650px;
}

#rightNav {
float:right;
width: 175px;
background-image: url(navR_bg.gif);
}


..and the HTML:-

Code:

<div id="layout">
  <div id="header">
  <img src="header.jpg">
  </div>
  <div id="leftNav">
  leftNav
  </div>
   <div id="rightNav">
  rightNav
  </div>
  <div id="content">
  content
  </div>
</div>

Anonymous
Anonymous's picture
Guru

CSS layout

Iain
Offline
newbie
Ipswich, UK
Last seen: 17 years 12 weeks ago
Ipswich, UK
Joined: 2005-11-17
Posts: 6
Points: 0

CSS layout

Thanks for the help. I'll try your changes at work tomorrow Wink

Anonymous
Anonymous's picture
Guru

CSS layout

Iain wrote:
Thanks for the help. I'll try your changes at work tomorrow Wink
Ah, we've graduated from doing people's homework to doing the work they actually get paid for. Super!

Iain
Offline
newbie
Ipswich, UK
Last seen: 17 years 12 weeks ago
Ipswich, UK
Joined: 2005-11-17
Posts: 6
Points: 0

CSS layout

Shock ... If you read again, I didn't actually come on here asking you to do the work for me. I asked what the best way to do it is and where I was going wrong, because I want to learn CSS for myself, rather than just ripping off code.

Anonymous
Anonymous's picture
Guru

CSS layout

Iain wrote:
... I want to learn CSS for myself, rather than just ripping off code.

Honestly, ripping off code is how 90% of us learned. Laughing out loud In a professional context though it is best to ask for permission and give credit where credit is due. Some places put something like this in there code:
Quote:
Please feel free to borrow, steal, abduct, and/or torture the documents contained in the Layout Reservoir. Though you need not give credit to BlueRobot.com, a comment in your source code would help other developers to find this resource. Enjoy.

Trust me, no one was going to do your work for you here. Laughing out loud

I didn't mean to offend, it's just that we get some homework questions from time to time. Smile I saw that you actually had an example of your work that you had completed already so you are obviously a self-helper. We like that here. Smile

Iain
Offline
newbie
Ipswich, UK
Last seen: 17 years 12 weeks ago
Ipswich, UK
Joined: 2005-11-17
Posts: 6
Points: 0

CSS layout

My apologies for going on the defensive, I misunderstood what you was getting at. No offence taken Smile

I'm going to be cheeky and ask for more help now, just because I know you love me Wink I think they might both just be browser issues, but am unsure.

What Ragamuffin told me to do worked great (thanks for that!). I've since added navigation images down the left side, with text between some of them (example below). This text is inside another <dev> but the text won't go completely to the top of that <dev> for some reason. I put a black border around it so you can see the gap.


Screenie from Firefox.

Here's the code:-

css:-

#systems {
  border-width:thin;
  border-style: solid;
  border-color: #000000;
  margin-left: 15px;
  width: 145px;
  text-align: left;

}

html:-

<div id="systems">
  Large Diameter CFA<br>
  Limited Access CFA<br>
  Retaining Walls<br>
  Auger Injection<br>
  Sectional Augered<br>
  Cased Driven<br>
  Rotary Bored<br>
  Diaphragm Walls<br>
  Jet Grouting<br>
</div>

I tried doing a 'verticle-align: top' in the css, didn't do anything, I also tried 'margin-top: 0px;', again no luck. I finally tried setting padding to 0px, didn't make any difference either. In IE it's fine without any of that code, but not Firefox. Any ideas?

Secondly, I want the whole layout to be centred. I could obviously do it with html, but that's cheating Laughing out loud

body {
  background-image: url(images/bg.gif);
  background-repeat: repeat;
  margin: 5px 10px 1px 1px;
  text-align: center;
}

I thought the 'text-align: center' would do the trick, and it does in IE, but not in Firefox. I thought Firefox liked CSS :/

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 14 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS layout

Hi

Its probably what is above it imposing a bottom margin which the div itself is inheriting. I would play around with the margin on the div with that piling systems bit in.

Trevor

Anonymous
Anonymous's picture
Guru

CSS layout

Iain wrote:
I thought the 'text-align: center' would do the trick, and it does in IE, but not in Firefox. I thought Firefox liked CSS :/
text-align centers inline items. To center block elements use margin: 0 auto;

Let us see the page and look at the markup so that we can help with the gap. It could be something as simple as using * {padding:0; margin:0;}

Also, the list of items in <div id="systems"> would more semantically be placed in an unordered list instead of using <br /> after ever line. Smile

Iain
Offline
newbie
Ipswich, UK
Last seen: 17 years 12 weeks ago
Ipswich, UK
Joined: 2005-11-17
Posts: 6
Points: 0

CSS layout

I had planned to use an unsorted list to display the navigation text, just hadn't gotten round to learning the css code yet Smile

Ok, I uploaded the page (minus the header image, not finished yet) to the following url:-

http://www.clan-ten.com/host_iain/index.htm

Quick link to css:-
http://www.clan-ten.com/host_iain/styles.css

Any help with that one will be greatly appreciated. All I want is a

Quote:
text-align centers inline items. To center block elements use margin: 0 auto;

Nice one, worked a treat Smile Thanks

Anonymous
Anonymous's picture
Guru

CSS layout

Iain wrote:
I had planned to use an unsorted list to display the navigation text, just hadn't gotten round to learning the css code yet Smile
Good idea. Smile

For the gap try this:

h2.font2 { /* navigation text */
font: arial;
font-size: 12px;
font-weight: normal;
color:#FFFFFF;
margin:0;
}

Notice the margin line. Smile

Iain
Offline
newbie
Ipswich, UK
Last seen: 17 years 12 weeks ago
Ipswich, UK
Joined: 2005-11-17
Posts: 6
Points: 0

CSS layout

I know who to go to next time I need help Wink

Thanks all.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS layout

The reason for the difference between IE and Moz is that IE incorrectly collapsed the margin[1]. #system has a border, so it should not collapse with the h2. It has a width, though, which gives #system 'hasLayout'; an IE property that some times causes IE to behave properly and other times, to misbehave[2]. One of the misbehaviors is to collapse margins where it shouldn't. Margins should not collapse where the parent or the element at issue has a border, has padding, or is a float or AP element.

cheers,

gary

[1] Eric Meyer has written an article, Uncollapsing Margins, which clearly describes the effect.

[2] Bruno Fassino has done some testing on this issue. See IE/Win: Margin collapsing and hasLayout.

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