28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Probleme de positionnement du conteneur

Bonjour,

mon site contient un menu gauche qui contient lui-meme plusieurs éléments
et 1 conteneur. Le menu gauche est en float:left et le conteneur en position:absolute. Pas de probleme tant que le conteneur est aussi long que le menu gauche mais des qu'il le dépasse mon lien se retrouve en plein milieu de mon conteneur ( ex:ici). La taille du conteneur varie suivant le contenu.Comment faire pour que mon lien et les annonces restent en dessous du conteneur??
Merci d'avance.

Ps : ma feuille css:

body {
	/*background-image:url("nature-eau copy.jpg");
	background-attachment:fixed;*/
	background-color:black;
	/*font-weight:bold;*/
}

a {
	text-decoration:none;
	color:grey;
}

#banniere {
	text-align:center;
	color:black;
	font-size:28px;
	font-weight:bold;
	margin-top:30px;
	background-color:grey;
}

#menug {
	float:left;
}

#log{
	border:solid;
	border-color:grey;
	color:grey;
	width:18%;
	-moz-border-radius:7px;
}
#log td{
	text-align:center;
	font-weight:bold;
}
#titre {
	background-color:grey;
	color:black;
}

#navig{
	margin-top:10px;
	width:18%;
}

#navig a {
	color:black;
}

#navig td{
	background-color:grey;
	font-size:18px;
	width:151px;
}

#membres {
	margin-top:10px;
	border:solid;
	border-color:grey;
	color:grey;
	width:16%;
	font-weight:bold;
	-moz-border-radius:7px;
}

#contenu {
	border:solid;
	border-color:grey;
	margin-top:8px;
	margin-left:19%;
	width:77%;
	padding-bottom:50px;
	padding-left:4px;
	padding-right:4px;
	font-size:18px;
	color:grey;
	position:absolute;
	
}

#regles {
	text-align:center;
	margin-left:19%;
	font-weight:bold;

}

Modifié par Zenerox (18 Sep 2007 - 16:09)
Ajoutes ça à la div qui s'occupe de ta bannière Google (je crois que c'est Règles) :

{
clear : both;
}


Ca devrait le faire maintenant Smiley cligne
oui je le peux :

<?php

	session_start();
	require("require/liens.php");
?>

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01 Strict//EN" "http://www.w3c.org/TR/html4/loose.dtd">

<head>
	<?php
		entete(Adresses);
	?>
</head>

<body>
<?php
	banniere();
?>

<div id="menug">

	<div id="login">
		<?php
			login();
		?>
	</div>

	<div id="navigation">
		<?php
			navigation();
		?>
	</div>
	
	<div id="membres">
		<?php
			affichemembre();
		?>
	</div>
	
	<div>
	<div id="cboxdiv" style="margin-top:20px">
		<iframe frameborder="0" width="18%" height="305" src="http://www4.cbox.ws/box/?boxid=3390577&amp;boxtag=7200&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#48515A 1px solid;" id="cboxmain"></iframe><br/>
		<iframe frameborder="0" width="18%" height="75" src="http://www4.cbox.ws/box/?boxid=3390577&amp;boxtag=7200&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#48515A 1px solid;border-top:0px" id="cboxform"></iframe>
	</div>
	</div>
	
</div>

<div id="contenu">
	<p align="center">Voici les adresses utiles :</p>
	<div>
		<p>Lyon : ( pour l'instant la seule ville référencée mais le choix s'étoffera suite à vos demandes )</p>
		<span style="margin-left:20px">Vétérinaires :</span>
			<ol><u>Lyon 1er :</u></ol>
				<ul>Clinique Vétérinaire du Docteur Chamba<br/>3 place Meissonier<br/>Tel : 04 78 28 40 65<br/>Fax : 04 78 30 61 90</ul>
			<ol><u>Lyon 2ème :</u></ol>
				<ul>Service Urgences Vétérinaires à Domicile<br/> 13 cours Verdun<br/>Tel : 0 825 826 156</ul>
				<ul>Clinique Vétérinaire Bellecour<br/> 4 rue Antoine de Saint Exupéry<br/>Tel : 04 78 92 87 41</ul>
				<ul>Dr Madec Marie-Hélène<br/> 37 rue Franklin<br/>Tel : 04 78 37 71 36</ul>
			<ol><u>Lyon 3ème :</u></ol>
				<ul>S.O.S. vétérinaire Lyon<br/> 35 rue Doct Rebatel<br/>Tel : 04 78 54 00 71</ul>
				<ul>Cabinet Vétérinaire de la Part Dieu<br/> 119 rue Servient<br/>
				Dr Joncquiert Damien<br/>Tel : 04 78 95 35 79 <br/>Mobile : 06 71 72 71 39</ul>
				<ul>Karabaghli Hocine<br/> 361 rue Paul Bert<br/>Tel : 04 72 33 47 53</ul>
				<ul>Pallandre Jean-Pierre<br/> 221 avenue Lacassagne<br/>Tel : 04 72 35 02 62</ul>
				<ul>Clinique de l'Arche de Noé<br/> 35 rue Docteur Rebatel<br/>
				Dr Carlier Alain<br/>Dr Willem Laurent<br/>Tel : 04 78 54 86 87 <br/> Fax : 04 72 12 03 89</ul>
				<ul>Clinique Vétérinaire de Saxe du Docteur Coste<br/> 142 avenue Maréchal de Saxe<br/>Tel : 04 78 60 17 59</ul>
				<ul>Clinique Vétérinaire Saint Roch du Docteur Franck Chabanel<br/> 45 avenue Georges Pompidou<br/>Tel : 04 72 36 99 99</ul>
				<ul>Dramard Valérie<br/> 16 rue Jeanne d'Arc<br/>Tel : 04 78 95 62 99 <br/> Fax : 04 78 95 63 70</ul>
				<ul>Guignard Stéphane<br/> 99 cours Docteur Long<br/>Tel : 04 78 53 60 18 <br/> Fax : 04 72 68 09 16</ul>
			<ol><u>Lyon 4ème :</u></ol>
				<ul>Clinique Vétérinaire des Canuts<br/> 43 rue Hénon<br/>
				Dr Longy Cyrille<br/>Tel : 04 78 39 32 09</ul>
				<ul>Clinique Vétérinaire du Gros Caillou<br/> 107 boulevard Croix Rousse<br/>
				Dr Devierne Gilles<br/>Dr Gaude Sylvie<br/>Tel : 04 78 28 23 53<br/>Fax : 04 78 28 23 71</ul>
				<ul>Dhalluin Yves<br/> 5 rue Bély<br/>Tel : 04 78 29 08 04<br/>Fax : 04 78 30 99 07</ul>

	</div>
