18041 sujets

Questions générales et questions de débutants

[Résolu] Positionnement CSS - Snif ^^

Bonjour,

Amoureux des tableaux pour disposer mes éléments dans un site web (...) travaillant sur un nouveau projet je me suis dit :

<< Cette fois je fais ça bien ! En avant le CSS ... >>

Mais voila, après 6 tuto, 2h15 d'essais, et 6 canettes de coca, rien y fait, j'y parviens pas !

J'explique se que je tente de faire : (j'ai pris mon code à l'instant "t" ...)

<style type="text/css">
<!--
div.center {  text-align: center; }
#content,#left,#right,#center { position:absolute; }
#content { width:1024px; }
#left { width:200px; left:0%; }
#right { width:200px; right:0%; }
#center { padding-right:204px; padding-left:204px; height:100% }
#header { }
#main { }
#footer { }
-->
</style>



<div class="center" align="center">
<div id="content">
<div id="left"><p>test 1</p><p>test 2</p></div>
<div id="right"><p>test 1</p><p>test 2</p></div>
<div id="center">
<div id="header">Header</div>
<div id="main">Main</div>
<div id="footer">Footer</div>
</div>
</div>
</div>


En gros, je souhaite centrer mon site d'une largeur fixe de 1024px, composé de trois colonnes : dont les deux d'extrémités fond 200px de large, et une colonne centrale composé de trois sous ensemble header, main, et footer.

D'avance un grand merci, car je veux vraiment lâcher les tableaux, donc je n'abandonne pas Smiley biggrin
Modifié par guismojames (04 Apr 2009 - 00:19)
Merci, le site m'apporte des éléments en plus, mais toutefois, on va me dir que je suis chiant, mais c'est pas accessible tout à fait aux débutant ...

J'ai testé de modifier pour adapter, sa reste une catastrophe au final ...
guismojames a écrit :
Merci, le site m'apporte des éléments en plus, mais toutefois, on va me dir que je suis chiant, mais c'est pas accessible tout à fait aux débutant ...

J'ai testé de modifier pour adapter, sa reste une catastrophe au final ...


Bonjour,

Pourrais t-on avoir une page en ligne des essais que tu as déjà réalisé ?
Et une question précise concernant les problèmes que tu rencontres, en particulier avec les gabarits ?
html, body {
	height: 100%;
}
body {
	padding: 0;
}
#global {
	min-height: 100%;
	width: 1204px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
#centre {
	position: relative;
	width: 100%;
}
#navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
}
#principal {
	margin-left: 200px; /* -> 2 */
	margin-right: 240px; /* -> 2 */
	padding: 10px 20px;
}
#principal > :first-child {
	margin-top: 10px;
}
#secondaire {
	position: absolute; /* -> 1 */
	top: 0;
	right: 0;
	width: 180px;
	padding: 12px 20px;
}


<div id="global">
	<div id="centre">
		<div id="navigation">...</div>
		<div id="principal">...</div>
		<div id="secondaire">...</div>
	</div>
</div>


Pour l'instant j'en suis là !

J'ai fais un mix sans trop comprendre des éléments qui m'ont été donnés par le lien du POST précédent.

J'ai mes trois colonnes centrée, jai un peu netoyé se qui me servirai pas, mais maintenant je rencontre les difficultés suivantes :

- Le code me donne une structure bien plus large que 1024 !
- Les deux colonnes latérales ne fond pas 200px de large.
- Les éléments sont trop espacés les uns des autres
- Ma parti centrale n'est pas encore découpé en trois lignes : Header, Main et Footer !

Voila Voila (je travail sur wamp, donc pour la version en ligne vous faudra Hamachi Smiley lol )
On fera sans une page en ligne (tu as bien un petit bout d'hébergement Smiley cligne )

Ensuite il faudrait une page html complète (savoir si tu as bien un DOCTYPE sur cette page) et le lien vers le tutoriel sur lequel tu t'appuis.
Bah les tutos, facil, ces ceux du site, mais le soucis c'est que je ne doit pas tout comprendre, car je place des overflow pour obtenir un résultat mais au final j'ai pas compris a quoi sa sert ^^

Pour mon entête, je suis dans un fichier .php :

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


Pour le reste, a part les div j'ai pour l'instant aucun contenu ! (pou rme repèrer j'ai mis des couleurs de fond a mes div et a body, mais rien d'autre), pour l'hébergement sa m'oblige mettre les fichiers sur ftp (...)

Voici la strcuture que je souhaite utilise, pour les proportions j'ai déjà tout cité :
http://flyffearth.free.fr/template.jpg 
html, body {
	height: 100%;
}
body {
	padding: 0;
}
#global {
	min-height: 100%;
	width: 1024px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
#centre {
	position: relative;
	width: 100%;
}
#navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
}
#principal {
	margin-left: 204px;
	margin-right: 204px;
}
#principal > :first-child {
	margin-top: 10px;
}
#secondaire {
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
}


<div id="global">
	<div id="centre">
		<div id="navigation">...</div>
		<div id="principal">...</div>
		<div id="secondaire">...</div>
	</div>
</div>


Voila, j'ai réussi à m'en sortir !

EN faite j'ai repris les tuto de long en large, j'ai testé, testé, testé et bidouillé et finalement j'étais pas loin ^^
Sujet clos
Aller à