28220 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement

Bonjour à tous,
nouveau sur le forum, débutant en css, je tiens d'abord à vous remercier, vous, samaritains de tous bords, pour votre forum et votre aide.
Mon problème est visible ici : http://www.laconjuration.net

Mon container ne veut pas prendre en compte les blocs div en "position: absolute" qu'il contient. Ce pourrait être un problème de code (une div fermé trop tôt ou tard) mais j'ai bien vérifié ce n'est pas ça. Il prend bien le footer (en "clear: both"). J'ai passé mon bloc article sans position et là, miracle, le container recueille bien tous mes blocs. J'en déduis que le problème vient que tous mes blocs sont en "position: absolute"... Est-ce cela ?

Je n'ai rien trouver en utilisant la fonction "recherche" mais je presente d'ores et déjà mes excuses si ma question est récurrente ici ou absolument idiote (pitié ne me dites pas ça Smiley confused )
Modifié par willyten (08 May 2005 - 14:35)
Merci de ton attention.
J'avais déjà lu (ce qui ne veut pas dire que j'ai tout compris) ces articles et rien ne m'explique pourquoi les blocs "enfants" de mon conteneur ne sont pas intégrés...
L'article précise :
a écrit :
Une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou en-ligne, sauf exceptions, et avoir une dimension (largeur, hauteur définies).


Je suis peut-être dans les exceptions mais je ne comprends toujours pas ce qui se passe...
Modifié par willyten (04 May 2005 - 15:16)
Administrateur
Salut willyten, je crois que tu as survolé une partie extrêmement importante du tutoriel sur le positionnement (qui est pourtant signalé en gras) :
a écrit :
Le bloc positionné en absolu est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière (balise body en HTML, html en XHTML).


Donc la question est : est-ce que ton conteneur est lui-même positionné afin de pouvoir accueillir des éléments positionnés ?
Modifié par Raphael (04 May 2005 - 18:20)
C'est tres agreable de lire vos conseils.
Alors euh... oui je crois bien qu'il est positionné (pas sur les 4 dimensions mais bon en top et left déjà) et cela ne me change rien.
J'ai peur de ne pas comprendre un truc simple...
Toujours est il que je sens que je vais faire autrement (j'ai d'autres options) mais j'aimerais bien comprendre...
Administrateur
En fait le fait d'être positionné n'a pas de rapport avec top, right, bottom et left.
Cela signifie tout simplement que la propriété "position:" a été attribuée à l'élément.

Si le conteneur est positionné, alors tous les éléments de contenus positionnés se placeront par rapport à ce conteneur.
arf oui bien sûr. Mais en fait il est en "position : absolute" itou mon container ! Ce qui m'épate c'est qu'il suffit de mettre le bloc article en position: relative (par exemple) pour que tout rentre dans le container... J'ai la triste impression de ne pas être malin ! Mais bon à force de chercher je trouverai ! Smiley cligne
Merci pour ton site (je crois avoir compris que c'est ton "oeuvre" - c'est toujours ça ! ) Smiley biggrin
Administrateur
Hmm en fait peux-tu être plus précis sur ta structure ?
Qui contient qui ?

Si les éléments doivent se placer par rapport à ton bloc "article", alors oui il faut le positionner.

a écrit :
Des qu'un nouveau gens s'inscrit, un programme lui envoie direct un MP ou un mail avec de-dans soit un lien sur "Aide/Règles" ou soit direct toutes les règles.
Oui en effet, j'y suis pour quelques chose Smiley ravi
Modifié par Raphael (04 May 2005 - 19:23)
Re-bonjour,
désolé pour le temps qui passe mais le pont ne m'a pas résolu mon problème. Je poste les fichiers mais vraiment parce que je ne comprends pas. Je ne sais pas trop si c'est d'usage, alors je présente par avance mes excuses si cela est malvenu.
voici le "gabarit" (je suis avec textpattern)

<body>
<div id="contenu">

<div id="bandeau">
Bandeau
</div>
<!-- recherche -->
<div id="recherche">
recherche
</div>

<!-- sections -->
<div id="sections">
sections
</div>

<!-- icones -->
<div id="icones">
icones
</div>

<!-- articles -->
<div id="articles">
articles 
</div>

<!-- breves -->
<div id="breves">
breves
</div>
<!-- footer stats-->
<div id="foot">
foot
</div>

</div>

Et voici le CSS :

body
{
	background-color: #fff;
        padding: 0 ;
}

p, blockquote, li, h3
{
        font-family: Verdana, "Lucida Grande", Tahoma, Helvetica;
        font-size: 11px;
        line-height: 18px;
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
}

#contenu
{
        position: absolute;
        top:2px;
        left:2px;
        width: 800px;
        border: 1px black solid;
}

#bandeau
{
        position: absolute; 
        width: 705px;
        height: 75px; 
        top:5px;
        left:10px;
        border: 1px black solid;      
}

