28220 sujets

CSS et mise en forme, CSS3

Positionnement Bloc

Bonjours, après mainte et mainte recherche je ne trouve pas comment faire.
Puisqu'un une image vaut mieux qu'un long texte :
http://izbing.free.fr/test/
J'aimerai que le bloc bleux soir au dessus à la même hauteur que le menu.
Code source

body {
margin: 0;
}

#head {
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;	 
     }
	 
#menu1 {
     margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;
     text-align: right ; 	
     font: bold 16px Times ; 	 
     }
	 
#conteneur {
position: relative;
margin-top: 10px;
width: 900px;
margin-left: auto;
margin-right: auto;
background-color:#ffffff;
}
	 

#centre {
background-color:#ffffff;
margin-left: 155px;
width: 745px;
height: 365px;
border: 1px solid #2365D3;
background-image: url("bascont.jpg");
background-position: 100% 100%;
background-repeat: no-repeat;
}
#gauche {
left:0;
width: 150px;
height: 330px;
border: 1px solid #2E9655;
text-align: center ;
font: 14px Arial ; 
background-image: url("basmenu.jpg");
background-position: 100% 100%;
background-repeat: no-repeat;
}


ul {
 list-style-type:none; }
	 
a.menu1:link{
color: #276EB6;
text-decoration: none;}
a.menu1:visited{
color: #276EB6;
text-decoration: none;}
a.menu1:hover{
color: green;
text-decoration: none;}
a.menu1:active{
color: #276EB6;
text-decoration: underline;}
a.menu2:link{
color: green;
text-decoration: none;}
a.menu2:visited{
color: green;
text-decoration: none;}
a.menu2:hover{
color: #276EB6;
text-decoration: none;}
a.menu2:active{
color: green;
text-decoration: underline;}



<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Title" lang="fr" content="Softiz - La gratuité sous windows" />
<meta name="Identifier-url" content="http://izbing.free.fr/test" />
<meta name="Description" lang="fr" content="Logiciel gratuit sous windows, nombreux tutoriaux, forum et chat" />
<meta name="Keywords" lang="fr" content="windows, libre" />
<meta name="Date-Creation-yyyymmdd" content="20050508" />
<title>Softiz - La gratuité sous windows</title>
<link rel="stylesheet" href="style.css" type="text/css" title="Softiz" />
</head>
<body>
<div id="head"><img src="head.jpg" alt="Softiz - La gratuité sous windows" /></div>
<div id="menu1">
<a href="" class="menu1" title="Page principale">Accueil</a> - 
<a href="" class="menu1" title="Les membres de l'équipe">Equipe</a> - 
<a href="" class="menu1" title="Demandez, parlez, partagez sur le forum">Forum</a> - 
<a href="" class="menu1" title="Chattez avec nous">Chat</a> - 
<a href="" class="menu1" title="Une selection des meilleurs liens du web">Liens</a> - 
<a href="" class="menu1" title="Contactez nous">Contact</a>
</div>
<div id="conteneur">
<div id="gauche">
<a href="" class="menu2" title="">Accueil</a><br /><br />
<a href="" class="menu2" title="">Logiciel</a><br /><br />
<a href="" class="menu2" title="">Tutoriaux</a><br /><br />
<a href="" class="menu2" title="">Faq</a><br /><br />
<a href="" class="menu2" title="">Dons</a><br /><br />
<a href="" class="menu2" title="">Forum</a><br /><br />
<a href="" class="menu2" title="">Team</a><br /><br />
<a href="" class="menu2" title="">Liens</a><br /><br />
</div>
<div id="centre">


</div>

</div>

</body>
</html>
Tu fais passer ton <div id="centre"> avant ton <div id="conteneur">
et tu changes dans ta CSS pour mettre ces deux divs en position "absolute".

Après, il ne te restera plus qu'à aligner tout ça avec des margin, d'ailleurs, je te conseille de toute refaire avec des pourcentages au lieu de la faire avec des tailles fixe, il faut penser à toutes les résolutions d'écrans qui verront ton site Smiley cligne
Modifié par RorolePro (10 May 2005 - 21:18)
Pour ton menu et ton contenu fais, selon moi, un bloc conteneur de tout, dans lequel tu definis 2 blocs en float: left : un pour le menu et un pour le contenu

Avec ce bloc conteneur de tout, tu peux ainsi lui dire d'etre fixe, ou variable en %
Voilà ce que je voulais te dire, j'ai modifié pas mal de truc au niveau des tailles Smiley cligne 


