3 colonnes, height 100% et problème float.

Question

Poil2PanPan

2 May 2008 à 22:10

Salut tout le monde, tout nouveau sur le forum. et déjà un problème. Cela fait quelques années que je tripote l'HTML, les CSS, le PhP etc etc, je ne suis pas un pro loin de là. C'est d'ailleurs pour ça que je viens vous demander de l'aide. Passons au problème si vous le voulez bien :

Voici le design définitif de la V3 de mon site :

http://www.bandofbranleurs.com/panpan/upload/1/thumb/thumb_1208713643_NewWebDesignBofBV3.jpg

au passage si vous avez des commentaires sur celui-ci je suis preneur.

Et voilà où j'en suis actuellement dans la mise en page : http://91.121.83.51/ à visionner avec FF ou Opéra, je corrigerais les bugs ie plus tard.

Donc comme vous pouvez le voir ma derniere colonne en marron foncé n'est pas exactement à sa place. Je vous place le code qui va bien en dessous.

HTML :

<div id="Main">
  		<div id="Content">
        <h1>Derni&egrave;re news !</h1>
        <p>Lorem ipsum dolor sit amet consectetuer tempus vel ut urna tincidunt. Pede ut congue consectetuer gravida Nulla habitasse eget cursus tincidunt Vivamus. Felis sed et velit tortor quis tellus Phasellus felis ante eu. In orci Nam tellus at tellus Nam consequat orci ultrices interdum. Sollicitudin convallis Pellentesque nulla pede et semper sodales convallis vitae malesuada. Faucibus enim condimentum ac et.</p>
        <p>Cras sit tellus lobortis nulla hendrerit tincidunt tincidunt pellentesque eget consequat. Habitant justo mattis sagittis id lorem sagittis volutpat nisl quis accumsan. Enim id sem scelerisque Ut purus ac odio semper risus et. Rutrum Sed laoreet nunc Curabitur at convallis leo consequat sollicitudin ut. Est Phasellus vitae sagittis Morbi rhoncus congue Ut rutrum tristique ut. Lacinia mus dictum semper.</p>
        <p>At vel mauris nunc Maecenas Aenean Nunc mollis felis senectus habitant. Ultrices sagittis interdum diam elit ut ut consequat tellus montes nunc. Netus Aenean ridiculus et sed lobortis enim enim Proin non elit. Adipiscing pretium turpis sit sed Phasellus tortor dui id Phasellus hendrerit. Nec Curabitur non augue ut sagittis lobortis ipsum et ut tincidunt. Wisi lacinia sed amet.</p>
        <p>Nibh Sed In faucibus Phasellus habitasse ornare sed et eget sed. Enim condimentum mattis turpis iaculis augue ipsum risus urna lobortis In. Sed id venenatis tincidunt tristique cursus tincidunt aliquam pede tortor tempus. Elit nibh condimentum Donec interdum Cras nec lacus aliquam Nam est. Duis amet vitae tempus quis In urna ante tortor porttitor aliquet. Velit pretium ac nibh mauris.</p>
      </div>
      <div id="MiddleBar">
  		  <div style="background-color: #6E572E; margin: 0; padding: 0; height: 26px; width: 215px;">
    		  <ul>
    		    <li style="border-bottom: 1px solid #664B1E;"><a href="#"><img src="style/imgs/onglettribune.jpg" title="Tribune" /></a></li>
    		    <li><a href="#"><img src="style/imgs/ongletts.jpg" alt="TeamSpeak" /></a></li>
    		    <li><a href="#"><img src="style/imgs/ongletevent.jpg" alt="Evenement" /></a></li>
    		    <li><a href="#"><img src="style/imgs/ongletserv.jpg" alt="Serveurs" /></a></li>
    		    <li><a href="#"><img src="style/imgs/ongletsystem.jpg" alt="Système" /></a></li>
    		  </ul>
  		  </div>
  		  <div id="Tribune" style="padding: 0 5px 0 5px;">
          <p>Lorem ipsum dolor sit amet consectetuer tincidunt sapien et tincidunt et. Pellentesque interdum quis montes Nulla dictumst Pellentesque dignissim congue Lorem egestas. Integer vel at tellus Morbi Phasellus Praesent Vestibulum sed interdum Aenean. Lorem sapien non pede sodales quam Cras porttitor semper dis sapien. Ligula dui orci Aliquam sed dui convallis Vestibulum dolor Suspendisse dis. Vel fringilla Donec sociis lacus laoreet In et Morbi sed tellus. </p>
          <p>Vestibulum quis sed Nam Curabitur leo cursus tellus tincidunt magna massa. Felis morbi metus Cum velit lorem eu hendrerit elit facilisi tortor. Nulla penatibus Donec magna Aliquam pretium eget mauris Lorem magna et. Molestie orci dictumst tincidunt lacinia metus odio nec est Mauris leo. Fringilla pellentesque pulvinar senectus sagittis convallis nibh nibh sed.</p>
        </div>
  		  <div id="TS"></div>
  		  <div id="Event"></div>
  		  <div id="Serv"></div>
  		  <div id="System"></div>
      </div>
      <div id="RightBar">
  		  <div style="background-color: #6E572E; margin: 0; padding: 0; height: 26px; width: 140px;">
    		  <ul>
    		    <li style="border-bottom: 1px solid #513C17;"><a href="#"><img src="style/imgs/ongletpoll.jpg" alt="Sondage" /></a></li>
    		    <li><a href="#"><img src="style/imgs/ongletlink.jpg" alt="Liens" /></a></li>
    		  </ul>
  		  </div>
  		  <div id="poll" style="padding: 0 5px 0 5px;">
    		  <p>Lorem ipsum dolor sit amet consectetuer Lorem id massa Vestibulum venenatis. Aliquet dui vitae volutpat Lorem risus semper cursus malesuada turpis id. Id velit Cras Quisque rhoncus Vestibulum penatibus adipiscing hac ac lacus. Ipsum risus Fusce risus id Mauris porttitor tincidunt Suspendisse nisl habitasse. Semper elit consectetuer lacinia et justo convallis Nam Donec Nullam et. </p>
  		  </div>
  		  <div id="links"></div>
		  </div>
      <div style="clear: both"></div>
    </div>

