SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page layout totally screwed up

    hello again everyone!

    i had changed my layout width to 770px, but this screwed up my layout. Please CSS gurus tell me what i'm doing wrong here, because I don't get it anymore...I'm totally stuck. In IE7 there's all fine. Submenu with red background and columns in content area are ok too. But in other browser all different.

    Web page address: http://www.whazzup.ee/map/

    HTML:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WHAZZUP.EE - seltskondliku melu allikas</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="styles/main.css" media="all" />
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div id="logo">
       	  <a href="http://www.whazzup.ee"><img src="gfx/whazzup_logo.gif" width="200" height="90" alt="Whazzup.ee" /></a>
        </div>
        <div id="ads">
          <img src="gfx/banner1.gif" width="468" height="60" alt="reklaam" />
        </div>
      </div>
      <div id="navigation">
        <div id="tabs">
        	<ul>
    <li id="active"><a href="/w/index.php" title="Avaleht"><span>Avaleht</span></a></li>
    <li><a href="/w/events/index.php" title="&Uuml;ritused"><span>&Uuml;ritused</span></a></li>
    <li><a href="/w/catalog/index.php" title="&Uuml;rituste korraldamine"><span>&Uuml;rituste korraldamine</span></a></li>
    <li><a href="/w/search/index.php" title="Otsing"><span>Otsing</span></a></li>
    <li><a href="/w/my/index.php" title="Minu Whazzup"><span>Minu Whazzup</span></a></li>
    </ul>
        </div>
        <div id="submenu">
        	<ul>
    <li title="Uudised"><a href=""><span>Uudised</span></a></li>
    <li title="Reklaam"><a href=""><span>Reklaam</span></a></li>
    <li title="Portaalist"><a href=""><span>Portaalist</span></a></li>
    <li title="Registreeru kasutajaks"><a href="/whazzup/register.php"><span>Registreeru kasutajaks</span></a></li>
    </ul>
        </div>
      </div>
      <div id="content">
        <div id="left">
            see on vasak
        </div>
        <div id="main">
          Siin on peaaken
        </div>
        <div id="right">
          Siin on parem
        </div>
      </div>
      <div id="footer">
        Siia tuleb footer.
      </div>
    </div>
    </body>
    </html>

    And CSS:

    Code CSS:
    /*---------- SKELETON ----------*/
    * {
    	margin: 0;
    	padding: 0;
    }
     
    html, body {
    	background: #FFF;
    	font: 100% Tahoma, Arial, Verdana;
    	text-align: center;
    }
     
    #container {
    	width: 770px;
    	margin: 0 auto;
    }
     
    #content {
    	width: 768px;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    	padding: 10px 0 0 0;
    }
     
    #left {
    	float: left;
    	width: 134px;
    }
     
    #main {
    	float: left;
    	width: 500px;
    }
     
    #right {
    	float: right;
    	width: 134px;
    }
     
    #footer {
    	height: 50px;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    	border-bottom: 1px solid #4C4C4C;
     
    	clear: both;
    }
     
    .clearfloats {
    	clear: both;
    	float: none;
    }
     
    /*---------- HEADER ----------*/
    #header {
    	margin: 0;
    	padding: 0;
    	background: url(../gfx/bg_header.gif) repeat-x;
    	height: 130px;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    }
     
    #logo {
    	float: left;
    	margin-left: 30px;
    	margin-top: 20px;
    }
     
    #header div img {
    	border: none;
    }
     
    #ads {
    	float: right;
    	margin-right: 20px;
    	margin-top: 35px;
    }
     
    /*---------- NAVIGATION (MAIN MENU) ----------*/
    #navigation {
    	background: #EBEBEB;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    	width: 768px;
    }
     
    #tabs {
    	float: left;
    	width: 100%;
    	line-height: normal;
    }
     
    #tabs ul {
    	font-size: 0.75em;
    	font-weight: bold;
    	margin: 0;
    	padding: 10px 0 0 150px;
    	list-style: none;
    }
     
    #tabs li {
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
     
    #tabs a {
    	float: left;
    	background: url("../gfx/tab_left.gif") no-repeat left top;
    	margin: 0;
    	padding: 0 0 0 4px;
    	text-decoration: none;
    }
     
    #tabs a span {
    	float: left;
    	display: block;
    	background: url("../gfx/tab_right.gif") no-repeat right top;
    	padding: 5px 15px 4px 6px;
    	color: #000;
    }
     
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span { float: none; }
     
    /* End IE5-Mac hack */
    #tabs a:hover span { color: #FFF; }
     
    #tabs a:hover {
    	background-position: 0% -42px;
    }
     
    #tabs a:hover span {
    	background-position: 100% -42px;
    }
     
    #tabs #active a {
    	background-position: 0% -42px;
    }
     
    #tabs #active a span {
    	background-position: 100% -42px;
    	color: #FFF;
    }
     
    /*---------- NAVIGATION (SUBMENU) ---------- */
    #submenu {
    	width: 100%;
    	background: #8C0101;
    	line-height: 25px;
     
    	clear: both;
    }
     
    #submenu ul {
    	margin: 0;
    	list-style: none;
    	margin: 0 0 0 20px;
    }
     
    #submenu li {
    	display: inline;
    }
     
    #submenu a {
    	font-size: 0.7em;
    	float: left;
        margin: 0;
        padding: 0 5px;
        text-decoration: none;
    	text-transform: uppercase;
    }
     
    #submenu a span {
    	float: left;
        display: block;
        color: #EBEBEB;
    }
     
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #submenu a span {
    	float: none;
    }
     
    /* End IE5-Mac hack */
    #submenu a:hover span {
    	color: #000;
    }
     
    #submenu a:hover {
    	background: url(../gfx/submenu_nav_bg_hover.gif) repeat-x top left;
    }
     
    #submenu a:hover span {
    	background: url(../gfx/submenu_nav_bg_hover.gif) repeat-x top left;
    }

  2. #2
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please someone?

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I had a little play with this. Main problem is float clearing, but there is a little bloat coming into play as well. In a lot of cases, enclosing an element within a div is not necessary, especially in the case of your menu <ul>s. The spans in your submenu also are not necessary. The change I made to the menu area of your html is:
    Code:
      <div id="navigation">
    	<ul id="tabs">
    	  <li id="active"><a href="/map/index.php" title="Avaleht"><span>Avaleht</span></a></li>
    	  <li><a href="/map/events/index.php" title="&Uuml;ritused"><span>&Uuml;ritused</span></a></li>
    	  <li><a href="/map/catalog/index.php" title="&Uuml;rituste korraldamine"><span>&Uuml;rituste korraldamine</span></a></li>
    	  <li><a href="/map/search/index.php" title="Otsing"><span>Otsing</span></a></li>
    	  <li><a href="/map/my/index.php" title="Minu Whazzup"><span>Minu Whazzup</span></a></li>
    	</ul>
    	<ul id="submenu">
    	  <li><a href="" title="Uudised">Uudised</a></li>
    	  <li><a href="" title="Reklaam">Reklaam</a></li>
    	  <li><a href="" title="Portaalist">Portaalist</a></li>
    	  <li><a href="/whazzup/register.php" title="Registreeru kasutajaks">Registreeru kasutajaks</a></li>
    	</ul>
      </div>
    The changed css is :
    Code:
    #tabs {
    	font-size: 0.75em;
    	font-weight: bold;
    	margin: 0;
    	padding: 10px 0 0 150px;
    	list-style: none;
    	overflow: hidden;
    }
    
    #submenu {
    	background: #8C0101;
    	line-height: 25px;
    	list-style: none;
    	overflow: hidden;
    	padding: 0 0 0 20px;
    }
    
    #submenu a {
    	font-size: 0.7em;
    	float: left;
    	margin: 0;
    	padding: 0 5px;
    	text-decoration: none;
    	text-transform: uppercase;
    	color: #EBEBEB;
    }
    
    * html #tabs, * html #submenu, * html #content {
    	height: 1%;
    }
    
    #submenu a:hover {
    	background: url(../gfx/submenu_nav_bg_hover.gif) repeat-x top left;
    	color: #000;
    }
    The overflows clear the floated elements, while the * html part applies HasLayout for IE6. There is also an issue with the margins on the floated elements in the header being doubled in IE6 due to an IE6 bug, which can be solved with inline display. The content div also needs to have the floats cleared in FF. Additional css mods are :
    Code:
    #content {
    	width: 768px;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    	padding: 10px 0 0 0;
    	overflow: hidden;
    }
    
    #logo {
    	float: left;
    	margin-left: 30px;
    	margin-top: 20px;
    	display: inline;
    }
    
    #ads {
    	float: right;
    	margin-right: 20px;
    	margin-top: 35px;
    	display: inline;
    }

  4. #4
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is awesome. Your CSS skills are excellent. Thank you.

  5. #5
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aargh, still problems in ie5 and ie6. In IE5 on tab is higher than others and there's a big gap between tabs and submenu. In IE6 tabs and submenu background is pushed to the right.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The IE6 problem is due to the 100% width - remove it (highlighted red) :
    Code:
    #tabs {
    	font-size: 0.75em;
    	font-weight: bold;
    	margin: 0;
    	padding: 10px 0 0 150px;
    	list-style: none;
    	overflow: hidden;
    	width: 100%;
    }
    Why are you trying to get things to work in IE5 ? it is generally accepted now that this browser is obsolete....

  7. #7
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i removed width: 100% from tabs. But now is the same problem in IE7 that was earlier in IE5. Last tab is higher than others and there's a big gap between tabs and submenu.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, my fault - I forgot to post the modified css for the span which overcomes that problem.
    Code:
    #tabs a span {
    	float: left;
    	display: block;
    	background: url("../gfx/tab_right.gif") no-repeat right top;
    	padding: 5px 15px 4px 6px;
    	color: #000;
    	white-space: nowrap;
    }

  9. #9
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're the man Centaur. Were I can learn CSS like you?

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by evilone View Post
    Were I can learn CSS like you?
    Hanging around forums like this one, and practice, practice, practice.


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
  •