<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Title" lang="fr" content="Softiz - La gratuité sous windows" />
<meta name="Identifier-url" content="http://izbing.free.fr/test" />
<meta name="Description" lang="fr" content="Logiciel gratuit sous windows, nombreux tutoriaux, forum et chat" />
<meta name="Keywords" lang="fr" content="windows, libre" />
<meta name="Date-Creation-yyyymmdd" content="20050508" />
<title>Softiz - La gratuité sous windows</title>
<link rel="stylesheet" href="style.css" type="text/css" title="Softiz" />
</head>
<body>

<div id="head">
	<img src="head.jpg" alt="Softiz - La gratuité sous windows" />
</div>

<div id="menu1">
	<a href="" class="menu1" title="Page principale">Accueil</a> -
	<a href="" class="menu1" title="Les membres de l'équipe">Equipe</a> -
	<a href="" class="menu1" title="Demandez, parlez, partagez sur le forum">Forum</a> -
	<a href="" class="menu1" title="Chattez avec nous">Chat</a> -
	<a href="" class="menu1" title="Une selection des meilleurs liens du web">Liens</a> -
	<a href="" class="menu1" title="Contactez nous">Contact</a>
</div>

<div id="centre">
</div>

<div id="conteneur">
	<div id="gauche">
		<a href="" class="menu2" title="">Accueil</a><br /><br />
		<a href="" class="menu2" title="">Logiciel</a><br /><br />
		<a href="" class="menu2" title="">Tutoriaux</a><br /><br />
		<a href="" class="menu2" title="">Faq</a><br /><br />
		<a href="" class="menu2" title="">Dons</a><br /><br />
		<a href="" class="menu2" title="">Forum</a><br /><br />
		<a href="" class="menu2" title="">Team</a><br /><br />
		<a href="" class="menu2" title="">Liens</a><br /><br />
	</div>



</body>
</html>




body {
margin: 0;
}

#head {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
width: 90%;
border: 1px solid #000;
}

#menu1 {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
width: 90%;
border: 1px solid #000;
text-align: right ;
font: bold 16px Times ;
}

#conteneur {
position: absolute;
margin-top: 30px;
width: 150px;
margin-left: 20px;
margin-right: 10px;
background-color:#ffffff;
}


#centre {
position: absolute;
margin-top: 30px;
margin-left: 190px;
width: 70%;
height: 365px;
border: 1px solid #2365D3;
background-color:#ffffff;
background-image: url("bascont.jpg");
background-position: 100% 100%;
background-repeat: no-repeat;
}
#gauche {
border: 1px solid #2E9655;
text-align: center ;
font: 14px Arial ;
background-image: url("basmenu.jpg");
background-position: 100% 100%;
background-repeat: no-repeat;
}


ul {
list-style-type:none; }

a.menu1:link{
color: #276EB6;
text-decoration: none;}
a.menu1:visited{
color: #276EB6;
text-decoration: none;}
a.menu1:hover{
color: green;
text-decoration: none;}
a.menu1:active{
color: #276EB6;
text-decoration: underline;}
a.menu2:link{
color: green;
text-decoration: none;}
a.menu2:visited{
color: green;
text-decoration: none;}
a.menu2:hover{
color: #276EB6;
text-decoration: none;}
a.menu2:active{
color: green;
text-decoration: underline;}
RorolePro.
Le résultat est très decevant.
Rien n'est centré, le cadre du header est beaucoup trop grand.
Comment pourais-je corriger cela avec des % ???
Merci quand même pour le taff
Smiley cligne
Je suis vraiment désolé mais je ne comprend pas trop.
C'est pas faute d'avoir chercher et d'essayer mais bon...
Merci quand même
Froltar a écrit :
Je suis vraiment désolé mais je ne comprend pas trop.
C'est pas faute d'avoir chercher et d'essayer mais bon...
Merci quand même


As-tu essayé ?
Bien sur que j'ai essayer, même avant de demander sur le forum.
Mais de toute façon ma page ne sera pas adaptable à toute les résolution vu que mon header fait 900px de Large.
Je ne cherche donc pas à ce que celle ci soit adaptable.
C'était plus facile avec les tableaux Smiley langue
Froltar a écrit :
RorolePro.
Le résultat est très decevant.
Rien n'est centré, le cadre du header est beaucoup trop grand.
Comment pourais-je corriger cela avec des % ???
Merci quand même pour le taff

Il ne te restait plus qu'à équilibrer deux ou trois chose, je t'ai fais quasiment tout le boulot Smiley eek .... m'enfin....
Sujet clos
Aller à