28173 sujets

CSS et mise en forme, CSS3

Bas de page coupé :)

Bonsoir à tous Smiley smile


J'ai un petit soucis de CSS avec mon pied de page... Le soucis n'apparait QUE sur Internet Explorer 6.0 (tout est ok pr firefox, ie7, safari).


Voici le code html de la page :

<!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>{tpl_metatitle}</title>
<meta name="keywords" lang="fr" content="{tpl_metakeywords}" />
<meta name="description" content="{tpl_metadescription}" />
<meta http-equiv="content-language" content="fr, fr-fr" />
<meta name="robots" content="follow,index,all" />
<meta name="revisit-after" content="1 day" />
<meta name="location" content="france, france" />
<meta name="language" content="fr" />
<meta name="distribution" content="global" />
<meta name="expires" content="never" />
<link href="/style.css" rel="stylesheet" type="text/css" />
{tpl_javascript}
{tpl_headjs}
</head>
<body>
<div id="global">
	<div id="page">
		<div id="menu_haut">
			{tpl_menu_haut}
		</div>
		<div id="corps">
			<div id="corps_haut">&nbsp;</div>
			<div id="corps_centre">
				{tpl_corps}
				<div id="pub_bas">
					<center>	{tpl_pub}</center>
				</div>
			</div>
			<div id="corps_bas">&nbsp;</div>
		</div>
		<div id="footer">© 2007 - Tous droits réservés
			<br /><br />
			<div id="partenaires">
				Partenaires : {tpl_partenaires}
			</div>
		</div>
	</div>
	<div id="menu">
		{tpl_menu}
		<div id="pub_gauche">&nbsp;</div>
	</div>
	<div id="logo">&nbsp;</div>
</div>
</body>
</html>


et le css :

/* Style */
html,body{margin:0px;padding:0px;}
body {background: #F6F6F6;background-image: url(/images/fond.jpg);background-repeat: repeat-y;font-family: Arial;font-size: 11px;color: #222222; line-height:11px;}

a {font: 11px Arial; font-weight:bold; color:#7D001E; text-decoration: none;}
a:hover {font: 11px Arial; font-weight:bold; color: #53679d; text-decoration: underline;}
/* bc6a69 */

img {border:0px}
form{ display: inline; margin:0px; padding:0px;}

h1 {font:11px Arial; font-weight:bold; margin:0; display:inline;}
h2 {font-family:Arial; font-size:13px; font-weight:bold; margin:0; display:inline;}
h3 {font-family:Arial; font-size:10px; font-weight:bold; margin:0; display:inline;}


/* Div */
#global {
	/* Position */
	position:relative; left:0px; top:0px; width:1000px; 
	/* Apparence */
	background-image: url(/images/visage.jpg); background-repeat: no-repeat; text-align: left;
}
#logo {
	/* Position */
	position:absolute; left:354px; top:35px; width:532px; height:97px;
	/* Apparence */
	background-image: url(/images/image_05.jpg); background-repeat: no-repeat;
}
#menu {
	/* Position */
	position:absolute; left:0px; top:284px; width:216px; height:389px; float:left;
	/* Apparence */
	background-image: url(/images/image_09.jpg); background-repeat: no-repeat; text-align: left;
}
#menu a{ color: #111111;}
#menu a:hover{ color: #53679d;}
#menu li { list-style-type:none; padding:0px; margin-bottom:0px;}
#menu ul {margin:0; padding:0;}
#menuServices{height:75px; padding-left:30px; margin-top:40px;}
#menuRubriques{height:130px; padding-left:40px;}
#menuBoutiques{height:90px; padding-left:40px;}
#menuBonus{height:60px; padding-left:30px;}

#lienSecretsI{ width:184px; height:162px;}

#page {
	/* Position */
	position:relative; left:216px; top:197px; width:765px; height:426px;
	/* Apparence */
	text-align: left; 
}
#corps {
	/* Position */
	position:relative; width:765px;
	/* Apparence */
	text-align: left;
}
#corps_haut { position:relative; float:left; clear:both; width:765px; height:16px; background-image: url(/images/corps_haut.jpg); background-repeat: no-repeat; }
#corps_centre { position:relative; float:left; clear:both; width:755px; background-image: url(/images/corps_centre.jpg); background-repeat: repeat-y; padding:5px;}
#corps_bas { position:relative; float:left; clear:both; width:765px; height:16px; background-image: url(/images/corps_bas.jpg); background-repeat: no-repeat; }

