28221 sujets

CSS et mise en forme, CSS3

[Resolu]Listes a puce sous opera

Salut,
en allant voir la dessus, j'ai fait un menu horizontal qui marche nikel sous IE comme sous FF mais sous opera, ca bug et le menu est vertical. Smiley decu

voici mon code html:

<div id="global">
	<div id="header">
		<a href="#"><img id="logo" src="pics/logo/logoGauche.png" alt="" /></a>

		<p id="slogan">&quot;Le spécialiste poids lourds<br />et véhicules de travaux publiques&quot;</p>
		
		<ul id="menu">
			<li><img src="pics/menu/menuCamions.png" alt="Camions" /></li>
			<li><img src="pics/menu/menuTracteurs.png" alt="Tracteurs" /></li>
			<li><img src="pics/menu/menuSemis.png" alt="Semis" /></li>
			<li><img src="pics/menu/menuDivers.png" alt="Divers" /></li>
		</ul>
	</div>
</div>

et ma css:

*{
	margin:0;
	padding:0;}
img{
	display:block;
	border:0;}
#header{
	height:90px;
	background:#ff6600;}
#logo{
	float:left;
	position:absolute;
}
#slogan{
	width:274px;
	height:57px;
	font-weight:bold;
	font-size:17px;
	text-align:center;
	padding-top:14px;
	border-bottom:1px solid #fff;
	margin-left:213px;
	position:absolute;}
#menu{
	float:right;
	border-bottom:1px solid #fff;}
#menu li{
	list-style:none;
	float:left;}

J'ai beau chercher, je ne trouve rien. Et que je mette aux puces un float:left ou un display:inline, ca ne change rien.

Help!
Merci d'avance
Modifié par YerebY (03 Apr 2005 - 14:50)
Nikel ca marche.
Par contre maintenant j ai un espace au dessus de l image a gauche.
je vais essayer de trouver, mais si tu as des infos n'hesite pas
J'ai reussi en enlevant le position:absolute de l'image a gauche mais maintenant sous IE , le texte est decalé sur la droite...
RAAAAAA Smiley bawling
Il n'est plus en absolute, et le float c pour que le slogan soit placé sur la meme ligne.
Sans le float il passe sous l image
Comme quoi c'est pas faux de dire que la nuit porte conseil.
En effet, j'ai résolu mon problème en enlevant l'absolute du comptoir euh... du slogan pour le remplacer par un float: left.
Ce qui après coup me parait super logique...
Je vous remets la css:

*{
	margin:0;
	padding:0;}
img{
	display:block;
	border:0;}
#header{
	height:90px;
	background:#ff6600;}
#logo{
	width:213px;
	height:90px;
	float:left;}
#slogan{
	width:274px;
	height:57px;
	font-weight:bold;
	font-size:17px;
	text-align:center;
	padding-top:14px;
	border-bottom:1px solid #fff;
	float:left;}
#menu{
	width:288px;
	float:right;
	border-bottom:1px solid #fff;}
#menu li{
	list-style:none;
	float:left;}


Merci à tous les deux.
@+
Modifié le 18 Jan 2005 - 10:06
Petite modification:
j'ai remplacé le float:right du #menu par un left.
Ca ne change rien à l'affichage, mais c'est plus logique dans le code.
Sujet clos
Aller à