28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Structure et positionnement

Bonjour à tous, et tout d'abord un grand "shout to Alsacreations"!

J'utilise du CSS depuis un bon bout de temps et j'ai décidé de revoir mes bases Smiley ravi

J'ai parcouru les tutoriax sur le positionnement et autres float, et je me suis lancé dans la conception de mon site.

Voici ce que j'ai préparé:


<html>
<HEAD><TITLE>TEST</TITLE>
<STYLE type=text/css>

/* Conteneur */

#conteneur {
width:760px;
margin:0 auto;
}

/* Structure*/

#header {
width: 760px;
height: 130px;
background: red;
}

#content {
width: 760px;
position: relative;

}

#footer {
width: 760px;
height: 50px;
background: teal;
}

/* Content */

#primarylinks {
position:absolute;
left: 0;
width:170px;
background: green;
}

#ads {
margin-left:170px;
background: blue;
}

#contenu {
left: 0;
width:590px;
background: green;
margin-right:170px;
}

#secondarylinks {
width: 170px;
background: blue;
position: absolute;
right: 0;
}

/* Clearer */

.clearer {
clear: both;
}

</STYLE>
</HEAD>

<BODY>

<div id="conteneur">

<div id="header">HEADER</div>

<div id="content">

 <div id="primarylinks">PRIMARYLINKS</div>
 <div id="ads">ADS</div>

 <div id="contenu">CONTENU</div>
 <div id="secondarylinks">SECLINKS</div>

</div>

<div id="footer">FOOTER</div>

</div>

</body>

</html>



En gros:
HEADER
CONTENT
FOOTER

Dans mon CONTENT, il y a 2 parties, 2 groupes d'info, prenant toute la largeur de mon conteneur, et empilées:

upload/17318-test.GIF

1. Un groupe contenant un groupe de lien à gauche(#primarylinks) et une partie de pub à droite, les 2 ont une hauteur fixe
2. Un groupe contenant un groupe de lien à droite(#secondarylinks) et les informations principales de mon site à gauche


J'ai lu le tutoriel suivant:

"Maîtriser le positionnement CSS dans toutes les situations"

Deux méthodes sont expliquées:

1)un div avec un margin-left, un autre div en position absolute
2)un wrapper qui va englober nos div, utilisation de float


> Laquelle se prête le mieux à ce que je veux faire?
> Pourquoi?

Le challenge tient du fait qu'il y a 2 groupes distincts, à la suite

Peut-on quand même appliquer la première méthode de cette façon:

#header en position:relative
#primarylinks en position:absolute
#ads avec margin-left de la taille de mon #primarylinks

puis je pose le 2ème groupe d'infos avec

#secondarylinks en position:absolute
#contenu avec margin-right de la taille de mon #secondarylinks


<div id="primarylinks">PRIMARYLINKS</div>
<div id="ads">ADS</div>


et


<div id="contenu">CONTENU</div>
<div id="secondarylinks">SECLINKS</div>


Ou dois-je forcément (automatiquement) englober mes deux groupes de cette façon et utiliser du float:



<div id="groupe1">
<div id="primarylinks">PRIMARYLINKS</div>
<div id="ads">ADS</div>
</div>

<div id="groupe2">
<div id="contenu">CONTENU</div>
<div id="secondarylinks">SECLINKS</div>
</div>



Question:
Dans une page, devrait-il y avoir UN SEUL élément en position:relative en tout et pour tout, ou peut-on en définir plusieurs?

Question:
Dans le cas de mon site et s'il est possible d'appliquer la première méthode, quel élément devrait avoir une

position:relative??? #header? #content? #ads?

Question: Dans le cas de mon site et s'il est obligatoire d'appliquer la seconde méthode, quel élément devrait avoir une

propriété overflow:hidden?

J'essaye de comprendre et de structurer optimalement mon code et remercie d'avance ceux qui pourront m'aider ou m'aiguiller dans la bonne voie (TadaaaAAAAAA!)

Long live Alsacréations! Smiley biggrin Smiley biggrin Smiley biggrin
Modifié par Battyboy (21 Jul 2008 - 18:05)
Bon...pas de réponse pour l'instant..

Laissez-moi une seconde chance de vous exposer mon souci:

upload/17318-test2.JPG

Comme vous le constatez, j'ai une structure à composer, et je vous sollicite pour savoir quel chemin emprunter..

Chaque numéro illustre une situation possible et un autre moyen d'arriver à mes fins, mais je ne suis pas capable de faire mon choix logiquement..

Merci beaucoup!
Modifié par Battyboy (18 Jul 2008 - 14:32)
Bonjour,

N'ayant pas connaissance des quantités de contenus qui seront présentées, j'opterais pour une solution à base de flottants dans ce genre-là:

[#black][b]HTML[/b][/#]

	<div id="conteneur">
		<div id="header">…</div>
		<div id="linksAdsWrap">
			<div id="links1">…</div>
			<div id="ads">…</div>
		</div>
		<div id="contenu">…</div>
		<div id="links2">…</div>
		<div id="footer">…</div>
	</div>

[#black][b]CSS[/b][/#]

	#conteneur {width:760px; margin:0 auto;}
	#linksAdsWrap {overflow:auto;}
	#links1,#links2 {width:170px;}
	#links2 {margin-left:590px;}
	#ads {margin-left:170px;}
	#links1, #contenu {float:left;}
	#contenu {width:590px;}
	#footer {clear:left;}
Merci beaucoup pour la réponse Smiley biggrin

ALors,

En matière de contenu:

-mon LinksAdsWrap a une hauteur fixe (#links est un menu li avec line-height défini), donc overflow:hidden

-mon div #links est plus court que le div #contenu

Je pourrais m'en sortir sans flottants?


En tout cas je vais tester tout ça et essayer de comprendre le raisonnement!
Bonjour,

En passant, je m'inquiète beaucoup quand je vois que le code HTML cité commence par:
<html>
<HEAD><TITLE>TEST</TITLE>
<STYLE type=text/css>

Un passage en XHTML 1.0 Strict, avec Doctype qui va bien, ne ferait pas de mal. C'est un bon apprentissage de la rigueur. Smiley cligne
Battyboy a écrit :

Je pourrais m'en sortir sans flottants?

Il ne s'agit pas d'éviter à tout prix l'utilisation des flottants, ils sont diablement pratiques! Il faut juste faire des choix adaptés en fonction d'un contenu particulier.
Au passage, attention au point que soulève Florent à propos du doctype…
yes Smiley biggol

Merci à vous pour vos conseils précieux, tout marche comme je le souhaite!
Modifié par Battyboy (21 Jul 2008 - 18:05)
Sujet clos
Aller à