Overflow, li et div

par **juliette** » 25 déc. 2011, 19:44

de rien, si je peux rendre l'appareil, c'est très bien

par **xTG** » 25 déc. 2011, 19:42

Impeccable ! Merci Juliette.

Pour la hauteur des li sous IE je pense qu'un line-height suffira pour régler le problème.

par **juliette** » 25 déc. 2011, 19:20

teste ca, je pense que c'est bon:

<html>
<body>
        <div class="code" style="width:300px; overflow-x:auto; background:yellow;">
                <pre style="background:red; display:inline-block;">
                        <ol>
                                <li style="background:#dedede; margin-right:10px;">ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</li>
                        </ol>
                </pre>
        </div>
</body>
</html>

marche avec fire-fox et chrome, comportement un peut différent avec ie, les <li> font le double en hauteur...

par **juliette** » 25 déc. 2011, 18:50

j'ai le même soucis que toi, la seul chose que je trouve pour le moment est le <pre> a 400% par exemple ou le chiffe qui te conviens mais c'est pas une solution...
ça me fait me dire que comme tu le pense le <pre> se fixe a la taille de 300px je cherche encore...

par **xTG** » 25 déc. 2011, 18:25

Voici un code épuré et stand-alone qui reproduit le bug : (FF 8, Chrome 16)

<html>
<body>
	<div class="code" style="width:300px; overflow-x: auto;background: yellow;">
		<pre style="background:red;">
			<ol>
				<li style="background:#dedede;">ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</li>
			</ol>
		</pre>
	</div>
</body>
</html>

J'arrive à recouvrir un peu plus du background des li en utilisant width et en spécifiant une taille supérieure à 300 en pixel, cependant ma largeur de li est dynamique sur mon site final donc cela ne me convient pas. :/

Par contre je viens de me rendre compte que ce code fonctionne très bien sous IE 9.0, mais pas mon code final.

M'enfin, dans l'optique je veux avant tout un fonctionnement Chrome/FF.

par **juliette** » 25 déc. 2011, 18:02

si tu met: <pre class="php" style="font-family:monospace; background:red;"> on pourras voir sa taille exact grâce au fond rouge, je cherche de ce cote car chez moi les <li> prennent toutes la largueur...

as tu du css sur tes <li> ?

par **juliette** » 25 déc. 2011, 17:54

as tu essayer aussi:
.code {
overflow-x: auto 100%;
}

ou

<div class="code" style="overflow-x: auto; width:100%;">

je commence a comprendre ce que vous voulez dire quand je ne vous donne pas toutes les infos, ce n'est pas une critique loin de la mais je me rend compte qu'il est tres dure d'imaginer le code de quelqu'un d'autre...

peux tu me faire voir ton css complet ?

par **juliette** » 25 déc. 2011, 17:47

et si tu fait:
li: {display: block; width:100%;}

moi je teste ca:

<div class="code" style="overflow-x: auto;">
<pre class="php" style="font-family:monospace;">
<ol>
<li style="background: #fefefe;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">
<span style="color: #000088;">$resultat</span>
</div>
</li>
</ol>
</pre>
</div>

et ça donne: http://i45.servimg.com/u/f45/13/05/90/60/captur12.png

par **xTG** » 25 déc. 2011, 17:39

Oui ce sont bien les balises li dont le background ne s'étend pas sur toute la largeur, il se stoppe à la largeur initiale du div et on voit donc du vide dès qu'on utilise la scrollbar (cf image).
J'ai firebug et j'ai tenté de changé pas mal d'attributs CSS mais sans obtenir une hausse de la largeur du background.
ul ou ol ne change pas vu que la base css reste la même, ce n'est que la représentation des puces qui change.

par **juliette** » 25 déc. 2011, 17:30

oui, j'étais chez mes parents et pas connecter...
as tu fire-bug pour regarder les propriété ?
as tu essayer <ul> a la place de <ol> ?
ce sont bien les <li> qui ne sont pas asse long ?

par **xTG** » 25 déc. 2011, 17:26

Je suppose que tu parles de cela :

Comme vous pouvez le constater la propriété de feuille de style css overflow-x n'est pas compatible avec les navigateurs comme Firefox>1.5/Nestcape.

Sauf que ce n'est plus le cas depuis pas mal de versions.

Preuve est qu'avec juste overflow-x j'ai bien la scrollbar attendue, c'est juste que j'ai ma couleur de background qui ne suit pas.
Et d'ailleurs j'ai le même comportement avec IE9, donc cela semble commun à tous les navigateurs. Je dois avoir zappé un truc...

par **Invité** » 25 déc. 2011, 17:13

regarde la: http://www.zonecss.fr/style_css/feuille ... low_x.html

par **xTG** » 25 déc. 2011, 13:49

Voici le cheminement exact :

<div class="code">
  <pre class="php" style="font-family:monospace;">
    <ol>
      <li style="background: #fefefe;">
        <div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">
          <span style="color: #000088;">$resultat</span>

.code {
	overflow-x: auto;
}

Il y a une série de balises span dans le dernier div (permettant la coloration syntaxique - GeShi).
A noter que même si je change le background: none qui traine par une couleur, cela revient au même. :/

Le topic ne m'a malheureusement rien apporté, je teste sous Firefox et Chrome et obtient le même résultat.

par **juliette** » 25 déc. 2011, 13:16

au cas ou: http://forum.alsacreations.com/topic-4-28544-1.html

par **juliette** » 25 déc. 2011, 13:02

je suis pas sur d'avoir compris:

<div>
<pre overflow="auto" style="background:red;">
<ul>
<li>test</li>
</ul>
</pre>
</div>
est ce que ça ressemble a ça ?
la le background prend la totalité de la div

Overflow, li et div

Répondre

Étendre la vue Revue du sujet : Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div

Re: Overflow, li et div