96 replies [Last post]
ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

I have a menu that is horizontal and looks awesome in Firefox. I look at it in IE and it's shifted to the right and it's driving me nuts. Attached is a screen shot and my css's.

The div I am talking about is called menu and the UL has an id of nav.

Any ideas? I'm pulling my hair out.

AttachmentSize
screenshot.gif47.84 KB
main.css_.txt2.98 KB
ie.css_.txt379 bytes
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 50 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I'm afraid that we will need

I'm afraid that we will need to see a live url so we can see what's going on.

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

Sorry about that:

http://www.carfaro.com/new/

I'm also having issues in IE where the middle div is shifting below the left div. I'm trying to switch from tables, I really am:)

thanks,
[email protected]

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

What? This is at the start

What?

This is at the start of your hmtl:

<-- IE quirks rendering mode trigger -->

Before the doctype. It will do exactly what it says on the tin.

Being the sensitive types that we are, we do ask that pages are rendered in standards mode, use a full and valid doctype (yours is) and that the page passes validation at w3c.

Yours gets this message:

Quote:
Failed validation, 41 errors

Can you get rid of the comment at the start, then fix upthe code, check how it then looks and post again for help.

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

ugh

I got rid of the tag at the beginning and now it looks weird as hell now.

can you take a look now? http://www.carfaro.com/new/index.php

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

Which goes to show that you

Which goes to show that you have some work to do. Did you fix the validation errors (although I note that teh validator.w3.org service has been down almost since I last posted, quite a few hours)?

Until they are fixed there is no point in us looking at your code.

With that comment in IE was in quirks mode, which suggests you used IE to test, which if true was not a good idea.

And whilst we are about it, dump that preload javascript. It isn't worth it.

There are few times you should use a line break. Margins are a better idea. Non-breaking spaces to pad an image? make the image display:block in the css and add margins.

Then, your main code is a table for layout design. we do not approve of that.

Quite a project for fixes. But, bit by bit.

Whilst it has validation and markup errors, fixing other problems has to take a backseat.

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

good three div layout suggestion?

I'm not married to the div set up. I'm mostly looking for something that will show a div header across the top and another along the bottom with three divs in the middle - left, middle, right. I copied the css from a website that had free templates.

Obviously, I got what I paid for eh?

Thx,
[email protected]

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

Free

Free Templates

OK.

Ignore the layout completely. Imagine you were making one of those text-only pages.

Markup your content in the order you want to read it and use semantically correct tags.

Validate that. No css at all.

THEN, mockup what you want the styled page to look like in a paint program, and post the html and image here, yo'll likely get a basic css file posted that will do it for you. No templates.

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

Hah:) Tell me how you really feel :)

I'm not sure what you mean by posting the html and the image.

Ideally, what I'd like to see is something like the attached file. I'm looking for
Header

menu

Left Middle Right

Footer

It's frustrating as hell because I could use tables to do all of this, but I really don't want to. I'm trying to get better, really I am:)

AttachmentSize
indexGif.gif 207.33 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You're missing the

You're missing the point.

Ignore design and layout. Forget about what "you" want it to look like.

Mark up your content structurally. Until you do that, trying to style it is a fruitless task.

Verschwindende wrote:
  • CSS doesn't make pies

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

I guess I'm not

I guess I'm not understanding what you mean by structurally marked up content. Do you mean, put everything out on the page and then start playing with things? I'm not meaning to be totally dense, I'm just not following you.

I'm using php to flip the content in the middle of the page based on the links they click.

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

thepineapplehead

thepineapplehead wrote:
You're missing the point.

Ignore design and layout. Forget about what "you" want it to look like.

Mark up your content structurally. Until you do that, trying to style it is a fruitless task.

Like tph says. Truly, we are not joking. It is the way to go.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

I mean using tags to

I mean using tags to describe the actual content, for example a navigation list would use the <ul> tags, titles and subtitle using the <h> heading tags, text wrapped in paragraph tags, etc etc.

Verschwindende wrote:
  • CSS doesn't make pies

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

Meaning something like this

Meaning something like this - http://carfaro.com/new/indexPlain.php

Pulled out all of the div's and stylesheets and js files etc. I haven't validated anything, but I just want to see if I am understanding what you're talking about.

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

