28115 sujets

CSS et mise en forme, CSS3

Mise en page générale

Bonjour à tous, je ne sais pas si le sujet a déjà était posté (surement par petit bout) mais je propose une configuration et une demande très précise, alors j'en fait un nouveau.

Voila la structure que j'ais désespérément tenté de mettre en place:

http://fractal.septentrion-game.com/test.jpg

Il y a donc 5 DIV:

- le blanc: conteneur général
- le orange: contient le header
- le rouge: contient le menu
- le bleu: contient le contenu
- le vert: le footer

1) Le but de la manœuvre est de créer cette structure [u]sans passer par ABSOLUTE[/u].

2) Deuxième problème, cela doit marcher sous IE et FIREFOX.

3) Enfin détail [u]très important [/u], j'utilise un doc type XHTML STRICT 1.0. Et cela change tout et vi! Smiley smile

Et la c'est le drame, je n'y suis pas arrivé, et pourtant me suis acharner!!
Au final j'ais abdiquer et mit un <table> pour diviser la page en deux....

Donc si qq'un a l'astuce, je suis preneur.

NB: le positionnement via float:left marche avec firefox mais pas ie....
<div name="conteneur" style="width:210px;">

<div name="entete" style="width:210px;height:20px;margin-bottom:10px;background-color:#FF7F50;"></div>

<div name="colonne droite" style="float:left;width:100px;height:50px;background-color:#ff0000;"></div>

<div name="colonne gauche" style="float:left;margin-left:10px;width:100px;height:50px;background-color:#0000FF;"></div>

<div style="display:block;clear:both;"></div>

