28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement en CSS 2, un vrai casse tête !

bonjour bonjour ! Smiley biggrin

Voilà, là, je galère sérieusement, et j'en ai marre. Le CSS2 c'est bien, mais trop pourri pour ce qui est du positionnement des div. C'est bien gentil, plus de tableaux, mais c'était quand meme bien plus pratique !!!
Enfin bon, je vous explique mon souci.
Mon site est composé de 5 parties :
- une en haut, le menu
- 3 au milieu
- et une en bas, le pied.
Le problème, c'est la partie du milieu. Les trois sous parties sont l'une à coté de l'autre. Celle de gauche, empiète sur le menu ( margin-top négative ). Ensuite, les deux autres, je sais pas comment faire. Le truc, c'est que mon pied empiète tout le temps sur une des parties, car leurs longueurs varient.
Alors, je m'em mèle avec les positions (relative absolute). J'ai bien créé un div qui englobe les 3 parties du milieu, mais rien à faire !

Pleaaaaaaase, HELP ! Smiley biggol

Merci d'avance

alex Smiley lol
Modifié par C_may (02 Aug 2006 - 11:50)
C_may a écrit :
bonjour bonjour ! Smiley biggrin


Bonjour C_may et bienvenue parmi nous Smiley smile

a écrit :
Voilà, là, je galère sérieusement, et j'en ai marre. Le CSS2 c'est bien, mais trop pourri pour ce qui est du positionnement des div. C'est bien gentil, plus de tableaux, mais c'était quand meme bien plus pratique !!!


Avant de lâcher des "trop pourri", es-tu certain d'avoir fait le minimum d'apprentissage afin de maîtriser les différents types de positionnement.
Voici un ensemble de ressource que je te conseille de lire et d'assimiler avant de crier au loup: http://del.icio.us/Igor/cssp tout particulièrement les 3 d'Openweb et celui d'Alsacréations Smiley cligne

a écrit :
[... ]
Pleaaaaaaase, HELP ! Smiley biggol
Merci d'avance
alex Smiley lol


Sans code ou mieux un exemple en ligne, il sera difficile aux membres du forum de te venir en aide. Et les "Pleaaaaaaase, HELP !" ont plutôt tendance à décourager les bonnes volontés Smiley cligne .
Désolé, c'est vrai, j'ai peut être laché des "trop pourri" sans vraiment savoir. Surement, puisqu'il doit bien y avoir une solution. Je ne voulais pas qu'on me la donne, mais qu'on me mette sur la voix.
Bien entendu, j'ai pas mal galéré avant de poster un message sur le forum.
J'ai à coté de moi le bouquin de Raphael Goetter, mais je m'en sors pas.

Je vais voir tes liens et essayer de me débrouiller.

Merci
Je ne peux pas donner l'adresse du site, c'est un site privé avec login et pass. Et le code est un peu long, il a pas mal de code php intégré Smiley ohwell
Je sais pas trop comment mieux me faire comprendre...

Désolée
C_may a écrit :
Je ne peux pas donner l'adresse du site, c'est un site privé avec login et pass. Et le code est un peu long, il a pas mal de code php intégré Smiley ohwell


On s'en fout Smiley cligne du code php, ce qui est important c'est le code html généré et le code css que tu peux copié/collé en visualisant le source de ta page avec ton navigateur.
Modifié par Igor (01 Aug 2006 - 20:45)
Oki, alors, le truc, c'est que mon site est complètement en vrac là ! lol

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	@import url(css/generalites.css);
	@import url(css/menu.css);
	@import url(css/corps.css);
	@import url(css/pied.css);
	@import url(css/formulaires.css);
</style>

</head>

<body>

<div id="menu">
	<ul>  
	  <li><a href="consultation_annuaire.php" title="Consultez l'annuaire des contacts">Annuaire</a> 
	   </li><img src="css/images/puce.jpg" alt="|"/>  
	  <li><a href="consultation_serveur.php" title="Consultez les hébergements et les domaines">Serveurs</a> 
	  </li><img src="css/images/puce.jpg" alt="|"/> 
	  <li><a href="operation_maintenance.php" title="Faites vos opérations de maintenance">Maintenance</a> 
	  </li><img src="css/images/puce.jpg" alt="|"/> 
	  <li><a href="outils.php" title="Gérer la base de données">Outils</a>
	  </li><img src="css/images/puce.jpg" alt="|"/> 
	  <li><a href="consultation_favoris.php" title="Consultez vos sites favoris">Favoris</a></li>
	</ul>
</div>
<div id="corps">
	<div id="corps_gauche">
		<a href="index.php"><img src="css/images/baobab_noir_petit.jpg"  width="261" height="242" border="0"></a><br/> 
		<fieldset>
			<legend>Notes</legend>
		</fieldset>  
	</div>
    <div id="corps_milieu">
    <p id="date"> 
      mardi, 01 août 2006 
    </p>
	<p> code php </p>
    </div>
    <div id="corps_droit">	
      code php
    </div>	
</div>
</body>
</html>
Et voila mes CSS :



/*_______________________ Le corps général _____________________*/
#corps{
	margin: 0px;
	padding: 0px;
}


/*______________________ Le corps gauche ______________________*/

#corps_gauche{
	margin: -40px 0px 0px 0px;
	padding: 0;
	right: 46%;
	z-index: 0;
}

fieldset{
	width: 200px;
	height: 200px;
	margin-left: 10px;
	border: double;	
}

legend{
	color: black;
}


/*______________________ Le corps milieu ______________________*/
#corps_milieu {
	font: normal 13px "Bookman Old Style";
	width: 580px;
	left: 300px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border-right: solid 1px #CCCCCC;
}


#date{
	font: normal 15px "Bookman Old Style";
	padding: 0px;
	margin: 0px;
	text-align: center;
}

div#paragraphe { /****** Il s'agit d'un bloc général de paragraphe ******/
	margin: 0px 10px 0px 0px;
	padding: 0px;
	border-top: dotted 1px #CCCCCC;
}


#paragraphe h5 { /***** l'auteur d'un paragraphe *****/
	background-color: white;
	border-bottom: solid 1px #CCCCCC; 
	padding-bottom: 5px;
	margin: 0px 150px 0px 150px;
	font-size: 12px;
	color: Black;
	text-align: center;
}

#paragraphe p{ /***** le texte d'un paragraphe *****/
	color: Black;
	background-color: white;
	text-align: justify;
	padding: 0px;
	margin: 5px 0px 5px 0px;
}

#paragraphe a { /***** Les liens d'un paragraphe *****/
	color: Black;
	background-color: white;
	text-decoration: none;
}

#paragraphe a:hover {
	background-color: #FFFFCC;
}


/*______________________ Le corps droit ______________________*/
#corps_droit {
	margin: 0px 0px 0px 0px;
	padding: 0px;	
}
Ben là, ca ne donne plus rien, j'ai enlevé tous les positions et tout. Donc les div s'affichent l'uns en dessus des autres.

Mais bon, en gros, ca devrait donner ca :

upload/7855-site.png

Je sais pas si tu comprends tout la, lol Smiley lol
Ben, le deuxième lien, j'avais déjà tenté, mais avec le premier, ca marche !!!!
Encore un ptit bug, mais c rien.

Ouiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, merci tout plein, c'est cool !!!!

A bientot

Merci merci, je suis trop contente ! Smiley lol
Administrateur
C_may a écrit :
Ouiiiii, c'est bon, résolu ! Smiley cligne

Euh oui mais je ne vois pas le tag [Résolu], je crois que tu n'as pas suivi le lien que je viens de te donner Smiley sweatdrop
Sujet clos
Aller à