#pub_gauche { margin-left:10px; margin-top:20px;}
#pub_bas { width:755px; height:95px; text-align:center; vertical-align:center; clear:both; float:left; }
#partenaires { font-size:9px; line-height:9px; margin-bottom:10px; }
#partenaires a { font-size:9px;}

#menu_haut {
	/* Position */
	width:765px; height:104px; float:left; padding-left:5px; margin-bottom:10px; line-height:12px;
	/* Apparence */
	background-image: url(/images/image_07.jpg); background-repeat: no-repeat;
}
#menu_haut b {font:11px Arial; color:#53679d; font-weight:bold;}

#index_boutique { width:380px; height:270px; float:left;}
#index_boutique_titre { width:380px; font:11px Arial; color:#7D001E; text-align:center; clear:both; float:left;}
#index_boutique_description { line-height:11px; width:370px; padding:5px; text-align:center; float:left;}

#index_temoignages { width:375px; height:270px; float:left;}
#index_temoignages_titre { width:375px; height:20px; font:11px Arial; color:#7D001E; text-align:center; clear:both; float:left;}
#index_temoignages_description { width:290px; height:225px; font:11px Arial; padding:40px; text-align:justify; line-height:10px; float:left; background-image: url(/images/concours.jpg); background-repeat: no-repeat;}
#index_temoignages_description a { font:11px Arial; color:#FFFFFF; font-weight:bold;}
#index_temoignages_description b { font:11px Arial; color:#FFFFFF; font-weight:bold;}
#index_temoignages ul { margin:0; margin-left:10px; padding:10px;}
.concours_a {font-size:15px;}
.concours_b {font-size:14px;}
.concours_c {font-size:13px;}
.concours_d {font-size:9px;}

#index_horoscope { width:380px; height:100px; float:left; margin-top:10px;}
#index_horoscope_titre { width:380px; font:11px Arial; color:#7D001E; text-align:center; clear:both; float:left;}
#index_horoscope_description { width:370px; font:11px Arial;  line-height:11px; padding:5px; text-align:justify; float:left;}
#index_horoscope_description a,b { font:11px Arial; color:#53679d; font-weight:bold;}

#index_kamasutra { width:375px; height:170px; float:left; margin-top:10px;}
#index_kamasutra_titre { width:375px; font:11px Arial; color:#7D001E; text-align:center; clear:both; float:left;}
#index_kamasutra_description { line-height:11px; width:355px; font:11px Arial; padding:5px; text-align:justify; float:left;}
#index_kamasutra_description a,b { font:11px Arial; color:#53679d; font-weight:bold;}

#index_dossiers { width:380px; height:170px; float:left; margin-top:10px;}
#index_dossiers_titre { width:380px; font:11px Arial; color:#7D001E; text-align:center; clear:both; float:left;}
#index_dossiers_description { line-height:11px; width:370px; font:11px Arial; padding:5px; text-align:justify;}
#index_dossiers_description a,b { font:11px Arial; color:#53679d; font-weight:bold;}
#index_dossiers_description img { margin:5px;}

#index_divers { width:375px; height:170px; float:left; margin-top:10px;}
#index_divers_titre { width:375px; font:11px Arial; color:#7D001E; text-align:center; clear:both; float:left;}
#index_divers_description { line-height:11px; width:365px; font:11px Arial; padding:5px; text-align:justify; float:left;}
#index_divers_description a,b { font:11px Arial; color:#53679d; font-weight:bold;}


