css help

[Whatever]

This is what I would like to achieve with div's and css but can't get my head round it. Can anyone start me off please?

Cheers.

[samhs]

<div id="container">
    <div id="logo"><img src="your logo" /></div>
    <div id="toplinks"><ul><li>link 1</li><li>link 2</li></ul></div>
    <div id="bannerad"><img src="banner ad" /></div>
</div>

<style>

  #container {
     width: 920px;
   }

  #logo {
     width: 300px;
     height: 100px;
     margin-right: 20px;
     float:  left;
  }

  #toplinks {
     width: 600px;
     height: 30px;
     float: left;
  }

  #bannerad {
     width: 600px;
     height: 70px;
     float: left;
  }
</style>

[samhs]

And of course:

#toplinks ul {
 margin:0;
 padding: 0;
}

#toplinks ul li {
 margin: 0;
 margin-right: 10px;
 padding: 0;
 list-style: none;
 float: left;
}

[Whatever]

Thanks Sam,

Will try that. Thought there was more to it than that, it's the floats etc I don't get still.

Cheers,

Paul

[Whatever]

That worked thanks Sam. Just one more thing, I've tried and failed to align the list to the right hand side of the div. I've tried adding text-align: right; but no joy. If I put plain text the inside a paragraph tag that aligns to the right.

Any pointers on this please anyone?

Thanks.

[suedenem]

Try floating the list items to the right, instead of left.

[Dom]

Something I always do to try and reduce the number of slight differences between browsers (in terms of the layout) is to set the margins and paddings of everything to zero to start.

Code:

* {
   margin: 0;
   padding: 0;
}

It basically resets all of the default paddings and margins for elements in all browsers, so you've got a blank canvas, as it were, to work with.

[Whatever]

Try floating the list items to the right, instead of left.

Tried this again and it works, but for some strange reason the last link jumps to the front of the list of links.

Something I always do to try and reduce the number of slight differences between browsers (in terms of the layout) is to set the margins and paddings of everything to zero to start.

Code:

* {
   margin: 0;
   padding: 0;
}

It basically resets all of the default paddings and margins for elements in all browsers, so you've got a blank canvas, as it were, to work with.

Cheers. So does that mean after those I could add margin-right:5px; or similar, or am I getting the wrong end of the stick?

[suedenem]

If it's a simple menu of just text, try this:

Code:

#toplinks ul {
 margin:0;
 padding: 0;
 [b]display: block;[/b]
 [b]text-align: right;[/b]
}

#toplinks ul li {
 margin: 0;
 margin-right: 10px;
 padding: 0;
 list-style: none;
 [b]display: inline;[/b]
}

Oh, and change your div names from "bannerad" to almost anything without 'banner' or 'ad'.  It's the same as hiring Brian Blessed to yell "THIS IS AN ADVERT.  BLOCK ME, AD BLOCKERS, BLOCK ME".  Same with image names, too.

[sarahA]

Something I always do to try and reduce the number of slight differences between browsers (in terms of the layout) is to set the margins and paddings of everything to zero to start.

Code:

* {
   margin: 0;
   padding: 0;
}

It basically resets all of the default paddings and margins for elements in all browsers, so you've got a blank canvas, as it were, to work with.

That bugs the hell out of me when I get something (eg. a WP theme for one of my own sites) and find that's the case. Having to set the margins/padding for paragraphs, lists, headers etc. is surely far more work that just removing it for a specific element? I guess it's whatever suits but IMO you're making extra work by removing margin/padding off an element that you're going to want and have to add again.

Also makes it harder to read unless you continually bear in mind that the margin/padding has been removed globally. Fine if you're the original developer, not necessarily so if you're working with someone else's code.

[Mr Anderson]

That bugs the hell out of me when I get something (eg. a WP theme for one of my own sites) and find that's the case. Having to set the margins/padding for paragraphs, lists, headers etc. is surely far more work that just removing it for a specific element? I guess it's whatever suits but IMO you're making extra work by removing margin/padding off an element that you're going to want and have to add again.

Also makes it harder to read unless you continually bear in mind that the margin/padding has been removed globally. Fine if you're the original developer, not necessarily so if you're working with someone else's code.

If all browsers worked the same it wouldn't be necessary, but they don't so it is. Besides which, why let a browser decide how much space you should have between your paragraphs etc., it's enough to make a typographer cry.

[sarahA]

It's only my opinion and the way I prefer to work.

[suedenem]

I resisted the CSS reset for quite a while - after all, do websites need to look exactly the same in every browser?  There's also the argument that the user has chosen to use a particular browser, and forcing display preferences upon the user is touching upon arrogance.

However, I normally find quite quickly that I have to add in a CSS reset because some of the x-browser differences aren't acceptable, and debugging & fixes are easier with a reset.  The reasons for using it are two-fold; firstly, it helps x-browser consistency, which helps manage client expectations, and secondly it's a cost thing - far from adding unnecessary work, it saves unnecessary re-work.

Likewise, I tend to prefer working with sites that I wasn't initially involved with when they have a reset.  That way, it's working from a predictable base, which makes debugging and building upon an easier process.

I stop short of resetting font sizes though; they are invariably set early on, which almost works as a reset anyway.  Oh, and I dislike working with ems, which again limits the value of resetting font sizes.

Whatever - you might want to clear your floats by adding a clearing element before the closing div#container.

[sarahA]

I don't touch any 'work' CSS. Mr A tells me off when I've edited his CSS files

[Mr Anderson]

I don't touch any 'work' CSS. Mr A tells me off when I've edited his CSS files

And they all have the margin and padding reset, so let that be a lesson to you

The reasons for using it are two-fold; firstly, it helps x-browser consistency, which helps manage client expectations, and secondly it's a cost thing - far from adding unnecessary work, it saves unnecessary re-work.

That's pretty much my own reasoning, with the latter being the more important to me than the former but both being a consideration.

[sarahA]

Well, as a CSS 'dabbler', I find it causes more headaches, but as I said, each to their own.

[Steve Lampkins]

♫ let's call the whole thing off ♫

[suedenem]

Well, as a CSS 'dabbler', I find it causes more headaches, but as I said, each to their own.

Tsk.  Never trust a lay person.

[familychoice]

I use the reset thing, not that I know anything about it.

[sarahA]

Well, as a CSS 'dabbler', I find it causes more headaches, but as I said, each to their own.

Tsk.  Never trust a lay person.

  I can write CSS from start to finish (I'm sure you realise this), it's just not my main job so I don't