SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div left and center

    Hi there,

    I'm trying to find a way to create my site entirely in DIVs but lack some basic knowledge on how they function. I'm slowly learning through tutorials but can't seem to find anything on this...

    I'm creating a header that floats in the center of the page but is made up of three individual DIV items.

    So I'm using float: left; to align the three divs beside each other and setting their height, width as to actually build the header. the middle header div will have navigation links and such.

    I get it constructed properly:

    Code:
    body { margin: 0 auto; text-align: center; }
    
    #h_left   { margin: 0 auto; float: left; width: 23; height: 97; background-image: url(../images/h_left.jpg);  }
    #h_center { margin: 0 auto; float: left; width: 500; height: 97; background-image: url(../images/h_bg.jpg);   }
    #h_logo   { margin: 0 auto; float: left; width: 214; height: 97; background-image: url(../images/h_logo.jpg); }
    Code:
    <html>
      <head>
    	<link href="../css/global.css" rel="stylesheet" type="text/css">
      </head>
      <body>
    	<div id="h_left"></div>
    	<div id="h_center"></div>
    	<div id="h_logo"></div>
      </body>
    </html>
    The problem is I need the header to float in the center. You can see that I've attempted that with a margin 0 auto but to no avail.

    Expert advice is appreciated :-)
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to declare a proper doctype (which get IE behaving more as it should) - add this to the very top of your page - above the <head>:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    And then validate your code:
    HTML - http://validator.w3.org/
    CSS - http://jigsaw.w3.org/css-validator/

    This will help ensure the CSS you write behaves more as you would expect it to.
    Last edited by brandaggio; Oct 2, 2006 at 09:18. Reason: Corrected CSS validator link

  3. #3
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys,

    lol if I knew I was going to get a validation lecture I would have prepared myself - haha. No no I agree it *should* be properly validated.

    Thanks for the excellent advice!

    Dave
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  4. #4
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh erm...so I tried running this code at home and I still can't get it centered. I follow your specifications but the bloody thing just aint working. ARG.
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  5. #5
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure that I understand why you would want to do this, but is this what you were after?

  6. #6
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh, your sample helped. Apparently I didn't have a "screen" div like you had. Works like a charm. Many, many thanks.
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by davedibiase
    Ahhh, your sample helped. Apparently I didn't have a "screen" div like you had. Works like a charm. Many, many thanks.
    Just to explain, not everyone has those divs.

    I use the "screen" div to denote the screen area and a frame div to make a frame or border that I can control (some extra, sometimes necessary hooks) - think of it like a glare screen placed on top of your screen or a frame on a painting.

    You will often see names like "container", "wrapper" etc., they are used as I am using "frame" in my example.

    Glad it helped .

  8. #8
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I noticed that. Works well but one last question. Every item I entered after that is floated left as well. Is there a way I can stop floating afterwards? Maybe set the next object float as nothing or something?
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  9. #9
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by davedibiase
    Yeah I noticed that. Works well but one last question. Every item I entered after that is floated left as well. Is there a way I can stop floating afterwards? Maybe set the next object float as nothing or something?
    It just looks that way - floats are out of the flow. You probably just need to "clear" whatever you are placing next.

  10. #10
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by davedibiase
    I'm trying to find a way to create my site entirely in DIVs
    Don't do it! All DIVS is worse than tables for layout! Put your content in html tags that describe their content. There are plenty of them and you should use them.

    A DIV is basicly for grouping other elements into logical sections for some purpose such as positioning them all together.
    Ed Seedhouse

  11. #11
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by davedibiase
    lol if I knew I was going to get a validation lecture I would have prepared myself - haha. No no I agree it *should* be properly validated.
    No, it must be properly validated. It is not an option if you want to design a good page. CSS is predicated upon valid html or xhtml.

    If your html/xhtml is invalid, you have no right to expect that any given CSS rule will be applied in any particular way. The behaviour of CSS rules applied to invalid html is simply undefined.

    Writing valid html or xhtml is a prerequisite for a designer who wishes to use CSS.
    Ed Seedhouse

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only that, but you should avoid using more code than necessary. If you haven't done so, I strongly suggest you read Designing with Web Standards, 2nd Edition by Jeffery Zeldman.

  13. #13
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What everyone is getting at is that "divitis" is very common when you are learning CSS (and the learning continues of course).

    It is hard at first to get away from the idea of a layout with denoted areas for this and that - that needs to happen but comes later - after you have logically marked up a page with appropriate headers and <p> tags and whatnot.

    Don't build a site's code for the layout - that is what CSS is supposed to be for. The approach you are taking is kind of reversed from what it shoud ideally be (why I said "I am not sure that I understand why you would want to do this").

    That said, you may run into the odd situation you need an extra hook or hack - but this should be on an as needed basis.

  14. #14
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By all DIV I meant where possible. Right now I'm using them as I can and where they don't create a lot of extra code. I think with this header I've saved about 10-15 lines of code with the DIV. I once had someone tell me that using tables isn't very Web 2.0 ish but I soon realized that it's complete BS.

    I do usually focus on the meaning of the code and the validation.

    :-)

    Thanks for all your help guys!
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •