Passage de tableaux en calques ... wow ...

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Passage de tableaux en calques ... wow ...

Message 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
Dernière modification par Bibilefou le 26 sept. 2007, 20:18, modifié 1 fois.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message 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.
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Message 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.
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Message 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
Dernière modification par Bibilefou le 15 nov. 2007, 13:27, modifié 1 fois.
bobo
Iguane
Messages : 764
Inscription : 18 août 2003, 11:04

Message par bobo »

Bravo, c'est pas un truc évident de passer d'un design tableau à un design CSS.
Les standards c'est bon, mangez en !
Flore & Sébastien
Unité dans la diversité.
Jigho
Iguane
Messages : 637
Inscription : 29 juil. 2003, 08:44

Message 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 :(
Image
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Message 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 !
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Je n'avais pas vu la version finale, joli le coup des gauche et droite alternés :)
Jigho
Iguane
Messages : 637
Inscription : 29 juil. 2003, 08:44

Message par Jigho »

Ah oui, là ça marche !

.... et c'est bôoooôoo, félicitations !
Image
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Message par Bibilefou »

Personne serait sous Mac par hasard ?
C'est galère de tester sur la plupart des plateformes ...
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message 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
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Message par Bibilefou »

Bais merci pour tout ! ;-)
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

chevauchement de calques ...

Message 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
Dernière modification par Bibilefou le 15 nov. 2007, 13:28, modifié 1 fois.
PsyDk
Lézard à collerette
Messages : 317
Inscription : 23 sept. 2003, 09:41

Message 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 :)
Bibilefou
Salamandre
Messages : 46
Inscription : 20 sept. 2003, 14:34

Message 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 ! ;)
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités