28220 sujets

CSS et mise en forme, CSS3

[Résolu] - Problème de flux... Je pense...

Hello !

Pour commencer, voici l'adresse de mon site : www.le-bunker.net !

Ensuite, mis à part les pbs d'affichage sous IE, que je corrigerai plus tard, j'ai un petit soucis dans la partie "les 20 dernières critiques".

En effet, si je ne mets pas un padding-bottom de 85px en h6... Et bien... C'est la zone : tout se chevauche. Alors bien sûr, il va y avoir du texte en dessous du titre de l'article mais au cas où ce texte serait trop court, il y aurait un décalage... C'est ce qui me gène !

La CSS :


html, body {
    margin:0px;
    padding:0px;
    background:#dddbc6;
    font:11px Tahoma;
    color:#373731;
}
h1 {
    margin:0px;
    padding:10px;
    font:bold 12px Arial;
    text-transform:uppercase;
    color:#a4a28c;
}
h2 {
    margin:0px;
    padding:0px 10px 5px 10px;
    font:bold 12px Arial;
    color:#373731;
}
h3 {
    margin:0px;
    padding:5px 10px 5px 10px;
    border-top:1px solid #c6c4af;
    border-bottom:1px solid #c6c4af;
    font:9px Tahoma;
    color:#373731;
}
h4 {
    margin:0px;
    padding:5px 10px 15px 10px;
    font:11px Tahoma;
}
h5 {
float:left;
    margin:0px;
    padding:0px 10px 10px 10px;
}
h6 {
float:left;
    margin:0px;
padding-bottom:85px;
    font:11px Tahoma;
}
p {
    margin:0px 0px 5px 0px;
}
a img {
    border:none;
}
a:link {
    text-decoration:none;
    color:#c80000;
}
a:visited {
    text-decoration:none;
    color:#c80000;
}
a:hover {
    text-decoration:none;
    color:#760202;
}
a.linkmenu:link {
    text-decoration:none;
    color:#fff;
}
a.linkmenu:visited {
    text-decoration:none;
    color:#fff;
}
a.linkmenu:hover {
    text-decoration:none;
    color:#c80000;
}
.header {
    position:absolute;
    top:0px;
    left:0px;
    height:75px;
    width:100%;
    background:#373731 url(http://www.le-bunker.net/images/logo.gif) no-repeat;
}
.menu {
    position:absolute;
    top:30px;
    right:40px;
    font:10px Arial;
    color:#fff;
}
.bandeau {
    position:absolute;
    top:75px;
    left:0px;
    height:27px;
    width:100%;
    background:url(http://www.le-bunker.net/images/citation.gif) repeat-x;
}
.citation {
    position:absolute;
    top:7px;
    left:10px;
    font:10px Tahoma;
    color:#680000;
}
.content {
    margin:102px 0px 27px 0px;
    width:734px;
}
.content img {
    border:5px solid #fff;
}
.news {
    float:left;
    margin:15px;
    width:300px;
    background:#d7d5bf;
    border:1px solid #c6c4af;
}
.articles {
    float:left;
    margin:15px 0px 15px 0px;
    width:400px;
    background:#d7d5bf;
    border:1px solid #c6c4af;
}
.articles p {
    margin:-10px 0px 5px 0px;
}


Merci !
Modifié par Forgaria (22 Aug 2005 - 03:31)
Bonjour Forgaria Smiley smile

Pour une lecture plus facile des échanges, il est demandé, voir les règles du forum d'afficher tout ce qui est code dans la balise "code" appropriée. merci de bien vouloir faire le nécessaire.

Surtout, ne créé pas un nouveau post, tu peux modifier le tien en cliquant sur le bouton "éditer" de ton sujet Smiley cligne
Plop,

Le problème vient de ton double float sur tes h5 et h6. Seul un des 2 éléments devraient être floatés sinon personne tient la baraque Smiley langue

Mais a mon avis, il y a un souci de conception dans cette partie de ta page. En effet tu utilises les balises <h5> pour tes images qui apparement ne joue pas de rôle informatif vu que tu leur a placé un alt vide. Du coup pourquoi les avoir positionnées dans un <h5> ?

A mon avis tu auras plus de facilité avec une structure dans le genre

<h5>Mon titre de ma critique<h5>
<p>
<img />
Blabla
</p>

En flottant l'image, tu devras pouvoir arriver au résultat escompté.
Après coup et en appliquant ce que tu préconises, il n'y a pas grands changements...

Voici la nouvelle CSS :


html, body {
	margin:0px;
	padding:0px;
	background:#dddbc6;
	font:11px Tahoma;
	color:#373731;
}
h1 {
	margin:0px;
	padding:10px;
	font:bold 12px Arial;
	text-transform:uppercase;
	color:#a4a28c;
}
h2 {
	margin:0px;
	padding:0px 10px 5px 10px;
	font:bold 12px Arial;
	color:#373731;
}
h3 {
	margin:0px;
	padding:5px 10px 5px 10px;
	border-top:1px solid #c6c4af;
	border-bottom:1px solid #c6c4af;
	font:9px Tahoma;
	color:#373731;
}
h4 {
	margin:0px;
	padding:5px 10px 15px 10px;
	font:11px Tahoma;
}
h5 {
    float:left;
	margin:-10px 10px 10px 124px;
}
p {
	margin:0px 0px 5px 0px;
}
a img {
	border:none;
}
a:link {
	text-decoration:none;
	color:#c80000;
}
a:visited {
	text-decoration:none;
	color:#c80000;
}
a:hover {
	text-decoration:none;
	color:#760202;
}
a.linkmenu:link {
	text-decoration:none;
	color:#fff;
}
a.linkmenu:visited {
	text-decoration:none;
	color:#fff;
}
a.linkmenu:hover {
	text-decoration:none;
	color:#c80000;
}
.header {
	position:absolute;
	top:0px;
	left:0px;
	height:75px;
	width:100%;
	background:#373731 url(http://www.le-bunker.net/images/logo.gif) no-repeat;
}
.menu {
	position:absolute;
	top:30px;
	right:40px;
	font:10px Arial;
	color:#fff;
}
.bandeau {
	position:absolute;
	top:75px;
	left:0px;
	height:27px;
	width:100%;
	background:url(http://www.le-bunker.net/images/citation.gif) repeat-x;
}
.citation {
	position:absolute;
	top:7px;
	left:10px;
	font:10px Tahoma;
	color:#680000;
}
.content {
	margin:102px 0px 27px 0px;
	width:734px;
}
.news {
	float:left;
	margin:15px;
	width:300px;
	background:#d7d5bf;
	border:1px solid #c6c4af;
}
.articles {
	float:left;
	margin:15px 0px 15px 0px;
	width:400px;
	background:#d7d5bf;
	border:1px solid #c6c4af;
}
.articles img {
	border:5px solid #fff;
}
.articles p {
	float:left;
}


Merci !
Modifié par Forgaria (21 Aug 2005 - 19:44)
Bonjour,

Tu verras qu'en remettant de l'ordre dans tes balises html, tout ira beaucoup mieux. Il te faudra juste rajouter sans doute un float:left pour tes vignettes.

Respecter le flux des blocs. <h5> et <p> étant des blocs, si tu les mets les uns sous les autres il n'y aura pas de soucis. Suis l'exemple de tyx. Je suis arrivé au même modèle avec un très bon résultat. Clarifie également ta balise h5, le margin me semble un peu… bizarre. Bon courage Smiley cligne
Bonsoir !

Je suis ce que vous me recommandez, qui me semble logique par ailleurs, mais il y a encore un petit grain de sable qui grippe l'engrenage...

Du coup, c'est la mise en page recherchée mais... A l'envers.

La CSS :


html, body {
	margin:0px;
	padding:0px;
	background:#dddbc6;
	font:11px Tahoma;
	color:#373731;
}
h1 {
	margin:0px;
	padding:10px;
	font:bold 12px Arial;
	text-transform:uppercase;
	color:#a4a28c;
}
h2 {
	margin:0px;
	padding:0px 10px 5px 10px;
	font:bold 12px Arial;
	color:#373731;
}
h3 {
	margin:0px;
	padding:5px 10px 5px 10px;
	border-top:1px solid #c6c4af;
	border-bottom:1px solid #c6c4af;
	font:9px Tahoma;
	color:#373731;
}
h4 {
	margin:0px;
	padding:5px 10px 15px 10px;
	font:11px Tahoma;
}
h5 {
	float:left;
}
p {
	margin:0px 0px 5px 0px;
}
a img {
	border:none;
}
a:link {
	text-decoration:none;
	color:#c80000;
}
a:visited {
	text-decoration:none;
	color:#c80000;
}
a:hover {
	text-decoration:none;
	color:#760202;
}
a.linkmenu:link {
	text-decoration:none;
	color:#fff;
}
a.linkmenu:visited {
	text-decoration:none;
	color:#fff;
}
a.linkmenu:hover {
	text-decoration:none;
	color:#c80000;
}
.header {
	position:absolute;
	top:0px;
	left:0px;
	height:75px;
	width:100%;
	background:#373731 url(http://www.le-bunker.net/images/logo.gif) no-repeat;
}
.menu {
	position:absolute;
	top:30px;
	right:40px;
	font:10px Arial;
	color:#fff;
}
.bandeau {
	position:absolute;
	top:75px;
	left:0px;
	height:27px;
	width:100%;
	background:url(http://www.le-bunker.net/images/citation.gif) repeat-x;
}
.citation {
	position:absolute;
	top:7px;
	left:10px;
	font:10px Tahoma;
	color:#680000;
}
.content {
	margin:102px 0px 27px 0px;
	width:734px;
}
.news {
	float:left;
	margin:15px;
	width:300px;
	background:#d7d5bf;
	border:1px solid #c6c4af;
}
.articles {
	float:left;
	margin:15px 0px 15px 0px;
	width:400px;
	background:#d7d5bf;
	border:1px solid #c6c4af;
}
.articles img {
	float:left;
	border:5px solid #fff;
}
.articles p {
	float:left;
}


Merci !
Bonsoir

Euh mais encore ? Met un tout petit peu de texte et tu verras que ca fonctionne bien.
Attention à ce div à l'intérieur du h5, ca me parait louche. Il ya d'autres facons de faire des marges. Attention aussi à tous ces float:left. A priori seule l'image en aura besoin pour être habiller par le texte.

Ah et, pourquoi n'utilises tu pas le id="articles" plutôt que ce class="articles" ? Ca al'air de fonctionner pour l'héritage mais ca me semble étrange.
Modifié par zzzazzz (21 Aug 2005 - 20:41)
Ok !

J'ai compris mon problème... En fait, votre solution fonctionne parfaitement, mais ce dont j'ai besoin c'est justement d'avoir une hauteur fixe indépendante de la longueur du texte. Je ne sais pas si je suis très clair...

Merci encore !
Je ne vois rien de choquant à ce que le texte dépasse le bas de l'image.

Tu veux que le texte reste dans son colonage, une fois que le texte dépasse le bas de l'image ?

Tu veux un ascenceur si le texte déborde d'une hauteur fixée par un height:npx ?

…
a écrit :
Tu veux que le texte reste dans son colonage, une fois que le texte dépasse le bas de l'image ?


Exactement !
Et bien tu peux peut-être appliquer un margin:0 0 0 150px par exemple a ton p, h5 et h6 sans float:left;

Ou bien encapsuler tout ca dans un div

non ?
Parfait ! Merci beaucoup !

Une dernière petite chose... J'ai remarqué que lorsque le texte faisait moins de 6 lignes, tout se décalait à nouveau... Il y a t-il quelque chose à faire ?

Merci encore !
Sujet clos
Aller à