Aller au contenu

Mise en page par css

Mado

Par Mado
dans (X)HTML et CSS

 Partager

Sujets conseillés

Mado

Mado

Posté
Posté (modifié)

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
Raphael

Raphael

Posté
Posté (modifié)
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
Bug

Bug

Posté
Posté

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
Monique

Monique

Posté
Posté

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
Mado

Mado

Posté
  • Auteur
Posté

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
Monique

Monique

Posté
Posté

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
Bug

Bug

Posté
Posté
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
Denis

Denis

Posté
Posté

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
 Partager
Aller sur la liste des sujets
×
×
  • Créer...