Announcement

**jont** · 23-Aug-2007, 10:39 PM

To get the white gutters you will need to wrap the central code into a containing <div> you can then style the <body> once colour and the container another.

**TheSwift** · 25-Aug-2007, 08:39 AM

Originally posted by jont

To get the white gutters you will need to wrap the central code into a containing <div> you can then style the <body> once colour and the container another.

Morning Jonty,

You've got me there, was hoping it would be idiot proof, can you point me in the right direction?

P.S. The weather is heating up at last eh? Super...

Regards

Mark

**Duncan Rounding** · 25-Aug-2007, 09:39 AM

I'm no css expert, far from it but simply put what Jonty's saying is to style the BODY (all the page) in one colour say and then have everything else inside a DIV that is styled to a different colour.

<body...>
<div class="mycolourstyle">
....
all the rest of my outer layout
....
</div>
</body>

Then the css would be something like:

html,body {
....
background-color:#996633;
....
}

.mycolourstyle {
....
background-color: #339966;
....
}

It would be worth your while to try and rip some other web pages apart to see how the css works. the Firefox Firebug add-in will help you do this.

**completerookie** · 25-Aug-2007, 03:37 PM

sounds like you need a quick tutorial on CSS (Styles)
pop over to a site like http://www.tizag.com/cssT/ and start there.

basically, <div></div> will start a new line within your display, and a <span></span> will try to continue on the same line without forcing a new line. (if that makes sense)

if you want a style to be applied to more than one part of the page ( ie an entry on the line of the menu), then you have to use a class name and then use a bit of code like <div class="theClassName">some contents</div> and within your style sheet you use .theClassname { style commands go here}

if you want a specific bit of the page styled and you know that the same style will not be used elsewhere on the page, then use the "id" parameter - example
<div id="specificStyle">some contents</div> and within your style sheet you use #theClassname { style commands go here}
(note the difference is the "fullstop" or the "hash" before the style name)

a typical place you would use an id= would be the actual vertical menu, you know that there will not be another container for the "vertical menu" so you could use <div id="verticalMenu">the menu goes here</div>

once you start to "classify your styles", its only a matter of putting some "style" to your areas, so for your vertical menu box, you could have some style commands like

Code:

#verticalMenu {
  border: 1px solid white;
  background-color: green;
  }

its a quick overview, and it can get infinately more complex than that - pop over to tizag for more information.

a couple of other points,
always develop and view in Firefox, (its standards compliant) and then once its working there, add additional commands specific to IExplorer. if you want the command to be IE specific, then put an underscore in front of the style attribute.
example
width:185px;
_width:188px

so in the above example, most browsers will show a width of 185pixels, but IExplorer will understand the underscore and make the width 188pixels.

use this sort of trick to make the width "identical" in FireFox and IExplorer.

make sure you download the Developers Toolkit for Firefox, there's lots of goodies to help you.

so in a nutshell, start at a place like Tizag

Announcement

Bacground colour and Explorer hover overs, help?

Bacground colour and Explorer hover overs, help?

Comment

Comment

Comment

Comment