positionnement en css

Marsh Posté le 02-04-2007 à 19:28:08

D'abord bonjour à tous (je suis nouveau ) !

Je rencontre quelques problèmes au niveau du possitionnement de "conteneurs" en css !

voici mon code :

Code :

#conteneur1
{
text-align:center;
position:absolute;
margin-left:220px;
}
#conteneur2
{
text-align:center;
position:absolute;
margin-left:484px;
}
#conteneur3
{
text-align:center;
position:absolute;
margin-top:180px;
margin-left:239px;
}
#conteneur4
{
text-align:center;
position:absolute;
margin-top:180px;
margin-left:496px;
}

et le code html :

Code :

<div id="conteneur1">
<a href="videos/new_band.html"><img src="videos/new_band.png" border="0" /><br /><br />
<span class="rubriques">Nouveau groupe</span></a>
</div>
<div id="conteneur2">
<a href="videos/ma_valise.html"><img src="videos/ma_valise.png" border="0" /><br /><br />
<span class="rubriques">Ma Valise en concert</span></a>
</div>
<div id="conteneur3">
<a href="videos/rawn.html"><img src="videos/rawn.png" border="0" /><br /><br />
<span class="rubriques">Rawn en live</span></a>
</div>
<div id="conteneur4">
<a href="videos/clem_niko_brice.html"><img src="videos/clem_niko_brice.png" border="0" /><br /><br />
<span class="rubriques">Clem, Niko et Brice</span></a>
</div>

je voudrais en fait que vous me pistiez à propos de la position (si elle doit être relative ou absolute) ! car je me rend compte que lorsque la fenêtre n'est pas en plein écran, les conteneurs ne la suivent pas (me suivez vous ?)
merci d'avance
en gros, comment faire pour que ma page s'adapte à toutes les resolution possible et les navigateur comme mozilla ou ie ! merci

Reply

Marsh Posté le 02-04-2007 à 19:28:08

Reply

Marsh Posté le 02-04-2007 à 21:31:02

Bonjour à toi,
tout dépend de ce que tu veux faire: les mettre les uns en dessous des autres ou les un à coté des autres ? 2 par 2, j'avais pas vu, désolé. mets un float:left; dans tes div.
ensuite, si tu veux que tes boites suivent les changement de résolution ou de taille de fenetre, il faut les mettre en relative.
Mais je sens qu'il te manque de sérieuses bases en css. Fais un tour sur ces sites, et tu en reviendras grandi:
www.siteduzero.com
www.alsacreations.com

Message édité par dartyduck le 02-04-2007 à 21:31:25

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Reply

Marsh Posté le 02-04-2007 à 21:39:33

donne nous un exemple visuel du resultat que tu veux avoir, ainsi ce que tu veux exactement :
1-tes DIV conteneurs qui s'étendent en largeur et hauteur selon la dimension de ton navigateur ?
ou
2-tes div conteneurs fixent mais qui restent correctement positionnés meme si on change la taille du navigateur

Reply

Marsh Posté le 02-04-2007 à 21:49:48

je voudrais, oui, que mes div conteneurs s'étendent en largeur et en haueur selon la dimension du navigateur !
pour ce qui est des tutaux j'y ai déjà été et ils expliquent pas ce genre de choses ! c'est sur le site du zero que j'ai appris le css mais il n'y avait pas ce genre de truc, pour le resultat visuel je les voudrais 2 par 2 :

et je veux pas ce genre de résultat :

et que fera le float:left; ??? merci beaucoup

---------------
Clément :)

Reply

Marsh Posté le 03-04-2007 à 10:47:06

j'ai réussi avec le float:left; et j'obtiens un code de ce style :

Code :

#conteneur1
{
text-align:left;
position:relative;
float:left;
margin-left:200px;
}
#conteneur2
{
text-align:right;
position:relative;
float:right;
margin-right:200px;
}
#conteneur3
{
text-align:left;
position:relative;
float:left;
margin-left:200px;
margin-top:100px;
}
#conteneur4
{
text-align:right;
position:relative;
float:right;
margin-right:200px;
margin-top:100px;
}

