Advanced Search

Results 1 to 2 of 2

Thread: Layout problems...

  1. #1
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Post Layout problems...

    Click image for larger version. 

Name:	layout_new.jpg 
Views:	180 
Size:	49.9 KB 
ID:	5287

    I'm starting a fictive site to practice what I have read and learn on Internet lately. Gosh ! Still have problem. Here is what I want ( see my attached-image ) and my codes. Could you tell me where I go wrong ? Or... what would you setup this layout. I read a lot regarding the position (relative, fixed etc...) but I think I still have some issues with that.

    *** CODE ************************************************

    Code:
    <body>
    
    <div id="container">
    
    <div id="topbar">
    <img src="images/logo2.png" align="left" style="margin-top:0px; margin-left:0px;"/>
    
    <ul class="menu">
    
    		<li><a href="http://www.club.com/accueil.html" title="Accueil">Accueil</a></li>
    		<li><a href="http://www.club.com/services.html" title="Services offerts">Services</a></li>
                          <li><a href="http://www.club.com/espaces.html" title="Espaces disponibles">Nos espaces</a></li>
                          <li><a href="http://www.club.com/securite.html" title="La sécurité de nos entrepôts">Coté Sécurité</a></li>
    		<li><a href="http://www.club.com/contact.html" title="Nos coordonnées">Contact</a>
    
    		</li>
    
    </ul>
    
    </div>
     
    <div id="main"> 
    
    <div id="column_left">
    
    <div id="map_canvas">
    </div>
    
    </div>
    
    <div id="column_right">
    ...column right content... 
    </div>
    
    <div class="spacer">
    </div>
    
    </div>
    </div>
    
    </body>
    </html>

    *** CSS *****************************************************

    Code:
    #container{
    	width:980px; 
    	margin:0 auto;
    	}
    	
    #topbar{
    	margin-top:5px;
    	float:left;
    	height:165px;
    	width:auto;
    	} 
    	
    #navbar{
    	width:auto; 
    	display:block; 
    	height:24px;
    	} 
    	
    #main{
    	width:auto; 
    	display:block;
    	} 
    	
    #column_left{
    	width:500px; 
    	margin-right:20px; 
    	float:left;
    	} 
    	
    #column_right{
    	width:200px;
    	float:left;
    	}
    	
    div.spacer{
    	clear:both; 
    	height:10px; 
    	display:block;
    	} 
    	
    .menu,
    
    .menu ul,
    
    .menu li,
    
    .menu a {
    	margin: 0; 
    	padding: 0; 
    	border: none; 
    	outline: none; 
    }
    
    .menu {
    	height: 40px;
    	width: 460px;
    	background: #4c4e5a;
    	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	margin-left:340px;
    	margin-top:0;
    
    } 
    
    .menu li { 
    
    position: relative; 
    list-style: none; 
    float: left; 
    display: block; 
    height: 40px; 
    }
    
    .menu li a {
    	
    	display: block;
    	padding: 0 14px;
    	margin: 6px 0;
    	line-height: 28px;
    	text-decoration: none;
    	
    	border-left: 1px solid #393942;
    	border-right: 1px solid #4f5058;
    	
    	font-family: Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	font-size: 13px;
    	
    	color: #f3f3f3;
    	text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    	
    	-webkit-transition: color .2s ease-in-out;
    	-moz-transition: color .2s ease-in-out;
    	-o-transition: color .2s ease-in-out;
    	-ms-transition: color .2s ease-in-out;
    	transition: color .2s ease-in-out;
    }
    
    .menu li:first-child a { border-left: none; }
    .menu li:last-child a{ border-right: none; }
    
    .menu li:hover > a { color: #ffb400; }
    
    img.superbg {
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
    }
    
    function redimensionnement(){ 
     
        var $image = $('img.superbg');
        var image_width = $image.width(); 
        var image_height = $image.height();     
         
        var over = image_width / image_height; 
        var under = image_height / image_width; 
         
        var body_width = $(window).width(); 
        var body_height = $(window).height(); 
         
        if (body_width / body_height >= over) { 
          $image.css({ 
            'width': body_width + 'px', 
            'height': Math.ceil(under * body_width) + 'px', 
            'left': '0px', 
            'top': Math.abs((under * body_width) - body_height) / -2 + 'px' 
          }); 
        }  
         
        else { 
          $image.css({ 
            'width': Math.ceil(over * body_height) + 'px', 
            'height': body_height + 'px', 
            'top': '0px', 
            'left': Math.abs((over * body_height) - body_width) / -2 + 'px' 
          }); 
        } 
    } 
          
    $(document).ready(function(){
    
        // Au chargement initial   
        redimensionnement();
         
        // En cas de redimensionnement de la fenêtre
        $(window).resize(function(){ 
            redimensionnement(); 
        }); 
     
    });
    #container {
    }
    
    #topbar {
    }
    
    #main {
    }
    #column_left {
    }
    #column_right {
    }
    Thank you !!!
    Last edited by keyboard; 12-03-2013 at 01:06 AM. Reason: Format: Code Tags [code][/code]

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    270
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    Here is the layout i think you want. OFC you may change the size of everything. Im not entirely sure if you want the spaces that are displayed in the picture so in the top_bar there are spaces in the main there are no spaces.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    * {padding:0; margin:0 auto;}
    #container {margin-top:5px;border:1px solid black; width:90%;}
    li {list-style: none;}
    #top_bar li {float:left;padding:1px;width:49%;}
    
    #logo {width:162px;height:162px;border:1px solid black;}
    .menu {width:162px;height:62px;border:1px solid black;}
    
    #main {width:100%;border-top:1px solid black;}
    #main li {width:49%;float:left;}
    #main li:first-child {border-right:1px solid black;}
    .expander {clear:both;}
    </style>
    
    
    </head>
    <body>
    <div id="container">
        <div>
        <ul id="top_bar">
            <li>
                <div id="logo">Logo</div>
            </li>
                
            <li>
                <div class="menu">Menu</div>
            </li>
        </ul>
        <div class="expander"></div>
        </div>
        
        
        <div>
        <ul id="main">
            <li>
                left
            </li>
                
            <li>
                right
            </li>
        </ul>
        <div class="expander"></div>
        </div>
    </div>
    </body>
    </html>
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. css layout problems in IE...again!
    By .webdesign in forum CSS
    Replies: 4
    Last Post: 03-14-2010, 08:24 AM
  2. Layout problems
    By sal in forum CSS
    Replies: 9
    Last Post: 01-28-2010, 03:40 PM
  3. Resolved 3 Column Layout problems
    By krisjohnson in forum CSS
    Replies: 4
    Last Post: 12-04-2008, 01:18 PM
  4. Resolved help with layout problems
    By procyon in forum CSS
    Replies: 4
    Last Post: 11-03-2008, 08:31 PM
  5. Layout Problems...
    By TheJoshMan in forum CSS
    Replies: 3
    Last Post: 11-11-2006, 10:09 AM

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
  •