Création du désign de mon site web
Bonjour,
je suis entrain de créer le design fixe pour mon site web , étant donné que je ne suis pas experte en la matière je trouve des difficultés de mettre le corps à coté du menu .
actuellement j'ai le au dessus du menu " à sa droite" .
pouvez vous m'aider svp
je suis entrain de créer le design fixe pour mon site web , étant donné que je ne suis pas experte en la matière je trouve des difficultés de mettre le corps à coté du menu .
actuellement j'ai le au dessus du menu " à sa droite" .
pouvez vous m'aider svp
Configuration: windows xp
10 réponses
-
si tu donnais ton code et que tu expliquais clairement ce que tu voudrai faire on pourrait peut etre t aider ^^
-
oui, mets le script de la page et aussi le css ^^
-
bonjour,
au fait je n'ai pas encore mis le contenu de mon site, j'aimerai créer un bon design puis le reste c'est assez facile.
le CSS
body
{
text-align: center;
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("http://a31.idata.over-blog.com/1/19/95/68/broderies-offertes/anniv-Magali-coeur-crochet-pia.jpg"/* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("http://chez.patoo.free.fr/kit%20tiff/fond%20brillant.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: pink;
background-repeat: repeat-x;
}
/* Quelques effets sur les menus */
.element_menu h4 /* Tous les titres de menus */
{
color: peurple;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
ul
{
list-style-type: disc;
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color:blue;
}
/* Le corps de la page */
#corps
{
margin-left: 140px;
margin-bottom: 20px;
margin:5px auto;
color: black;
}
#corps h1
{
color: pink;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
padding-left: 30px;
color: pink;
text-align: left;
}
p
{
width: 600px;
height: 50px;
}
h1,h2
{
width:600px;
}
le XHTML
<!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">
<head>
<title> Site réservée pour le maquillage </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design2" href="design2.css"/></head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<div class="element_menu">
<h4> titre sous menu1 </h4>
<ul>
<li> <a href="page1.html"> lien</a></li>
<li> <a href="page2.html"> lien</a>lien </li>
<li> <a href="page3.html"> lien</a>lien </li>
</ul>
<div class="element_menu">
<h4> titre sous menu2 </h4>
<ul>
<li> <a href="page4.html"> lien</a>lien </li>
<li> <a href="page5.html"> lien</a>lien </li>
<li> <a href="page6.html"> lien</a>ien </li>
</ul>
</div>
</div>
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
</body> -
voilà ce que j'ai ,
j'ai un souci au niveau des sous menu j'aimerai qu'il soient ensemble , ensuite la cadre en noir dépasse le menu en haut et j'aimerai qu'ils soient au même niveau .
<code type: html > <!-- <!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">
<head>
<title> Site réservée pour le maquillage </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design2" href="design2.css"/></head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<div class="element_menu">
<h4> titre sous menu1 </h4>
<ul>
<li> <a href="page1.html"> lien</a>lien</li>
<li> <a href="page2.html"> lien</a>lien </li>
<li> <a href="page3.html"> lien</a>lien </li>
</ul>
</div> <hr/>
<div class="element_menu">
<h4> titre sous menu2 </h4>
<ul>
<li> <a href="page4.html"> lien</a>lien </li>
<li> <a href="page5.html"> lien</a>lien </li>
<li> <a href="page6.html"> lien</a>ien </li>
</ul>
</div>
</div>
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
</body> > </code>
<code type: css > <!-- body
{
width:760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("http://a31.idata.over-blog.com/1/19/95/68/broderies-offertes/anniv-Magali-coeur-crochet-pia.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 130px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: pink;
height: 160px;
}
.element_menu h4 /* Tous les titres de menus */
{
color: green;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-type:square; /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: blue;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: purple;
color: white;
}
#corps
{
width: 700px;
height:1000px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: silver;
background-color: black; /* Une couleur de fond pour le corps */
border: 2px solid pink; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps h1
{
color: pink;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
padding-left: 30px;
color: pink;
text-align: center;
}
> </code> -
D accord alors déja afin que ton code soit mieux présenté. Il faut que tu mette ton CSS entre des balise <style></style>
Et tu place ceci entre les balises <head></head>
Remet le code modifié ici et on pourra voir plus clair a ton code et t'aider ;) -
bonsoir
ok je vais faire ça
<style>body
{
width:760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("http://a31.idata.over-blog.com/");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 130px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: pink;
height: 160px;
}
.element_menu h4 /* Tous les titres de menus */
{
color: green;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-type:square; /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: blue;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: purple;
color: white;
}
#corps
{
width: 700px;
height:1000px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: silver;
background-color: black; /* Une couleur de fond pour le corps */
border: 2px solid pink; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps h1
{
color: pink;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
padding-left: 30px;
color: pink;
text-align: center;
} </style>
<head> <!-- <!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">
<head>
<title> Site réservée pour le maquillage </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design2" href="design2.css"/></head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<div class="element_menu">
<h4> titre sous menu1 </h4>
<ul>
<li> <a href="page1.html"> lien</a>lien</li>
<li> <a href="page2.html"> lien</a>lien </li>
<li> <a href="page3.html"> lien</a>lien </li>
</ul>
</div> <hr/>
<div class="element_menu">
<h4> titre sous menu2 </h4>
<ul>
<li> <a href="page4.html"> lien</a>lien </li>
<li> <a href="page5.html"> lien</a>lien </li>
<li> <a href="page6.html"> lien</a>ien </li>
</ul>
</div>
</div>
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
</body> </head>
voilà , j'avais cru que je devais mettre le code entre <code=type="html"> </code> -
waw ça ne marche toujours pas punaise
un petit test c'est soulant !!!!
<head><div class="element_menu">
<head><h4> titre sous menu2 </h4></head>
<head><ul>
<head><li> <a href="page4.html"> lien</a>lien </li></head>
<head><li> <a href="page5.html"> lien</a>lien </li></head>
<head><li> <a href="page6.html"> lien</a>ien </li></head>
</ul></head>
</div></head>
</div></head>
<head><div id="corps">
<head><h1>Mon super site</h1></head>
</div</head>
<head><p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p></head>
<head><h2>A qui s'adresse ce site ?</h2></head>
<head><p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p></head>
<head><h2>L'auteur</h2></head>
<head><p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p></head> -
alors là je jette l'éponge .
j'ai pourtant mis le code du CSS entre <style> et </style>
et le html entre<head> et </head > puis j'ai réessayer et j'ai ajouter ça à chaque balise et ça ne marche pas .
rhoooooooooooo -
tiens, regarde ceux la et recupere celui qu'il te faut, au moins ca fonctionnera^^
http://www.alsacreations.com/static/gabarits/liste.html
-
bonjour,
merci cheese42 c'est gentil je vais voir ça .
tu me donnes une envie folle de fromage ^^