seulement mes conteneurs sont bien les uns en dessous des autres par 2 mais alignés à gauche et à droite (car c'est le texte qu'il met à gauche et à droite et il ne comporte par toujours le même nombre de caractère) ! ce n'est pas tellement gênant, je peux faire ma mise en page comme ça mais est -il quand même possible que le float:left; se fasse sur l'image et non sur le texte ? merci beaucoup
et aussi, comment placé un paragraphe qui est centré et se colle toujours au bottom du body quelque soit la longeur de la page ! merci

Reply

Marsh Posté le 03-04-2007 à 11:55:23

t'as un screenshot de ce que ca donne ?

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Reply

Marsh Posté le 03-04-2007 à 19:43:35

voilà :

j'aimerais si possible avoir quelque chose de plus similaire à mon tout premier screen shot , sur mon deuxième post
a savoir les images centrés tout en gardant cet alignement des conteneurs ! et aussi que le text au milieu, bah ne soit pas au milieu mais tout en bas de la page !

Reply

Marsh Posté le 04-04-2007 à 00:20:33

remplace tes text-align par text-align: center; ca devrait suffire.

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Reply

Marsh Posté le 04-04-2007 à 00:50:17

ok c'est à peu près bon : voilà ce que j'obtiens

je voudrais que mes images (carré violet : lien à border="2" ) soit reellement alignées, les unes en face des autres ! enfin vous voyez ! que dois - je rajouter comme code ! merci beaucoup

je rappelle mon css :

Code :

#conteneur1
{
text-align:center;
position:relative;
float:left;
margin-left:250px;
}
#conteneur2
{
text-align:center;
position:relative;
float:right;
margin-right:250px;
}
#conteneur3
{
text-align:center;
position:relative;
float:left;
margin-left:250px;
margin-top:100px;
}
#conteneur4
{
text-align:center;
position:relative;
float:right;
margin-right:250px;
margin-top:100px;
}

Reply

Marsh Posté le 04-04-2007 à 13:06:25

voilà, j'ai réussit, enfin plus ou moins ! voici le resultat
avec les codes suivant :

html :

Code :

<div id="conteneur1">
<a href="videos/nouveau_groupe.html">
<img src="videos/nouveau_groupe.png" width="100" height="100" border="0" alt="nouveau_groupe.png" />
<br /><br />
<span class="rubriques">Nouveau groupe</span>
</a>
</div>
<div id="conteneur2">
<a href="videos/ma_valise.html">
<img src="videos/ma_valise.png" width="100" height="100" border="0" alt="ma_valise.png" />
<br /><br />
<span class="rubriques">Ma Valise</span>
</a>
</div>
<div id="conteneur3">
<a href="videos/rawn.html">
<img src="videos/rawn.png" width="100" height="100" border="0" alt="rawn.png" />
<br /><br />
<span class="rubriques">Rawn</span>
</a>
</div>
<div id="conteneur4">
<a href="videos/clem_niko_brice.html">
<img src="videos/clem_niko_brice.png" width="100" height="100" border="0" alt="clem_niko_brice.png" />
<br /><br />
<span class="rubriques">Clem, Niko et Brice</span>
</a>
</div>

et css :

Code :

#conteneur1
{
width:200px;
height:150px;
position:relative;
margin-left:250px;
float:left;
text-align:center;
}
#conteneur2
{
width:200px;
height:150px;
position:relative;
margin-right:250px;
float:right;
text-align:center;
}
#conteneur3
{
width:200px;
height:150px;
position:relative;
margin-left:250px;
float:left;
text-align:center;
margin-top:70px;
}
#conteneur4
{
width:200px;
height:150px;
position:relative;
margin-right:250px;
float:right;
text-align:center;
margin-top:70px;
}

seulement vous vous rendrez compte que sous IE6 j'ai un resultat de ce style !!!

comment puis je modifier ça ? mon code est il propre ?

Reply

Marsh Posté le 04-04-2007 à 13:06:25

Reply

Marsh Posté le 04-04-2007 à 22:18:54

tes blocs image font 200px de large + margin-left:250px + margin-right:250px = 2x200+2x250=900px. Ta page peut-elle contenir 900px en largeur sans probleme ? suis pas sur moi...
Diminue tes margin-left et margin-right, et ça devrait s'améliorer.

Message édité par dartyduck le 04-04-2007 à 22:19:51

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Reply

positionnement en css

Sujets relatifs:

Leave a Replay