[ nb: Le block ci-dessous est important car il permet de casser l'alignement à gauche et de faire que le contenu du bloc bas de page se trouve bien en dessous des deux autres.]

<div name="bas de page" style="width:210px;height:20px;margin-top:10px;background-color:#008000;"></div>

</div>
Rah c'est le clear:both qui me manquer. Ptain j'ai appris qq chose aujourd'hui merci Smiley cligne
Modifié par Wells83 (19 May 2006 - 14:32)
Je me suis malheureusement réjouit trop vite. Le code proposer ci dessus pose deux problemes:

si je souhaite décaler le bloc rouge de 10 px vers la droite je rajoute un margin-left sur le bloc rouge.

Ca marche impécable sous FIREFOX mais sous IE le margin déconne. Il créer en fait un décalage de 20px au lieu de 10???

Pour etre plus clair voila ce que je souhaite:

http://www.septentrion-game.info/pb1.png

Ensuite autre probleme, ce que l'on met dans les bloc rouge et bleu n'agrandisse pas le bloc conteneur. Du coup sous firefox sa empiete sur le pied de page alors que sa marche sous IE.

Une image valant mieux qu'un long discour:

http://www.septentrion-game.info/pb2.png


Je sais je met la barre haute, met bon, on aime le CSS ou on l'aime pas lol. Smiley langue

NB: le code de la page au cas ou:




<!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" lang="fr" xml:lang="fr">
<head>
<link href="CSS/general.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<br /><br />
<div class="content">
	<div name="entete" style="width:100%;">
	<div style=" background-image:url(IMAGE/head_01.gif); width:100%; height:9px;font-size: 1px;"></div>

	<div style=" background-image:url(IMAGE/head_04.gif); width:100%; height:17px;font-size: 1px;">
		<div style=" background-image:url(IMAGE/head_02.gif); width:3px; height:17px;"></div>
	</div>
</div>
		<div name="colonne droite" style="float:left;width:27.375%;padding-left:10px;background-color:#00CC00; font-size:12px; color:#FFFFFF; height:10px;">
	gdfkgdfgfdgdfjg<br />
	gdfkgdfgfdgdfjg<br />
	</div>

	<div name="colonne gauche" style="float:left;margin-left:10px;width:68.875%;background-color:#0000FF; font-size:0px; height:10px;">
	
	</div>
	
	<div style="display:block;clear:both;"></div>
<div name="bas de page" style="width:100%;">
	<div style="background-image:url(IMAGE/bas_34.gif); width:100%; height:17px; clear:left;">
		<div style="background-image:url(IMAGE/bas_31.gif); width:100%; height:17px;">
			<div style="background-image:url(IMAGE/bas1_33.gif); width:92.75%; height:17px;margin-left:7.25%;">
				<div style="background-image:url(IMAGE/bas_33.gif); width:63px; height:17px;margin-left:91.51%;font-size: 1px;"></div>
			</div>

		</div>
	</div>
</div></div>

</body>
</html>


et les css:


.content {background-color:#292929;width:800px;margin-left: auto;margin-right: auto; text-align:left; font-size:10px;}
Je répond en partie:

pour le probleme numéro 2 il suffit de mettre height:100% Smiley smile

Le probleme 1) par contre reste entier
salut

a écrit :
Enfin détail [u]très important [/u], j'utilise un doc type XHTML STRICT 1.0. Et cela change tout et vi!


alors fait gaffe aux erreurs...

name="entete" et id="entete" ?

style="width:100%;" pourquoi ne pas placer tout ces styles dans le css?

width:27.375%, width:68.875%;... bonne chance...c'est infernal à gérer.il y à de forte chance que tu sois obliger de revoir ces codes à chaque maj.
Heu ben non, le but de gérer en % c'est justement d'avoir un site qui s'adapte à la taille de l'écran sans avoir rien a retouché deriere....

Vois pas ou est le probleme la?
Salut,

Tu t'apprètes à perdre un temps considérable à travailler ainsi sur un document vide où on ne trouve que des div.

Tu devrais retarder (un peu) tes essais de css et prendre le temps d'élaboré un codage html un peu complet (balisage h1, h2 h3, etc... p, ul ...) quand bien même tu ne le ferais que sur du contenu lui factice (lorem ipsum).

Pour l'instant à mon avis tu fonctionnes à l'envers et tu vas dans le mur.

Comme tu n'as pas relevé la chose je te confirme que hors certains cas très particuliers il ne faut pas utiliser l'attribut name mais bien l'attribut id pour identifier tes éléments.
Réponse en partie à tes problèmes...
en commentaire html dans le code

<!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" lang="fr" xml:lang="fr">
<head>
<link href="CSS/general.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<br /><br />



<div class="content">

<div name="entete" style="width:100%;">
<div style=" background-image:url(IMAGE/head_01.gif); width:100%; height:9px;font-size: 1px;"></div>

<div style=" background-image:url(IMAGE/head_04.gif); width:100%; height:17px;font-size: 1px;">
<div style=" background-image:url(IMAGE/head_02.gif); width:3px; height:17px;"></div>
</div>
</div>


<div name="colonne droite" style="float:left;width:27.375%;padding-left:10px;background-color:#00CC00; font-size:12px; color:#FFFFFF; height:10px;">
gdfkgdfgfdgdfjg<br />
gdfkgdfgfdgdfjg<br />
</div>

<div name="colonne gauche" style="float:left;margin-left:10px;width:68.875%;background-color:#0000FF; font-size:0px; height:10px;">
<!-- ta colonne de gauche ci-dessus est forcéeà 10 pixel de haut donc effectivement sous firefox ton contenu déborde. Cela ne le fais pas sous IE car IE s'adapte au contenu -->

</div>

<div style="display:block;clear:both;"></div>

<div name="bas de page" style="width:100%;">
<div style="background-image:url(IMAGE/bas_34.gif); width:100%; height:17px; clear:left;">
<div style="background-image:url(IMAGE/bas_31.gif); width:100%; height:17px;">
<div style="background-image:url(IMAGE/bas1_33.gif); width:92.75%; height:17px;margin-left:7.25%;">
<div style="background-image:url(IMAGE/bas_33.gif); width:63px; height:17px;margin-left:91.51%;font-size: 1px;"></div>
</div>
</div>
</div>

</div>

<!-- le div ci-dessous est en trop -->
</div>

</body>
</html>
Pour répondre à clb56 :

Là il est entrain de construire la structure de son site. Il n'est pas dans le contenu. C'est toi qui fait les choses à l'envers il me semble. Mais bon c'est en ce qui me concerne un débat stéril et sans grand intérêt.

Sinon, pour Wells83, je te déconseille d'un point de vue ergonomique d'utiliser des %. Cale ton site en pixels. Les recommandations dans le domaine de l'ergonomie étant encore le 800 pixels de large. En effet, la lecture dans les grande largeur est beaucoup plus difficile que dans des largeur plus petite. De plus, c'est beaucoup plus simple d'un point de vue graphique. Enfin, mélanger des % et des valeurs fixes me semble des plus risqué. Maintenant tu es libre de faire ce que tu veux.
.content {background-color:#292929;width:800px;margin-left: auto;margin-right: auto; text-align:left; font-size:10px;}

Quel est l'intérêt de mettre un margin-left et un margin-right en auto si tu développes ton site en %, avec notamment un entete et footer à 100%. C'est inutile ou illogique.

D'un point de vue professionnel, cale ton site en largeur fixe. Tu as tout à y gagner (facilité, clarté, ergonomie,esthétique,...)
Pour keran et clb56

l'attribut "ID" sert à identifier un block ou un élément notamment dans le but de lui appliquer un style ou de le faire interagir avec du javascript par ex.

L'attribut "name" sert à nommer un block. Cela n'a rien à voir et leur utilisation est différente.

Ainsi, tu peux très bien avoir un attribut "id" et un attribut "name" sur le même block, qui plus est, avec des valeurs différentes.
aepron a écrit :
Pour répondre à clb56 :

Là il est entrain de construire la structure de son site. Il n'est pas dans le contenu. C'est toi qui fait les choses à l'envers il me semble. Mais bon c'est en ce qui me concerne un débat stéril et sans grand intérêt.

Sinon, pour Wells83, je te déconseille d'un point de vue ergonomique d'utiliser des %. Cale ton site en pixels. Les recommandations dans le domaine de l'ergonomie étant encore le 800 pixels de large. En effet, la lecture dans les grande largeur est beaucoup plus difficile que dans des largeur plus petite. De plus, c'est beaucoup plus simple d'un point de vue graphique. Enfin, mélanger des % et des valeurs fixes me semble des plus risqué. Maintenant tu es libre de faire ce que tu veux.



Ce qui est très embêtant c'est que répondre à ce gentre d'inepties en cascade (jeu de mots Smiley lol ) risque fort d'être assimilé à du troll.

Tu emploies le terme de structure mais j'ai quelques doutes que tu saches de quoi il en retourne. La notion de structuration a bien son sens par rapport au document html lui même et à son contenu et non par rapport a une éventuelle et aléatoire mise en page obtenue par la mise en oeuvre de css dont le principal bénéfice est de préserver justement la structuration pré établie de manière complètement indépendante de cette perspective.
Ne pas comprendre cela c'est ne rien comprendre. Intervenir comme tu le fais dans une réponse à ce qui me semble être une question de débutant me paraît complètement nuisible dans la mesure où celà apporte de la confusion sur des choses qui ne sont vraiment pas claires pour tout le monde.

a écrit :

Enfin, mélanger des % et des valeurs fixes me semble des plus risqué.

Ce n'est pas que c'est faux mais il s'agit quand même avant tout d'une question de niveau dans le maniement des propriétés de style. Je pense par ailleurs qu'un apprenant a tout intérêt à explorer toutes les possibilités (mais sur une base html fermement établie !!!!!!!!!) et ne pas en rester à des considérations relevant plus de la production (pour autant qu'elles soient fondées bien sur).

aepron a écrit :
Pour keran et clb56

l'attribut "ID" sert à identifier un block ou un élément notamment dans le but de lui appliquer un style ou de le faire interagir avec du javascript par ex.

L'attribut "name" sert à nommer un block. Cela n'a rien à voir et leur utilisation est différente.

Ainsi, tu peux très bien avoir un attribut "id" et un attribut "name" sur le même block, qui plus est, avec des valeurs différentes.


Je crois que tu n'as pas compris du tout le sens de nos interventions à keran et à moi...

... On ne parlait que de validation xhtml 1.0 strict qui est le doctype choisit par Wells83...

Dit autrement si tu veux faire des interventions musclées, essaye de ne pas viser à coté.
Sujet clos
Aller à