28173 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Je suis débutant en CSS, j'ai commencé a faire un petit blog en CSS, j'ai créé tout mes blocs, mais j'ai un problème de placement de 2 blocs :

www.totovinz.info/testnew

Voilà ma page, je voudrais mon menu a gauche, et le gros bloc aligné avec le header, je ne sais pas quelle pourrait être la propriété CSS qui pourrait m'aider.

Quelqu'un peut m'aider svp ?

Merci a tous,

VInce_122
Modifié par Vince_122 (01 Nov 2006 - 11:41)
Salut,

Il faudrait commencer par rentrer le header dans le div main pour voir ce que ça donne, ensuite utiliser la propriété float sur les divs a juxtaposer, puis ajuster à l'aide des marges (margin).
Modérateur
bonsoir ,

un petit float + une activation du layout , et ça roule Smiley smile :
#header {
	margin-left:220px;
	width:760px;
	height:200px;
	background:#e7f7e7 url('headtest1.gif') left top;

float:right;/*  le float */

}

#cadremenu {

/* dotons de layout le menu */
display:table;/* layout ff */
display:inline-block;/* layout ie , opera */
/*  fin  layout */
	width:180px;
	margin-top:0px;
	margin-left:25px;
	margin-right:0px;
	margin-bottom:30px;
	background-color:#e7f7e7;
}


Sans avoir tester , je ne pense pas trop me tromper sur les resultats obtenus Smiley smile

++


aprés test , le header se doit d'etre incorporé au conteneur #main (je n'avais pas remarqué cela ) , la marge gauche du menu reduite ( a 1em par exemple) et la marge gauche du header , n'a plus de raisons d'etre , vu qu'il flotte a droite . et on se balance du layout qui n'interfere pas</>
Modifié par gcyrillus (31 Oct 2006 - 22:39)
J'ai fait un test pour la technique de gcyrillus, ca ne donne pas exactement ce que je voudrais :s
Le float right sur le header pose un problème, je voudrais mettre le centre a coté du menu.

Merci de votre aide,

Vince_122
J'ai mis plutôt un float:left; au menu de gauche, avec quelques marges ca fonctionne Smiley lol

Mais j'ai un soucis d'affichage sous Firefox, alors que sous Internet Explorer l'affichage est bon :S

Quelqu'un à t-il une idée ?

Merci,

Vince_122
Modérateur
bah , je t'avais parler de ce bin's de layout ....

mais en lisant mieux mon post , surtout la partie 'editer' et ce que Ralfman t'avais suggerer tu serais probablement arrivé a ce resultat :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head><title>.: Blog de Toto et Vinz :. - .: 77950 Represent :.</title>

 
  
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

body {
	background:#e7f7e7;
	margin:0;
padding:0;
font-family:verdana,arial,helvetica,sans-serif;
	font-size:14px;
	font-weight:400;
	color:#000000
}
#header {
	width:760px;
	height:200px;
	background:#e7f7e7 url('headtest1.gif') left top;
float:right;
}
#main {
	width:960px;
margin:auto;
	padding-top:50px;
