SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Major css div help needed!

    I need some help with my divs. I need a better way to code this div:

    http://www.neowizard.dynu.com/xhtml.php

    So that i could:

    1. have the menu links aligned right, while the displayed time aligned left, and without an extra br being added.

    2. Make both divs (the white and the blue) align porportionally as the window is resized.

    3. If you resize the window until the scrollers appear you will notice that the top div becomes larger than the bottom div

    4. If you resize the window until the links don't fint on the window, then they will automatically drop to the next line (in IE).

    5. Load this page in Netscape and see what you get when you resize , hehehee, I'm not even talking about the versions lower than 7.0


    Could anyone please help? I'm on the verge of returning to tables. All this positioning is messing me up and confusing me! At least a fix to ONE of those would be great. And hopefully, someone can point out a better way to code my divs (my mistakes)
    Content Writing Service - Get custom SEO articles for 10$

  2. #2
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I fixed number 2 and 3!
    Content Writing Service - Get custom SEO articles for 10$

  3. #3
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First an admission of guilt: I've only tested this in IE5.5 NN 6.2.1 & Opera 6. I'm wondering how newer browsers will behave.

    Here's how I'd do it (I left out the <a> styles to simplify things):
    Code:
    <html>
    <head>
    <title>Untitled</title>
    <style>
    
    body
    	{
    	background-color : #fc0;
    	margin-bottom : 0;
    	margin-left : 10px;
    	margin-right : 10px;
    	margin-top : 10px;
    	}
    #headerBottom
    	{
    	background : #9cf;
    	border-bottom : 2px solid #000;
    	border-left : 2px solid #000;
    	border-right : 2px solid #000;
    	font-size : 11px;
    	height : 15px;
    	padding-bottom : 0;
    	padding-left : 7px;
    	padding-right : 7px;
    	padding-top : 0;
    	}
    #headerTop
    	{
    	background-color : #fff;
    	border : 2px solid #000;
    	height : 60px;
    	}
    #logoLeft
    	{
    	border : 0;
    	display : block;
    	float : left;
    	}
    #logoRight
    	{
    	border : 0;
    	display : block;
    	float:right;
    	}
    .floatLeft
    	{
    	float : left;
    	}
    .floatRight
    	{
    	float : right;
    	}
    
    </style>
    
    </head>
    
    <body>
    
    <div id="headerTop">
    	<a href="http://www.neowizard.dynu.com/index.php"><img  id="logoLeft" src="logo.gif" alt="The Neo Wizard Magazine" name="logoLeft" /></a>
    	<a href="http://www.neowizard.dynu.com/login/"><img  id="logoRight" src="login.gif" alt="" name="logoRight" /></a>
    </div>
    <div id="headerBottom">
    	<div class="floatLeft">Neopian Time: 9:41 PM</div>
    	<div class="floatRight">
    	 : <a class=top href="http://www.neowizard.dynu.com/articles/">Articles</a>
    	 : <a class=top href="http://www.neowizard.dynu.com/contests/">Contests</a>
    	 : <a class=top href="http://www.neowizard.dynu.com/guides/">Guides</a>
    	 : <a class=top href="http://www.neowizard.dynu.com/archives/">Past Issues</a>
    	 : <a class=top href="http://www.neowizard.dynu.com/reviews/">Reviews</a>
    	 : <a class=top href="http://www.neowizard.dynu.com/stories/">Stories</a>
    	 : <a class=top href="http://www.neowizard.dynu.com/tutorials/">Tutorials</a>
    	 :
    	</div> 
    </div>
    
    </body>
    </html>
    Its not pixel perfect cross-browser, but close.

    It'll blow up big time at lower resolutions but looks OK down to 640,480. Another option might be using absolute positioning instead of floats, but I suspect getting it right cross-browser would be tough.

    HTH


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
  •