28173 sujets

CSS et mise en forme, CSS3

Alignement blocs

Bonjour,

J'ai bien recherché dans le forum, et je n'ai pas résolu mon pb.

J'ai une entête #top qui contient 2 blocs #logo et #visuel

Ma tructure de page est la suivante

#page
-> #top
-> #visuel
-> #logo
-> #content
-> #right
-> #left
-> #bottom
-> #copyright

Mon soucis est que je n'arrives pas à aligner sans que cela pose problème au niveau du #content (espace entre blocs indésirable).

Si je positionne ces 2 blocs en float:left et rigth, j'ai un espace au dessus du content.

Si #logo n'est pas flotant, pas de pb sous firefox, mais dans IE, mon bloc est à la ligne ....

Voici l'url http://cfablagnac.gengistech.com/index.php?option=com_frontpage&Itemid=1

a écrit :
Code PHP
<body>
<div id="page">
<div id="top">
<div id="visuel"><img src="templates/mp_edinburgh/images/ban_1.png" alt="Cuisine" width="142" height="116" /><img src="templates/mp_edinburgh/images/ban_2.png" alt="Fleuriste" width="113" height="116" /><img src="templates/mp_edinburgh/images/ban_3.png" alt="Gestion" width="114" height="116" /><img src="templates/mp_edinburgh/images/ban_4.png" alt="Vente" width="115" height="116" /><img src="templates/mp_edinburgh/images/ban_5.png" alt="Restauration" width="114" height="116" /></div>
<div id="logo">&nbsp;</div>
</div>
<div style="clear:both;"></div>
<div id="content">
<div id="right">
<?php include ("mainbody.php"); ?>
</div>
<div id="left">
<?php mosLoadModules ( 'left' ); ?>
</div>
</div>
<div id="bottom">&nbsp;</div>
<div id="copyright">
<a href="index.php" title="©&nbsp;<?=$mosConfig_sitename?> 2006 all rights reserved">©&nbsp;<?=$mosConfig_sitename?> 2006 all rights reserved</a>
</div>
</div>
</body>


[code]
#page {
width: 869px;
background-image: url(../images/bck.png);
background-repeat: repeat-y;
height: 100% !important;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
margin-bottom : 0px;
padding-left: 48px;
padding-right: 47px;
}

#top {
height: 116px;
width : 774px;
background-image : url(../images/top.gif);
background-repeat: no-repeat;
background-position: top;
padding-top: 10px;
}

#logo {
width: 174px;
height: 116px;
float: left;
/*background-image: url(../images/logo_cfa.gif);
background-repeat: no-repeat;*/
background-color: #FFF;
margin:0px;
}

#visuel {
float : right;
width : 600px;
background-color: #FFF;
}

#content {
width : 774px;
background-color: #FFF;
height: 200px;
overflow: auto;
text-align: justify;
}

#left {
width : 187px;
}

#right{
float : right;
width : 577px;
padding-top: 10px;
padding-left: 5px;
}

#bottom {
height : 10px;
background-image : url(../images/bottom.gif);
background-repeat : no-repeat;
}

#copyright {
margin-top: 10px;
width: 774px;
background-image: url(../images/copy.gif);
background-repeat:no-repeat;
height: 25px;
padding-top: 5px;
}

A l"aide !!!!
Sujet clos
Aller à