18067 sujets

Questions générales et questions de débutants

Fixer mes blocs

Bonjour,
franchement je n'y arrive plus avec les "margin" est ce que quelqu'un pourrait m'aider à fixer mes blocs pour que je n'ai plus de problème, je m'emmêle les pinceaux avec position absolute,float ...j'ai compris le principe mais je n'arrive pas l'adapter Smiley bawling à la mise en page que je veux garder merci 
 <!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" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>projets-amenagementberges</title> 
<style type="text/css"> 
* { 
margin: 0; 
padding: 0; 
} 
/*Mon corps*/ 
body { 
color: #fff; 
font-family: Century Gothic; 
font-size: 11px; 
background-color: #FFF; 
} 
#container { 
margin: 0 auto; 
width: 759px; 
background-color: #FE9903; 
} 
/* Mon menu*/ 
#menu { 
float: left; 
padding: 1em; 
width: 156px; 
} 
<!--Le sytle du menu--> 
#menu ul { 
text-align: left; 
text-indent: 0px;
} 
#menu li { 
list-style: none; 
line-height: 3em; 
} 
#menu a {font-weight: bold; } 
/*Mon contenu photo*/ 
#contenu { 
width: 560px;
position: relative;
margin: 0px;
}
/*Ma barre dherbe*/
#div 1{width: 700px;}
/*Enumération*/
#div 2{
float: left;
text-align: left; 
padding :1em
}
/*les autres bien utiles parfois*/ 
hr.spacer { 
visibility: hidden; 
clear: both; } 
/*Les liens qui changent de couleur*/ 
a.white {color:#ffffff;}
a.white:hover {color:#ffffff;}
a.orange {color:#ffffff;}
a.orange:hover {color:orange;	}
a.green {color:#20A42E;}
a.green:hover {color:#FE9903;}
a.pj {
color:#ffffff;
font-family : Impact;
font-size :18px;
}
a.pj:hover {color:#FE9903;}
/*Les liens qui concernent toute la page*/	
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;color: #FFFFFF;}
a:active {text-decoration: none;}
/*Le style de la page ouverte*/ 
.bg_du_menu{
background-image:url(images/barre.jpg);
font-weight: bold;
padding: 3px;
}
/*les autres styles*/
.Style1 {color: #20A42E}
.Style8 {font-family: "Century Gothic"; font-size: 12px; color: #20A42E; font-weight: bold; }	
.Style17 {color: #FFFFFF;font-size: 9px}
.Style9 {background-image: url(images/barre.jpg); 
font-weight: bold;
font-family: "Courier New"; 
color: #FE9903; 
font-size: 18px;}
</style> 
</head> 
<body> 
<div id="container"> 
<!--Début du menu-->
<div id="menu"> 
<img src="images/logo-vert.gif" alt="logo" width="174" height="74" />
<ul><li>
  <div align="left"><a href="accueil.html"class="white lien blanc">Accueil</a></div>
</li> 
<li>
  <div align="left"><a href="agence.html" class="white lien blanc">L'agence</a></div></li> 
<!--La page ouverte--> 	
<li><div class="bg_du_menu">Les projets</div></li> 
    <!--La suite du menu--> 
  <li>
    <div align="left"><a href="design.html" class="white lien blanc">Le design</a></div></li> 
<li>
  <div align="left"><a href="scenograhie.html"class="white lien blanc">La scenographie urbaine </a></div></li> 
<li>
  <div align="left"><a href="contact.html"class="white lien blanc">Contact</a></div></li> 
</ul> 
</div> 
<!--Début du contenu--> 

<div id="contenu">
  
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>  </tr>
  <tr>
    <td><img src="images/pavillons1.jpg" alt="canal de l'Ourcq" width="560" height="374" /></td>
  </tr>
</table>

</div>
<!--barre dherbe--> 
	<div id="div 1"><div class="Style9">
	  <div align="right">AMENAGEMENT DE BERGES</div>
	</div>
<!--Enumération villes-->   
  <div id="div 2"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="26%" rowspan="9" valign="bottom">
<!--Copy--> 
	 <p align="left" class="Style17">&copy; 2006 <a href="http://www.alyzes.com"class="white lien blanc">A&amp;P-Design</a> <br /></td>
<!--<!--Enumération des villes-->	
    <td width="66%" rowspan="9" bgcolor="#FFFFFF" class="Style8"align="justify">
    Pavillons sous Bois &quot;<a href="pavillon sous bois.html"class="green lien vert">Canal de l'Ourcq</a>
 </td>
<!--Menu droit-->
    <td width="8%" background="images/barre.jpg" class="lien2">
        <p align="center"><a href="pj.html" class="pj">PJ</a></p>		</td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center"><a href="amenagementberges.html"class="pj">AB</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center"><a href="zoneactivites.html"class="pj">ZA</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center"class="pj"><a href="amenagementurbain.html"class="pj">AU</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center" class="pj"><a href="traversees.html"class="pj">T</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center" class="pj"><a href="zonehabitation.html"class="pj">ZH</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center" class="pj"><a href="centresportif.html"class="pj">CS</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center" class="pj"><a href="etscolaire.html"class="pj">ES</a></div></td>
  </tr>
  <tr>
    <td background="images/barre.jpg" class="pj"><div align="center" class="pj"><a href="autoroute.html"class="pj">A</a></div></td>
  </tr>
  
</table>
 </div> 
</div>
 </div>
</body> 
</html>
Bonjour,

ouh la !

ben dis-donc : c'est quoi tous ces tableaux ?
Déjà, par exemple, sais-tu que pour "<!--Menu droit-->", tu peux utiliser une liste (<ul><li> ...) : tu t'y perdra moins.

Déjà...

Pour le reste, je ne vois pas quel résultat tu souhaites obtenir : tu n'aurais pas une url à nous communiquer ?
Sujet clos
Aller à