28172 sujets

CSS et mise en forme, CSS3

Le texte défile mais pas les liens

Bonjour,

Y a-t-il une raison pour que les liens contenus dans un <div> (dans des <li>, dans <p>,etc...) ne défilent pas avec l'ascenseur ?
Voici le code css du <div> :
div#content {
	float:right;
	width:70%;
	height:64%;
	padding-bottom: 50px;
	overflow: auto;
}
<p> : juste la taille de police
<a> la couleur etc...
J'ai pas de liens dans les <li>.

Par contre j'ai pour le div qui contient div#content :
div#global {
	width: 80%;
	max-width: 1000px;
	min-width: 700px;
	position: relative;
	height: 100%;
	padding: 0 10px;
	margin: 0 auto;
	text-align: left ;
	background-color: #ffd911;
	border-left: 3px solid Black;
	border-right: 3px solid Black;
}


La structure de la page est :
<body>
<div id="global">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

Les div header, content et footer contiennent des titres, des paragraphes.
Les paragraphes contiennent des listes ou des liens.
Je n'arrive pas à reproduire ton problème.

Je tiens à préciser qu'il est déconseillé d'appliquer des ascenseurs à des <div> ou autres éléments : c'est une pratique qui a tendance à "dérouter" certains internautes. Mieux vaut conserver uniquement la "scrollbar" verticale du navigateur.
Mais si tu y tiens vraiment, communique moi la totalité de ton code ou une page en ligne afin de que je t'aide davantage.
Les pages ne sont pas en ligne.
Voici le code de la page (la structure sans le texte pout gagner de la place : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="global">
	<div id="header">
	<h1></h1>
	<p></p>
	</div>

	<div id="content">
	<h2></h2>
	<h3>contacter</h3>
	<p>p>
	<p>
	<ul id="vliste">
	<li></li>
	<li></li>
	</ul>
	</p>
	<p><a href="" title=""></a></p>	
	<h3></h3>
	<p><a href=""></a></p>
	<h3>Pour venir chez nous à Colmar</h3>
	<p></p>
	<p><a href="contactCol.php"></a></p>
	</div>

	<div id="footer">
	<p></p>
	<ul id="footer">
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
	</ul>
	</div>
</div>
</body>
</html>

La CSS
html {
	font: 100% "Trebuchet MS", helvetica, sans-serif ;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
body {
	text-align: center ;
	font: 0.7em;
	color: #000000;
	background-color: #A9A9A9;
}
/*COMMUN*/
a {
	color: #FF6600;
	text-decoration:none;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}

ul#vliste  {
	font-weight:bold;
	font-size:0.8em;
	margin: 0 ;
	list-style-type: none ;
	width: 90%;
}
ul#vliste li {
	float: left ;
	text-align: left ;
	width: 45%;
}
img {
	border:0;
	}
p {
	font-size:0.9em;
}
div#global {
	width: 80%;
	max-width: 1000px;
	min-width: 700px;
	position: relative;
	height: 100%;
	padding: 0 10px;
	margin: 0 auto;
	text-align: left ;
	background-color: #ffd911;
	border-left: 3px solid Black;
	border-right: 3px solid Black;
}

/* CONTENU */
div#content {
	float:right;
	width:70%;
	height:63%;
	padding-bottom: 50px;
	overflow: auto;
}
div#content h2 {
	padding-left: 35px;
	background: #fff url(img/titre.png) left center no-repeat;
	color: #21538f;
	}
div#content h3 {
	color: #21538f;
	font-variant: small-caps;
}
/* HEADER */
div#header {
	border:1px solid #ffd911;
	background-image: url(../img/x.png);
	background-color: #ffd911;
	color: #21538f;
	height: 151px;
	position: relative;
	background-position: right;
	background-repeat: no-repeat;
}
/* FOOTER */
div#footer {
	position: absolute;
	bottom: 0;
	width: 98%;
	color: #21538f;

}
div#footer p{
	font: small-caps bold 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-bottom:5px;
	color: #000000;
	text-align: center;
	background-color: #ffd911;
}

#footer ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul#footer  {
	height: 20px ;
	margin: 0;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none;
	background-color: #21538f;
}
ul#footer li {
	float: left;
	text-align: center;
	width: 20%;
}
#footer li a {
	line-height: 20px ;
	font-size: 0.85em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-left: 2px solid #dea ;
	border-right: 2px solid #dea ;
}
#footer a {
	color:#ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #FF8C00;
	text-decoration: none;
}
Désolé, j'ai testé avec l'ensemble de ton code, et je n'arrive toujours pas à reproduire ton "bug" (testé sous IE6, IE7 et firefox3). De mon côté, les liens contenus dans le <div id="content"> défilent avec l'ascenseur (contenus ou non dans une autre balise).
Sur quel(s) navigateur(s) réalises-tu tes tests ?
C'est sous IE 7.
Je n'avais pas encore testé sous Opera et Firefox, je viens de voir que ces deux-là ne posent pas problème.
Bizarre !
Est-ce les seuls styles que tu appelles sur ta page ?
J'ai l'impression que tes liens sont dotés de la propriété 
position:relative
alors que tu ne déclares ça nulle part.
Es-tu en mesure de mettre ta page en ligne ?
Je viens de refaire la page en repartant de zéro. Ce coup-ci ça marche.
Effectivement j'ai trouvé une propriété position relative cachée dans l'ancienne CSS.
Je te remercie d'avoir pris du temps à m'aider à me dépatouiller.
C'est un projet que j'avais commencé avant mon congé de maternité, y'a plus de 6 mois...
Smiley ravi
Sujet clos
Aller à