#titre { font:11px Arial; color:#7D001E; width:755px; text-align:center; clear:both;}
.titre { font:11px Arial; color:#7D001E; width:755px; text-align:center; clear:both;}
.multipage { line-height:11px; font:11px Arial; width:755px; text-align:left; padding:10px; clear:both;}
#description { font:11px Arial; line-height:11px; width:755px; text-align:justify;}
#description li { margin-top:5px;}
#description b { font:11px Arial; color:#000000; font-weight:bold;}
#description textarea { font:11px Arial;}
#description img { margin:5px;}
#description img.admin { margin:0;}

.signe { position:relative; z-index:1; width:125px; height:120px; text-align:center; float:left;}
.signe_apercu { width:30px;}

#description .div_sondage { width:400px;float:left;}
#description .div_sondage ul { margin:0; padding:0}
#description .div_sondage li { list-style-type:none;}


#description .div_sondage_bis { width:400px; float:left; background-color:#f5e9ed;}
#description .div_sondage_bis ul { margin:0; padding:0}
#description .div_sondage_bis li { list-style-type:none;}

#description .div_sondage_image { width:355px;float:left;}
#description .div_sondage_image_bis { width:355px; float:left; background-color:#f5e9ed;}
#description .sondage_pourcent { height:11px; margin:0;}
#description .votes { padding:20px; width:715px; clear:both; text-align:center;}

#description .temoignage_valid { padding:20px; width:720px; clear:both; text-align:center;}
#description .t_input_nom { maxlength:150; width:500px;}
#description .t_input_age { maxlength:150; width:500px;}
#description .t_input_mail { maxlength:150; width:300px;}
#description .t_input_titre { maxlength:150; width:690px;}
#description .t_textarea_description { width:750px; height:150px;}

#description .temoignage_gauche_titre { padding-left:15px; padding-top:15px; background-image: url(/images/temoignages/fond_gauche_01.png); background-repeat: no-repeat; width:605px; height:20px;}
#description .temoignage_gauche_description { background-image: url(/images/temoignages/fond_gauche_02.png); background-repeat: x-repeat; padding:25px; width:570px; text-align:justify;}
#description .temoignage_gauche_bas { background-image: url(/images/temoignages/fond_gauche_03.png); background-repeat: no-repeat; width:620px; height:75px;}

#description .temoignage_droite_titre { padding-left:15px; padding-top:15px; margin-left:130px; background-image: url(/images/temoignages/fond_droite_01.png); background-repeat: no-repeat; width:605px; height:20px;}
#description .temoignage_droite_description { margin-left:130px; background-image: url(/images/temoignages/fond_droite_02.png); background-repeat: x-repeat; padding:25px; width:570px; text-align:justify;}
#description .temoignage_droite_bas { margin-left:130px; background-image: url(/images/temoignages/fond_droite_03.png); background-repeat: no-repeat; width:620px; height:75px;}

#description .temoignage_com { padding:0; margin:0}

.kamasutra_apercu { position:relative; z-index:1; width:250px; height:100px; text-align:center; float:left;}
.kamasutra_apercu a { font:11px Arial; color:#53679d; font-weight:bold;}
#description .kamasutra_image { margin:20px; float:right;}

#description .boutique_apercu { position:relative; z-index:1; width:188px; height:250px; text-align:center; float:left;}
#description .boutique_image { margin:20px; float:right;}
#description .achat_image { margin:0; float:right; }

#titre_videos { font:11px Arial; color:#53679d; width:750px; text-align:center; clear:both;}
#titre_videos h2 {font-family:Arial; font-size:11px; font-weight:bold; margin:0; display:inline;}
#description_videos { line-height:11px; font:11px Arial; text-align:justify; width:680px; margin-left:auto; margin-right:auto;}
#description_videos img { margin:5px;}
.telecharger { padding:10px; margin-bottom:20px; text-align:center; width:660px; float:left; clear:both;}

#footer {
	/* Position */
	position:relative; width:765px; float:left;
	/* Apparence */
	clear:both; text-align: center;
}


Comme les utilisateurs de IE 6 peuvent le voir, la page se finie par la publicité au centre (format 468x60 ou 728x90). Or ! cela ne devrait pas être le cas Smiley smile En effet, le vrai bas de page est plus bas avec la fin de cadre rose arrondi, le copyright puis en dessous les liens "Partenaires". Allez sur la page Horoscope par exemple pour voir ce que ça donne.

J'ai tt essayé entre position relative, absolute, height 100% ou fixe... Le seul cas où ça marche c'est lorsque je fixe un height de 1250px par exemple Smiley smile Mais bon... 1 c'est très crade et 2 lorsque la page est moins haute (comme la page Horoscope), ça fait du scrolling dans le vide en bas.

Si quelqu'un pouvait m'aider, je lui serait très très reconnaissant ! Merci
Modifié par LinKuFF (03 May 2007 - 09:32)
Salut LinKuFF !

Je n'ai pas regarder tes css, mais j'ai eu la petite boite de dialogue pour le flash sous IE6. Je pense qu'il serai bien d'appliquer le petit bout de javascript pour chargé la pub en js. Et ainsi aurevoir ce désagrément.

Bon courage pour ton problème Smiley cligne
Super_baloo8 a écrit :
Salut LinKuFF !

Je n'ai pas regarder tes css, mais j'ai eu la petite boite de dialogue pour le flash sous IE6. Je pense qu'il serai bien d'appliquer le petit bout de javascript pour chargé la pub en js. Et ainsi aurevoir ce désagrément.

Bon courage pour ton problème Smiley cligne


Euh la pub est le code fourni directement par ma régie de pub Smiley smile C'est tout en JS justement. Mais il arrive que ça soit en flash, d'où le message Smiley smile
Bonjour,

Juste un oeil sur ton html:
Une grosse divite 
<div id="index_boutique_titre"><h2>Partie Boutique</h2></div><br />

28 blocs pour cette page !! là ou il en faudrait 3fois moins

et pour ta css:
une floatite aigue doublée d'une relativite aigue aussi.

Pourquoi tes blocs corps_haut, corps_centre corps_bas et footer sont en position relative, float: left et clear: both ?(d'ailleurs pourquoi tant de blocs?)

Je pense qu'il faudrait revoir et simplifier ta mise en page
Administrateur
Bonjour,

J'ai édité et supprimé le nouveau lien proposé dans le Sujet.
Contrairement à ce qui a été affirmé précédemment par un modo, il n'y a pas que les images qui nous gênent pour que ce soit visible par les moins de 18 ans.
Pourrais-tu rendre la page la plus neutre possible pour ce qui est du texte (lorem ipsum par exemple plutôt que les termes évocateurs actuels) et remplacer le bandeau par n'importe quelle image de même taille où ne serait pas lisible le futur nom de domaine du site?

Merci d'avance.
Felipe
ghost a écrit :
Bonjour,

Juste un oeil sur ton html:
Une grosse divite 
<div id="index_boutique_titre"><h2>Partie Boutique</h2></div><br />

28 blocs pour cette page !! là ou il en faudrait 3fois moins

et pour ta css:
une floatite aigue doublée d'une relativite aigue aussi.

Pourquoi tes blocs corps_haut, corps_centre corps_bas et footer sont en position relative, float: left et clear: both ?(d'ailleurs pourquoi tant de blocs?)

Je pense qu'il faudrait revoir et simplifier ta mise en page


Cela correspond au placement des images Smiley smile

Si tu vois comment faire moins de div, je suis preneur mais je pense que vu la mise en page actuelle, je ne peux pas faire moins. Par exemple :
- corps_haut : arrondi haut
- corps_centre : tt le texte du corps
- corps_bas : arrondi bas

Comment en faire qu'un seul div ?

Pour les soucis de liens, je vais directement mettre le code dans le post pr éviter tt soucis de lien
Salut,

Sans vouloir te vexer.
Le positionnement de tes blocs est assez particulier, tu mélanges pour un même bloc un positionnement absolute et float: left. tes float: left pour tes blocs corps-... sont injustifiés, ils ont en plus des positions relatives également injustifiées. Ton conteneur global à un width: 1000px (pour optimisation 1024 utiliser 960px max) etc etc ...
Je ne sais pas si c'est pour une pseudo optimisation de référencement mais le code html est assez illogique, la css assortie comporte beaucoup d'erreurs de positionnement ce qui pose effectivement pose des problèmes d'interoperabilité entre les navigateurs ...
Si tu as un schémas de la mise en page que tu souhaites utiliser, je pense que cela serait mieux ...

Bon courage
Modifié par ghost (03 May 2007 - 10:15)
ghost a écrit :
Le positionnement de tes blocs est assez particulier, tu mélanges pour un même bloc un positionnement absolute et float: left. tes float: left pour tes blocs corps-... sont injustifiés, ils ont en plus des positions relatives également injustifiées.

comme tu peux le voir il y a un div page dans lequel je place 3 div "corps". Si on veut que ces div soient les un en dessous des autres, il faut bien mettre un float:left sinon il seront les un à côté des autres sur tte la largeur. Je me trompe peut être ?

Concernant les absolute et relative : les relatives placent le div tel qu'il est dans le code alors que l'absolute place à un endroit précis. Ca je ne vais pas te l'apprendre je pense. Donc si tu as : (corps) (menu) dans ton code mais que visuellement tu veux voir apparaitre (menu) (corps), il faut mettre le (menu) en absolute pour qu'il soit mis de force à un endroit, puis le (corps) en relative pour qu'il se mette gentillement à la suite. D'où cette utilisation d'absolute et relative

ghost a écrit :
Ton conteneur global à un width: 1000px (pour optimisation 1024 utiliser 960px max) etc etc ....

c'est bien la première fois qu'on me dit ça Smiley smile Cela fait 8ans que je fais des designs et un design de 1000px est pil poil pr les écrans 1024. Cela a toujours été bon quelque soit l'écran choisi. Enfin c'est un détails qui n'a pas d'importance dans mon problème dans tous les cas.

ghost a écrit :
Je ne sais pas si c'est pour une pseudo optimisation de référencement mais le code html est assez illogique, la css assortie comporte beaucoup d'erreurs de positionnement ce qui pose effectivement pose des problèmes d'interoperabilité entre les navigateurs ...

Tu te doutes bien que c'est pour le référencement Smiley smile Sinon je ne m'amuserais pas à mettre le contenu Texte en haut, puis le menu tt en bas alors que dans une structure standard c'est le contraire... Il y a forcement une erreur quelque part vu que le bas de page ne fonctionne pas. Concernant le reste de la page, même si des optimisations sont sans doute possible, le doute est valid XHTML 1.0 donc je ne pense pas que c'est aussi crade que tu le dis Smiley smile

Merci pour tes remarques (aucun soucis, de tte façon je suis là pour un problème, je vais pas raler pour les réponses)... mais tu n'aurais pas une petite idée sur le morceau de code qui pose pb plutot ?
Modifié par LinKuFF (03 May 2007 - 10:33)
Re,

Merci d'avoir bien compris le sens de mes propos Smiley biggrin
Pour ce qui cloche, oui et non ... En fonction de ce que je me souviens de ta mise en page, je serais parti sur un code de ce type:
		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

			

<head> 

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <style type="text/css">
*{margin: 0; padding: 0;}

#conteneur{
	width: 960px;
	margin: 0 auto 0;
	position: relative;
	overflow: hidden;
	background: lime;
}
 
#head{
	position: absolute;
	left: 300px;
	top: 10px;
	width: 600px;
	height: 75px;
	background: pink;

}
 
#gauche{
	float: left;
	width: 150px;
	overflow: hidden;
	background: yellow;
}

