18041 sujets

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

Problème de bordure

Hello,

Je suis en train de créé un calibre afin de faire une mise en page. Malheureusement, la bordure ne s'applique pas à l'intégralité de la page, voyez plutôt :


<style type="text/css">
/* Page Principale */
body {
	background-color: #333333;
}

.main {
width:750px;
border:5px solid #FFFFFF;
width:750px;
margin:auto;
}
/* Header */

.logo {
width:375px;
height:80px;
float:left;
background-color:#33FFFF;
}

.compte {
width:375px;
height:80px;
background-image:;
float:left;
background-color:#0033FF;
}

.nav {
width:750px;
height:25px;
float:left;
background-color:#339999;
}


/* Player et info */
.player {
width:512px;
height:404px;
background-color:#3399FF;
float:left;
}
.info {
width:238px;
height:404px;
background-color:#CC0000;
float:left;
}
</style>



<body>
<div class="main">
<div class="logo">test</div>
<div class="compte">test</div>
<div class="nav">test</div>
<div class="player">test</div>
<div class="info">test</div>
</div>
</body>
</html>


Avez vous une solution à mon problème?
Merci de tout coeur Smiley cligne
Modifié par MasterPingouin (24 Jan 2007 - 16:55)
salut !

ton probleme est dû aux élements flottants

modifie :
<div class="main">
	
		<div class="logo">test</div>
		
		<div class="compte">test</div>
		
		<div class="nav">test</div>
		
		<div class="player">test</div>
		
		<div class="info">test</div>
	
		<hr />
	
	</div>


et en CSS :

hr {
visibility:hidden;
clear:both;
}


et tu verra ta brodure Smiley cligne
Ca marche!
Mais j'ai un autre problème : il semble que <hr /> provoque un creux en fin de page sous firefox 2.0, y a t-il une solution?

[EDIT2]
J'ai trouvé une solution peut orthodoxe étant un grand néophyte du css :

j'ajoute :

.end {
clear:left;
}


et en fin de page :

<div class="end"></div>


En tout cas, merci de m'avoir aiguillé, je sais maintenant que la fonction clear arrête le flottement des <div>, très utile à savoir (^-^)
Modifié par MasterPingouin (24 Jan 2007 - 10:52)
Il y a d'autres solutions pour les dépassements de flottants :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Par ailleurs, je trouve un peu étonnant d'avoir autant d'éléments flottants dans ton conteneur global. Certains sont sans doute superflus.

Enfin il serait intéressant, pour les blocs ne revenant qu'une fois dans une page donnée et définissant des grandes zones de contenus, d'utiliser des identifiants plutôt que des classes.

<div id="main">
	<div id="logo">test</div>
	<div id="compte">test</div>
	<div id="nav">test</div>
	<div id="player">test</div>
	<div id="info">test</div>
</div>

À noter que dans le code CSS il ne faudra alors plus utiliser le sélecteur de classe (.classe), mais le sélecteur d'identifiant (#identifiant).
Florent V. a écrit :
Par ailleurs, je trouve un peu étonnant d'avoir autant d'éléments flottants dans ton conteneur global. Certains sont sans doute superflus.


Surement!
J'utilise float pour mettre en page mes <div>, certains d'entre eux doivent se retrouver cote à cote. Existe t-il autre chose que float? Smiley sweatdrop

Merci en tout cas pour l'info et surtout pour les # Smiley ravi

[EDIT]
Voilà, j'ai tout lu Smiley ravi et il semble qu'ajouter overflow: auto; dans le <div> parent soit la meilleur solution.
Modifié par MasterPingouin (24 Jan 2007 - 11:48)
MasterPingouin a écrit :
J'utilise float pour mettre en page mes <div>, certains d'entre eux doivent se retrouver cote à cote. Existe t-il autre chose que float?

Le positionnement flottant n'est pas un mauvais choix, mais il n'y a pas besoin de l'appliquer à tous les éléments. Pour mettre deux éléments côte-à-cote, on n'aura besoin que d'un seul flottant. Mais la gestion des flottants demande un certain apprentissage.

Sur la page suivante, tu trouveras une section intitulée « CSS : les flottants » qui pourra t'intéresser. Cet exemple est également pas mal.

Mais avant tout, si tu ne le connais pas, l'article d'Openweb sur les flottants :
http://openweb.eu.org/articles/initiation_float/
En effet le float, ce n'est pas si facile que ça Smiley sweatdrop
J'ai encore du chemin à parcourir, mais c'est déjà moins chiant à apprendre que le php, donc je garde la pêche Smiley ravi

Merci Florent pour toutes ces précisions,
Ce forum est actif ,ses hôtes amicaux et serviables, bref je risque d'y rester un sacré bout de temps.

Ciao Smiley cligne
Sujet clos
Aller à