28172 sujets

CSS et mise en forme, CSS3

Eviter superposition background DIV

Bonjour,

Pour une fois que je ne veux pas faire un truc compliqué, il m'arrive quelque chose de bizarre sur la page que je développe actuellement.
Voilà une image du problème :
upload/14375-pasbon.jpg
En fait je voudrais que les blocs soient séparés et s'enchainent verticalement sans superposition. Smiley sweatdrop
En gros que ça donne ça :
upload/14375-bon.jpg
Voici le css :
body 
	{
	margin: 0;
	background: #EAEDF2;
	line-height: 1.5;
	color: #60789E;
	}
.onglet1 
	{
	color:#365265;
	font: 13px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;	
	font-weight : bold;
	text-shadow: 2px 2px 1px #fff;
	text-indent:10px;
	width:896px;
	height:23px;
	background-image: url(../img/onglet.png);
	background-repeat:no-repeat;
	}

.block_bar
	{
	margin-left : 2px;
	margin-right : 4px;
	}

.tab_bar
	{
	overflow: auto;	
	background: #EAEDF2;
	border-color: white;
	border-style: solid;
	border-width: 1px;
	width:100%;
	}


Voici le code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> -- </title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="content-language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link media="screen" rel="stylesheet" href="./css/content.css" type="text/css">
<link media="screen" rel="stylesheet" href="./css/spritesbutton.css" type="text/css">
</head>
<body>
<div class="block_bar" id="block_detail">
<div class="onglet1" id="det_onglet">
<img src="./img/tab1.png" id="det_result" width="23">
<label id="label_detail" style="vertical-align: 50%"></label>
</div>
<iframe id="detail_bar" class="tab_bar" name="detail_bar" height="200">
</iframe>
<div id="card_button">
<ul id="bpc-command">
<li id="bpc-edit"><a href="#" onclick=\"card_edit('1')"></a></li>
<li id="bpc-suppress"><a href="#" onclick=\"card_suppress('1')"></a></li>
<li id="bpc-none"><a href="#" class="lethal_link"></a></li>
</ul>
</div>
</div>

<div class="block_bar" id="block_navigation">
<div class="onglet1" id="navigation_onglet">
<img src="./img/tab1.png" id="nav_result" width="23">
<label id="label_navigation" style="vertical-align: 50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Navigation bar</label>
</div>
<iframe id="navigation_bar" class="tab_bar" name="navigation_bar" height="200">
</iframe>
</div>
</body>
</html>


Il est à noter que les boutons edit et suppress sont issus d'un css particulier utilisant spritescss. Smiley biggol

Que dois je changer ?

D'avance merci.
Salut Le jong le plus lour,

Le jong le plus lour a écrit :
Nan, finalement c'est aussi du compliqué c'est ça ?


Ben c'est un peu le bronx oui Smiley lol tu y met des iframe de partout Smiley eek , tu utilise un css dont on ne connait pas les spécificités.. donc c'est pas évident de voir pourquoi sa marche pas... t'as pas un lien sur lequel on peut tester directement ?
Mikerob a écrit :
Salut Le jong le plus lour,



Ben c'est un peu le bronx oui Smiley lol tu y met des iframe de partout Smiley eek , tu utilise un css dont on ne connait pas les spécificités.. donc c'est pas évident de voir pourquoi sa marche pas... t'as pas un lien sur lequel on peut tester directement ?


Le bronx, euh, encore j'ai épuré !
Je peux te fournir les images si tu veux. En tout cas je l'ai testé avec ce que j'ai donné, et j'ai le rendu des screenshots.
Le jong le plus lour a écrit :
Je peux te fournir les images si tu veux.

Non, osef les images. Une page en ligne permet d'accéder au code HTML et CSS concerné, et ce de manière rapide avec les outils pour développeur des navigateurs (notamment intégrés à Opera ou Safari ou IE8, ou encore via l'extension Firebug pour Firefox), voire de tester des modifications en live.

C'est relativement pénible de fournir une aide quelle qu'elle soit sans avoir accès à la page, ou à une page de test reproduisant le problème (si le projet est confidentiel).
Alors ça se passe comme ça:

1. Les liens sont flottants.
2. Donc ils dépassent de leur conteneur (LI), qui a une hauteur de 0px (cf. Firebug, onglet Apparence).
3. Donc le UL parent a une hauteur de 0px.
4. Et le parent du UL a une hauteur figée à 6px (???).
5. Et ce parent est flottant.
6. Et donc ce parent flottant déborde dans le bloc qui le suit, et n'en repousse que le contenu (image de pictogramme, texte).

Révision? http://covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Et ne pas figer, autant que possible, la hauteur des conteneurs. La propriété height, c'est le mal. Smiley lol Et ne pas abuser des flottants, car c'est pas bien non plus.
Modifié par Florent V. (18 Feb 2009 - 19:40)
Florent V. a écrit :
Alors ça se passe comme ça:

1. Les liens sont flottants.
2. Donc ils dépassent de leur conteneur (LI), qui a une hauteur de 0px (cf. Firebug, onglet Apparence).
3. Donc le UL parent a une hauteur de 0px.
4. Et le parent du UL a une hauteur figée à 6px (???).
5. Et ce parent est flottant.
6. Et donc ce parent flottant déborde dans le bloc qui le suit, et n'en repousse que le contenu (image de pictogramme, texte).

Révision? http://covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Et ne pas figer, autant que possible, la hauteur des conteneurs. La propriété height, c'est le mal. Smiley lol Et ne pas abuser des flottants, car c'est pas bien non plus.


Bon bah marchi c'est un peu plus clair !
En fait je pensais que c'était la div globale qui merdait, celle qui contenait les boutons et l'iframe.
En fait c'était simplement les boutons en effet.
Donc j'ai supprimer le float pour le parent ul et j'ai fixé le height à 26px.
J'ai aussi supprimé le height:0px.
Du coup, là tout fonctionne.

Merci beaucoup.
Sujet clos
Aller à