28220 sujets

CSS et mise en forme, CSS3

Problème de positionnement

bonjour à tous

je ne comprends pas pourquoi mon header recouvre ma partie gauche et ma partie centrale quelqu'un peut il m'aider?
on ne le voit pas du premier coup d'oeil mais mon bloc gauche (news) et mon bloc central (accueil) sont recouvert sur 150 px par mon header (menu)
je n'ai pour l'instant donné aucun style au texte et autre, je voudrais juste que mes blocs soient bien positionnés!

deuxième petite question comment faire pour que ma partie gauche prenne la même taille (en vertical) que ma partie centrale qui elle est amené à avoir des hauteurs differente en fonction de son contenu?

j'ai déjà tenté de remedier à ces problèmes en regardant sur alsacréation openweb ou autre et malgré ça je n'y arrive pas, alors svp ne me renvoyé pas vers un tuto si c'est possible! help! Smiley decu

css et xhtml valide w3c

mon prototype de site:
http://ayiore.free.fr/agua/sitephp/

ma css:


/********************************************************************************************************/
/*** général ***/

.conteneur { /*le conteneur global du site, qui sera centré */
	width: 780px;
	position: absolute;
	left: 50%;
	margin-left: -390px;
	background-color:#FFFFFF;
}

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color:white;
	background-image:url(back_fade.jpg);
}

#menu {
position: absolute;
width : 780px;
height: 150px;
background: url(img/menu/aguaban.gif) top left no-repeat;
}

#news
{
	float: left;
	width: 150px;
	   
}

#centre
{
	margin-left: 150px;
	width: 630px;
}

#pied
{
	margin: 0 auto;
	width: 780px;
	height: 80px;
	font-size: 12px;
	text-align: center;
	background-color: #FFFFFF;
}

/********************************************************************************************************/
/*** 1 accueil ***/
/********************************************************************************************************/
#menu1 {
position: absolute;
width : 66px;
height: 18px;
left: 217px;
top: 1px;
}
#menu2 {
position: absolute;
width : 121px;
height: 18px;
left: 224px;
top: 21px;
}
#menu3 {
position: absolute;
width : 88px;
height: 23px;
left: 236px;
top: 41px;
}
#menu4 {
position: absolute;
width : 81px;
height: 14px;
left: 242px;
top: 66px;
}
#menu5 {
position: absolute;
width : 98px;
height: 18px;
left: 245px;
top: 82px;
}
#menu6 {
position: absolute;
width : 194px;
height: 22px;
left: 246px;
top: 102px;
}
#menu7 {
position: absolute;
width : 78px;
height: 15px;
left: 245px;
top: 125px;
}
#menu1:hover {
width : 66px;
height: 18px;
left: 217px;
top: 1px;
background: url(accueil.jpg) top left no-repeat;
z-index: 100;
}
#menu2:hover {
width : 121px;
height: 18px;
left: 224px;
top: 21px;
background: url(visite.jpg) top left no-repeat;
z-index: 100;
}
#menu3:hover {
width : 88px;
height: 23px;
left: 236px;
top: 41px;
background: url(plannings.jpg) top left no-repeat;
z-index: 100;
}
#menu4:hover {
width : 81px;
height: 14px;
left: 242px;
top: 66px;
background: url(activites.jpg) top left no-repeat;
z-index: 100;
}
#menu5:hover {
width : 98px;
height: 18px;
left: 245px;
top: 82px;
background: url(vieduclub.jpg) top left no-repeat;
z-index: 100;
}
#menu6:hover {
width : 194px;
height: 22px;
left: 246px;
top: 102px;
background: url(planacces.jpg) top left no-repeat;
z-index: 100;
}
#menu7:hover {
width : 78px;
height: 15px;
left: 245px;
top: 125px;
background: url(contacts.jpg) top left no-repeat;
z-index: 100;
}


mon index:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
   
<html>
<head>
<link href="styles.css" rel="stylesheet" title="styles" type="text/css" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>.::agua viva::.</title>
</head>