#centre{
	margin-top: 85px;
	background: red;
	margin-left: 150px;

}

#centre_h{
	height: 50px
}

#centre_m{
	overflow: hidden;
	border: 1px solid black;
		height: 1%;

}

#centre_b{
	height: 75px;
	
}

.centre_m_g{
	float: left;
	display: inline;
	width: 380px;
	margin: 0 10px 10px 10px;
	overflow: hidden;
	background: #fff;
	
}

.centre_m_d{
	float: right;
	display: inline;
	width: 380px;
	margin: 0 10px 10px 10px;
	overflow: hidden;
	background: #fff;
}

#menu{
	width: 100%;
	margin-top: 85px;
	background: orange;
}

#footer{
	clear: both;
	height: 50px;
	background: blue;
}

p{
	margin: 0 15px 0 15px;
}

h1{
	text-align: center;
	font-size: 1.2em;
	margin: 20px 0 20px 0;	
}
  </style>
</head>
<div id="conteneur">
	<div id="gauche">
		<div id="menu">
		<h1>Menu</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce elementum lorem ac quam. In convallis urna eget ipsum. Duis ut enim ut tortor adipiscing vestibulum. Integer tincidunt sollicitudin massa. Sed nibh est, lobortis id, nonummy id, placerat a, est. 
		</p>
		</div>
	</div>
	<div id="centre">
		<div id="centre_h">
		<h1>Centre haut</h1>
		</div>
		<div id="centre_m">
		<h1>Centre milieu</h1>
			<div class="centre_m_g">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce elementum lorem ac quam. In convallis urna eget ipsum. Duis ut enim ut tortor adipiscing vestibulum. Integer tincidunt sollicitudin massa. Sed nibh est, lobortis id, nonummy id, placerat a, est. Suspendisse fringilla est ac eros. Maecenas eu mauris ac pede mattis tempor. Nulla risus arcu, adipiscing eget, faucibus in, tempor vel, elit. 
			</p>
			</div>
			<div class="centre_m_d">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce elementum lorem ac quam. In convallis urna eget ipsum. Duis ut enim ut tortor adipiscing vestibulum. Integer tincidunt sollicitudin massa. Sed nibh est, lobortis id, nonummy id, placerat a, est. Suspendisse fringilla est ac eros. Maecenas eu mauris ac pede mattis tempor. Nulla risus arcu, adipiscing eget, faucibus in, tempor vel, elit. 
			</p>
			</div>
			<div class="centre_m_g">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce elementum lorem ac quam. In convallis urna eget ipsum. Duis ut enim ut tortor adipiscing vestibulum. Integer tincidunt sollicitudin massa. Sed nibh est, lobortis id, nonummy id, placerat a, est. Suspendisse fringilla est ac eros. Maecenas eu mauris ac pede mattis tempor. Nulla risus arcu, adipiscing eget, faucibus in, tempor vel, elit. 
			</p>
			</div>
			<div class="centre_m_d">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce elementum lorem ac quam. In convallis urna eget ipsum. Duis ut enim ut tortor adipiscing vestibulum. Integer tincidunt sollicitudin massa. Sed nibh est, lobortis id, nonummy id, placerat a, est. Suspendisse fringilla est ac eros. Maecenas eu mauris ac pede mattis tempor. Nulla risus arcu, adipiscing eget, faucibus in, tempor vel, elit. 
			</p>
			</div>		
		</div>
		<div id="centre_b">
		<h1>Centre bas</h1>
		</div>
		<div id="footer">
		<h1>Footer</h1>
		</div>		
		
	</div>

	<div id="head">
	<h1>Head</h1>
	</div>
