28220 sujets

CSS et mise en forme, CSS3

Float right et clear mais pas sur tous [résolu]

Bonjour à tous
je bloque sur un float et un clear

ce que je voudrais

J'arrive à gèrer l'histoire tantq ue celà reste basique, mais dès que celà se corse je ne comprend plus la logique Smiley bawling

Pour le moment j'ai ceci 
<div class="head">
	<div class="user1"><?php mosLoadModules ( 'user1' ); ?></div><!-- menu du dessus -->
	<div class="langue"><?php mosLoadModules ( 'bottom' ); ?></div><!-- icone langue-->
	<div class="search">
	<form action="index.php" method="post">
		<input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
        <input type="hidden" name="option" value="search" />
        <input type="submit" name="Submit" value="Go" />
	 </form>
	 </div><!-- search-->
</div><!-- head-->


et pour les css
.head{
	width:780px;
	height:150px;
	border:1px solid #000000;
}
.user1{
	float:right;
	padding:0px 0px 0px 200px;
	border: 1px solid #993300;
}
.search{
	float:right;
	border:1px solid #000000;
	}
.langue{
	clear:right;
	margin-top:5px;
	float:right;
	border:1px solid #000000;
	}


pas très complex en soit, mais pas moyen d'aligner en dessous les deux blocs

Merci pour votre aide précieuse
Modifié par chrystalide (27 Jul 2005 - 14:17)
Quels deux blocs ?
Tu en as 3, là. Et deux sont déjà bien à droite.
Seul le search est resté à gauche du user.
J'ai ajouté du texte dedans pour bien les voir.
La seule différence est que le langue, qui est passé en dessous a un clear.
Le clear, dans de même tag que le float l'annule. Donc tu passes en dessous ou tu peux appliquer encore un float. Et si tu veux aligner deux éléments à droite, tu ne faits pas de clear, mais des float seuls.
Modifié par Deny (11 Jul 2005 - 16:33)
et bien voilà j'ai refais quelques tests
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>css</title>
<style type="text/css">
<!--
.head{
width:780px;
height:150px;
border:1px solid #000000;
}
/*Le clear, dans de même tag que le float l'annule*/
.user1{
float:right;
padding:0px 0px 0px 200px;
border: 1px solid #993300;
height:20px;
width:50px;
clear:right;
}
.search{
clear:right;
float:right;
border:1px solid #000000;
height:20px;
width:50px;
}
.langue{
float:right;
margin-top:5px;
border:1px solid #000000;
height:20px;
width:50px;
}
-->
</style>
</head>

<body>
<div class="head">
<div class="user1">user1</div><!-- menu du dessus -->
<div class="langue">langue</div><!-- icone langue-->
<div class="search">search</div><!-- search-->
</div><!-- head-->
</body>
</html>


je sais placer le search en desous du user1 avec un clear:right;
par contre je voudrais placer le langue à gauche du search et non à gauche du user1, donc sur la deuxième ligne.

Alors es ce que jeodis créer un block global par ligne ?

merci pour votre aide
Modifié par chrystalide (18 Jul 2005 - 17:28)
Sujet clos
Aller à