28173 sujets

CSS et mise en forme, CSS3

Difference de cadrage entre Firefox et IE...

Bonjour,

Encore une question de debutant : je ne mets les mains dans le CSS que depuis moins d'une semaine...

Mon probleme ? Decalage d'une barre de navigation, qui est parfaitement alignee à droite dans IE, mais dont un bouton et demi sont bouffés dans FireFox...

Le texte aussi se perd sur la droite de la page...

Plutôt que de passer une bonne semaine à trouver, je me permet de vous demander de l'aide...

Voilà mon code (certainement perfectible Smiley biggrin ) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>Fixed header and left-sidebar</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 150px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 80px;
	width: 100%;
}
DIV#header {
	LEFT: 150px;
	WIDTH: 100%;
	POSITION: absolute;
	TOP: 0px;
	HEIGHT: 80px;
	background-color: #00869C;
}

DIV#left-sidebar {
	LEFT: 0px;
	WIDTH: 150px;
	POSITION: absolute;
	PADDING-BOTTOM: 50px;
	TOP: 0px;
	HEIGHT: 100%;
	background-color: #00869C;
	z-index: 1;
}


@media Screen    
{
UNKNOWN {
	POSITION: fixed
}
UNKNOWN {
	POSITION: fixed
}
    }
 HTML BODY {
	OVERFLOW: hidden
}
 HTML DIV#content {
	OVERFLOW: auto;
	HEIGHT: 100%;
	padding-left: 40px;
	padding-right: 20px;
}
#navcontainer
{
	margin: 0px;
	padding: 0px;
	height: 20px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	top: 80px;
}

#navcontainer ul
{
	margin: 0px;
	list-style-type: none;
	text-align: center;
	right: auto;
	bottom: 0px;
	float: right;
	padding-bottom: 0px;
	height: 20px;
	position: relative;
	background-image: url(images/barre.gif);
}

#navcontainer ul li { float: left; }

#navcontainer ul li a
{
	text-decoration: none;
	background: url(fichiers/bouton-off.gif) no-repeat top left;
	font-size: 12px;
	float: left;
	margin: 0px;
	height: 20px;
	width: 100px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#navcontainer li a:hover
{
background: url(fichiers/bouton-on.gif) no-repeat left top;
font-color: #FFFFFF;
color: #FFFFFF;
}
#navcontainer li a:visited
{
color: #AEAE00;
}
#banniere {
	position:relative;
	width:100%;
	height:60px;
	z-index:2;
}
#barnav {
	position:relative;
	width:100%;
	height:20px;
	z-index:3;
	background-image: url(images/barre.gif);
}
</STYLE>
<META content="MSHTML 6.00.2800.1555" name=GENERATOR>

</HEAD>
<BODY>
<DIV id=header>
<div id="banniere">
  <div align="right"></div>
</div>  

<div id="barnav">
<div id="navcontainer">


                <ul id="navlist">
                  <li><a href="#">Lien 1 </a></li>
                  <li><a href="#">Lien 2 </a></li>
                  <li><a href="#">Lien 3 </a></li>
                  <li><a href="#">Lien 4 </a></li>
                  <li><a href="#">Lien 5 </a></li>
                  <li><a href="#">Lien 6 </a></li>
                </ul>
</div>
</div>

</DIV>
<DIV id=left-sidebar>
<img src="images/logo.gif" alt="Logo" width="150" height="100">
MENU GAUCHE
</DIV>
<DIV id=content>
<H1>Titre<SPAN></SPAN></H1>
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis  risus et purus luctus lobortis. Mauris nunc sem, egestas convallis,  nonummy eu, convallis sed, nisl. Donec auctor vulputate massa. Ut a  tortor. Donec at nisl. Sed mollis, orci in dignissim dictum, neque leo  rutrum massa, in sollicitudin pede ipsum vitae sem. Vestibulum  fringilla. Quisque accumsan malesuada pede. Praesent malesuada tellus  vitae nisi. Suspendisse sed lacus. Fusce eget arcu. Curabitur lacinia  turpis a enim. Nunc et tortor. </p>
<p align="justify">Aenean vestibulum ultricies libero. Suspendisse non magna eget diam  sollicitudin pretium. Suspendisse dictum lectus quis dolor. Morbi  sapien augue, iaculis id, fringilla ut, suscipit nec, erat. Duis  scelerisque ligula vitae justo. Etiam non lorem. Donec felis. Fusce  varius ultricies nulla. Proin ut arcu non magna iaculis pretium. Nunc  ut est nec est pharetra imperdiet. Pellentesque venenatis mollis dui. </p>
</DIV>
</BODY></HTML>


Merci d'avance Smiley cligne
Bonjour,

La source du problème est simple :
- #header fait 100% du body en largeur
- #barnav fait 100% de #header donc 100% du body en largeur
- tu forces #header à un décalage de 150px par rapport a body
- il en résulte que #header comme #barnav déborde de body de 150px
- tu masques ce qui déborde de body avec overflow:hidden
- donc en définitive tu empêches l'affichage des 150px les plus à droite de #barnav et #header

Il y a beaucoup de façon d'envisager la solution. Cela dépendra de tes contraintes. Par ailleurs ton code actuel n'est pas "idéal" ce qui ne donne pas très envie de repartir dessus. Ceci étant il faut bien avancer, je te propose un correctif a minima qui je l'espère répondra à tes attentes. Les modifs ne concernent simplement body et header :

BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 150px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
}

DIV#header {
	WIDTH: 100%;
	HEIGHT: 80px;
	background-color: #00869C;
}
Merci Xavier pour ta reponse rapide Smiley smile

Le premier probleme est reglé, mais j'ai maintenant un probleme en vertical, sur les deux navigateurs : je ne vois plus le bas de la page... Smiley decu

Le probleme semble reglé dans IE et FireFox avec :

BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 150px;
	[b]PADDING-BOTTOM: 80px;[/b]
	MARGIN: 0px;
}

DIV#header {
	WIDTH: 100%;
	HEIGHT: 80px;
	background-color: #00869C;
}

Modifié par Jeff06 (26 Jul 2006 - 14:19)
Sujet clos
Aller à