<div style="clear:both;height: XXXXpx;"> ...

[marsupilami]

Comme la majorité des Wri's semble utiliser les feuilles de style sans souci, quelqu'un saurait me dire si c'est du bidouillage que d'utiliser : <div style="clear:both;height: XXXXpx;"></div>. Mon container ne veut pas suivre les div que j'y mets et je ne suis pas loin de laisser tomber les CSS pour retrouver mon bons vieux tableaux tant cela m'énerve. Oui, je sais ... pas la peine d'en rajouter !
:cry:

 

[Fluidex]

L'attribut style sur un élément div est parfaitement correct. En revanche ce n'est pas élégant et à l'usage c'est rarement pratique.

Mon container ne veut pas suivre les div que j'y mets

Ca n'éclaire pas vraiment ton problème. Impossible de fournir une aide précise.

Réponse générique :

• - utiliser l'attribut style n'est pas faire une CSS
  - si ta div doit se comporter comme toutes les autres, définis un style en CSS pour l'élément div
  - si ta div a des caractéristiques spécifiques ajoutes lui un attribut class (ou id) et définis un style en CSS pour cette "class".

Il y a d'autres façons de procéder mais pour un début ce devrait être suffisant ?

 

[marsupilami]

Il y a d'autres façons de procéder mais pour un début ce devrait être suffisant ?

Merci pour l'aide. Pour le moment je garde ma solution car il y a un mystère mais ça ne marche qu'avec ça (pour que cela soit stable) j'y ai passé des heures et sans doute que je ne maîtrise pas bien les relatifs et absolus etc. et tout ce qui permet de faire des positionnements un peu "évolués". Le plus exaspérant c'est que tout marche bien mais il y a ce fond "container" qui disparaît quand je rajoute des éléments (si je ne mets pas le clear...)
Très esthétique votre site, vous semblez sur une bonne lancée, bonne continuation ...

 

[Fluidex]

Et bien merci pour le compliment.

Pour en revenir au problème : un élément disparait généralement quand il est recouvert ou lorsqu'il a bougé.
Clear a un rapport avec les éléments flottants. Donc je suppose que tu utilises des éléments flottants ? Ce n'est pas toujours évidant à maîtriser, compte tenu notamment de quelques bugs vicieux de certains navigateurs.

Quoi qu'il en soit si ta div est un container c'est un peu normal qu'il soit "caché" par les éléments qui sont dedans ?
Enfin si tu veux une aide concrète tu mets un lien vers ta page en expliquant ce que tu veux, ou tu donnes sur le forum des bouts de code simples représentatifs du problème.

 

[marsupilami]

Enfin si tu veux une aide concrète tu mets un lien vers ta page en expliquant ce que tu veux, ou tu donnes sur le forum des bouts de code simples représentatifs du problème.

Et bien par exemple :

body{background-image:url(../images/image.png);background-position:left top;background-repeat:repeat-y;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:11px;}
img{border:none;}

#container{width:750px;padding:0 7px 0 8px;background-image:url(../images/container.png);}


Lorsque je mets plusieurs éléments en position à partir du top (exemple):

#element {
LEFT: 260px; position: absolute; top: 120px; HEIGHT: 60x; padding:10px ; width: 460px; background-color:#FFF; border-left: #9CC 1px dotted; border-right: #9cc 1px dotted; border-top: #9cc 1px dotted; border-bottom: #9cc 1px dotted; margin-top: 5px; margin-bottom: 5px
}

etc. mon fond (container) ne suit pas les éléments, sauf si je mets cette instruction dans ma page HTML :
<div style="clear:both;height:120px;"></div>
après le <DIV id=element>
</DIV>

J'ai également un menu en haut, et un "footer"

Ca n'est vraiment pas évident comme logique! Merci pour la proposition ...

 

[Fluidex]

mon fond (container) ne suit pas les éléments

Je ne suis pas sur de bien comprendre le sens de "suivre les éléments".

Ce qui est sur c'est que #container et #element ne peuvent pas interférer. Tu pourras mettre 1000 éléments comme #element dans ton #container que cela ne fera rien de plus à ton #container. #element étant position: absolute il reste transparent pour #container qui vit sa vie (hauteur, largeur ...) en parfaite indépendance.

Lorsque tu mets <div style="clear:both;height:120px;"></div> dans #container tu introduis un élément qui n'est pas position: absolute mais position: static. Il se crée alors une interaction entre le père et le fils.

remarque : clear:both n'a auncun effet puisqu'il n'y a pas d'objet flottant.

Tu devrais lire un peu la recommandation CSS2, tout deviendrait plus clair au moment du codage.

 

[Monique]

Bonjour,

Les exemples et explications de ces 3 articles d'Openweb devraient t'aider à comprendre :
Initiation au positionnement

Amicalement,
Monique

 

[marsupilami]

Merci à vous. Cela reste encore assez flou mais si je devais dire ce qui se passe "expérimentalement" (ce qui se produit avec le <div style="clear:both;height:120px;">) c'est comme si cela rendait visible les 120 pixels de haut du container cachés par l'lémément de cette même hauteur, et ainsi de suite. L'effet me convient, reste à savoir si c'est reproductible ou si c'est un effet indésirable qui moi m'arrange. Je vous tiens au courant si j'ai du nouveau ...

 

[milkiway]

L'attribut style sur un élément div est parfaitement correct

C'est pourtant vraiment à l'encontre de la logique XHTML : le contenu (doit être) est séparé de la forme

 

[Fluidex]

@marsupilami >
Oui l'effet est reproductible. Mais je te conseille t'utiliser position:relative pour #element et de modifier en conséquence (mettre des valeurs relatives) les propriétés top, left...

@milkiway>
1/ nous ne savons pas si marsupilami est en XHTML ou en HTML 4. D'ailleurs compte tenu de ses soucis je crois que ça n'a pas d'importance.
2/ l'attribut style est parfaitement correcte pour toutes les DTD XHTML y compris XHTML 2.0. A voir la recomandation.
3/ ni le W3C avec XHTML 2.0, ni mon post n'encourage l'utilisation de l'attribut style !
4/ l'attribut style permet une séparation (de la moins belle manière certes) entre contenu et forme, au sens ou l'élément et son contenu ne porte que la sémantique du contenu, et l'attribut style uniquement la présentation. En cela il y a bien séparation, et dont l"effet est strictement équivalent à ce qui est obtenu avec la feuille de style (aux règles de priorité près).

 

[marsupilami]

C'est adopté et j'apprécie ces conseils appliqués Juxtener car tu sembles bien maîtriser le sujet. Je ne vais pas chercher plus loin pour le moment, et je suis déjà super contente des résultats.