28221 sujets

CSS et mise en forme, CSS3

[résolu]Ma liste invisble

Bonjour

pourquoi je ne vois pas ma liste
http://www.independza.com/client/xerox/
#header ul{
position: absolute;
bottom: 0;
right: 0;
margin: 0;	
list-style: none;
}
#header li {
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
	}
#header a:link, #header a:visited {
	float: left;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 10px 4px 10px;
	padding-bottom: 2px;
	text-decoration: none;
	color: #FFFFFF;
	}
#header a.active:link, #header a.active:visited, #header a:hover {
	border-bottom: 4px solid #990000;
	padding-bottom: 2px;
	color: #990000;
	}

Modifié le 03 Nov 2004 - 16:35
#header ul{
position: absolute;
right: 0;
margin: 0;	
list-style: none;
}


J'enlèverais le bottom: 0; déjà non ?
On voit ta liste mais elle est en bas du coup !
Modifié le 02 Nov 2004 - 23:18
j'ai fais ca
#header h1{
	text-align: right;
	background-image: url(../images/titre2_droit.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 150px;
	padding: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: underline;
}
#header ul{
list-style: none;
}
#header li {
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
	}
#header a:link, #header a:visited {
	float: right;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 10px 4px;
	padding-bottom: 2px;
	text-decoration: none;
	color: #FFFFFF;
	}
#header a.active:link, #header a.active:visited, #header a:hover {
	border-bottom: 4px solid #990000;
	padding-bottom: 2px;
	color: #990000;
	}


mais maintenant la liste est en bas en dessous du cadre
À première vue, il n'y a pas de raison d'avoir un float (en rouge)

#header a:link, #header a:visited {
	[#red]float: right;[/#]
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 10px 4px;
	padding-bottom: 2px;
	text-decoration: none;
	color: #FFFFFF;
	}
j'ai fais la modification
je te rejoute le code du header
#header {
	background: url(../images/titre2.png) no-repeat left top;
	height: 150px;
	width: 100%;
	} 
#header h1{
	text-align: right;
	background-image: url(../images/titre2_droit.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 150px;
	padding: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: underline;
}
La balise <blockquote> sert généralement à citer un texte en "bloc", le dit texte provenant d'une tierce source. Quoi qu'il en soit, je ne vois pas la pertinence de l'utiliser ici.

Dans la structure de ton document HTML, le contenant <div id="droite"> arrive avant <div id="gauche"> tandis que dans la présentation c'est l'inverse. Il serait préférable de corriger celà (dans le HTML).

Je crois qu'il n'est pas permis d'utiliser la balise <address> comme enfant de <li>. Peut entrainer erreur de validation. (block level element inside an inline element).

À vérifier...
Modifié le 03 Nov 2004 - 07:22
Stephan a écrit :
La balise <blockquote> sert généralement à citer un texte en "bloc", le dit texte provenant d'une tierce source. Quoi qu'il en soit, je ne vois pas la pertinence de l'utiliser ici.

Dans la structure de ton document HTML, le contenant <div id="droite"> arrive avant <div id="gauche"> tandis que dans la présentation c'est l'inverse. Il serait préférable de corriger celà (dans le HTML).

Je crois qu'il n'est pas permit d'utiliser la balise <address> comme enfant de <li>. Peut entrainer erreur de validation. (block level element inside an inline element).

À vérifier...


c'est pour ca que je ne vois pas ma liste ?
bolo a écrit :

c'est pour ca que je ne vois pas ma liste ?

Non! C'est plutôt une question de sémantique.

Voici pour ton problème.

Ta liste est invisible parce que la couleur des liens est "blanc".

#header a:link, #header a:visited { 
   font-size: 10px; 
   line-height: 14px; 
   font-weight: bold; 
   margin: 0 10px 4px; 
   padding-bottom: 2px; 
   text-decoration: none; 
   [#red]color: #FFFFFF;[/#] 
}


Ça règle le problème dans IE mais pour Firefox (et les autres navigateurs je suppose) il faut supprimer height: 150px; qui force ta liste dessous l'image.

#header { 
   background: url(../images/titre2.png) no-repeat left top; 
   [#red]height: 150px; [/#]
   width: 100%; 
}


