[Débutant HTML/CSS]Besoin d'aide pour débug et compréhension code

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Débutant HTML/CSS]Besoin d'aide pour débug et compréhension code

nico42000

Maître Yoda

Bonjour à tous,

Je rencontre un léger problème de compréhension de mon code. Le résultat semble donner ce que je souhaite mais la dernière partie de ma page d'accueil, cad le pied de page ne se trouve pas dans le bloc page. J'ai mis un fond pour le voir. J'ai bien le fond qui correspond au bloc page si je vire la partie <article id="divers_gauche"> en <article> simple mais du coup je n'arrive plus à avoir mes blocs les uns à côté des autres, ils sont ligne par ligne. Je capte surement mal un truc et il doit me manquer les bons réflexes.

Je rajoute, si je colle la commande de fond dans #divers_gauche, #divers_centre, #divers_droite, je me tretrouve de nouveau avec mes blocs à la ligne.
Peut-être un problème de classe, d'id, de div, il ne me semble pas avoir intervertit des éléments dans le html ?

Merci d'avance

code HTML

Code :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" href="style.css" />
<title>GeneRally HotLap Competition</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<img src="fonds/logo_GR.jpg" alt="Logo de Generally" id="logo" />
<h1>GeneRally HotLap Competition</h1>
</div>
</header>
<div id="banniere_image">
<div id="banniere_description">
Organisation, règlements et résultats de compétitions de GeneRally
</div>
</div>
<div id="menu_nav">
<li><a href="#">Accueil</a></li>
<li><a href="#">Règles</a></li>
<li><a href="#">Type de course</a></li>
<li><a href="#">Compétitions</a>
<ul>
<li><a href="#">Compétition 01</a></li>
<li><a href="#">Compétition 02</a></li>
</ul>
</li>
<li><a href="#">Palmares</a></li>
<li><a href="#">Meilleurs temps</a></li>
</div>
<div id="section_1">
<article>
<h1>Circuit</h1>
<p align="justified">Lorem ipsum dolor sit amet...
Vivamus sed libero nec mauris pulvinar facilisis ut non sem...
Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
</div>
<div id="section_2">
<article>
<h1>Temps</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
</div>
<div id="section_3">
<article>
<h1>Vidéo</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
</div>
<div id="pied_page">
<article id="divers_gauche">
<h1>divers gauche</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
<article id="divers_centre">
<h1>divers milieu</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
<article id="divers_droite">
<h1>divers droite</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
</div>
</div>
</body>
</html>

code CSS

Code :

/* Eléments principaux de la page */
body
{
background: url('fonds/');
font-family: verdana, Arial, sans-serif;
color: #d4b440;
}
#bloc_page
{
width: 1024px;
margin: auto;
border-width: thin;
border-style: solid;
border-color: orange;
background-color: #FFCC66;
}
/* Header */
header
{
/*background: url('images/separateur.png') repeat-x bottom;*/
}
#titre_principal
{
display: inline-block;
border-width: thin;
border-style: solid;
border-color: orange;
}
#logo,h1
{
display: inline-block;
margin-bottom: 0px;
}
/* Bannière */
#banniere_image
{
margin-top: 15px;
height: 200px;
border-radius: 10px;
background: url('fonds/banniere.jpg') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
}
#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 100%;
height: 33px;
padding-top: 15px;
padding-left: 0px;
background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
background-color: rgba(24,24,24,0.8);
color: #d4b440;
font-size: 0.8em;
}
#menu_nav,li
{
display: inline-block;
margin-left: 10px;
border-width: thin;
border-style: solid;
border-color: orange;
}
#section_1
{
width: 1024px;
border-width: thin;
border-style: solid;
border-color: orange;
}
#section_2
{
width: 1024px;
border-width: thin;
border-style: solid;
border-color: orange;
}
#section_3
{
width: 1024px;
border-width: thin;
border-style: solid;
border-color: orange;
}
article
{
border-width: thin;
border-style: solid;
border-color: orange;
}
#pied_page
{
width: 1024px;
border-width: thin;
border-style: solid;
border-color: orange;*/
}
#divers_gauche, #divers_centre, #divers_droite
{
border-width: thin;
border-style: solid;
border-color: green;
width: 33%;
position: relative;
float:left
}

Message édité par nico42000 le 29-08-2012 à 23:42:33

Publicité

gatsu35

Blablaté par Harko

http://jsfiddle.net/5bn6U/

Des que tu "float" des éléments, il ne sont plus dans le flux, donc leur conteneur qui contient la couleur de fond ne les "contenait" plus.

prend un div avec un background:blue, et mets des divs à l'interieur et float:left sur ces divs en question. tu verras que ton div conteneur fait 0px car tes divs sortent du flux, il faut utiliser un clear:fix pour corriger ce détail

---------------
Blablaté par Harko

nico42000

Maître Yoda

Merci pour ta réponse, petit à petit, ca va finir par rentrer. C'est quand même un peu obscure cette affaire, je vais me pencher la-dessus. Y-a-t-il un autre moyen de faire ça, sans passer par du float ?

Sinon c'est marrant, j'ai eu utiliser jsfiddle, mais je me retrouvais avec des gros message d'erreur, mon ancien code devait déconner bien que le nav me l'affichait à peu près correctement. Ca sera plus rapide que notepad++, naviguer entre les onglets feuille css et html. Et pas encore attaquer le php ^^

En tout cas, ca fait bien plaisir de trouver de l'aide.

FORUM HardWare.fr

Programmation

HTML/CSS

[Débutant HTML/CSS]Besoin d'aide pour débug et compréhension code

Sujets relatifs
Générateur de code ou ORM	[Résolu] Besoin petite aide sql (jointures)
Besoin d'aide j'ai un problème dans mon jeu Démineur	outil UML <---> code c++ pour eclipse-cdt?
Besoin d'aide pour trouver un erreur	pleasa aide :IE ne reconnait pas la css position
[JavaScript]Besoin d'aide sur ce script
Plus de sujets relatifs à : [Débutant HTML/CSS]Besoin d'aide pour débug et compréhension code

Page générée en 0.065 secondes