drcolt45
12-02-2013, 08:53 PM
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 ************************************************
<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 *****************************************************
#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 !!!
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 ************************************************
<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 *****************************************************
#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 !!!