28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement, float ??

Bonjour,
j'ai un petit soucis avec le positionnement de deux div : "news" et "accueil"

Html

<html>
	<head>
		<title>Riva</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
		<link href="template.css" type="text/css" rel="stylesheet" />

	</head>
	<body>
		<div id="container">
 			<div id="header"></div>
				<div id="menu_top">
					<ul>
						<li><a href="#">Menu1</a></li>
						<li><a href="#">Menu2</a></li>
						<li><a href="#">Menu3</a></li>
					</ul>
				</div>
				
				<div id="content">
					<div id="content_text"></div>
					<br /><br /><br />
					<div id="news">
							<div id="news_text">Phasellus facilisis. Cras tincidunt placerat sapien. Maecenas malesuada ultrices nisi. Fusce mauris odio, egestas in, placerat in, egestas et, lorem. Phasellus ac elit eu est pulvinar molestie. Vivamus tellus neque, aliquet sed, ullamcorper at, convallis sit amet, magna. Pellentesque non diam a felis accumsan dignissim. Pellentesque sapien. Pellentesque metus pede, lacinia quis, viverra eu, pellentesque vel, justo. Mauris justo felis, hendrerit ac, vestibulum vel, imperdiet sed, dolor. Maecenas accumsan, diam eu hendrerit feugiat, libero felis mattis erat, eget feugiat metus magna in risus. Donec viverra, eros non blandit fermentum, nulla lacus
							</div>
					</div>				
					<div id="accueil">
						<div id="accueil_img"></div>
					</div>
				</div>
				<br />
				<div id="footer">Footer</div>
		</div>
	</body>
</html>



CSS :

body {
	background-color:#dcd7b6;
	color: #000000;
	margin: 0;
	padding :0;
	text-align:center;
	font-family:verdana, arial, times new roman;
	font-size:11px;
}

#container { 
	width: 781px;
	height:auto;
	background-color:#af1f24;
	margin: 0 auto;
	text-align:left;
}

#header {
	background:url(img/header.png) no-repeat;
	border:none;
	margin: 0 auto;
	width:781px;
	height:87px;
}

#menu_top {
	background-color:#d7f1fe;
	width:752px;
	height:26px;
	margin-left:10px;
}

#menu_top ul li {
	display:inline;
	margin-left:20px;
}

#content {
	background-color:#ffffff;
	width: 752px;
	margin-left:10px;
	line-height:120%;
}

#accueil {
	background-color:#5fa7d7;
	border-bottom:#ffffff solid 11px;
	height:386px;
}

#news {
	width:185px;
	height:360px;
position:relative;
	top:10px; 
	margin-left:10px;
	overflow:auto;
	float:left;
	background-color:red;
}

#news_text {
	margin-left:5px;
	width:157px;
 	position:relative;
	top:5px; 
}

#accueil_img{
	background-image:url(img/accueil.jpg);
	background-repeat:no-repeat;
	width:549px;
	height:397px;
	margin-left:203px;
}

#footer {
	margin-left:10px;
}


J'essaie de faire en sorte que ce soit comme ceci (la div en rouge):
http://n3w.free.fr/images/1228818881.jpg
mais je n'y arrive pas Smiley rolleyes

Merci d'avance pour votre aide Smiley smile

EDIT: je viens de penser à l'image mise, je m'en rends même plus compte tellement que j'en suis soulé ^^
Si faut l'enlever, n'hésitez pas je referai un screenshot avec un background sans la femme, merci
Modifié par Dr_G (09 Dec 2008 - 20:18)
Bonjour,

