18104 sujets

Questions générales et questions de débutants

[Résolu] Problème <section> css

Bonjour tout le monde !

Actuellement je fait me la main sur une page en html5 & css en tant que bon débutant, voir plus bidouilleur, un petit problème ce pose à moi, je n'arrive pas à faire fonctionné mes propriétés css sur ma balise <section>. Ci quelqu'un à une idée sur le problème... sa à l'air de venir du bloc suivant mais pas sur Smiley ohwell .

Alors je me pose la question ci l'une des propriété du block div suivant ne bloque pas la chose.

Serveur test : dovakhin.dofus.free.fr

<!DOCTYPE html>
<html lang="fr">
	<!-- Référencement --> 
<!-- Inutile pour mon PB -->
	<!-- Référencement -->
	<!-- Corps -->
	<body id="backgroundbody">
		<!-- En-tête -->
		<header id="header">
			<nav id="menuprincipal">
				<ul id="menuprincipal">
					<a href="http://dovakhin.dofus.free.fr/index.html">
						<li style="padding-right:10px; padding-left:10px; border-bottom: 5px solid #6A009B;">
							<img src="http://dovakhin.dofus.free.fr/image/template/header/home.png" align="center" valign="center">
						</li>
					</a>
					<li id="button" style="padding-left:10px;padding-right:10px;">&Eacute;dito</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">L'Auteur</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">Galerie</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">Archive</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">Store</li>
					<li id="button" style="padding-left:10px;padding-right:10px;margin-right:30px;float:right;">Contact</li>
					<li id="button" style="padding-left:10px;padding-right:10px;float:right;">A propos</li>
				</ul>
			</nav>
		</header>
		<!-- En-tête -->
		<!-- Tronc -->
		<section id="corps">
			<div id="trieur">
				<ul id="trieur">
					<li id="tri" style="padding-left:10px;padding-right:10px;border-left: 1px solid #6A009B;">Monde</li>
					<li id="tri" style="padding-left:10px;padding-right:10px;">Design</li>
					<li id="tri" style="padding-left:10px;padding-right:10px;">Art</li>
					<li id="tri" style="padding-left:10px;padding-right:10px;">Techonologie</li>
					<li id="tri" style="padding-left:10px;padding-right:10px;">Jeux</li>
				</ul>
			</div>
			<div id="listearticle">
				<div id="resumearticle">
				</div>
				<div id="resumearticle">
				</div>
				<div id="resumearticle">
				</div>
				<div id="resumearticle">
				</div>
				<div id="resumearticle">
				</div>
			</div>
			<div id="module">
			</div>
		</section>
		<!-- Tronc -->
		<!-- Pied -->
		<footer id="footer">	
		</footer>
		<div id="margefooter">
		</div>
		<!-- Pied -->

	<body>
	<!-- Corps -->
</html>


section#corps {
top:0em;
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
background-color: rgba(176, 104, 180, 0.8);
box-shadow: 1px 1px 12px #b068b4;
}

Modifié par Lart-iste (30 Sep 2012 - 13:52)
Salut,

alors, pour moi il y a déjà un réel problème au niveau du code, en effet si tu places un id sur tes éléments, par définition, il devrait être unique donc le fait d'utiliser le même sur différentes balises pose déjà un problème en soi et ca dois généré un conflit entre les balises.
<div id="trieur">
	<ul id="trieur">
<div id="resumearticle">
</div>
<div id="resumearticle">
</div>
<div id="resumearticle">
</div>
...

A ta place, je relirais sérieusement la différence entre une classe et un id:
http://www.alsacreations.com/article/lire/535-quelle-est-la-difference-entre-une-classe-class-et-un-id.html

Sinon, pour l'exemple, dans cette portion de code, tu peux te servir de l'id pour cibler les autres éléments sans être obligé d'ajouter des class et id aux balises à l'intérieur de cet élément.
<nav id="menuprincipal">
				<ul id="menuprincipal">
					<a href="http://dovakhin.dofus.free.fr/index.html">
						<li style="padding-right:10px; padding-left:10px; border-bottom: 5px solid #6A009B;">
							<img src="http://dovakhin.dofus.free.fr/image/template/header/home.png" align="center" valign="center">
						</li>
					</a>
					<li id="button" style="padding-left:10px;padding-right:10px;">&Eacute;dito</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">L'Auteur</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">Galerie</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">Archive</li>
					<li id="button" style="padding-left:10px;padding-right:10px;">Store</li>
					<li id="button" style="padding-left:10px;padding-right:10px;margin-right:30px;float:right;">Contact</li>
					<li id="button" style="padding-left:10px;padding-right:10px;float:right;">A propos</li>
				</ul>
			</nav>
J'utiliserai aussi des chemins relatis pour les liens internes: http://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html

Moi je ferai:
<nav id="menuprincipal">
  <ul>
    <li class="classe_active">
      <a href="index.html"><img src="image/template/header/home.png"></a></li>
    <li>&Eacute;dito</li>
    <li>L'Auteur</li>
    <li>Galerie</li>
    <li>Archive</li>
    <li>Store</li>
    <li>Contact</li>
    <li class="classe2">A propos</li>
    </ul>
</nav>
Et la css associée
#menuprincipal{}
  #menuprincipal ul{}
    #menuprincipal li{float:left;padding:0 10px}
.classe_active{border-bottom:5px solid #6A009B}
  .classe_active img{margin:auto}
.classe2{margin-left:30px}
etc...
C'est quand même plus clair non ?

Au passage, ta page étant déclarée en utf-8, ca ne sert à rien d'utiliser les caractères spéciaux comme le &Eacute; de Édito. Le É étant nativement reconnu par ce jeu de caractères: http://www.alsacreations.com/astuce/lire/34-charset-iso-8859-1-iso-8859-15-utf-8-lequel-choisir.html

PS: l'image englobant un ul, schématiquement ce n'est pas correct, ca devrait être l'inverse.

Et pour la portion de code contenant la section, en ciblant correctement les éléments, il n'y a aucun problème Smiley lol
http://jsfiddle.net/vwPEG/1/

De plus, ce n'est pas une bonne idée de combiner styles externet ET interne, il vaut mieux tout placer dans un fichier css séparé, ca sera plus facile pour la maintenance et pour les navigateurs qui n'auront pas à charger plusieurs fois la même info, ce qui réduira par la même occasion le poid de la page.
Modifié par LuciferX (30 Sep 2012 - 01:47)
Problème résolut, effectivement il y avait de lourds problèmes sur les ids & class connu le pire Smiley biggol *se cache* mais j'ai résolu mes problèmes de section ont en fait été impacté par une mauvaise gestion des largeurs, longueur, margin, padding entre les blocs contenus et contenant au final gros nettoyages, merci LuciferX !

Résolution : évité un maximum les propriétés inutile et mélange de %, em avec les px ça à tendance à foutre un bordel monstre. Mauvais choix des positionnement de bloc avec float.
Modifié par Lart-iste (30 Sep 2012 - 15:14)
Sujet clos
Aller à