<body>
<div class="conteneur">
<div id="menu" >
<?php 
	include('menu.php');
?>
</div>

<div id="news" >
<?php 
	include('news.php');
?>
</div>

<div id="centre" >
<?php
	$pageOK = array('accueil' => 'accueil.php',
                	'visite' => 'visite.php',
					'plannings' => 'planningStud1.php',
					'planningstud2' => 'planningStud2.php',
					'planningsaqua' => 'planningaqua.php',
					'activites' => 'activites.php',
					'vieduclub' => 'accueil.php',
					'planacces' => 'accueil.php',
					'contacts' => 'contacts.php',);
								
	if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']]))) 
		{include($pageOK[$_GET['page']]);}
 	else 
		{include('accueil.php');}
?>
</div>
<div id="pied">
<?php
	include('pied.php');
?>
</div>
</div>
</body>
</html>

Modifié par ayiore (10 Dec 2005 - 14:59)
Bonsoir,

En ce qui concerne la superposition de ton header avec les autres parties du site, au vu du positionnement que tu as choisi, il faut que tu rajoutes une marge sur les divisions #news et #centre. Je pense que 150px peuvent convenir. Smiley cligne 


#news
{
margin-top: 150px;
float: left;
width: 150px; 
}

#centre
{
margin-top: 150px;
margin-left: 150px;
width: 630px;
text-align: center;   
}

Modifié par Romain H. (10 Dec 2005 - 22:40)
merci romain effectivement ça marche je vais donc faire ça comme ça pour l'instant!

je suis par contre preneur si quelqu'un à la solution la plus correcte!

ma partie gauche etant positionnée en float left normalement je devrais automatiquement me positionner sous mon header à gauche!

et biensur je suis tjs à la recherche de la methode pour que ma partie de gauche s'étire dans le sens de la hauteur en fonction du de la taille de ma partie centrale!

merci d'avance !
Modérateur
bonjour,
Je ne sais pas si cette solution est plus correcte, mais je ne suis pas certains que tu ai besoin du position:absolute pour #menu .

ensuite, pour que la partie droite ne descende pas au niveau en dessous de la partie gauche ... j'ajouterais un "display:inline; a #center

voici les modif que j'effectuerais sur ton css en ligne au moment de ce post:
pour #menu:

#menu {
/* position:absolute;  mise en commentaires, desactivée */
width : 780px;
height: 150px;
background: url(http://ayiore.free.fr/agua/sitephp/img/menu/aguaban.gif) top left no-repeat;
}

et pour #centre 
#centre
{
	margin-left: 150px;
	width: 630px;
	text-align: center;  
	display:inline; /* une façon parmis d'autre de  ce defaire du bug 3px d'IE */
}


Chez moi ça marche et j'espere ne pas avoir fait de mauvais choix .
(il me semble les plus leger en poids et sans recours aux hacks !important par exemple).

a plus
merci bcp c'était bien ça!

effectivement ça ne pouvait pas marcher avec mon header en position absolue je le retirais du flux normal donc il est logique qu'il recouvrait les autres parties!!

merci bcp!! Smiley lol

il ne me reste plus qu'a faire en sorte que ma partie gauche s'adapte à la hauteur de ma partie centrale! je pense que je vais devoir avoir recoure à un bloc conteneur! si quelqu'un à une autre idée à me proposer je suis preneur!

merci d'avance!
bonsoir

j'ai tjs un petit problème et je vais encore avoir besoin de vous! lol

suite au conseil de gcyrillus j'ai pu regler mon problème de header qui recouvrait ma partie gauche et ma partie centrale! ça c'est bon ouf!

par contre j'ai toujours un petit problème avec mon footer!
quand le contenu de ma partie centrale et plus grand que ma partie gauche là il n'y a pas de problème mon footer passe bien en dessous! par contre si ma partie centrale est plus petite que ma partie gauche alors là mon footer reste collé à ma partie centrale et recouvre ma partie gauche! Smiley bawling

comment faire pour remedier à ce problème?

ma css et mon code sont donnés plus haut!

merci d'avance!
Sujet clos
Aller à