28172 sujets

CSS et mise en forme, CSS3

Mettre un style à mon site

bonjour à tous,

Je voulais mettre une mise en page à mon site seul, pour bien comprendre, sans copier à l'aveuglette un style pret.

Alors voila ce que j'ai pu faire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>contruction site</title>
<style type="text/css"> 
#global {
	width: 750px;
	border-top: 1px;
	border-right: 1px;
	border-bottom: 1px;
	border-left: 1px;
	border-color: #D4D0C8;
}
#title {
	border-color: #D4D0C8;
	border-bottom: 1px;
}
#nav_top {
	border-bottom: 1px;
	border-color: #D4D0C8;
}
#nav_infos{
    text-align:right;
}
#content {
	text-align: left;	
}
#left {
	width: 150px;
	text-align: left;
}
#center {
    border-right: 1px;
	border-left: 1px;
	border-style: dotted;
	}
#right {
	width: 150px;
	text-align: right;
}
#footer {
	text-align: center;
}

#nav_top.right {
	float: right;
}
#nav_top.left{
	float: left;
}
</style> 

</head>

<body dir="ltr">

<div id="global">
<div id="title">mon site</div>
<div id="nav_top">
  <ul>    
     <li class="left"><a href="index.php">Acceuil</a></li>
     <li class="left"><a href="register.php">S'enregistrer</a></li>    
     <li class="left"><a href="edit.php">Contr&ocirc;ls</a></li>  
	 <li class="right"><a href="edit.php">Contact</a></li>  
  </ul></div>
  <div id="nav_infos">Membres online
</div>
<div id="content">   
   <div id="left"></div>   
   <div id="center">Affichage centr&eacute; des pages du site</div>   
   <div id="right"></div>
</div>
<div id="footer">Copyright
</div>
</div>
</body>
</html>


Merci d'avance de toute aides.
Bonjour,

apt a écrit :
Merci d'avance de toute aides.

À quel sujet? Tu n'as pas indiqué ce qui te posait problème. Smiley cligne
Bonjour florent,

La partie style css est incomplete ...

Il faut bien centrer les div pour tous les navigateurs par exemple ...
Bonjour,

Un autre essai, mais le tout est chamboulé :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>contruction site</title>
<style type="text/css"> 
#global {
	border:1px solid #D4D0C8;
	width:750px;
	position: relative;
	margin: 0px auto;
	
}
#title {
    border:1px solid gray;
}
#nav_top {
    border:1px solid gray;
}
#nav_infos {
	text-align:left;
	border-bottom: 1px solid gray;
}
#content {

}
#left, #center /*, #right*/ {
             padding:10px;
	float:left;
	}
#left {
	text-align:left;
	width:150px;
	border-right: 1px solid gray;
}
#center {
	border:1px none;
	width:390px;
}
#right {
	text-align:left;
	width:150px;
	border-left: 1px solid gray;
	float:right;
}
#footer {
	text-align:center;
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
	position:absolute;
	height: 25px;
	width: 750px;
	clear:both;
	
}
#nav_top.right {
            float:right;
}
#nav_top.left {
            float:left;
}
#nav_top ul {
            list-style:none;
}
#nav_top ul il {
            display:block;

</style> 
 
</head>
 
<body>
 
<div id="global">
<div id="title">mon site</div>
<div id="nav_top">
  <ul>    
     <li class="left"><a href="index.php">Acceuil</a></li>
     <li class="left"><a href="register.php">S''enregistrer</a></li>    
     <li class="left"><a href="edit.php">Contrôls</a></li>  
     <li class="right"><a href="edit.php">Contact</a></li>  
  </ul>
</div>
<div id="nav_infos">Membres online</div>
<div id="content">   
   <div id="left"></div>   
   <div id="center">Affichage centré des pages du site</div>   
   <div id="right"></div>
</div>
<div id="footer">Copyright
</div>
</div>
</body>
</html>


Smiley fache
Modifié par apt (01 Dec 2008 - 23:33)
Sujet clos
Aller à