28172 sujets

CSS et mise en forme, CSS3

[résolu] Une image html qui détraque la mise en page

Salut à tous...

Voilà, je suis entrain de créer un site web dans lequel, chaque page aurait son logo.
En gros, j'ai deux div en colonnes (donc j'utilise les float pour les positionner). J'ai ajouté, en html, une balise img et je lui ai donné la position left pour qu'elle se place à gauche du site. Le problème, c'est que cela détraque mes colonnes. Du coup, il y en a une qui passe en-dessous de l'autre comme si les div n'agissaient plus ...

Que faire donc ?

Merci pour le coup de main Smiley cligne
Modifié par kisscool (01 Apr 2012 - 11:40)
Salut,

Un logo pour une page c'est pas top pour l'ergonomie et l'unité du site.
Mais sinon, un lien ou du code serait plus parlant. Smiley cligne
bonsoir,

align=left; c'est comme float:left; et il vaut mieux déclaré ce comportement de cette façon via les style plutôt que via l'attribut ...

donc tu as une image flottante Smiley smile , et tu dois gérer les effets des flottants. (clear, overflow, display ...).

Un peu de code qui met en évidence ton soucis aiderait a te donner une piste et une explication.

Cordialement,
GC
Voici les parties concernées par mon souci :

#conteneur {
	width : 1000px;
   height : 500px;
	background-color:#7f8989;
	position:relative;
	left:40%;
	margin:0 0 0 -350px;
	/*background-image:url(/img/logo.png);*/
	background-color:#7f8989;
	background-repeat:no-repeat;

}
#conteneur img.logo{
	float:left;
}
#bandeau_droite{
	width:245px;
	height:523px;
	float : right;
	margin-right:20px;
	background-color: #b0f2b6;
	background-image:url(/img/droite.png);
	background-repeat: no-repeat;
	background-position: bottom;
	padding:5px 15px 0px 0px;
	margin-top:10px;

}

#bandeau_centre{
	height:527px;
	width:600px;
	background-color: #b0f2b6;
	background-image:url(/img/page.png);
	background-repeat: no-repeat;
	background-position: bottom;
	margin-left:90px;
	margin-top:10px;
	float:left;
}


Et voici mon code html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="header"></div>
<div id="conteneur">
[#red]<img class="logo" src="/img/logo.png" width=100 height=500>[/#]
   <div id="menu">

</div>

		<div id="bandeau_centre">
<txp:article_custom category="news"/>
		</div>
		<div id="bandeau_droite">
		</div>
	<div class="Clear"></div>

</div>


</body>
</html>


En rouge, c'est l'image qui doit prendre la place ...
piste: flottant Smiley smile

Faut que ça passe dessous ? : clear.

Que ça reste a coté ? : il faut qu'il y ait la place. (largeurs + gestion des marges comprises).

Là, c'est relativement simple vu que tes 3 éléments sont flottants.

cordialement, GC
Sujet clos
Aller à