28172 sujets

CSS et mise en forme, CSS3

IE (toujours)

Bonjour,

J'ai un petit problème avec ma colonne latérale, tout a l'air de bien s'afficher sur Firefox, mais Internet Explorer fait sa tête.

Firefox :

http://www.elektrochoc-2009.com/ressources/firefox.jpg

Internet Explorer :

http://www.elektrochoc-2009.com/ressources/IE.jpg

Je vous donne, le code css de la sidebar : 

div#sidebar {
	float: right;
	width: 200px;
}

div#sidebar h3 {
	display: block;
	margin: 2px 0 0 5px;
	border-bottom: 1px solid black;
	color: black;
	font: small-caps 1.1em/30px Georgia,serif;
	text-align:left;
	padding-left: 30px;
}


div#sidebar h3#jukebox {
	background: url(images/jukebox.png) no-repeat left;
}
div#sidebar h3#news {
	background: url(images/news.jpg) no-repeat left;
}

div#sidebar h3#forum {
	background: url(images/forum.gif) no-repeat left;
}


div#sidebar ul.list {
	margin-bottom: 20px;
	padding: 0;
	list-style: none;
	text-align: right;
}


div#sidebar ul.list li a {
	display: block;
	height: 30px;
	line-height: 30px;
	padding-left: 35px;
	margin: 2px 0 0 5px;
	border-bottom: 1px solid black;
	color: #f1a000;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}


div#sidebar ul.list li a:hover {
	background-position: left bottom;
	color: #f1a000;
}


et le code Html : 

<div id="sidebar">
	<ul class="list">
		<li><h3 id="jukebox">Jukebox</h3></li>
	</ul>

	<object type="application/x-shockwave-flash" data="music/player_mp3_multi.swf" width="192" height="100" >
		<param name="movie" value="music/player_mp3_multi.swf" />
		<param name="wmode" value="transparent" />
		<param name="FlashVars" value="config=music/config_multi.txt" />
	</object>
					
					
	<div id="newsLeft">	
		<ul class="list">
			<li><h3 id="news">Dernières nouvelles</h3></li>
			<!-- BEGIN newsleft -->
			<li><a href="actu.php?id={newsleft.ID}" class="navig" title="{newsleft.INFO}">{newsleft.TITRE}&nbsp;&nbsp;</a></li>
			<!-- END newsleft -->
		</ul>
	</div>

	<div id="topicsLeft">	
		<ul class="list">
			<li><h3 id="forum">Dernières sujets</h3></li>
			<!-- BEGIN topicsleft -->
			<li><a href="#" title="{topicsleft.INFO}">{topicsleft.TITRE}&nbsp;&nbsp;</a></li>
			<!-- END topicsleft -->
		</ul>
	</div>
</div>



Si vous trouvez quelques chose qui ne va pas ! Car je ne suis pas très doué en css.

Merci d'avance pour vos réponses.

Spirit
Modifié par Spirit505050 (07 Mar 2009 - 14:38)
salut, essaie de changer ton padding-left

div#sidebar h3 {
	display: block;
	margin: 2px 0 0 5px;
	border-bottom: 1px solid black;
	color: black;
	font: small-caps 1.1em/30px Georgia,serif;
	text-align:left;
	padding-left: 30px; /* <--- ici */
}
Bonjour,

Ce padding-left sert a ce que le titre ne soit pas superposé avec son icône.
Et donc ça change rien mise part la position du titre.
Oui c'est sure : ici ... Encore en phase de développement intensif, avec de très nombreux bugs.
Modifié par Spirit505050 (07 Mar 2009 - 22:32)
Salut,

Vite fait, un padding 0 5px à global a supprimer et verifier les margin à ta class list margin: auto auto 20px 30pt me parait un sérieux mélange Smiley biggol
teste avec un margin: 0 tu verras bien.
Bon développement Smiley cligne
Bonjour,

Ce n'est pas capital, mais le Doctype XHTML 1.1 est utilisé à mauvais escient. Un ou deux articles dans la rubrique «Apprendre» expliquent pourquoi.
Bonjour,

Merci pour vos réponses. J'ai tenté quelques trucs, mais rien ne semble vouloir changer Internet Explorer.
Par contre, j'ai remarqué, que si je supprime padding: 0 de la classe div#sidebar ul.list, alors Firefox prend la même mise en page foireuse que Internet Explorer, peut-être une piste.

Si vous voyez ...

Sinon pour le Doctype XHTML 1.1, c'est ma seul erreur W3C, je n'arrive pas à la supprimer, je crois que cela vient de l'encodage notepad, pourtant, je suis bien en UTF-8 sans BOM.

Merci ! Smiley biggrin
Bonjour ...

Désolé de ma "nullité" mais je n'ai réussi a solutionner aucun des deux problèmes.

#  Error  Line 1, Column 0: character "&#65279;" not allowed in prolog.

&#65279;&#65279;&#65279;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml

&#9993;
# Error Line 1, Column 3: XML Parsing Error: Start tag expected, '<' not found.

&#65279;&#65279;&#65279;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml


Merci.
Modifié par Spirit505050 (10 Mar 2009 - 12:09)
Sujet clos
Aller à