Aller au contenu

petite question sur le CSS

freeze

Par freeze
dans Programmation et Lignes de code

Messages recommandés

freeze Explorateur

freeze

Posté(e)
Posté(e)

Bonjour les gens,

je suis en cours de faire un petit blog et j'ai déjà pas mal avancer dans la modification du CSS de base.

Là j'ai un petit souci pour supprimer les boutons de défilements horizontals qui apparaissent sur les colonnes à droites et à gauches sous Firefox (dernière version)

En effet sous IE mon entête et le bas de page est moche mais je m'en fous puis que c'est sous IE mais au moins il n'y a pas les barres de défilements

J'ai trouvé la fonction overflow-x: hidden pour la supprimer sous IE mais sous Firefox je fais comment ???

Merci

Si vous avez des commentaires sur le dit blog n'hesitez pas

Lien vers le commentaire
Partager sur d’autres sites
afbilou Nouveau

afbilou

Posté(e)
Posté(e)

Revois serieusement ton code HTML ...

Parce que voir ceci :

<div class="box" id="LeftPart">
<div class="box-top">
<div class="box-right">
<div class="box-bottom">
<div class="box-left">
<div class="box-topLeft">
<div class="box-topRight">
<div class="box-bottomLeft">
<div class="box-bottomRight">
<div class="box-content">

Puis fatalement ceci :

</div></div></div></div></div></div></div></div></div></div>

A plusieurs reprises dans le code cela montre que tu n'as pas saisi le fonctionnement des CSS sans parler de l'absence total de sémantique dans ce "truc". Un niveau d'imbrications tel c'est du jamais vu et montre clairement un probleme de conception.

L'id d'un element se doit d'etre unique dans une page. Donc impossible de trouver un <div id="top"> à 5 ou 6 reprises (je n'ai pu le nombre en tete) dans le code et qui plus est ... a la queue leuleu (orthographe de leuleu a vérifier :pleure:) ... ou est l'interet ???!!!

Englober toute ta page dans une cellule de table est non seulement une erreur mais en plus est totalement inutile, lourd et n'a pas de sens sémantique.

Il n'existe pas a ma connaissance de navigateur qui necessite qu'on lui repete plusieurs fois la meme chose pour qu'il le comprenne :

<DIV align=center><I><I><I><I><I><B><I>

:craint:

Puisque ton doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) semble indiquer que tu veux faire de l'xhtml 1.0 ... autant faire de l'xhtml 1.0 non ?

En xhtml 1.0 <font> et <u> n'existent plus ! <br> est remplacé par <br /> de meme que toutes les balises orphelines (<img> -> <img />, <meta> -> meta />) etc ...

Tu utilises des CSS, alors pourquoi continuer malgres tout a mettre des elements de mises en forme dans ton code HTML ? Je parle de ca :

<DIV align=center>
<FONT size=3>
<P align=left>
<P align=center>

Qui au passage sont tous des attributs obsoletes et qui ne doivent plus etre utilisés.

En Xhtml 1.0 les valeur des attributs doivent etre entre guillemets.

Les balises ET les attrbuts ET leur valeur doivent etre en minuscule.

<IMG style="BORDER-RIGHT: 0px;"> pas classe !
<img style="border-right: 0px; claaaaaaaaasse !
<P class=super> pas classe !
<p class="super"> claaaaaasse !

Pour ce qui est de ton probleme, overflow-x ne fait pas partie du standard CSS 1 ou 2. Une implentation personnelle de microsoft donc qui ne fonctionnera avec aucun autre navigateur.

Pour supprimer tes barres de défilement joue sur les marges et/ou les padding lateraux de tes "boites" que tu auras pris le soin de déDIViser en un seul bloc <div> par exemple. (ou un autre element de type "block" plus adapter sémantiquement)

Bon courage :pleure:

Lien vers le commentaire
Partager sur d’autres sites
freeze Explorateur

freeze

Posté(e)
  • Auteur
Posté(e)

ok ok

je viens de capter

en fait le truc c que mon CSS est presque correct, mais lorsque j'ecris par exemple mon entête j'ai fait des modifications dans le format normal qui ont entrainé des modifications dans l'HTML...

mais forcément c'est très con cela fait double emploi...

Lien vers le commentaire
Partager sur d’autres sites
freeze Explorateur

freeze

Posté(e)
  • Auteur
Posté(e)
Englober toute ta page dans une cellule de table est non seulement une erreur mais en plus est totalement inutile, lourd et n'a pas de sens sémantique.

Concretement ?

ou mieux aurais tu un bouquin ou un site à me conseiller pour apprendre car il y en a un paquet sur google ...

Lien vers le commentaire
Partager sur d’autres sites
freeze Explorateur

freeze

Posté(e)
  • Auteur
Posté(e)

Hello,

bon j'ai pas mal avancé depuis la dernière fois, vous serez t il possible de me dire ce qui ne va toujours pas ?

En ce qui concerne certains div qui se dédoublent, c'est parfois du à l'hebergeur du blog. En effet j'ai pas accès à toute la prog HTML.

merci pour tout

Lien vers le commentaire
Partager sur d’autres sites
  • 1 mois après...
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e) 

<body>

<div id="pub"></div>

<div id="main1">
   <table cellpadding="0" cellspacing="0" id="MainTab">
<tr><td colspan="3"><div id="top">


<div id="top">