border:1px solid;

}
#cadremenu {

	width:180px;
	margin-top:0px;
	margin-left:1em;
	margin-right:0px;
	margin-bottom:30px;
	background-color:#e7f7e7;
}
#menuhaut {
	height:17px; width:178px;
	background:#e7f7e7 url('menuhaut.gif');
}
#menumilieu {
	width:178px;
	background:#e7f7e7 url('menumilieu.gif') repeat-y;
}
#menumilieu p{
	margin-left:10px;
	margin-right:5px;
	margin-top:0px;
	margin-bottom:0px;
}
.titre {
	padding-left:10px;
	padding-right:10px;
	margin-top:0px;
	margin-bottom:20px;
	background-color:#dedede;
	border-color:#84ce94;
	border-style:dashed;
	border-width:2px;
}
.barcomm {
	margin-top:20px;
	margin-bottom:0px;
	background-color:#dedede;
	border-color:#84ce94;
	border-style:dashed;
	border-width:2px;
	text-align:center;
	
}
#menubas {
	height:17px;
	width:178px;
	background:#e7f7e7 url('menubas.gif');
}
#cadrebox {
	width:729px;
	margin-bottom:20px;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	background-color:#e7f7e7;
}
#boxhaut {
	width:729px;
	height:22px;
	background:#e7f7e7 url('boxhaut.gif');
}
#boxmilieu {
	width:729px;
	background:#e7f7e7 url('boxmilieu.gif') repeat-y;
}
#cadreimage {
	margin-top:15px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:0px;
	width:350px;
	height:200px;
	border-style:solid;
	border-color:black;
	border-width:3px;
	float:left;
}
#boxmilieu p{
	margin-left:10px;
	margin-right:5px;
	margin-bottom:0px;
}
#boxbas {
	width:729px;
	height:22px;
	margin-left:2px;
	background:#e7f7e7 url('boxbas.gif');
}


</style></head><body>

<div id="main">
   <div id="header">
	</div>
	<div id="cadremenu">
		<div id="menuhaut">
		</div>
		<div id="menumilieu"><p>Voilà
un joli menu trop beau qui va tout dechirer [lol]Voilà un joli menu trop
beau qui va tout dechirer [lol]Voilà un joli menu trop beau qui va tout
dechirer [lol]Voilà un joli menu trop beau qui va tout dechirer [lol]</p>
		</div>
		<div id="menubas">
		</div>
	</div>

	<div id="cadrebox">
		<div id="boxhaut">
		</div>
		<div id="boxmilieu">
		<p class="titre">Ceci est un titre [lol]</p>
		<div id="cadreimage">
		</div>
		<p>Et
ici c'est la boite ou je raconte ma vie parce que j'adore ca, et
surtout c'est pour tester que le CSS se dechire pas, parce que c'est
fragile comme petite bête le CSS n'est-ce pas Iraiser [lol] ?Et ici c'est
la boite ou je raconte ma vie parce que j'adore ca, et surtout c'est
pour tester que le CSS se dechire pas, parce que c'est fragile comme
petite bête le CSS n'est-ce pas Iraiser [lol] ?Et ici c'est la boite ou je
raconte ma vie parce que j'adore ca, et surtout c'est pour tester que
le CSS se dechire pas, parce que c'est fragile comme petite bête le CSS
n'est-ce pas Iraiser [lol] ?Et ici c'est la boite ou je raconte ma vie
parce que j'adore ca, et surtout c'est pour tester que le CSS se
dechire pas, parce que c'est fragile comme petite bête le CSS n'est-ce
pas Iraiser [lol] ?Et ici c'est la boite ou je raconte ma vie parce que
j'adore ca, et surtout c'est pour tester que le CSS se dechire pas,
parce que c'est fragile comme petite bête le CSS n'est-ce pas Iraiser
:D ?</p>
		<p class="barcomm">Ajouter un commentaire | X Commentaires</p>
		</div>
		<div id="boxbas">
		</div>
	</div>
	
</div>
</body></html>


qui passe dans FF et IE Smiley smile

++
J'ai mis ce code lettre pour lettre, et le placement n'est pas celui recherché :

Le header se retrouve a droite du menu, et le block qui est sensé se retrouver au milieu se retrouve tout en bas Smiley decu

Merci de ton aide,

Vince_122


EDIT : Jme suis débrouillé, en ajoutant un float sur le menu de gauche, en jouant sur les marges et en enlevant le float sur le header, merci beaucoup Smiley lol
Modifié par Vince_122 (01 Nov 2006 - 11:40)
Modérateur
bonjour, apparement , je n'ai pas compris ce que tu recherché , toujours est-il que tu as trouvé !
bonne continuation
GC