</div>
</body>

</html>


Juste pour une idée!
LinKuFF a écrit :

Si on veut que ces div soient les un en dessous des autres, il faut bien mettre un float:left sinon il seront les un à côté des autres sur tte la largeur. Je me trompe peut être ?

C'est justement l'inverse...
LinKuFF a écrit :

Concernant les absolute et relative : les relatives placent le div tel qu'il est dans le code alors que l'absolute place à un endroit précis. Ca je ne vais pas te l'apprendre je pense.

Pas besoin de position:relative pour laisser le bloc à sa place. Il suffit de ne pas déclarer de position.

LinKuFF a écrit :

Cela fait 8ans que je fais des designs et un design de 1000px est pil poil pr les écrans 1024.

On conseille effectivement une largeur de 960px puisqu'on ne peut pas savoir de quelle largeur seront entre autres les ascenseurs. De plus, je crois que sur mac, il est assez compliqué de mettre une fenêtre en plein écran.
<nicolas> a écrit :

C'est justement l'inverse...

Dans le principe oui mais en sachant que les 3 blocs sont dans un conteneur commun, comment fais-tu un retour à la ligne sans float:left ?

<nicolas> a écrit :

Pas besoin de position:relative pour laisser le bloc à sa place. Il suffit de ne pas déclarer de position.

oui relative étant la valeur par défaut Smiley smile

<nicolas> a écrit :

On conseille effectivement une largeur de 960px puisqu'on ne peut pas savoir de quelle largeur seront entre autres les ascenseurs. De plus, je crois que sur mac, il est assez compliqué de mettre une fenêtre en plein écran.

J'ai fait mes tests sur plusieurs écrans différents et plusieurs navigateurs différents Smiley smile Firefox, Ie, mozilla, safari... le tout sur PC et Mac justement. Je n'ai jamais rencontré le pb. 960px ça veut dire une barre de scroll large de 64px... un peu bourrin Smiley cligne
Sujet clos
Aller à