#recherche
{
        position: absolute; 
        width: 150px;
        height: 50px;
        top:85px;
        left:10px;
        border: 1px black solid;
}

#sections
{
        position: absolute; 
        width: 550px;
        height: 50px;
        top:85px;
        left:165px;
        border: 1px black solid;
}

#icones
{
        position: absolute;
        width: 70px;
        top:85px;
        right:5px;
        border: 1px black solid;
}

#articles
{
        position: absolute;
        width: 550px;
        margin-top:145px;
        left:10px;
        right:225px;
        border: 1px black solid;
}

#breves
{
        position: absolute;
        width: 150px;
        top:145px;
        left:565px;
        border: 1px black solid;
}

#foot
{
	clear: both;
        text-align: center;
}

Vraiment je ne comprends pas mon(mes) erreur(s)... Si quelqu'un peut éclairer mes lanternes, je lui en saurai gré.
Merci

edit : excusez mes maladresses de débutants (que ce soit en code ou en presentation de messages Smiley cligne )
edit2 : vous aurez compris que je cherche (malgré les réticences lues ici et là)à tous positionner en absolute (sinon j'arrive à un autre truc potable masi c'est pas ce que je veux Smiley confus )
Modifié par willyten (06 May 2005 - 22:52)
Modérateur
willyten, pourrais-tu encapsuler le code que tu présente entre les balises CODE appropriées, tel qu'indiqué dans les aides et règles du forum ?

Merci
Modifié par Merkel (06 May 2005 - 22:38)
Bonjour,
Je ne comprends pa pourquoi pour une présentation aussi "standard" tu t'entête avec le positionnement absolu.... Smiley eek .
Bon je vais essayer de te donner quelques pistes.
Je vais essayer de te donner des conseils qui colleront au mieux de ce que tu as mis su ton site.
le positionement absolu de ton div #contenu est inutile préfère:
body
{
padding : 2px;
margin : 0px;
}
div#contenu
{
width: 800px;
border: 1px black solid;
}

Si tu veux centrer le contenu de ta page ajoute :
body
{
text-align : center;
}
div#contenu
{
margin-right : auto;
margin-left : auto;
}

Donc omme je l'ai dit ce qu'il faudrait c'est éliminer les position : absolute.
ce la implique une restructuration de ton code html à partir de ce niveau.
préfère quelque chose du genre :

<div id="contenu"><div id="icones"></div>
<div id="gaucheicone">
<div id="bandeau">
Bandeau
</div>
<!-- recherche -->
<div id="recherche">
recherche
</div>

<!-- sections -->
<div id="sections">
sections
</div>

<!-- articles -->
<div id="articles">
articles
</div>

<!-- breves -->
<div id="breves">
breves
</div>
<!-- footer stats-->
<div id="foot">
foot
</div>
</div>
</div>

A partir de la, il te reste à position tes objets grâce à des float et des clear, des margin et des padding, mais aucun positionnement en absolute (rares sont les cas où ils servent enfin si mais pas dans ce genre de choses).
Je te fais le début :

div#icones
{
width : 70px;
float : right;
}
div#gaucheicone
{
/*il occupera l'espace à gauche*/
margin-right: 70px;
}
div#bandeau
{
/* pas de largeur */
/* rien de particulier hormis le style visuel que tu voudras lui donner*/
}
div#recherche 
{
float:left;
width: /*largeur du champ*/
}

voila je ne te fait pas tout mais en regardant le début et les gabarits de ce site tu devrais t'en tirer.
Bon courage,
IlSandor.
Modifié par ilsandor (07 May 2005 - 00:41)
Bonjour et merci de ton attention Ilsandor.
Je regarderai ce que tu m'as fait avec plaisir, et je ne doute pas que le positionnement absolu soit superflu dans ce cas.
D'ailleurs tu m'as convaincu et à terme je vais faire autrement (comme tu me l'indiques ou autrement, je ne sais pas encore)
Mais ma question demeure : pourquoi mes blocs ne sont ils pas intégrés dans le bloc "contenu" ??? C'est surtout ça ma demande.
Quelqu'un le sait-il ? (je n'en doute pas Smiley cligne )
bonjour willyten,

à ce qu'il me semble il n'y a aucun problème pour les éléments positionnés en absolute.

Là où il y a 1 problème c'est pour ton footer, comme tout est en absolute, lui il vient bêtement se placer en haut de la page.

A celà il n'y à aucune solution dans ton modèle. Dit autrement tu es dans une impasse.

Pour en sortir il te suffit de garder le bloc contenu dans le flux.
fiat lux !
Et tout s'eclaire... Il me semblait bien que c'etait rien... j'ai eu comme qui dirait une illumination...
Bon, je vais pouvoir mettre Smiley resolu !
Merci à tous de votre aide et attention. Le modele Ilsandor va bien me servir...
Modifié par willyten (08 May 2005 - 14:40)
Sujet clos
Aller à