Mise en page par css

Mado · 10 Mai 2004

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é 10 Mai 2004 par mariepetroni

Mado · 10 Mai 2004

a effacer please

desolée pour les moderateurs

:unsure:

**Americas** · 10 Mai 2004

Au lieu d'effacer tu pourrais nous dire si c'est àa ou pas... ça servira pour d'autres webmasters qui se dépatouillent pour centrer leur page

Mado · 10 Mai 2004

bé nan ca ne marche pas j'y arrive po

Raphael · 10 Mai 2004

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é 10 Mai 2004 par Sibelius

Mado · 10 Mai 2004

j'ai vu ces liens merci sybelius mais je comprends rien ca marche pas chez moi

spa grave j'abondonne

Bug · 10 Mai 2004

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

Monique · 10 Mai 2004

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...

Mado · 11 Mai 2004

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

Monique · 11 Mai 2004

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.

Bug · 11 Mai 2004

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:

jd_ · 11 Mai 2004

C'est bô un topic comme ça :1eye:

Denis · 12 Mai 2004

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 !!!

Connexion

Mise en page par css

Sujets conseillés

Mado

Mado

Americas

Mado

Raphael

Mado

Bug

Monique

Mado

Monique

Bug

jd_

Denis

Veuillez vous connecter pour commenter

Parcourir

Activité