Well, yes and no. You have

Well, yes and no.

You have an image simply sitting in the body, but an image is an inline tag and must be contained by a block level element, like a div or whatever.

There is a table there, but no tabular data (e.g. spreadsheet like stuff), so get rid of the table and put it's contents in more appropriate containers.

The images of the buildings, OK

But the logo and the welcome, replace these with header tags and text. They are not meaningfull content as they are.

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 10 years 28 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

I updated things, is that

I updated things, is that more along the lines of what you're looking for? I didn't put any css in there at all, so I can't move the pics around like I would like, but everything is in it's own div tag.

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

Getting there. But

Getting there.

But ...

Where you have br's use end and start p's:

For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

becomes:

For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

etc.

<strong> becomes <b> (it's shorter!)

And no borders on images:

Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ

becomes

Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ

And guess what? We have a structurally semantic page of content in html.

BUT, one cautionary note. When using li's, pair the end and next start ones together, because older versions of IE can create extra whtespace else.

this:

  • Dealer Information
  • Drawing Downloads
  • Dealer Information
  • Site Map
  • About Us
  • Contact Us
  • Links
  • becomes this:

  • Dealer Information
  • Drawing Downloads
  • Dealer Information
  • Site Map
  • About Us
  • Contact Us
  • Links
  • CT

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 9 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    By Jove, I think he's got

    By Jove, I think he's got the hang of this malarkey!

    Great work Raven, you've certainly picked this up quickly Smile

    Verschwindende wrote:
    • CSS doesn't make pies

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    thanks guys, this is

    thanks guys, this is certainly educational as hell for me:)

    The page has been updated with your suggestions. Took a once over and checked it, so I think it's ready.

    http://www.carfaro.com/new/indexPlain.php

    Now what?

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

    A quick final fix: <div

    A quick final fix:

    becomes:

    Lovely green at vaildator.w3.org

    So, we now need to apply a wieframe to work in (or at least, that's the way I do it).

    Standard questions to answer:

    1. Full width or fixed width?
    2. If fixed width, what width do you want. If full width, what minimum width do you want?
    3. Page height. Do you (hopefully you don't Smile ) want pages with little content to still fill the page top to bottom (so-called 100% height)?
    4. Ignoring the header and footer, you will need at least one main content section, but do you want left or right sidebrs, if so which and at what widths?
    5. Do you (as I do) wish to present the main content before the sidebars in the document flow to bring that content to search bots and text readers (for visually impaired visitors) first, or are you happy with simply placing the columns in the order they are seen (left bar, center, right bar)?
    6. Are the headers and footers across the full width of the content?
    7. If the headers and footers are to be split into sub rows, how many of which.

    No colors or background images yet.

    CT

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

    I noticed 2 more br's

    Oh

    And I noticed 2 more br's in there. Replace with a closing and opening set of p's.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    's inserted in footer, 's

    's inserted in footer,
    's replaced. CHECK!

    ClevaTreva wrote:

    Standard questions to answer:

    1. Full width or fixed width?

    I've never been a fan of either. If you look at the old website: http://www.carfaro.com I didn't use the whole page.

    ClevaTreva wrote:

    2. If fixed width, what width do you want. If full width, what minimum width do you want?

    I'd like to make it so that everyone can see it without scrolling all over the place - ie pack as much into as much space as possible without making it look cluttered as hell.
    ClevaTreva wrote:

    3. Page height. Do you (hopefully you don't Smile ) want pages with little content to still fill the page top to bottom (so-called 100% height)?

    Considering the (hopefully you don't) comment, I'd say no? Smile
    ClevaTreva wrote:

    4. Ignoring the header and footer, you will need at least one main content section, but do you want left or right sidebrs, if so which and at what widths?

    I'd definitely like a left sidebar, only to show sublinks if I need to, otherwise it'll be empty. There are a lot of pages that reuse the same right sidebar content, so that'll need to be wider. I'd say if I did it by percent, that it'd be 10% 75% 15% ?
    ClevaTreva wrote:

    5. Do you (as I do) wish to present the main content before the sidebars in the document flow to bring that content to search bots and text readers (for visually impaired visitors) first, or are you happy with simply placing the columns in the order they are seen (left bar, center, right bar)?

    Not sure what you mean by this. ie - mainpage is simply content with no sidebars and any link you click on will then have side bars? if so, yeah.
    ClevaTreva wrote:

    6. Are the headers and footers across the full width of the content?

    yes, I'd like to have a graphic running along the top and bottom.
    ClevaTreva wrote:

    7. If the headers and footers are to be split into sub rows, how many of which.

    I'd like the header to have a graphic running along the top, and below the graphic, display the logo, the logo phrase, and the toll free number. The number I'd like to have all the way on the right, and the logo and phrase on the left.

    I'd also like another div for the dropdown multilevel menu between the header and the three body divs.

    Thx so much.

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

    Sorry Sidebars are what I

    Sorry

    Sidebars are what I call left and right columns.

    Are you trying to replicate the old design in appearance? Your post talks about left and right columns, but the old site doesn't have these, and your marked up css-less page doesn't appear to have these either.

    Your old site is full width but with padding to each side. IMHO that is the nicest way to do full width.

    If we set the minimum width to 770px, then it won't scroll even in an 800x600 15" screen, most people have this or better.

    Normally, it's a good idea to have the left and right columns a fixed width and let the middle be the rest.

    Let's say you have side padding of 20px, the left column at 100px the right at 150px, then the middle is 100%-(20px x 2) - 100px - 150px. That would work.

    Can you just quickly mock up a 100px wide by 600 px piccy with just colored blocks to show where it all goes?

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    ClevaTreva wrote: Can you

    ClevaTreva wrote:

    Can you just quickly mock up a 100px wide by 600 px piccy with just colored blocks to show where it all goes?

    100px x 600px wide? That'll look kind of weird, won't it?
    You're looking for something like this: http://www.fraggaz.org/crum/layoutw/ because that's almost exactly what I am looking for.

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

    Ah, if you stay with the

    Ah, if you stay with the forum you'll get used to my typo's Smile

    Maybe 1000!

    I'll start the coding tutorial in a few minutes ...

    We'll start with the basic css, but, if you don't mind, as all my coding is done with xhtml coding, I'll use that.

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

    OK We'll start with the

    OK

    We'll start with the main content and ignore the header and footer. You might want to cut and paste the h & f and keep them safe for now!

    Here is a basic html layout but with some extra divs.

    The page-container div helps us handle the page within the body and we may use this later for styling and such, or we may find it unnecessary. Best to put it in. You will note in the css that I have set a font-size and line-height here. This can be handy to make a quick javascript font-size changer for accessibility, as if you change this value the whole page changes (the body font-size stays at 100.1%).

    The outer and float-wrap div's help us play with balancing column heights, and keep IE's quirky float rendering under control. They also allow us to put the most important content first.

    So, the html:

    Carfaro, Inc.
    @import url("newstyle.css");

    This is the
    Main Content

    This is the Left Sidebar

    and the newstyle.css file:

    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } input,select,textarea{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; } strong,b{ font-weight:bold; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #page-container{ font-size:90%; line-height:1.1em; }

    Would you like to take these and paste the bits of html and content you have into the right places. Obviously, you don't need to paste the div containers you had, as these are provided in my code for you to use.

    Then upload the bits and post the url when done.

    CT

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    something like this as far

    something like this as far as how I want to layout the divs.

    AttachmentSize
    layout.gif 10.99 KB
    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 50 weeks 4 days ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Yup, got that, that's where

    Yup, got that, that's where we are headed with the code I posted. I am not going to code it for you. Rather, we will build it together. That way you can learn and others can see how my swiss cheese brain functions Laughing out loud

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    http://carfaro.com/new/index.

    http://carfaro.com/new/index.html

    I put in the main body from the old page and put in the pics. I kept the divs from the pics because I'd eventually like to have the page layout as follows:
    Text long small pic1
    text pic space
    text here small pic2

    This is really great. We should package this up in steps and publish it on the site somewhere:)

    thx.

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

    Hi

    Hi

    You appear to have a media directory in your root and in the 'new' folder. You have put the css in the wrong media directory, whoops!

    I made a couple of changes to meet xhtml standards. The two smaller images sit side by side, but don't worry, we'll fix that later:

    Carfaro, Inc.
    @import url("newstyle.css");

    For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

    From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

    Our products are maintenance-free – they will not rust and are UV and saltwater resistant – easy to install, and more durable and stylish than wood or vinyl. Custom-fabricated, welded systems allow for evenly spaced posts and pickets that enhance visual appearance and eliminate field modification during installation. Cast sleeves provide built-in adjustability and match one of six top rail profiles. Polyester resin finishes are superior to painting and anodizing and available in 8 standard colors or custom color matches.

    Alternating picket heights and accessories – various final and end-cap options, and special designs offer the opportunity to create a unique visual appearance and more custom look.

    Coming soon – Carfaro’s new modular system, a competitively priced option for residential developers and architects.

    Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ
    Colonial Style Railing, professional building - Pennington, NJ Three-Line Picket waterfront fence, mid-rise apartments - Weehawken, NJ

    This is the Left Sidebar

    What do you think about the font it's size? It will look better when all the styling is added Wink

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Looks good so far I

    Looks good so far Smile

    I usually put my stylesheet in a media directory, just so I know where it is, but I will bow to your wisdom. the css is in the root now.

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

    Ok Now to the css. What we

    Ok

    Now to the css.

    What we started with was just basic stuff for all browsers to look the same.

    Let's add a bit of code to the body css:

    body{ font-family:verdana,arial,sans-serif; font-size:100.1%; min-width:770px; /*** Minimum Content Width ***/ padding:0px 20px; }

    FOr IE7 and most other browsers (not IE6 and earlier), the min-width does what it says on the tin!

    And now we need to get the columns working.

    A bit more in this div's css:

    #page-container{ font-size:90%; line-height:1.1em; position:relative; width:100%; /*** Content Width ***/ display:table; background:#FFCCCC; /*** Background colour of left AND right columns ***/ }

    And the new css:

    #wrapper{ display:table-cell; position:relative; } #outer{ position:relative; margin-left:150px; /*** Left Column Width ***/ margin-right:200px; /*** Right Column Width ***/ background:#ADD8E6; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:100%; float:left; display:inline; } #left{ float:left; display:inline; width:150px; /*** Left Column Width ***/ margin-left:-150px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:200px; /*** Right Column Width ***/ margin-right:-200px; /*** NEGATIVE Right Column Width ***/ position:relative; } #center{ position:relative; /* fix for IE */ width:100%; float:right; }

    You will ntoice that whenever an element is floated, it has display:inline

    This makes no sense as makingan element float causes it to become display:block and adding display:inline does nothing to cahnge this. BUT, it does kick IE6 into order and fixes a bug with it.

    Get ti working (sorry for the colors Smile , they help us to see what's going on!)

    CT

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Yeah, those are some

    Yeah, those are some interesting colors alright:)

    I did put the css in the media directory - hope I'm not breaking CSS Canon Law - but it helps me keep my brain wrapped around what is where.

    The new css is up now. Wow that's a weird pink.

    Question - is the page container just the whole page, and the Outer is the middle column? so it kind of sits right on the page container. I'm imagining that behind the blue it's pink, right? It's not like you have three separate boxes, but one large box with a small one centered on it, colored Blue.

    or I am confused:)

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

    OK Take a careful look at

    OK

    Take a careful look at the css code to see what's going on. Ignore the page-container (we might be able to get rid of these later, depending on where the design goes).

    Whoops, I already slimmed it down a bit in the html by taking out the wrapper div, so you can kill that in the css. And you can remove the display:table in the page-container css and the height:100% in the outer div css.

    They were a hangover from another project I did, whoops again!

    What IS going on?

    The outer is effectively as wide as the page because it inherits its width from the page-container. BUT, it has a left and right margin, and so it is that much narrower than the page-container.

    The next div inwards is the float-wrap. That is floated left and is as wide as the outer it is in. It needs a width because floats like a width to be set.

    The center content comes first and is the same width as the float-wrap and thus the same as the outer, and is floated right.

    Also in the float-wrap is the left column. This is set to margin-left the same as its width, and so jumps out of the float-wrap and outer from a positional point of view and sits nicely in place to the left of the content.

    The float-wrap now closes.

    Then comes the right column. It too is floated left, has a width but also has a negative right margin. This is because it is still inside the outer div, which is narrower than the page. Giving it a negative right margin makes it position itself to the right of the outer div, whilst still being in it.

    Now, you can see that all three divs are actually on top of each other but using negative margins we shift the left and right columns to where they need to be.

    The good news is that this means that whichever column is the longest, the others appear to grow to match. Cool.

    When yo have understood and played with this, let me know.

    CT

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

    Just tested it in Opera. The

    Just tested it in Opera. The display:table in page-container needs to stay.

    I'm getting tired.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I guess I'm a little fuzzy

    I guess I'm a little fuzzy on how the center stays in the center.

    if the float is as wide as the outer, how is there room for the right div?

    If I am understanding correctly:
    The page container is as wide as the page, no matter what.
    The outer & float-wrap are the same widths, and they contain the left and center divs. They are not as wide as the whole page because we're putting the outer in the page and leaving the right margin of the page container for the right container?

    I don't understand why we don't just put the left container in the left margin, the right container in the right margin and the content is in between.

    This is fascinating btw:)

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

    The outer is moved in from

    The outer is moved in from the left by 150px and from the right by 200px, and is in effect the correct width for the center column. The left and right columns are inside it, but by giving them negative margins they move to appear either side of the outer leaving room for the center div.

    Why not put them just left, center then right?

    Well, you can. But then we have to hack a bit to avoid IE having a tizzy with floats next to each other. And, becasue they aren't inside each other (as they are in my code) they won't push each other down as they get bigger. Ever see a page with uneven length columns? It looks odd. My method avoids that.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Okay, that makes sense.

    Okay, that makes sense. Thanks.

    what's next?

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

    Let's add the header back

    Let's add the header back in:

    html snippet (note the change in hx numbers):

    And give the header a bit of css:

    #header{ position:relative; background:#AAFFCC; height:75px; overflow:hidden; }

    And the footer snippet added:

    and the css for that:

    #footer{ position:relative; background:#77EE33; height:30px; overflow:hidden; }

    Now we need any images you'll want to use in the header.

    Put them in your images folder and let me know the names and where they need to be.

    CT

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Okay, the code is in place.

    Okay, the code is in place. I pasted it in, but I tried to line up all the div tags, it looks like I might have an extra close div tag. Not sure.

    the logo is http://www.carfaro.com/new/media/images/flatLogoSM.jpg
    the tagline is http://www.carfaro.com/new/media/images/standard.gif
    the phone number is http://www.carfaro.com/new/media/images/phone.gif

    Am I mistaken in thinking that the only reason the header and footer are where they are positioned is because that's where they lay in the code, right? Meaning, that the css for the div doesn't dictate where it is on the page, simply how high it is? I'm taking a stab at understanding - if you have relative set as the position, it's where you put it in the code?

    thx,
    [email protected]

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    if I wanted to have a gif

    if I wanted to have a gif running along the top in the header, would I use this in the #header tag in css file?

    background-image: url(images/headerBGTop.gif);

    Thx,
    [email protected]

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

    ravensensei wrote:Okay, the

    ravensensei wrote:
    Okay, the code is in place. I pasted it in, but I tried to line up all the div tags, it looks like I might have an extra close div tag. Not sure.

    the logo is http://www.carfaro.com/new/media/images/flatLogoSM.jpg
    the tagline is http://www.carfaro.com/new/media/images/standard.gif
    the phone number is http://www.carfaro.com/new/media/images/phone.gif

    Am I mistaken in thinking that the only reason the header and footer are where they are positioned is because that's where they lay in the code, right? Meaning, that the css for the div doesn't dictate where it is on the page, simply how high it is? I'm taking a stab at understanding - if you have relative set as the position, it's where you put it in the code?

    thx,
    [email protected]

    Hi Matt

    Objects will naturally sit after or next to the previous object in the flow. BUT. IE has a problem now and again and needs a kick to behave. position:relative means put me next to or below the previous div, or, if inside a div (directly inside) then put me at the top left corner of the div I am in.

    It isn't necessary to set a height, but if you have a background image, the div needs to be high eneough to fit it into.

    I'll take a look a the images etc. In a few minutes when my head has setttle after a day teaching.

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

    Just looked those images,

    Just looked those images, why are two of them just text? I can't think why you shouldn't just put text on the page.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    mostly because I liked the

    mostly because I liked the typeset and it's not a common font I don't think.

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

    Fair enough

    Fair enough Wink

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

    Ok Had to remake a couple

    Ok

    Had to remake a couple of your images (smaller) so you need the 4 I have attached. I've gotta go see my daughter for the weekend so will be back about 9:00 pm GMT (UK time). I'll leave you to enjoy your weekend!

    New html:

    Carfaro, Inc Logo

    The Standard in Railing and Fencing

    call toll free 1-800-123-4567

    Notice the lack of divs around the h's, and that the text is still there. Text readers can still read it even though an image shows to all us lesser mortals. The text size and line height in these is to keep IE happy. If you wonder what position:relative does, just try taking it off the h's. They disappear under the header-top! When a div is empty I put a comment in to keep those browsers that ignore empty divs happy.

    the new css:

    #header-top{ position:relative; background:#FFFFFF url(images/headerBGTop-new.gif) repeat-x; height:79px; overflow:hidden; } h1{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-43px 0px 0px 10px; height: 43px; width: 200px; background: url(images/flatLogoSM.jpg) no-repeat; } h2#headerLogoTagLine{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-13px 0px 0px 242px; height: 12px; width: 201px; background: url(images/standard.gif) no-repeat; } h2#headerPhone{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-12px 0px 0px 0px; height: 12px; width: 100%; background: url(images/phone.gif) right no-repeat; } #header-bottom{ position:relative; background:#FFFFFF url(images/headerBGBottom-new.gif) repeat-x; height:7px; overflow:hidden; }

    Note that header has been replaced by header-top. If you want some white space under the header bottom, increase the header-bottom height by the amount you want!

    Must go. See you on Sunday!

    CT

    AttachmentSize
    standard.gif 2.02 KB
    phone.gif 1.61 KB
    headerBGBottom-new.gif 117 bytes
    headerBGTop-new.gif 773 bytes
    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    (I hear you going away for

    (I hear you going away for the weekend, have a great time. going to comment now while it's fresh in my brain)

    what I was looking for was to put the headerbottom pic at the bottom of the footer, but it looks cool there:)

    If I wanted to add a div for a menu section, I could just put it right after header bottom div, right? How do I put in a multilevel menu that doesn't make my div jump everytime I mouse over a dropdown? That's all about z-indexes, right?

    thanks for your help man, I am so thankful. You're no longer ClevaTreva, you're Magical Trevor (http://www.weebls-stuff.com/toons/magical+trevor/) except instead of disappearing the cow, you're appearing the style sheet Smile

    [email protected]
    ps - I'm going to experiment with what you have done with the header to see if I can figure out how to do the footer. On a different page of course:)

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

    Found a wireless point to

    Found a wireless point to broadcast from Smile

    Just cut this div from the top:

    And past it after the footer div!

    The image I made has a bit of white above the dashes, so you could cut it down to just 3px high and make the div the same height, or, if you want to use the div at the top and bottom, why not try this (leaving the original div at the top of course):

    html:

    css:

    #footer-bottom{ position:relative; background:#FFFFFF url(images/headerBGBottom-new.gif) 0 -4px repeat-x; height:3px; overflow:hidden; }

    As to the menu, can you screenshot what you want it to look like with a menu dropped down?

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    What I would really like is

    What I would really like is what they have here:
    http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    It's a bunch of links that when you mouse over them, they dropdown menu's associated with them.
    On the page I have now, I created a menu div, and put in menu item and menu item2 as placeholders. Ideally, I'd like to put the attached gif as the background so it looks like a bar between the header and the content.

    Okay, so it was easier than I thought to put together a screen shot:)
    cssFormat is the screen shot, and the menu.gif is the background I'd like to use for the menu div.

    AttachmentSize
    menu.gif 351 bytes
    cssFormat.jpg 71 KB
    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 50 weeks 4 days ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Before I get back home

    Hi

    Before I get back home tonight, can you take a look at this menu from stu (coz it's one I know quite well), and see if it functions like you want?

    http://cssplay.co.uk/menus/final_drop3.html

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 28 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Sure thing, can I change the

    Sure thing, can I change the colors? If possible, I'd like to have some other indicator than a lighter color to tell people that there's a submenu, like an arrow or a + or something.

    I'd like to put the gif I attached as a background if possible on the top level of the menu.