Mon premier site sans tableau...

Audiofeeline · 5 Février 2007

Salut à tous!
Bon j'ai décidé de me mettre un peu plus sérieusement au CSS...
J'essaie donc de faire un template assez simple pour commencer pour comprendre le principe du CSS + DIV...
En gros ça doit me faire un truc avec un header, un menu sur la gauche, le contenu à droite et un footer...

Voilà mon CSS :

Code:

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}

a:link, a:visited, a:active {
text-decoration: none;
color: #3399FF;
}

a:hover {
text-decoration: underline overline;
color: #3399FF;
}

#main {
width:800px;
text-align:center;
}

#header {
width:800px;
height:150px;
text-align:center;
}

#menu {
float:left;
width:150px;
text-align:center;
border-size:1px;
border-color:#000;
}

#content {
float:right;
width:650px;
text-align:center;
border-size:1px;
border-color:#000;
}

#footer {
width:800px;
text-align:center;
}

Et ma page HTML :

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon premier site en CSS!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header">[HEADER]</div>
<div class="menu">[MENU DE GAUCHE]</div>
<div class="content">[CONTENU A DROITE]</div>
<div class="footer">[FOOTER]</div>
</div>
</body>
</html>

Bon comme vous l'imaginez ça ne fonctionne pas! :lol: :lol: :lol:
J'espère que vous pourrez me filer un coup de main...

moktoipas · 5 Février 2007

DSL, je dois partir bosser, mais felicitations, c'est comme apprendre a faire du velo sans petites roulettes

Audiofeeline · 5 Février 2007

C'est tout à fait ça...

e-kiwi · 5 Février 2007

<div id="main">
<div id="header">[HEADER]</div>
<div id="menu">[MENU DE GAUCHE]</div>
<div id="content">[CONTENU A DROITE]</div>
<div id="footer">[FOOTER]</div>
</div>

"#" = "id"
"." = "class"

Audiofeeline · 5 Février 2007

En effet, j'ai appris un truc là!

Ca m'a l'air de fonctionner...
Parcontre j'ai un doute avec float, c'est comme ça qu'il faut faire?...
Et mon #main n'est pas centré dans ma page...

keroin · 5 Février 2007

Je suis tombé là dessus tout à l'heure, je pense que ça pourra t'aider même si l'exemple est un 3 colonnes.
=> http://www.pixtiz.com/fr/blog/web/tutor ... centre.php

Audiofeeline · 5 Février 2007

Finalement je savais un peu le faire mais c'est surtout certaines syntaxes que je ne maitrise pas encore...
Comment faire alors pour centrer l'ensemble avec #main?

e-kiwi · 5 Février 2007

#main {
width:800px;
margin-left:auto;
margin-right:auto;
}

Audiofeeline · 5 Février 2007

Ah ouais! Ok!!!
C'est tout con finalement...
Voilà où j'en suis : http://audiofeeline.free.fr/css/

e-kiwi · 5 Février 2007

attention lorsque tu voudra rajouter du padding dans ton menu gauche ou contenu, ie et firefox ne réagissent pas pareil, tu risque de devoir passer par un div intermediaire qui aura le padding (au cas ou tu tombes sur le cas ^^)

Audiofeeline · 5 Février 2007

Justement, j'aimerai mettre un padding-left sur le contenu...
Il vaut peut-être mieux séparer le menu et le contenu avec un div de 10px de largeur?

e-kiwi · 5 Février 2007

euh non, il faut garder cette structure principale de "haut-gauche-droite-bas" plutot que d y inserer un div de 10px vide (ca sera jamais bon sur tous les navigateurs ^^) et faire comme j'ai dit plus haut (jouer sur les margin/padding)

Audiofeeline · 5 Février 2007

Code:

#content {
float:right;
width:640px;
text-align:left;
padding-left:10px;
background-image:url(images/content.png);
}

Fonctionne très bien avec Firefox 2.0 et IE7...

Il faut juste penser a réajuster le width en fonction du padding...

e-kiwi · 5 Février 2007

oui mais regarde si il ne t'as pas poussé le coté droit de 10px

ACth · 5 Février 2007

Audiofeeline a dit:
Parcontre j'ai un doute avec float, c'est comme ça qu'il faut faire?...

Il y a plusieurs moyens de faire : en passant par un float, un positionnement absolue, etc.

Lorsque l'on utilise des dimensions fixes, il est vrai que c'est plutôt simple à mettre en place, mais lorsqu'il y a des dimensions variables, et beaucoup de contenu (divers cadres, images, etc..) c'est un peu plus chaud à mettre en place, surtout s'il l'on veut que ce soit lisible en 800 X 600.

tryan · 5 Février 2007

Si sa peut t'aider à y voir plus clair http://c00lman.free.fr/creer-un-cadre-c ... en-css.php

e-kiwi · 5 Février 2007

sans utiliser le flat, on peut définir le div conteneur en position:relative et dedans positionner le bloc de gauche en absolute 0px 0px avec taille défini (ex : 150px et le bloc de droite en absolue 150px 0px avec une taille de 800-150.)

cela te permet d afficher dans le code source le contenu avant le menu, ou vice versa

e-kiwi · 5 Février 2007

tryan a dit:
Si sa peut t'aider à y voir plus clair http://c00lman.free.fr/creer-un-cadre-c ... en-css.php

le site que tu cites n'a pas un affichage correct sous firefox, difficile du coup de croire en ses conseils

ACth · 5 Février 2007

e-kiwi a dit:
le site que tu cites n'a pas un affichage correct sous firefox, difficile du coup de croire en ses conseils

Quel est le problème sous FF ?

e-kiwi · 5 Février 2007

les pubs adsense de droite sortent du cadre du site faut pas avoir adblock pour le voir ^^)

ACth · 5 Février 2007

e-kiwi a dit:
les pubs adsense de droite sortent du cadre du site faut pas avoir adblock pour le voir ^^)

^^ oups :mrgreen:

tryan · 5 Février 2007

e-kiwi a dit:
tryan a dit:

Si sa peut t'aider à y voir plus clair http://c00lman.free.fr/creer-un-cadre-c ... en-css.php

Cliquez pour agrandir...

le site que tu cites n'a pas un affichage correct sous firefox, difficile du coup de croire en ses conseils

Faut pas juger trop vite :wink: simple erreur de "width" ...