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

Discussion dans 'Problèmes de référencement spécifiques à vos sites' créé par marsupilami, 11 Août 2004.

  1. marsupilami
    marsupilami WRInaute discret
    Inscrit:
    2 Avril 2004
    Messages:
    166
    J'aime reçus:
    0
    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:
     
  2. Fluidex
    Fluidex WRInaute discret
    Inscrit:
    17 Juillet 2004
    Messages:
    76
    J'aime reçus:
    0
    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.

    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 ?
     
  3. marsupilami
    marsupilami WRInaute discret
    Inscrit:
    2 Avril 2004
    Messages:
    166
    J'aime reçus:
    0
    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 ...
     
  4. Fluidex
    Fluidex WRInaute discret
    Inscrit:
    17 Juillet 2004
    Messages:
    76
    J'aime reçus:
    0
    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.
     
  5. marsupilami
    marsupilami WRInaute discret
    Inscrit:
    2 Avril 2004
    Messages:
    166
    J'aime reçus:
    0
    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 ...
     
  6. Fluidex
    Fluidex WRInaute discret
    Inscrit:
    17 Juillet 2004
    Messages:
    76
    J'aime reçus:
    0
    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.
     
  7. Monique
    Monique WRInaute passionné
    Inscrit:
    16 Septembre 2002
    Messages:
    1 153
    J'aime reçus:
    0
    Bonjour,

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

    Amicalement,
    Monique
     
  8. marsupilami
    marsupilami WRInaute discret
    Inscrit:
    2 Avril 2004
    Messages:
    166
    J'aime reçus:
    0
    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 ...
     
  9. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    C'est pourtant vraiment à l'encontre de la logique XHTML : le contenu (doit être) est séparé de la forme
     
  10. Fluidex
    Fluidex WRInaute discret
    Inscrit:
    17 Juillet 2004
    Messages:
    76
    J'aime reçus:
    0
    @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).
     
  11. marsupilami
    marsupilami WRInaute discret
    Inscrit:
    2 Avril 2004
    Messages:
    166
    J'aime reçus:
    0
    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.
     
Chargement...
Similar Threads - <div style=clear both Forum Date
Tableau <table> ou tableau en <div> ? Développement d'un site Web ou d'une appli mobile 13 Novembre 2016
<div et h1 Débuter en référencement 13 Février 2013
balise <td><tr> ou <div> Référencement Google 27 Août 2012
Mettre des <H1> dans des <div> Débuter en référencement 19 Août 2011
[JS] Masquer / afficher un <div> à la saisie d'un <input> Développement d'un site Web ou d'une appli mobile 2 Novembre 2010
Comment afficher <div contenant la réponse> en dessous <div de la question> Développement d'un site Web ou d'une appli mobile 15 Août 2009
Float et <div> conteneur considéré comme vide Développement d'un site Web ou d'une appli mobile 17 Juin 2009
interet de La balise <div> Débuter en référencement 15 Décembre 2008
Conséquences de l'emploi de <div display:none >... Problèmes de référencement spécifiques à vos sites 27 Mars 2008
Utilisation de <div> hidden pour la bonne cause Demandes d'avis et de conseils sur vos sites 24 Octobre 2007
<div> genant ? en display:none ? Débuter en référencement 16 Octobre 2007
<div> plutot que <table> Débuter en référencement 25 Septembre 2007
Avantage du <div> sur le <table> Problèmes de référencement spécifiques à vos sites 6 Septembre 2007
<div style='height:1px ... pour cacher du texte Débuter en référencement 5 Juin 2007
<div> décalé lors d'include dans IE Développement d'un site Web ou d'une appli mobile 17 Mai 2007
[RéSOLU] problème de <div> sous wordpress Développement d'un site Web ou d'une appli mobile 5 Mars 2007
problème <div> </div> Développement d'un site Web ou d'une appli mobile 23 Juin 2006
Background qui ne suit pas un <div> Développement d'un site Web ou d'une appli mobile 26 Mai 2006
<div.... visibility:hidden> valide ou pas valide ? Débuter en référencement 21 Mars 2006
<div hidden> avec mots clefs entre balises <h1> Débuter en référencement 15 Février 2006