Layout problems...

**drcolt45** · 12-02-2013, 08:53 PM

Click image for larger version.

Name: layout_new.jpg
Views: 297
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 !!!

**Deadweight** · 12-06-2013, 11:59 AM

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>

Thread: Layout problems...

Thread Tools

Search Thread

Layout problems...

Similar Threads

css layout problems in IE...again!

Layout problems

Resolved 3 Column Layout problems

Resolved help with layout problems

Layout Problems...

Bookmarks

Bookmarks

Posting Permissions