CSS:

html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0; 
	padding: 0; 
	background-color: #392b22; 
	background-image: url(imgs/background.png);
	background-position: top left; 
	background-repeat: repeat-x; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
h1 {
	margin: 0 0 0 5px;
	padding: 0 0 0 40px;
	color: white;
	font-size: 19px;
	font-weight: normal;
	background-image: url(imgs/logotitle.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}
/**********/
/* Header */
/**********/
div#Header {
	width: 1000px; 
	height: 272px;	
	margin: 0 auto; 
	background-image: url(imgs/logo.jpg);
	background-position: top center; 
	background-repeat: no-repeat;
	text-align: center;
}
p#RightCornerInfos {
	margin: 0;
	text-align: right;
	padding: 35px 110px 0 0;
	font-size: 10px;
	color: #948b79;
}
p#RightCornerInfos a:visited, p#RightCornerInfos a:active, p#RightCornerInfos a:link  {color: #948b79;text-decoration: none;}
p#RightCornerInfos a:hover {color: gray;}
p#Menu {
	color: #948b79;
	font-size: 12px;
	margin: 165px auto 0 auto;
}
p#Menu a:visited, p#Menu a:active, p#Menu a:link {color: white;text-decoration: none;}
p#Menu a:hover {color: #948b79;text-decoration: none;}
div#HeaderSeparation {
	height: 9px;
	width: 802px;
	margin: 0 auto;
	padding: 0;
	background-image: url(imgs/headerseparation.jpg);
	background-position: top center;
	background-repeat: no-repeat;
}
/********/
/* Main */
/********/
div#Main {
	width: 802px;
	margin: 0 auto;
	padding: 0;
	background-image: url(imgs/contentbackground.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	overflow: hidden;
}
div#Content {
	width: 393px;
	margin: 0 0 0 31px;
	background-image: url(imgs/barretitle.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-color: aqua;
	float: left;
}
div#MiddleBar {
	width: 215px;
	background-color: #664b1e;
	margin: 10px 0 -2000px 438px;
	padding: 0 0 2000px 0;
}
div#RightBar {
	width: 140px;
	height: 100%;
	background-color: #513c17;
	margin: 10px 2px -2000px 660px;
	padding: 0 0 2000px 0;
	float: right;
}
div#MiddleBar ul {
	margin: 0;
	padding: 0;
	list-style: none;  
	display: inline;
}
div#MiddleBar ul li {
	width: 38px;
	height:22px;
	margin-right: 2px;
	padding-top: 3px;
	background-image: url(imgs/ongletheader.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	text-align: center;
	background-color: #664b1e;
	float: left;
}
div#MiddleBar ul li a img {
	border: none;
}
div#RightBar ul {
	margin: 0;
	padding: 0;
	list-style: none;  
	display: inline;
}
div#RightBar ul li {
	width: 38px;
	height:22px;
	margin-right: 2px;
	padding-top: 3px;
	background-image: url(imgs/ongletheader2.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	text-align: center;
	background-color: #513c17;
	float: left;
}
div#RightBar ul li a img {
	border: none;
}
/**********/
/* Footer */
/**********/
div#FooterSeparation {
	width: 100%;
	height: 12px;
	margin: 0;
	padding: 0;
	background-image: url(imgs/footerseparation.jpg);
	background-position: top center;
	background-repeat: repeat-x;
}
div#FooterSeparationEffect {
	width: 840px;
	height: 12px;
	margin: 0 auto;
	padding: 0;
	background-image: url(imgs/footerseparationeffect.jpg);
	background-position: top center;
	background-repeat: no-repeat;
}
div#FooterMain {
	width: 802px;
	margin: 0 auto;
	padding: 0 3px 3px 0;
	background-image: url(imgs/contentbackground.jpg);
	background-position: top center;
	background-repeat: repeat-y;
}
div#FooterContent {
	width: 100%;
	margin: 0;
	padding: 13px 0 0 0;
	background-image: url(imgs/signature.jpg);
	background-position: top right;
	background-repeat: no-repeat;
}
ul#LastNewsUl {
	background-image: url(imgs/lastnews.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0 0 0 32px;
	padding: 13px 0 0 0;
	width: 230px;
	color: black;
	list-style: none;
	font-size: 10px;
	float: left;
}
ul#LastWarsUl {
	background-image: url(imgs/lastwars.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0 0 0 280px;
	padding: 13px 0 0 0;
	width: 230px;
	color: black;
	list-style: none;
	font-size: 10px;
}
ul#LastNewsUl li, ul#LastWarsUl li {
	margin: 0;
	padding: 0;
}
ul#LastNewsUl li a:visited, ul#LastNewsUl li a:active, ul#LastNewsUl li a:link,
ul#LastWarsUl li a:visited, ul#LastWarsUl li a:active, ul#LastWarsUl li a:link {
	display: block;
	background-color: #392b22;
	color: #948b79;
	padding: 0 5px 0 5px;
	margin-bottom: 1px;
	text-decoration: none;
	line-height: 28px;
}
ul#LastNewsUl li a:hover,
ul#LastWarsUl li a:hover {
	display: block;
	background-color: #797775;
	color: black;
	text-decoration: none;
}
div#Citation {
	margin: 10px auto 5px auto;
	font-size: 10px;
	text-align: center;
}

A noter que j'ai utilisé un espèce de HACK pour les hauteurs des 2 dernières colonnes.

Je vous joins les fichiers si vous en avez besoin pour m'aider

ICI

D'avance merci !!!
Modifié par Poil2PanPan (02 May 2008 - 22:12)

Heyoan

2 May 2008 à 22:43

Salut Poil2PanPan et bienvenue Smiley cligne

,

sans rentrer trop dans le code je vois que ton div #RightBar en float:right est placé après le #MiddleBar alors que les éléments en float doivent toujours être placés en premier dans leur conteneur.

Un peu de (re)lecture : Comment positionner les éléments en CSS ?

A+ Smiley smile

Sujet clos

CSS et mise en forme, CSS3

3 colonnes, height 100% et problème float.