28221 sujets

CSS et mise en forme, CSS3

[résolu] Problème de mise en page

Salut, bienvenue à toi, si ça te dit tu peux aller te présenter dans le bar du forum http://forum.alsacreations.com/topic.php?fid=9&tid=23&p=13

Euh oui on peut surement t'aider, mais si tu pouvais nous aider à t'aider, ça serait cool !!! parceque sans code html/css.... c'est pas évident

A tous les coup, l'ajout d'un clear: both; sur ton pied de page réglera la question mais à l'aveugle c'est pas forcément évident !
Ca y est, je suis allé me présenter!
Voici le CSS.

body {
	font:11px Arial, Helvetica, sans-serif;
	color:#0743A9;
	background:#FFFFFF url("images/commun/bg.jpg") repeat fixed left top;
	margin:0;
	padding:0;
	text-align:justify;
}
a:link, a:visited  { 
	font-weight:bold; 
	text-decoration:none; 
	color:#476C39;
	}
a:hover, a:active { 
	text-decoration: none; 
	color:#0743A9;
	}
.contenu {
	position:relative;
	background: url("images/commun/containerbg.jpg") top left repeat-y; 
	padding:5px 0 5px 0;  
	margin: auto; 
	display:block;
	text-align:justify;
	width:750px;
}
.entete {
	text-align:right;
	padding-right:15px;
	margin:0;
}
.titre h1 {
	background: url("images/commun/header_image.jpg") no-repeat left top;
	display:block;
	padding:0;
	margin:0;
	height:100px;
	width:750px;
}
.titre h1 span {display:none}
.zonedetexte {
	clear:right;
	margin:0 0 0 15px;
	padding:0 10px 0 10px;
	width:520px;
}
.sessionsdesurf {
	background: url("images/commun/sessionsdesurf.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;	
}
.sessionsdesurf h3 span {display:none;}
.unjourunephoto {
	background: url("images/commun/1jour1photo.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.unjourunephoto h3 span {display:none;}
.dernieresnews {
	background: url("images/commun/news.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.dernieresnews h3 span {display:none;}
.portrait {
	background: url("images/commun/portrait.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.portrait h3 span {display:none;}
.photographies {
	background: url("images/commun/photographies.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.photographies h3 span {display:none;}
.quiver {
	background: url("images/commun/quiver.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.quiver h3 span {display:none;}
.trips {
	background: url("images/commun/trips.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.trips h3 span {display:none;}
.liens {
	background: url("images/commun/liens.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.liens h3 span {display:none;}
.contacts {
	background: url("images/commun/contacts.jpg") top left no-repeat;	
	padding-top:20px;
	padding-bottom:10px;
}
.contacts h3 span {display:none;}
.listedeliens {
	width:169px;
	position:absolute;
	top:120px;
	left:560px;
	text-align:left;
}
.listedeliens h3.menu { 
	background: url("images/commun/menu.jpg") no-repeat top left; 
	width:169px; 
	height:48px; 
	}
.listedeliens h3.menu span {display:none;}
.listedeliens h3.projets { 
	background: url("images/commun/projets.jpg") no-repeat top left; 
	width:169px; 
	height:48px;
	}
.listedeliens h3.projets span {display:none;}
.listedeliens h3.sponsors { 
	background:#FFFFFF url("images/commun/sponsors.jpg") no-repeat top left; 
	width:169px; 
	height:48px;
	}
.listedeliens h3.sponsors span {display:none;}
.listedeliens ul {
	margin:2px;
	padding-left:15px;
	padding-right:10px;
	}
.listedeliens li {
	list-style-type:none;
	border-bottom:1px dotted #000;
	padding-left:5px;
	margin:3px;
	}
.lmenu li a:link, #lmenu li a:visited { 
	display:block;
	}
.lmenu li a.c:link, #lmenu li a.c:visited { 
	font: 11px tahoma, verdana, arial, sans-serif; 
	line-height:13px;
	color: #0743A9; 
	text-decoration:none;
	font-weight:bold;
	}
.lmenu li a.c:hover, #lmenu li a.c:active {
	text-decoration:underline;
	}
.pied {
	text-align:center;
}


J'ai déjà essayer le clear: both; mais ça n'a rien donné.
sans le code HTML qui va avec, pas évident Smiley cligne

Un truc qui serait cool c'est que tu cibles ton code HTML et CSS sur l'endroit qui déconne.

Un exemple en ligne aussi ça pourrait aider Smiley cligne 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>blabla</title>
<link href="../index.css" rel="stylesheet" type="text/css" />
</head>

<body id="test">
<div class="contenu">
	<div class="entete">
		<p><a href="#">blabla</a></p>
	</div>

	<div class="titre"><h1><span>blabla</span></h1></div>

	<div class="zonedetexte">
		<div class="photographies">
			<h3><span>Photographies...</span></h3>
			<p>blabla</p>
		</div>
	
		<div class="sessionsdesurf">
			<h3><span>Sessions de Surf... (année 2005)</span></h3>
			<p>blabla</p>
		</div>
		
	  <div class="unjourunephoto">
			<h3><span>Un jour, une photo... (année 2004)</span></h3>
			<p>blabla</p>
	  </div>
	
	</div>

	<div class="listedeliens">
		<div id="lmenu"><h3 class="menu"><span>Menu:</span></h3>
			<ul>
  				<li> <a href="#">Accueil: </a>les dernières news s'y trouvent.</li>
  				<li><a href="#">Portrait: </a>qui suis-je?</li>
  				<li><a href="#">Photographies: </a>clichés divers, de Surf ou de Trips.</li>
  				<li class="menu"><a href="#">Quiver: </a>les planches que j'utilise et leurs caractéristiques.</li>
				<li><a href="#">Trips: </a>quelques récits de trips.</li>
				<li><a href="#">Liens: </a>divers, Surf, musique, etc.</li>
				<li><a href="#">Contacts: </a>comment prendre contact?</li>
			</ul>
		</div>

		<div id="lprojets"><h3 class="projets"><span>Projets:</span></h3>
			<ul>
				<li><a href="#">Sessions de Surf... (année 2005): </a>sessions et leurs caractéristiques.</li>
				<li><a href="#">Un jour, une photo... (année 2004): </a>projet relativement personnel.</li>
			</ul>
		</div>

		<div id="lsponsors"><h3 class="sponsors"><span>Sponsors:</span></h3>
			<ul>
				<li><a href="#">Soöruz: </a>site d'une marque de surfwear qui déchire!</li>
				<li><a href="#">FCS: </a>site de la célèbre marque d'accessoires.</li>
				<li><a href="#">Gorilla Grip: </a>site de la célèbre marque de grips.</li>
			</ul>
		</div>
	</div>
	<div class="pied"><p>Page actualisée le <!-- #BeginDate format:fSw1m -->jeudi 30 décembre, 2004  12:41<!-- #EndDate --></p>
	</div>
</div>
</div>
</body>
</html>


Le menu dépasse du contenu... Smiley confus
Ahh bah je viens de voir dans les CSS (j'avais pas regardé tout à l'heure, un peu pressé), tu utilises le positionement absolu, tu ne pourras pas gérer le pied de page avec ce positionement.

Si tu utilises les flottant (et avec le clear: both; sur le pied de page dont je parlais tout à l'heure), tu arriveras à la solution.
Tu peux nous expliquer la méthode utilisée pour résoudre ton problème, ça pourra toujours resservir. Smiley cligne
Toi aussi tu es efficace, un bon membre !!!
Utilisation du BBcode d'entrée de jeu ! c'est assez rare pour le souligner, et en plus on a droit au [résolu] sans le réclamer Smiley cligne Merci !
Igor a écrit :
Tu peux nous expliquer la méthode utilisée pour résoudre ton problème, ça pourra toujours resservir. Smiley cligne


Pour résumer (les spécialistes pourront me corriger si je me trompe), mon menu avait un positionnement absolu ce qui empêchait l'utilisation du clear: both; dans le pied de page.
J'ai donc suivi le conseil d'ElMoustiko: utiliser un float:right; pour le menu et un float: left; pour la zone de texte... puis vérification sous les différents navigateurs et le tour est joué!

Encore merci! Smiley smile
Sujet clos
Aller à