28172 sujets

CSS et mise en forme, CSS3

[résolu]Agrandissement de div en cas d'augmentation de taille de text

Comment faire pour que le bas de la partie #entete ne glisse pas sous la partie #corps lorsqu'on agrandit la taille du texte (zoom sous Firefox ou taille de texte Plus grande sous IE), mais la repousse et donc que mon menu situé dans la partie basse de l'entête reste visible et accessible ?

merci de votre aide

/* -------en tête avec menu ---------------------------*/
#entete {
position:relative;
height:200px;
text-align:center;
background:url(../images/entete_generale.jpg) top center no-repeat;
margin: 0 0 10px 0; padding :0;}

h1 {color:#000;
	font-size:250%; 
	width:490px; 
	margin : 0 auto; 
	padding: 1px 0;
	position: relative;
	top: 52px;
	left: 43px;}

ul#menu {
position: relative;
top: 100px;
left: auto;
width:750px;
height:auto;
margin : 0 auto; 
padding: 1px 0;
font: bold 100% Verdana, Arial, Helvetica, sans-serif; 
list-style-type:none;}

#menu li {float:left; margin:0 10px ;  }

#menu a {color: #fff; text-decoration: none; }

#menu a:hover {color: #999; }

/* -------2 colonnes : sommaire - articles ---------------------------*/
#corps {
overflow:hidden; 
padding-bottom:5px;
width:100%;}

#colg {
float:left;
width: 20%;
text-align:left;
background-color:#fff;
min-height:500px;}

#actu, #article {
float:left;
width: 70%;
background-color:#fff;
min-height:200px;
margin:0 20px 20px 20px;
padding:20px 20px;}

Modifié par arives (23 Mar 2009 - 10:59)
Re',

arives a écrit :
Comment faire pour que le bas de la partie #entete ne glisse pas sous la partie #corps lorsqu'on agrandit la taille du texte (zoom sous Firefox ou taille de texte Plus grande sous IE), mais la repousse et donc que mon menu situé dans la partie basse de l'entête reste visible et accessible ?
Du code css sans le code html correspondant ça n'aide pas beaucoup. Smiley cligne

Cela dit il suffit à priori de ne pas fixer de height à #entete et de le remplacer par un min-height.

En conséquence il faut allonger l'image et éventuellement lire Min-width, max-width, min-height et max-height sur Internet Explorer 6.
min-height ne change pas mon souci, ni sous Firefox, ni sous IE...


Désolée pour le code html, c'était un oubli... que je répare de suite :

<body class="rougef" >
<div id="global">
<div id="entete">
<h1>Patate chaude (actualité)</h1>
<?php include('inc.menu_general.php'); ?>
</div>
<div id="corps">
<div id="colg">
<h2>Sommaire</h2>
</div>

<div id="actu">
<h2>Actualité</h2>
<h3>Pour Bébéar, la bourse est un thermomètre dangereux !</h3>
<p class="pcold">Comme c’est devenu une habitude...</p></div>

<div id="article">
<h2>article du 01/01/09 - AXA Tech</h2>
<h3>La lutte continue ? </h3>
<p class="pcold">"Désormais, quand il y a ....</p>
</div>
</div>
<?php include('inc.pied.php'); ?>
</div>
</body>
Il faut également modifier les déclarations de la liste :
ul#menu {
	width:750px;
	margin : 0 auto; 
	padding: 100px 0 1px;
	font: bold 100%; 
	list-style-type:none;
	overflow: hidden; /* évite le débordement des flottants */
}
merci, c'est parfait.

mais pourquoi, dans ce cas, il ne faut pas de position relative ? en quoi mon codage bloquait ?

j'essaie de bien comprendre pour pouvoir l'appliquer correctement et non pas bêtement ! Smiley smile
arives a écrit :
mais pourquoi, dans ce cas, il ne faut pas de position relative ? en quoi mon codage bloquait ?
Parce que le positionnement en relative décale un élément par rapport à sa position dans le flux mais que les autres éléments se positionnent par rapport à sa position d'origine (et en l'occurrence n'auraient donc pas été poussés par lui lors d'un agrandissement du texte).

(Re)lire le Guide de survie du positionnement CSS (sans oublier de suivre tous les liens Smiley cligne ).
en plus, je le savais...
faut que je reveille mes neurones ou que j'arrête de coder passé 22h00 !

merci de ton aide
Sujet clos
Aller à