Pour ce qui est du rendu obtenu avec ce code, il faut analyser le code mentalement pour l'imaginer ou bien il serait possible de voir une page de test en ligne?
(Petit indice: l'imagination, c'est pas évident; une page en ligne, c'est mieux.)

Mais pour commencer: la page n'a pas de Doctype? Vous me direz trois avé un un pater, ou n'oublierez surtout pas le Doctype de vos pages à l'avenir, mon fils.
Florent V. a écrit :
Bonjour,

Pour ce qui est du rendu obtenu avec ce code, il faut analyser le code mentalement pour l'imaginer ou bien il serait possible de voir une page de test en ligne?
(Petit indice: l'imagination, c'est pas évident; une page en ligne, c'est mieux.)

Mais pour commencer: la page n'a pas de Doctype? Vous me direz trois avé un un pater, ou n'oublierez surtout pas le Doctype de vos pages à l'avenir, mon fils.


La dernière fois, on m'avait demandé le code source mais si tu préfères toi aussi le visuel je te l'ai plaçé ici : http://plop.fr.nf

Merci à toi

PS: Ca change quoi qu'on mette le doctype ou non ? Smiley langue
a écrit :
Ca change quoi qu'on mette le DOCTYPE ou non ?


Problème de rendu (mode de compatibilité ou mode Quirk).
Voir ici
Et voir ici pour les DOCTYPEs

(les deux liens ... entre autres Smiley cligne )
Modifié par Philix (09 Dec 2008 - 14:58)
Je pense que ceci est correct

HTML:

<html>
	<head>
		<title>Riva</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
		<link href="template.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div id="container">
 			<div id="header"></div>
				<div id="menu_top">
					<ul>
						<li><a href="#">Menu1</a></li>
						<li><a href="#">Menu2</a></li>
						<li><a href="#">Menu3</a></li>
					</ul>
				</div>
				<div id="content">
					<div id="news">
							<div id="news_text">Phasellus facilisis. Cras tincidunt placerat sapien. Maecenas malesuada ultrices nisi. Fusce mauris odio, egestas in, placerat in, egestas et, lorem. Phasellus ac elit eu est pulvinar molestie. Vivamus tellus neque, aliquet sed, ullamcorper at, convallis sit amet, magna. Pellentesque non diam a felis accumsan dignissim. Pellentesque sapien. Pellentesque metus pede, lacinia quis, viverra eu, pellentesque vel, justo. Mauris justo felis, hendrerit ac, vestibulum vel, imperdiet sed, dolor. Maecenas accumsan, diam eu hendrerit feugiat, libero felis mattis erat, eget feugiat metus magna in risus. Donec viverra, eros non blandit fermentum, nulla lacus
							</div>
					</div>				
					<div id="accueil">
						<div id="accueil_img"></div>
					</div>
				</div>
				<div id="footer">Footer</div>
		</div>
	</body>

</html>


CSS:

body {
	background-color:#dcd7b6;
	color: #000000;
	margin: 0;
	padding :0;
	text-align:center;
	font-family:verdana, arial, times new roman;
	font-size:11px;
}
#container { 
	width: 781px;
	height:auto;
	background-color:#af1f24;
	margin: 0 auto;
	text-align:left;
}
#header {
	background:url(img/header.png) no-repeat;
	border:none;
	margin: 0 auto;
	width:781px;
	height:87px;
}
#menu_top {
	background-color:#d7f1fe;
	width:752px;
	height:26px;
	margin-left:10px;
}
#menu_top ul li {
	display:inline;
	margin-left:20px;
}
#content {
	background-color:#ffffff;
	width: 752px;
	margin-left:10px;
	line-height:120%;
}
#accueil {
	background-color:#5fa7d7;
	border-bottom:#ffffff solid 11px;
	height:386px;
	[b]margin-left:195px;
	width:auto;[/b]
}
#news {
	width:185px;
	height:360px;
        position:relative;
	top:10px; 
	margin-left:10px;
	overflow:auto;
	float:left;
	background-color:red;
}
#news_text {
	margin-left:5px;
	width:157px;
 	position:relative;
	top:5px; 
}
#accueil_img{
	background-image:url(img/accueil.jpg);
	background-repeat:no-repeat
	[b]width:auto;[/b]
	height:397px;
	margin-left:203px;
}
#footer {
	margin-left:10px;
	[b]clear:both;[/b]
}

Modifié par Kyrosr34 (09 Dec 2008 - 19:07)
Bonjour,

Avec un <br style="clear:both;" /> dans le code HTML juste entre le flottant et le contenu qui doit venir se placer à sa droite, ça ne risque pas de marcher. Smiley cligne
Tymlis a écrit :

Tout Smiley lol

Bah vu que mes sites passent bien sans tous avoir ça .. m'enfin moi tant que ça passe sur IE6, IE7, FF2, FF3, Safari, ... je vais pas regarder sur le w3c c'est vrai que je devrais, merci de me l'avoir rappeler Smiley langue

Kyrosr34 a écrit :
Je pense que ceci est correct

Effectivement là ça fonctionne niquel Smiley smile
Un tout grand merci à toi

(... Et pourtant je me suis pris la tête sur ce truc) Smiley confused
Dr_G a écrit :
Bah vu que mes sites passent bien sans tous avoir ça ..

Ce sont des sites simples alors, et ne faisant pas appel (en vrac):
- au positionnement fixe;
- à tout positionnement un peu trop délicat;
- au centrage via les marges automatiques...
(pour ne citer que quelques exemples de ce que j'ai en tête et qui ne passe pas en mode Quirks).

À lire: Que se passe-t-il en mode quirks ? (traduction)
Sujet clos
Aller à