Et finalement ajouter un clear: both; pour s'assurer que le #pied reste bien en bas de page (dans Firefox pour le moins).

#pied { 
   [#blue]clear: both; [/#]
   width: 100%; 
   font-size: 12px; 
   color: #CCCCCC; 
   bottom: 0px; 
   border-top-width: thin; 
   border-top-style: solid; 
   border-top-color: #990000; 
}


Il y a une erreur de typo (;) dans font-family.

body {
   margin: 0; 
   padding: 0; 
   text-align: center; 
   font-family: 'Trebuchet MS',Arial,Helvetica,Verdana,sans-serif; [#red];[/#]
   background-color: #FFFFFF; 
}


Voilà! [résolu]
Modifié le 03 Nov 2004 - 07:27
j'ai fais les modifications mais ma liste est toujours en dessous de mon images
est ce que c'est du a mon <h1>
#header h1{
	text-align: right;
	background-image: url(../images/titre2_droit.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 150px;
	padding: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: underline;
}


Pourquoi une citation ne peut contenir que du texte ?
je peux le remplacer par quoi ,?
Modifié le 03 Nov 2004 - 13:23
Administrateur
bolo a écrit :

Pourquoi une citation ne peut contenir que du texte ?
je peux le remplacer par quoi ,?

Blockquote ne peut contenir que des blocs (p, etc.)
Que veux-tu faire exactement ?
(Pour une citation en-ligne, tu peux utiliser <q> par exemple.)
Raphael a écrit :

Blockquote ne peut contenir que des blocs (p, etc.)
Que veux-tu faire exactement ?
(Pour une citation en-ligne, tu peux utiliser <q> par exemple.)


je voulais contenir un bloc mais j'ai fais autrement et j'ai le meme résultat :)

si non pour la liste , il y a un moyen qu'elle soit visible au dessus de <h1>
Administrateur
bolo a écrit :

je voulais contenir un bloc mais j'ai fais autrement et j'ai le meme résultat :)

C'est justement ça le problème : il ne faut pas utiliser les balises pour leur aspect visuel mais pour leur fonction.
Si c'est uniquement pour avoir un bloc décallé à gauche, il suffit d'utiliser margin-left et non d'utiliser une balise qui te donne un pseudo-aspect qui va changer selon les navigateurs.
j'ai fais ca sans utiliser de balises
html.
<div id="droite">
<h2>Contact</h2>
Vous souhaitez nous faire part d'une demande , d'une réclamation ou d'une remarque ? Contactez-nous :   
<ul><li>par téléphone au 0 825 357 753,</li>
<li>par courrier en écrivant à :<address>
Xerox, The Document Company<br> 
4 rue Nicolas Robert <br>
93607 AULNAY s/s BOIS
</address></li>
<li> par e-mail en remplissant <a href="contact.htm" onclick="window.open(this.href, 'Nous Contacter', 'height=300, width=350, top=100, left=100, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=no, status=no'); return false;">ce formulaire</a></li>
</ul>
</div>


css.
#droite{
	width: 35%;
	font-size: 12px;
	float: right;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #990000;
	padding: 0;
	margin-top: 5px;
}

#droite address{
	background-color: #FFFFFF;
	border: 1px dashed #CCCCCC;
	font-size: 11px;
	font-style: normal;
	text-align: justify;
	margin: 0px;
	padding: 0px;
}
h2 {
	color: #FFFFFF;
	font-size: 14px;
	background-color: #CC0000;
	margin: 0px;
	padding: 0px;
}


je pense que c'est correct non ?
ma liste est visible maintenant j'ai enlevé la taille dans la balise h1

j'ai fais ca
<div id="header">
<img src="images/titre2_droit.png" style="float:right">
<h1>Xerox Antilles</h1>
<ul>
	<li><a href="#">brie</a></li>
	<li><a href="#" class="active">cheddar</a></li>
	<li><a href="#">gorgonzola</a></li>
	<li><a href="#">colby</a></li>
	<li><a href="#">ricotta</a></li>
	<li><a href="#">mascarpone</a></li>
</ul>
</div>


c'est correct sémentiquement ?
Sujet clos
Aller à