positionnement en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : positionnement en css

mentinet

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

Publicité

dartyduck

n00b AttitudE

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

gatsu35

Blablaté par Harko

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

mentinet

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 :)

mentinet

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

dartyduck

n00b AttitudE

t'as un screenshot de ce que ca donne ?

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

mentinet

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 !

dartyduck

n00b AttitudE

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

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

mentinet

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;
}

mentinet

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 ?

Publicité

dartyduck

n00b AttitudE

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

FORUM HardWare.fr

Programmation

HTML/CSS

positionnement en css

Sujets relatifs
Positionnement div	Positionnement de texte, problème sous IE (Au secours)
Probleme positionnement de menu a onglets	Réussir à garder un positionnement absolu et changer de résolution
Positionnement	[ HTML-CSS] pb de positionnement
XHTML strict 1.0 positionnement firefox ie	[CSS] Positionnement dans IE :-(((
[Résolu] Positionnement DIV Css	positionnement de collonnes
Plus de sujets relatifs à : positionnement en css

Page générée en 0.091 secondes