</div>

<p id="regles"><a href="regles.php">Règles</a></p>

</body>

</html>


J'ai réduit les éléments présents dans mon conteneurs pour que ce soit moins long
Où est l'appel de la pub Google là-dedans ? (c'est bien cet élément qui te gêne ?)
As-tu essayé ma première solution ?
ce n'est pas grave mais dis moi comment tu ferais pour que mon lien soit par exemple à 30px du conteneur? J'ai pensé à donner une taille fixe à mon conteneur mais cela ne marche car sa taille varie en fonction des pages
Zenerox a écrit :
la 1ere solution ne marche pas et c'est mon <p> avec les regles qui se place mal

Il faut dire qu'il est un peu placé au petit bonheur la chance. Smiley cligne

Actuellement, sur la page d'accueil, p#regles a une hauteur réelle de 869px (ce n'est pas la hauteur demandée, mais c'est l'espace qu'il occupe... lui mettre une couleur de fond vive pour le vérifier). C'est à dire que, concrètement:
- div#menug n'influe pas sur le positionnement initial de p#regles, car div#menug est flottant;
- div#contenu n'influe pas sur le positionnement de p#regles, car div#contenu est positionné en absolu;
- donc p#regles commence tout en haut de la page (enfin, juste après le hr... pour le vérifier, mettre un background: red à p#regles);
- div#menug n'influe pas sur le positionnement de p#regles, mais comme div#menug occupe toute la largeur de la page (mettre une couleur de fond vive à div#menug pour le vérifier), il repousse le texte de p#regles tout en bas.

Bref, c'est pas terrible comme méthode de positionnement. Smiley cligne

Donc, quelques solutions:
- donner une largeur à div#menug, par exemple 18% (et ne pas donner de largeur de 18-19% aux éléments contenus dans div#menug, sinon ça va plus...);
- ne pas positionner div#contenu en absolu, mais le laisser en positionnement statique (par défaut) avec une marge à gauche de 19%;
- placer un clear: left sur p#regles.

En passant, le validateur HTML du W3C me sort 19 erreurs. Le Doctype utilisé n'est d'ailleurs pas reconnu. Voici ci-dessous le Doctype utilisé, puist le Doctype correct pour HTML 4.01 Strict, et enfin le Doctype correct pour HTML 4.01 Transitional:
[#red]<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01 Strict//EN" "http://www.w3c.org/TR/html4/loose.dtd">[/#]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

À vue de nez, le Doctype utilisé est un doctype HTML 4.01 Transitional où on aurait remplacé le mot «Transitional» par le mot «Strict». Raté, ça ne marche pas comme ça. Smiley smile
Modifié par Florent V. (17 Sep 2007 - 17:17)
si je supprime l'absolute je n'ai plus le probleme de mon lien certes mais mon texte dans mon conteneur ne s'affiche qu'à partir du dessous de mon menu gauche... et dans ma page recherche mes fieldset se retrouvent à droite de mon conteneur et non dedans. C'est comme si mon menu gauche utilisait toute la largeur de l'écran. Que faire pour que mon menu gauche arrete de prendre toute la largeur de la page?
Modifié par Zenerox (17 Sep 2007 - 18:05)
Je t'aurais bien dis de mettre float : left à ton menu et à ton contenu, puis clear : both à ta publicité.
Et peut-être définir des tailles...
Sujet clos
Aller à