SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Last Layout Issue, I Think.

    Thanks to Paul O'B earlier, I managed to resolved the menu doing exactly what it is doing now. (Falling to the bottom left.)

    However, last time it was because it was contained outside of the intended container. This time it isn't however, it's firmly inside, so I'm guessing a float issue?

    Also I've managed to sneak in an unwanted gap right below the "Gallery Images" green bar.

    The Page

    The CSS File

    Edit: Just noticed that it's completely goofed up in IE..

    Thanks again for any help/advice offered.

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

    You've added a border to your feature image which adds 2 pixels onto the div making it to wide.

    The other reason the right column isn't floating is because of the way you are managing the columns. If you have effecticvely 2 columns then you are better of keeping the as 2 distinct columns rather thatn trying to float something left and then something right, which won't work if they are different heights as floats won't rise up but will travel horizontally from where they are in the html. Floats must come before static content.

    If I was doing this layout I'd make two column so that you can stack all your stuff in the first column as required and then follow on with the second column (both columns floated).

    Something like this but you may need to tidy it up a bit.

    Code:
    <!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" xml:lang="en">
    <head>
    <title></title>
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <link rel="shortcut icon" type="image/ico" href="http://www.studiox.kxgard3.com/favicon.ico" />
    <link href="/assets/site/studiox2.css" rel="stylesheet" type="text/css" media="screen" />
    <style>
    /* BEGIN GENERIC CLASSES */
    body {
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #000;
    background-color: #1E417A;
    }
    #wrapper {
    width: 760px;
    text-align: left;
    margin: 0 auto 0 auto;
    padding: 0;
    }
    a:link {
    color: #000000;
    text-decoration: underline;
    background-color: transparent;
    }
    a:visited {
    color: #000000;
    text-decoration: underline;
    background-color: transparent;
    }
    a:hover {
    color: red;
    background-color: transparent;
    }
    a:active {
    color: red;
    background-color: transparent;
    }
    form {
    margin: 0px;
    padding: 0px;
    }
    .textbox {
    padding: 1px;
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #1C3B00;
    }
    #template-container {
    width: 592px;
    height: auto;
    float:left;
    padding: 0;
    margin: 0;
    background: #FFBF00 url(http://www.studiox.kxgard3.com/asset...g-template.png) top left repeat-y;
    }
    /* END GENERIC CLASSES */
    /* BEGIN HEADER CLASSES */
    #head-container,
    #footer {
    width: 760px;
    height: 136px;
    vertical-align: top;
    text-align: left;
    background: #5884CC url(http://www.studiox.kxgard3.com/asset.../bg-header.png) top left repeat-x;
    }
    #footer {
    height: 73px;
    border-top: 1px solid #28549C;
    background: #5884CC url(http://www.studiox.kxgard3.com/asset.../bg-footer.png) top left repeat-x;
    }
    #head-container h1 {
    color: #FFFFFF;
    font-size: 16px;
    padding: 10px;
    margin: 0;
    background-color: transparent;
    }
    /* END HEADER CLASSES */
    /* BEGIN SEARCHBAR CLASSES */
    #searchbar,
    .bar {
    width: 760px;
    height: 33px;
    border-top: 1px solid #1C3B00;
    border-bottom: 1px solid #1C3B00;
    background: #C5E39F url(http://www.studiox.kxgard3.com/asset...ite/bg-bar.png) top left repeat-x;
    }
    .bar {
    width: 592px;
    }
    #sbarleft-container,
    #sbarmiddle-container,
    #searchform-container {
    width: 347px;
    float:left;
    background: transparent;
    }
    #sbarmiddle-container {
    width: 255px;
    }
    #searchform-container {
    width: 158px;
    padding-top: 8px;
    }
    p.sbar {
    color: #1C3B00;
    font-weight: bold;
    font-size: 13px;
    padding-left: 10px;
    padding-top: 8px;
    margin: 0;
    background: transparent;
    }
    /* END SEARCHBAR CLASSES */
    /* BEGIN FERATURE & TUTORIAL LIST CLASSES */
    #orangetop-container {
    width: 592px;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: top;
    float: left;
    background: #FFC601 url(http://www.studiox.kxgard3.com/asset...-orangetop.png) no-repeat top left;
    }
    #feature-container {
    width: 325px;
    height: auto;
    padding: 10px;
    float: left;
    background: transparent;
    }
    #feature-container p {
    margin-left: 105px;
    font-size: 10px;
    }
    #feature-image {
    width: 323px;
    height: 183px;
    border: 1px solid #1C3B00;
    background: transparent url(http://www.studiox.kxgard3.com/asset...ture-image.jpg) top left repeat-x;
    }
    #tutlist-container {
    width: 247px;
    float: left;
    background: transparent;
    }
    .tutlist {
    list-style-type: none;
    padding: 10px;
    padding-top: 0px;
    margin: 10px 0 0 0;
    }
    li.icon {
    padding: 3px 0 3px 30px;
    margin: 2px 0;
    font-size: 10px;
    font-weight: bold;
    background: transparent url(http://www.studiox.kxgard3.com/asset.../page-icon.gif) no-repeat 0 50%;
    }
    li.noicon {
    padding: 3px 0 3px 0px;
    margin: 2px 0;
    font-size: 10px;
    }
    /* END FERATURE & TUTORIAL LIST CLASSES */
    .bar-titlebox {
    width: auto;
    }
    .bar-titlebox p {
    color: #1C3B00;
    font-weight: bold;
    font-size: 13px;
    margin: 9px;
    background: transparent;
    }
    #gallery-container {
    width: 592px;
    height: 134px;
    vertical-align: top;
    margin: 0;
    padding: 0;
    background: #FFE499 url(http://www.studiox.kxgard3.com/asset...bg-gallery.png) no-repeat top left;
    }
    #gallery-inner {
    width: auto;
    }
    #gallery-inner p {
    font-size: 11px;
    padding: 10px;
    }
    .textbox-login {
    padding: 1px;
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #28549C;
    }
    #menu-container {
    width: 168px;
    height: 648px;
    float: left;
    vertical-align: top;
    padding: 0px;
    background: #5FB916 url(http://www.studiox.kxgard3.com/asset...te/bg-menu.png) no-repeat top left;
    }
    P.minititle {
    padding: 0px;
    margin: 0 0 5px 0;
    font-weight: bold;
    font-size: 10px;
    }
    p.bright-title {
    color: #FF4E00;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 0px;
    margin: 0px;
    font-weight: bold;
    font-size: 12px;
    background: transparent;
    }
    #announce-container {
    width: 572px;
    height: 122px;
    vertical-align: top;
    padding: 10px;
    background: #FFC601 url(http://www.studiox.kxgard3.com/asset...g-announce.png) no-repeat top left;
    }
    div#loginbox {
    width: 100%;
    height: auto;
    margin: 0 10px 30px 10px;
    }
    div#loginbox p {
    font-size: 10px;
    padding: 0px;
    padding-bottom: 3px;
    margin: 0;
    }
    .boldtext {
    font-weight: bold;
    }
    #navigation-container {
    width: 167px;
    vertical-align: top;
    margin: 0;
    padding: 0px;
    border-top: 1px solid #FFFFFF;
    background: transparent;
    }
    #navigation-container a,
    #navigation-container a:hover {
    height: auto;
    padding: 0px;
    vertical-align: top;
    padding-left: 30px;
    padding-top: 7px;
    padding-bottom: 10px;
    margin: 0;
    display: block;
    color: #1C3B00;
    font-weight: normal;
    border: none;
    border-bottom: 1px solid #FFFFFF;
    text-decoration: none;
    background: #ABE269 url(http://www.studiox.kxgard3.com/asset...enu-static.png) no-repeat top left;
    }
    #navigation-container a:hover {
    text-decoration: none;
    background: #FFEAAA url(http://www.studiox.kxgard3.com/asset...menu-hover.png) no-repeat top left;
    }
    #gallery-inner p {margin-top:0;padding:0}
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <div id="head-container"> 
    	<h1>Invision Skins<br />
    	  Photoshop Tutorials<br />
    	  Web Graphics</h1>
      </div>
      <div id="searchbar"> 
    	<div id="sbarleft-container"> 
    	  <p class="sbar">Featured Skin</p>
    	</div>
    	<div id="sbarmiddle-container"> 
    	  <p class="sbar">Photoshop Tutorials</p>
    	</div>
    	<div id="searchform-container"> 
    	  <form action="search.html" method="post">
    		<input type="text" name="search" value="Search this site..." onfocus="if(this.value=='Search this site...') {this.value=''} ;" class="textbox" style="width: 120px;" />
    		<input type="image" src="http://www.studiox.kxgard3.com/asset...e/go-green.gif" height="18" width="18" style="vertical-align: middle" />
    	  </form>
    	</div>
      </div>
      <div id="template-container"> 
    	<div id="orangetop-container"> 
    	  <div id="feature-container"> 
    		<div id="feature-image"> 
    		  <!--No Content-->
    		</div>
    		<p><span class="boldtext">Beachcomb for Invision Powerboard 2</span></p>
    		<p>Our first free skin for version 2 of IPB makes extensive use of the 
    		  new classes to deliver a sharp and professional skin to grace your forums 
    		  with.</p>
    	  </div>
    	  <div id="tutlist-container"> 
    		<p class="bright-title"> Learn Photoshop </p>
    		<ul class="tutlist">
    		  <li class="icon"> Testing List Item 1 </li>
    		  <li class="noicon"> A short summary of the tutorial description goes 
    			here. A short summary of the tutorials description goes here. </li>
    		  <li class="icon"> Testing List Item 2 </li>
    		  <li class="noicon"> A short summary of the tutorial description goes 
    			here. A short summary of the tutorials description goes here. </li>
    		  <li class="icon"> Testing List Item 3 </li>
    		  <li class="noicon"> A short summary of the tutorial description goes 
    			here. A short summary of the tutorials description goes here. </li>
    		</ul>
    	  </div>
    	</div>
    	<br class="clearer" />
    	<div class="bar"> 
    	  <div class="bar-titlebox"> 
    		<p>Studio-X Gallery Images</p>
    	  </div>
    	</div>
    	<div id="gallery-container"> 
    	  <div id="gallery-inner"> 
    		<p>Images to go in here</p>
    	  </div>
    	</div>
    	<div class="bar"> 
    	  <div class="bar-titlebox"> 
    		<p>Announcements &amp; What's New</p>
    	  </div>
    	</div>
    	<div id="announce-container"> 
    	  <!--No Content-->
    	</div>
    	<br class="clearer" />
      </div>
      <div id="menu-container"> Testing Menu Div </div>
      <br class="clearer" />
      <div id="footer"> Testing Footer Div </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul


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
  •