Blocs qui débordent, pas à leur place

biomax · 18 Août 2006

Jemepermets deposter car j'ai un problème dans la mise en page de mes blocs sur la nouvelle version de mon site.

Voilà ce que je souhaite obtenir (avec les noms des blocs indiqués) :

Et voilà ce que j'ai pour le moment (grrr) :

Alors j'ai beau me renseigner, fouiner partout sur le forum et le web, je ne comprends pas (et pourtant je suis sûr que la réponse est simple...).

J'ai deux problèmes :

1 - je n'arrive pas à mettre côte à côte les blocs "contenu" et "menudroite"

2 - le blocs "menudroite", que je positionne grâce à "float:right;" déborde du bloc "container"

Pour le premier problème, je n'arrive à rien :shutup: . Au secours !

Pour le 2e problème, j'ai trouvé une solution qui me semble tirée par les cheveux, c'est de rajouter en dessous un bloc footer, même vide, mais qui contient la ligne "#footer {clear:right;}

Bon cela marche, mais il est sans doute possible d'avoir le même résultat par un moyen non détourné, non ?

- MON CODE PARTIE CSS

<style type="text/css">
<!--
body {
	margin: 0;/* sans marges, la page sera collée aux bords */
	color: #000;
	background-color: #DEDEDE;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 100%;
}

/* >>>>>>>>> Blocs de la page */
#container {
	text-align: left;
	width: 90%;
	margin: 10px auto 10px auto;
	position: relative;
	background: #fff;
	border: 1px solid #CFCFCF;
	padding: 10px;
}

#header1 {
	background-color: red;
	margin-bottom: 10px;
}

#menu {
	background-color: yellow;
	width:100%;
	margin-bottom: 10px;
}


#contenu {
	overflow:auto;
	margin-right:300px;
	width:100%;
	background-color:blue;

}

#menudroite {
	float: right; 
	width: 270px;
	background-color:green;
}

#footer {
	clear:right;
}
-->
</style>

- MON CODE PARTIE HTML (en ne gardant que l'essentiel) :

<body>
<div id="container">

	<div id="header"> </div>

	<div id="menu"></div>

		<div id="contenu">bla bla</div>

		<div id="menudroite"></div>

		<div id="footer1"> </div>

</div>
</body>

Voilà si vous pouvez m'aider, ça serait vraiment top

Raphael · 18 Août 2006

Hello,

Voilà l'un des plus grands classiques des positionnements flottants :

http://forum.alsacreations.com/faq/#item6

Bonne chance

Oups, en fait, je n'ai répondu qu'à la seconde question.

Pour la première, c'est également le comportement normal des flottants :

Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux

* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.

* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

Revoir les méthodes de positionnement flottants :

http://css.alsacreations.com/Bases-et-indi...-balises-en-CSS

Compte supprimé · 18 Août 2006

et pour t'aider un peu plus,

<body>
<div id="container">

   <div id="header"> </div>

   <div id="menu"></div>

   <div id="menudroite"></div>

   <div id="contenu">bla bla

   <hr style="visibility:hidden;clear:both;" />

   </div>





		<div id="footer1"> </div>

</div>
</body>

ça devrait résoudre tes 2 problèmes :

1/ le menut flottant menudroite est placé AVANT le contenu

2/ le hr, comme indiqué par Sibelius, permet simplement de régler ton deuxième point, c'est à dire que ton menu flottant sont entièrement "pris" dans le contenu, même si ce dernier est court (le clear:both signifie "d'effacer" tous les floats)

voilà

biomax · 18 Août 2006

Merci beaucoup pour vos réponses je progresse, en tout cas tout en place.

Mais je viens de m'apercevoir que sous InternetExplorer c'estun peu la fête, les blocsne sont plus correctement placé... :?:

Alors que sous firefox tout est ok.

Auriez-vous un lien qui explique les différences entre les deux navigateurs et les moyens de résoudre ce nouveau problème ??

Merci !

Compte supprimé · 18 Août 2006

le mieux est de nous donner une adresse de page pour pouvoir visualiser le pb

ghost · 18 Août 2006

Bonjour,

Pour faire simple et polyvalent en fonction de ton croquis


 <style type="text/css">
body {
	margin: 0;/* sans marges, la page sera collée aux bords */
	color: #000;
	background-color: #DEDEDE;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 100%;
}

/* >>>>>>>>> Blocs de la page */
#container {
	width: 90%;
	margin: 10px auto 10px auto;
	background: #fff;
	border: 1px solid #3c3c3c;
	padding: 10px;
}

#header1 {
	background-color: red;
	margin-bottom: 10px;
	width:100%;
	height: 50px;
}

#menu {
	background-color: yellow;
	width:100%;
	height: 50px;
	margin-bottom: 10px;
}


#contenu {
	float: left;
	width:80%;
	background-color:blue;

}

#menudroite {
	float: left;
	width: 20%;
	background-color:green;
}

#footer1 {
	clear:both;
	width: 100%;
	text-align: center;
	background-color:#55fffc;
}

</style>
 </head>
<body>
<div id="container">

	<div id="header1"> </div>

	<div id="menu"></div>

		<div id="contenu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer quis diam. Morbi non nulla ut dolor pretium hendrerit. Donec lacus quam, volutpat in, pretium non, pulvinar vel, tellus. Nam sed mauris congue est nonummy pellentesque. Vestibulum adipiscing. Nunc augue orci, sodales eget, mattis sit amet, ornare ut, nunc. Ut pellentesque nulla vel eros. Pellentesque erat ligula, elementum fringilla, laoreet quis, tempus et, leo. Vivamus a ligula sit amet urna porta scelerisque. Maecenas lacus tellus, imperdiet vel, consequat in, gravida non, mi. Integer luctus congue orci. Suspendisse molestie elementum leo
</p>
<p>Duis dictum. Etiam magna enim, aliquam sed, consequat sed, tincidunt sed, augue. Integer at tortor. Aliquam consectetuer odio vel velit. Proin non nisl eget odio vulputate volutpat. Suspendisse fringilla gravida lectus. Pellentesque elementum sapien vitae ipsum. Quisque quam odio, consectetuer at, aliquet a, ornare nec, nisl. Vestibulum consequat cursus nisi. Mauris id nibh quis ante interdum tincidunt. Duis consequat, est sed rhoncus vulputate, neque lacus aliquet dolor, eu porttitor dui tortor at ligula. Donec elit velit, aliquet in, accumsan eu, fringilla a, diam. Etiam nec nisi ut nisl venenatis accumsan. In rhoncus. In sed nibh at velit pharetra aliquam. Suspendisse potenti. Donec enim nunc, semper in, euismod quis, condimentum non, augue. Pellentesque dignissim, tellus nec interdum iaculis, pede est scelerisque mi, non aliquam felis nulla viverra sem. Ut sollicitudin, augue vitae lacinia tempus, lectus dolor egestas ipsum, in fermentum massa massa et metus
</p>
</div>

		<div id="menudroite">
<ul>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>

</ul>
</div>

		<div id="footer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer quis diam.
 </div>

</div>
</body>

Pour revoir tout ça, un bon site www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html

Bon courage

Connexion

Blocs qui débordent, pas à leur place

Sujets conseillés

biomax

Lien vers le commentaire

Partager sur d’autres sites

Raphael

Lien vers le commentaire

Partager sur d’autres sites

Compte supprimé

Lien vers le commentaire

Partager sur d’autres sites

biomax

Lien vers le commentaire

Partager sur d’autres sites

Compte supprimé

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité