SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2003
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Going tableless -- need to combine 2 DIV IDs

    I'm creating a tableless website formated solely through CSS.

    At the moment, I have this in the HTML page:
    Code:
    <div id="nav1">
    <div id="nav2">
    Text <br>
    Text <br>
    Text <br>
    Text <br>
    </div>
    </div>
    And this is the CSS file:
    Code:
    #nav1{
    	position: absolute;
    	top: 69px;
    	left: 8px;
    	background: #DFE8EC;
    	width: 145px;
    	height: 213px;
    	color: #42A2B3;
    	font-size: 10px;
    	line-height: 18px;
    
    	/* ie5win fudge begins */
    	}
    html>body #nav1 {
    	width: 143px;
    
    	/* ie5win fudge ends */
    	}
    }
    
    #nav2{
    	margin-left: 2px;
    	padding-left: 2px;
    	padding-top: 4px;
    	}
    	
    html>body #nav2 {
    	margin-left: 2px;
    	padding-left: 2px;
    	padding-top: 4px;
    	}
    }
    This works but I would like to combine #nav1 and #nav2 and make the layout work in both Netscape 6/7 and IE 5.5+. The only reason I had to create #nav2 is for Netscape -- without it, I wouldn't have a margin of space around the text. You can see this online here-- it's the navigation area inside the blue box in the right side.

  2. #2
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb dont nest it

    Hi,

    this way -nesting the divs- would make #nav2 a child of #nav1, and inherit all properties of #nav1 too. But with the absolute positioning of nav1, you put it out of the flow, and then you got trouble, that is if you dont know what you are doing.

    I'm not sure what you want to achieve (image?) with the navigation (1 or 2) so for now.. this is all I say

    ..
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  3. #3
    SitePoint Zealot
    Join Date
    Jan 2003
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id="nav1"> creates the blue box with a certain width and height and placed in a specific XY location.

    <div id="nav2"> was created to put a margin around the text since I don't want the text to touch the edge of the blue box.

    Right now I have to have <div id="nav2"> nested inside <div id="nav1"> to make the layout work -- and it does, at least on IE6 and Netscape 7 on Windows -- but without the nesting, I seem to not able to create a nice margin around the text in both browsers...so that's why I posted this here... to see if anybody know how to do what I did without any nesting.

  4. #4
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of id, use class=""

    and instead of a # before the part in the css, use a .

    e.g.

    #nav1 to .nav1

    lastly, you might want to change the name of nav2 to something different. WOreks perfectly for me when I follow these tips. Main problem is id instead of class. Change that.
    Content Writing Service - Get custom SEO articles for 10$

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm probably out of my depth here, but here goes anyway.

    Do you need the second #nav2 at all? I thought the box model hack was to allow for the width and padding to work in IE5. But in your #nav1 style you specify 145 width (which IE5) will use and then you specify 143 in html>body #nav1 which is usually used after the hack. But you seemed to have missed out the parsing bug that sets it all up.

    I thought something like this would give you the desired result.

    Code:
    <style type="text/css" media="screen">
    <!--
    #nav1{
    	position: absolute;
    	top: 69px;
    	left: 8px;
    	background: #DFE8EC;
    	width: 145px;
    	height: 213px;
    	color: #42A2B3;
    	font-size: 10px;
    	line-height: 18px;
    	margin-left: 2px;
    	padding-left: 2px;
    	padding-top: 4px;
    	voice-family: "\"}\""; /* ie5win fudge begins */
      	voice-family:inherit;
    	width:143
    }
    html>body #nav1 {
    	width: 143px;/* ie5win fudge ends */	
    }
    -->
    </style>
    So IE5 gets 143width +2padding = 145 & others get 145 width-2 padding.

    Anyway I've probably got the wrong end of the stick so just ignore this if you know this already.

    Paul:
    Last edited by Paul O'B; Jan 22, 2003 at 17:44.


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
  •