<div id="header">Lili et la Frise en Chine</div>
<a class="bouton2" href="http://lotietfrise.over-blog.com/" target="_self">acceuil</a><a class="bouton2" href="http://lotietfrise.over-blog.com/liste-article-blog.php/" target="_self">articles</a><a class="bouton2" href="http://lotietfrise.over-blog.com/album-30729.html/" target="_self">photos</a><br /><br />



</div>
</div>
</td></tr>
<tr>

<td width="210">
       <div id="leftnav">

           <!-- Box admin -->
           

           <div class="box" id="LeftPart">
             <div class="box-top"><div class="box-right"><div class="box-bottom"><div class="box-left">
             <div class="box-topLeft"><div class="box-topRight"><div class="box-bottomLeft"><div class="box-bottomRight">
               <div class="box-content">
                 <h2>à noter</h2>
                 








<p>Ce site est en cours d'optimisation pour une utilisation sous <a href="http://www.mozilla-europe.org/fr/products/firefox/">Firefox</a>, privilégier donc son utilisation.
Les photos et articles que vous pouvez consulter ne sont pas libres de droits de reproduction. Veuillez <a href="mailto:La_frisouille@hotmail.com">nous</a> contacter pour toutes demandes merci et bonne visite.</p>





               </div>
             </div></div></div></div>
             </div></div></div></div>
           </div>

Bon alors, je te le fait brut de décoffrage parce qu'il y'a vraiment plein de trucs à revoir :

- déja la mise en forme, n'oublie pas le retour à la ligne après chaque imbrication et la tabulation pour te repérer dans le niveau d'imbrication. Ne saute pas 15 lignes comme tu le fait parfois, si tu veux reperer des zones dans la page saute une ligne et met un commentaire, c'est bien plus lisible qu'une demi page de saut de ligne.

- les <table> tu jarte, ca ne sert pas à la mise en page, juste aux données tabulaires, donc a moins que tu fasse des forums ou des statistiques tu n'as qu'à considérér que cette balise N'EXISTE PAS ca te forcera à coder plus proprement. Si tu veux mettre une zone en dessous d'une autre utilise deux blocs (par exemple div), ils se mettent naturellement l'un en dessous de l'autre, si tu veux mettre deux zones côte à côte tu utilise l'attribut css "float" sur la zone dont tu veux modifier la position (ex : float left -> ton bloc se collera à gauche du bloc précédent et non en-dessous). Donc déja avec ca tu peut faire des lignes et des colonnes simplement -> les tableaux tu les laisse rotir en enfer je veux plus en voir :prison:

- ensuite les id c'est UNIQUE tu ne peut l'utiliser qu'une fois par page donc id "top" on jarte et on en garde qu'un. ID = élément unique, CLASS = style réutilisable

- ensuite dans ton div "top" tu utilise un div "header" uniquement pour le titre -> Poubelle, pour les titres tu utilise <hx> ou alors à la limite <p> vu que c'est un titre qui n'apparait qu'une fois par page (mais c'est limite quand même)

- dans ton div "top" tu as trois liens <a> tous de class "bouton2" -> pas besoin de class vu qu'ils sont tous identiques, dans ton css tu met:

#top a{ ...; }

Autrement dit "toutes les balises <a> contenues dans #top auront le style...

- pour tes liens utilise des url relatives et pas absolues!!!!

- les <br/> servent au retour à la ligne, pas à simuler des marges pour faire tes marges utilise l'attribut css "margin"

- recompte tes balises ouvrantes et fermantes, par exemple dans ton premier <td> to ouvre 2 div (top et header) et tu en referme 3 :francais:

- on te l'as déja dit, mais ca y'est toujours mais n'imbrique pas 15 milles div, surtout s'ils contiennent strictement la même chose! (cf : <div class="box" id="LeftPart"><div class="box-top"><div class="box-right"><div cla[...]tent">) UN SEUL suffit

<body>
 <div id="pub"></div>
 <div id="main1">
   <div id="top">
     <h1>Lili et la Frise en Chine</h1>
     <a href="#" target="_self">acceuil</a>
     <a href="/liste-article-blog.php/" target="_self">articles</a>
     <a href="/album-30729.html/" target="_self">photos</a>
   </div>
   <div id="leftnav">
     <!-- Box admin -->
     <div class="top-right-left-et-tout-les-directions-que-tu-veux">
       <h2>à noter</h2>
       <p>Ce site est en cours d'optimisation pour une utilisation sous <a href="http://www.mozilla-europe.org/fr/products/firefox/">Firefox</a>, privilégier donc son utilisation.
Les photos et articles que vous pouvez consulter ne sont pas libres de droits de reproduction. Veuillez <a href="mailto:La_frisouille@hotmail.com">nous</a> contacter pour toutes demandes merci et bonne visite.</p>
     </div>
   </div>

Voila franchement, mon code est pas plus clair, court et lisible? Pourtant il contient toutes les informations nécéssaires pour obtenir le même résultat.

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)
Il est possible faire ce genre d'effets en "Standard" ? :incline:

Non, il n'y as aucune balise ou attribut standardisé qui permette ce genre de chose.

Il faut bien séparer la page du navigateur, or les ascenceur font partie du navigateur, il est donc logique que tu ne puisse influer dessus.

Mais il existe plus ou moins une solution, qui serait d'utiliser du contenu encapsulé, comme par exemple du flash, qui lui gère les ascenceur. A partir de ce moment la l'ascenceur fait partit de la page (en particulier de ton objet flash) et non plus du navigateur.

N.B: le swf n'est pas un standart, c'est un format propriétaire, mais tellement répandu que tu peut l'utiliser sans risque.

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...