28221 sujets

CSS et mise en forme, CSS3

Premiere page avec beaucoup de mal ( probléme de marge)

Bonjour

Je tiens à dire de suite que c'est ma premiére page, j'ai lu les tuto de alsacréation mais pour mieux comprendre il faut mettre la main à la pate.

Donc voila pour le moment je fait qu'une page inspiré du site openweb.
Mon problème sont les marges que j'ai du mal à maitrisé.


<!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>page de test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="global">
                    <div class="menu1"></div>
                    <div class="menu2"></div>
	       	    <div class="menu3"></div>
		    <div class="menu4"></div>
</div>					
</body>
</html>





/* CSS Document */
<style type="text/css">

{}
html, body {
    margin:0;
	padding:0;
	background-color: #369;	
}
.global{
    width:1250px;
	height:1400px;
	margin-left:auto;
	margin-right:auto;
	margin-top:25px;	
	border: 2.5px solid #000;
	background-color:#FFFFFF;
	
}	
.menu1{
    width:150px;
	height:100px;
	margin:30px;
	padding:5px;
	border: 1.5px solid #000;
	background-color:#f5deb3;
}
.menu2{
    width:150px;
	height:100px;
	margin:30px;
	padding:5px;
	border: 1.5px solid #000;
	background-color:#f5deb3;
}
.menu3{
    width:150px;
	height:100px;
	margin:30px;
	padding:5px;
	border: 1.5px solid #000;
	background-color:#f5deb3;
}
.menu4{
	float: right;
	width:150px;
	height:100px;
	margin:30px;
	border: 1.5px solid #000;
	background-color:#f5deb3;
	
}
 



</style>


j'aimerai placé mon menu4 à doite à la même hauteur que le menu1.

si vous avez une idée je suis preneur

merci Smiley smile
Bonjour xinu et bienvenue sur le Forum Alsacréations !

À mon avis, faire une mise en page sans contenu est plutôt aléatoire.

Je te suggère avant tout d'utiliser au minimum les éléments suivants :

<!-- Un titre -->
<h1>Titre</h1>

<!-- Une liste de liens -->
<ul>
 <li><a href="#">Lien bidon</a></li>
 <li><a href="#">Lien bidon</a></li>
 <li><a href="#">Lien bidon</a></li>
 <li><a href="#">Lien bidon</a></li>
</ul>

<!-- Un texte de remplissage -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum</p>

Modifié le 05 Jan 2005 - 11:20
Sujet clos
Aller à