Page 1 sur 2
Passage de tableaux en calques ... wow ...
Publié : 02 mars 2004, 00:26
par Bibilefou
Bonjour.
J'ai un petit souci ...
J'ai du mal à passer tous mes tableaux en calques.
Je suis bloqué depuis cet AM sur ce truc :
/* a plus images */
En haut, les encadrés sont des calques.
En dessous, c'est un tableau.
Le code :
Code : Tout sélectionner
<div class="article">
<form>formulaire pour le caddie</form>
<div class="illustration">image + lien à droite</div>
<h4>Nom de l'article, fabricant ...</h4>
<p>Description, avis ... bla bla bla .... Lorem ipsum dolor ...</p>
</div>
Le CSS sans fioriture (ar.-plans, fonts ...) :
Code : Tout sélectionner
.article {
width:100%;
clear:both;
}
.article form {
float:right;
clear:left;
}
.article .illustration {
float:right;
margin-left:20px;
}
.article h4 {
float:left;
width:65%;
margin:0; padding:0;
}
J'aimerais avoir le même affichage, avec calques, qu'avec les tableaux.
(Pour le tableau, imaginez l'image à droite et le formulaire aussi.)
J'y suis presque mais le texte du <p> s'affiche mal. J'aimerais qu'il commence juste sous le h4 ...
J'ai du mal là ...
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Publié : 02 mars 2004, 01:20
par Benoit
Je pense que tu dois au moins donner une largeur à .article .illustration. Et essaie de ne faire flotter les choses que d'un seul côté à la fois. En l'occurence juste les choses qui flottent à droite probablement, le reste peut rester dans le flux normal.
Publié : 02 mars 2004, 01:46
par Bibilefou
Mortel ! c'était les "clear" qui foutaient le boxon !
Tout "roule" à présent.
J'avais spécifié une largeur à .article, h4 et au form.
IE 6 / Firefox / Opera / (lynx) : OK
Par contre, pour les lignes paires/impaires, j'aimerais changer de certains éléments (cf. l'image du post. On voit les inversement ligne paire/impaire).
C'est possible de faire des classes séparées ?
Je m'explique. J'aimerais séparé l'aspect du placement dans le CSS.
Avoir juste les fonts, dimensions, couleurs dans une classe et le positionnement de l'élément dans une autre classe.
Publié : 02 mars 2004, 02:21
par Bibilefou
youpi ! extra tout ça !
qu'est ce qu'on inventerait pas pour se prendre la tête !
si quelqu'un peut me dire ce qu'il en pense :
[...]
(c'est pas du 100% valide, c'est transitoire).
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
Publié : 02 mars 2004, 10:58
par bobo
Bravo, c'est pas un truc évident de passer d'un design tableau à un design CSS.
Publié : 02 mars 2004, 12:35
par Jigho
J'obtiens cette erreur :
Code : Tout sélectionner
Error: The stylesheet http://ladame2.tarawam.com/distribution.css was not loaded because its MIME type, "text/html", is not "text/css".
Et du coup, pas mise en page correcte
Publié : 02 mars 2004, 12:46
par Bibilefou
Désolé Jigho !
Mais enfin merci à toi de m'avoir trouvé le bug du type mime !
La feuille de style est générée automatiquement en PHP suivant la rubrique demandée.
Tu peux y retourner, ça tourne maintenant.
Merci !
Publié : 02 mars 2004, 16:04
par Benoit
Je n'avais pas vu la version finale, joli le coup des gauche et droite alternés
Publié : 02 mars 2004, 16:40
par Jigho
Ah oui, là ça marche !
.... et c'est bôoooôoo, félicitations !
Publié : 02 mars 2004, 17:23
par Bibilefou
Personne serait sous Mac par hasard ?
C'est galère de tester sur la plupart des plateformes ...
Publié : 02 mars 2004, 17:40
par Benoit
Il y a un site qui te fait des captures d'écran sous Safari, voilà ce que ça donne pour le tien :
http://www.danvine.com/icapture/detail/72033.html
Publié : 02 mars 2004, 19:00
par Bibilefou
Bais merci pour tout !
chevauchement de calques ...
Publié : 09 mars 2004, 15:13
par Bibilefou
Bonjour,
Je continue sur les calques et leur disposition ...
J'ai remannié mon contenu. Maintenant, la colonne de droite vient avant le calque principal (au niveau du code).
La colonne est placée en flottant à droite et le calque principal en absolu. Jusque là, tout va bien.
Le problème vient maintenant du footer.
Le footer est placé en fonction de la colonne flottante. Et donc si le calque principal est plus haut que la colonne, il y a chevauchement.
D'où ma question, comment éviter ce chevauchement ?
J'ai essayé de placer des clear au calque priincipal mais niet ... rien à faire.
Pour voir le problème : [...]
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
Publié : 09 mars 2004, 18:00
par PsyDk
Tu ferais mieux de mettre le contenu principal (#principal) dans le flux normal, et mettre la colonne de droite (#colonne) en position absolue.
J'ai obtenu un résultat intéressant en effectuant cette modification :
Code : Tout sélectionner
#principal
{
width: 540px;
top: 0;
left: 0;
margin-right: 200px;
}
#colonne
{
position: absolute;
top: 0px;
right: 0px;
width: 195px;
text-align: right;
padding: 0;
}
P.S. : si tu pouvais indenter ton code xhtml (et le valider si possible) ça serait un peu plus facile à lire, merci
Publié : 10 mars 2004, 00:57
par Bibilefou
Merci PsyDk. Mais ton truc ne marche pas si principal à une hauteur inférieure à colonne....
Dommage ... obligé de repasser en flottant .... ?
PS: pour la validité du code xhtml et sa présentation, désolé... Je suis en pleine refonte. C'est transitoire .... Quand j'aurais fini, ça sera clean ... promis !