Aller au contenu

Mise en page par css


Mado

Sujets conseillés

bonjour

est ce cela?

un div #conteneur

de 100% de large avec des marge auto pour que la page soit centrée

a l'interieur de ce div conteneur

un div #haut pour la bannière

un div #menu a gauche

width 120px

un div #milieu

un div #menu gauche

est ce que cela est juste?

merci

Modifié par mariepetroni
Lien vers le commentaire
Partager sur d’autres sites

de 100% de large avec des marge auto pour que la page soit centrée

Hummm, si elle occupe 100% de la largeur, je ne vois pas trop comment elle va être centrée :whistling:

Pour le centrage, les sites sont nombreux. Une rapide recherche sur Google "centrer CSS" donne pas mal de résultats pertinents ;)

http://openweb.eu.org/articles/initiation_centrage/

http://www.alsacreations.com/articles/centrer/

http://incongru.webdynamit.net/CentrageHorizontal

...

Modifié par Sibelius
Lien vers le commentaire
Partager sur d’autres sites

faut jamais abandonner

comment j'ai fait pour centrer (avec des largeurs fixes, mais si ca peut te donner une piste):

body {
background-color: #DEC69C;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center; <----- pour centrer dans IE
line-height: 20px;
color: #DEC69C;
margin-left: 0px;
margin-right: 0px;
}

.principal {
background-image:url(images/logo1.jpg);
width: 780px;
margin-left: auto;   <------- pour centrer dans les autres
margin-right: auto;  <------- pour centrer dans les autres
padding: 0px;
top: 10px;
bottom: 10px;
left: 0px;
right: 0px;
background-color: #000000;
}

ensuite, je mets tout dans .principal

courage :!:

pour voir le resultat, un clic sur ma signature

attention, seule ma page mangeur de cigogne utilise une css, les autres sont en cours d'adaptation

Lien vers le commentaire
Partager sur d’autres sites

Ben alors Marie, tu ne vas quand même pas baisser les bras ;)

Essaie un peu ceci

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

body {
 margin : 0;
 padding : 0;
 font-family : verdana, arial, helvetica, sans-serif;
 background-color : #ff6600;
 font-size : 80%;
}
a {
 color: #ffffff;
 font-size: 1.2em;
 background-color: transparent;
}

#conteneur {
 text-align: center;
}
#bloc-centre {
 margin-left: auto;
 margin-right: auto;
 margin-top: 50px;
 background-image: url(acc_jaj_001.jpg);
 background-repeat: no-repeat;
 width: 780px;
 height: 430px;
 text-align: left;
}

#enfants {
 position: relative;
 top: 80px;
 left: 50px;
 width: 150px;
}
#parents {
 position: relative;
 top: 200px;
 left: 575px;
 width: 150px;
}
#accueil {
 margin-top: 270px;
 width: 780px;
 background-color: #F3EAC1;
}
p {
  margin: 15px;
  padding: 15px;
  background-color: #ffffff;
}
-->
</style>
</head>
<body>
<div id="conteneur">
<div id="bloc-centre">
<div id="enfants" title="Lien vers les pages pour les enfants">
 <a href="enfants/index.html">le coin des enfants</a></div>
<div id="parents"><a href="parents/index.html" title="Lien vers les pages pour les parents">Le coin des parents</a></div>
<div id="accueil"><p>Parce qu'un enfant à l'hôpital, ce n'est jamais juste et quand il s'agit de maladie comme le cancer, la révolte est encore plus grande.Parce qu'il faut organiser le mieux possible le quotidien de ces enfants, ainsi que le soutien moral et parfois financier de leurs familles. Parce que ces enfants, plus que jamais, ont besoin de cadeaux et d'amis sincères, mais aussi de voyages et de rêves. Parce que le rêve, c'est l'espoir, et qu'au royaume de l'espoir, il n'y a pas d'hiver...</p></div>
</div><!-- fin bloc-centre -->
</div><!-- fin conteneur -->
</body>
</html>

Par contre, pour le référencement, le texte dans l'image ce n'est pas une bonne idée.

Il vaudrait mieux utilser des balises h1...

Lien vers le commentaire
Partager sur d’autres sites

olalala je galère grave

mais bon je tiens le cap

merci a Monique et a Bug entre autre pis a tous en fait

voila j'ai avancé :unsure:

l'ai-je bien fait?

merci de me dire j'ai pas verifier la validation ben je me fais pas trop d'idée y'a surement des fautes

mais est ce que la pages des enfats et des parents vous semblent correctes?

http://www.zengrafom.org/site/index.htm

je vous remercie tous pour votre aide et vos encouragements

a bientot

Lien vers le commentaire
Partager sur d’autres sites

Eh, eh... cela fait plaisir de lire : Congratulations, no errors! :up:

Je te propose de remplacer le bloc Accueil par ceci, avec les modifications pour la CSS

dans la feuille de style (en remplacement de p)

ul {
margin: 15px;
padding: 15px;
background-color: #ffffff;
}
li {
list-style-type: none;
padding-bottom: 0.5em;
}

h1 {
color: #ff6600;
font-size: 1.2em;
margin-right: 1em;
text-align: right;
}

et dans le code

<div id="accueil">
<h1>L'ASBL Jour après jour</h1>
<ul><li>Parce qu'un enfant à l'hôpital, ce n'est jamais juste et quand il s'agit de maladie comme le cancer, la révolte est encore plus grande.</li>
<li>Parce qu'il faut organiser le mieux possible le quotidien de ces enfants, ainsi que le soutien moral et parfois financier de leurs familles.</li>
<li>Parce que ces enfants, plus que jamais, ont besoin de cadeaux et d'amis sincères, mais aussi de voyages et de rêves.</li>
<li>Parce que le rêve, c'est l'espoir, et qu'au royaume de l'espoir, il n'y a pas d'hiver...</li></ul>
</div>

Les points importants apparaissent plus clairement, le titre est utlie tant pour la sémantique que pour le référencement.

Lien vers le commentaire
Partager sur d’autres sites

Eh, eh... cela fait plaisir de lire : Congratulations, no errors!

meme la css est valide, tu vois qu'il ne faut jamais se decourager

bon courage pour la suite :up:

Lien vers le commentaire
Partager sur d’autres sites

Ouais, excellent ! Comme quoi que tant qu'il y a de la vie, il y a de l'espoir. Je suis si ému que je considère envoyer un don à la fondation du Hub !!! :P

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...