[résolu]bonsoir , j'essaye de faire ma page avec contener mais je voudrais personnaliser les pages sans tableaux montrer dans les tutoriaux ! mais est ce quelqu'un pourrait m'aider ? en fait je voudrais avoir mon logo à gauche et une photo qui vienne jusqu'en haut de ma page à côté sur la droite = il me faut faire 2 têtes 2 header puis en dessous de mon logo mon menu ! donc vous l'avez compris peut être il me faut jouer sur les dimension de mes boîtes ? j'attends votre aide
je vous donne mon code merci de regarder
Modifié par cubitus (15 Oct 2006 - 16:56)
je vous donne mon code merci de regarder
[code]<!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>acceuil</title>
<style type="text/css">
/*Un style universel*/
* {
margin: 0;
padding: 0;
}
/*Mon corps*/
body {
color: #fff;
font-family: Century Gothic;
font-size: 11px;
text-align: center;
background-color: #FFF;
background-image: url();
}
div#container {
margin: 0 auto;
width: 755px;
background-color: #FE9903;
}
/*Ma tête*/
#header p {
font-size: 1em;
font-weight: bold;
color: #FFF;
text-align: left;
padding: 1em;
}
/* Mon menu*/
div#menu {
float: left;
padding: 5px;
width: 150px;
}
#menu ul {
text-align: left;
}
#menu li {
list-style: none;
line-height: 3em;
}
#menu a {
font-weight: bold;
}
div#sous_menu {
width: 150px;
background-color: #fff;
color: #000;
}
div#commentaire {
width: 512px;
margin: auto;
background-color: #fff;
color: #000;
text_align: center;
}
/*Mon contenu*/
div#contenu {
width: 528px;
overflow: hidden;
}
/*Les liens*/
a:link, a:visited, a:active {
color: #FFF;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #20A42E;
}
/*les autres bien utiles parfois*/
hr.spacer {
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<!--Début de la tête-->
<div id="header">
<div align="center"><img src="images/logo-vert.gif" alt="logovert" name="logoVert" width="174" height="84" id="logoVert" />
</div>
<p>37 rue Bouret<br />
75019 Paris<br />
Tel : 01 40 40 94 10<br />
Fax : 01 40 40 90 54<br />
<a href="mailto:contact@aepaysage.com" title="" tabindex="">contact@aepaysage.com</a></p>
<img src="images/barre.jpg" alt="herbe" width="755" height="20" /></p>
</div>
<!--Début du menu-->
<div id="menu">
<ul><li><a href="accueil.html" title="" tabindex="" accesskey="">Accueil</a></li>
<li><a href="agence.html" title="" tabindex="">L'agence</a></li>
<li><a href="projets.html" title="" tabindex="">Les projets</a></li>
<li><a href="design.html" title="" tabindex="">Le design </a></li>
<li><a href="scenograhie.html" title="" tabindex="">La scenographie urbaine </a></li>
<li><a href="contact.html" title="" tabindex="" accesskey="">Contact</a></li>
</ul>
<div id="sous_menu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut odio. Mauris libero est, consequat eu, tristique non, bibendum a, turpis. Mauris viverra tellus volutpat urna. Donec quis eros. Maecenas lectus enim, consectetuer
</p>
</div>
</div>
<!--Début du contenu-->
<div id="contenu">
<h2> </h2>
<p>Votre texte d'aceuil Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le <em>Lorem ipsum</em> ou <em>Lipsum</em> quiqui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin, c'est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, mais surtout que l'attention du client n'est pas dérangée par le contenu et qu'il demeure concentré seulement sur permet donc de faire office de texte d'attente. L'avantage de le mettre en latin, c'est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, mais surtout que l'attention du client n'est pas dérangée par le contenu et qu'il demeure concentré seulement sur l'aspect graphique.qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin, c'est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, mais surtout que l'attention du client n'est pas dérangée par le contenu et qu'il demeure concentré seulement sur </p>
<div id="commentaire">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut odio.
</p>
</div>
</div>
<hr class="spacer" />
<!--Début du footer-->
<div id="footer">Copyright © 2006 <a href="http://www.alyzes.com" title="" tabindex="" hreflang="fr">A&P-Design</a> Tous droits reservé<br />
Graphisme, Web design, conception et création de site Web - A&P-Design.France</div>
</div>
</body>
</html>
Modifié par cubitus (15 Oct 2006 - 16:56)