28172 sujets

CSS et mise en forme, CSS3

Petit problème de synchronisation Firefox et IExplore 8 [résolu]

bonjour,

je tente de faire une page assez simple pour une amie, page qui apparaît correctement (disons plutôt, comme ce à quoi je m'attends) dans Firefox mais pas dans Internet Explorer.
En fait, dans l'environnement menu, j'essaie de positionner une liste horizontale à droite et un nom à gauche (nom qui n'apparaît pas bien dans IE) mais il se peut que ma méthode soit problématique: en fait j'ai créé une liste 2 <ul2> qui n'est pas reconnue.

Peut-être auiez-vous quelques conseils pour la synchronisation. Merci

Pluton

Voici le code html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>nom du site</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="outer">
	<div id="header">
    	<div id="headercontent">
      		<h1>nom du site</h1>
	    </div>
	</div>
  	<div id="menu">
  		<ul2>
    		<li><a href="index.html">artiste</a></li>
    	</ul2>
    	<ul>
   			<li><a href="regarder.html">regarder</a></li>
   			<li><a href="lire.html">lire</a></li>
		</ul>
	</div>
 	<div id="content">
		<p>
		texte texte texte texte texte texte texte texte
		</p>
	</div>
</div>
</body>
</html>


avec le code CSS:


*
{
padding: 0em;
margin: 0em;
}


body,input
{
font-size: 11pt;
font-family: Garamond ;
color: #ffffff;
}

p
{
line-height: 1.1em;
text-align: justify;
color: #000000;
text-indent:25px;
}

a
{
color: #cdcdcd;
text-decoration: none;
}

#outer
{
position: relative;
width: 1000px;
height: 60px;
border: solid 0px #cdcdcd;
background-color: #ffffff;
margin: 0 auto;
}

#header
{
position: relative;
width: 100%;
height: 7.0em;
background: #fff;
border-bottom: solid 3px #cdcdcd;
}

#headercontent
{
position: absolute;
bottom: 0em;
color: #cdcdcd;
left: 60px;
width: 153px;
}

#headercontent h1
{
font-weight: normal;
color: #cdcdcd;
}

#menu
{
background: #ffffff;
color: #cdcdcd;
height: 3.5em;
font-size: 1em;
width: 100%;
}

#menu ul
{
float: right;
position: relative;
color: #cdcdcd;
}

#menu ul2
{
float: left;
left: 60px;
position: relative;
color: #cdcdcd;
}

#menu ul li
{
position: relative;
display: inline;
color: #cdcdcd;
}

#menu ul2 li
{
position: relative;
display: inline;
color: #cdcdcd;
}

#menu ul li a
{
padding: 0em 3em 0em 0em;
display: inline;
color: #cdcdcd;
font-size: 1.5em;
}

#menu ul2 li a
{
padding: 0em 0em 0em 0em;
display: inline;
color: #cdcdcd;
font-size: 1.5em;
}

#menu ul li a:hover
{
color: #606060;
}

#menu ul2 li a:hover
{
color: #606060;
}

#global { 
  position:relative; 
  left: 50%;  
  top: 50%; 
  width: 500px; 
  height: 333px;
  background: #ffffff;
  margin-top: 0px; /* moitié de la hauteur */ 
  margin-left: -350px; /* moitié de la largeur */ 
  border: 0px solid #000; 
}

#content
{
position: relative;
background: #ffffff;
left: 50%;  
top: 50%; 
width: 700px; 
height: 431px;
background: #ffffff;
margin-top: 0px; /* moitié de la hauteur */ 
margin-left: -350px; /* moitié de la largeur */ 
border: 0px solid #000; 
}
Bonjour,

ul2 n'étant ba une balise existante, ton code est invalide. Pour créer une second liste au comportement différent, il est préférable d'utiliser des class ou des id.

De plus, une liste comportant un seul élément n'est pas une liste, c'est un paragraphe (un liste le devient quand elle a au minimum 2 éléments).

Ton code serait plus correct ainsi : 
<div id="menu">
  <h2><a href="index.html">artiste</a></h2>
  <ul>
    <li><a href="regarder.html">regarder</a></li>
    <li><a href="lire.html">lire</a></li>
  </ul>
</div>


Pour ce qui est du positionnement, on est bien d'accord qu'il ne s'agit pas d'alignement (auquel cas tu devrais utiliser text-align) mais bien de positionner "artiste" à côté de "regarder" ?

ps. : synchronisation n'est pas un terme approprié (qui sous entend une communication), dans ton cas on parlerait plutôt de compatibilité ou d'intéropérabilité.
Modifié par Laurie-Anne (10 May 2010 - 08:44)
bonjour et merci pour cette réponse. En fait, j'ai regardé la proposition mais elle génère un décalage vertical au niveau du bloc aligné à droite "regarder lire". Il faut que je regarde en détail les options d'alignement du texte. Sinon, j'associe en image ce que je cherche à faire. (c'est ce que j'obtiens dans firefox avec le code initialement proposé). upload/13503-SiteArt.png
pluton a écrit :
En fait, j'ai regardé la proposition mais elle génère un décalage vertical au niveau du bloc aligné à droite "regarder lire".
Est-ce que les marges par défaut de l'élément <ul> ont été prises en compte ?
a écrit :
Est-ce que les marges par défaut de l'élément <ul> ont été prises en compte ?


oui, apparemment, parce que quand je les modifie, elles changent. Apparemment, firefox est en accord avec Dreamweaver, mais pas I-Explorer. Je continue à chercher. Merci
finalement, j'ai fait ce qui suit:


<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="index.html">artiste</a></li>
<li class="bouton_droite"><a href="contact.html">contacter</a></li>
<li class="bouton_droite"><a href="blog.html">blog</a></li>
<li class="bouton_droite"><a href="lire.html">lire</a></li>
<li class="bouton_droite"><a href="regarder.html">regarder</a></li>
</ul>


avec :

ul#menu_horizontal { 
width : 940px;
height : 25px;
color: #cdcdcd;
list-style : none; 
}
ul#menu_horizontal li {
margin-left : 60px;
}
li.bouton_gauche {
float : left;
width : 350px;
font-size: 1.5em;
display: inline;
}
li.bouton_droite {
float : right;
font-size: 1.5em;
display: inline;
padding : 0em 0em 0em 0em;
}


c'est pas mal même s'il reste des choses bizarres que je parviens à contrôler. Merci
Modifié par pluton (23 May 2010 - 03:47)
Sujet clos
Aller à