Faire 2 colonnes avec <div>

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 !
Sebaz
Gecko
Messages : 72
Inscription : 30 nov. 2004, 04:47

Faire 2 colonnes avec <div>

Message par Sebaz »

Je veux diviser en 2 colonnes mon bloc "centre" (le bleu pale) et que le texte soit centré.
Avec un tableau c'est facile mais j'essais de réussir à le faire avec des <div>.

Je m'y connait que très très peu en code alors je fais du mieux que je peux.


je m'interroge à savoir pourquoi les 2 bloc vert utilisent chacun 50% de la largeur du bloc bleu avec mozilla... mais avec IE le bloc vert pale utilise 50% de la largeur totale de la page.

Pour pourvoir vous montrer la future page, je l'ai hébergé sur mon site perso ici

Au pire je vais m' accomoder de cette divergence d'affichage entre moz et IE cependant, y aurait-il une solution?





Grosièrement le code de mes bloc div ressemble à cela mais faut tenir compte de ma feuille css (à cause de la marge gauche qui chambarde tout avec IE).

Code : Tout sélectionner

<div
 style="float: right; text-align: center; width: 50%; background-color: rgb(0, 200, 0); margin-top: 0px; height: 509px;"><br>
<br>
<br>
</div>
<div
 style="text-align: center; background-color: rgb(0, 100, 0); margin-top: 0px; height: 509px;"><br>
<br>
<br>
</div>

PS: le vert foncé et vert pale ne sont présent que pour aider à "voir" mon problème car je vais les enlever et laisser le bleu pale.
PS2: j'ai vu qu'avec IE les coins rond de mes png ne passent pas, je vais devoir y remédier...
Ma configuration

Adoptez vous aussi un gentil OOozilla

Image
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Re: Faire 2 colonnes avec <div>

Message par SB »

Sebaz a écrit :je m'interroge à savoir pourquoi les 2 bloc vert utilisent chacun 50% de la largeur du bloc bleu avec mozilla... mais avec IE le bloc vert pale utilise 50% de la largeur totale de la page.
Parce que tu utilises une DTD "incomplète" d'où divergence de traitement entre les navigateurs qui ne se servent pas du même référentiel. Remplace

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
par

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Sebaz
Gecko
Messages : 72
Inscription : 30 nov. 2004, 04:47

Re: Faire 2 colonnes avec <div>

Message par Sebaz »

J'ai oublié de spécifier dans mon message que j'ai fait cette page avec Nvu donc lorsque j'insère
SB a écrit :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
en allant dans l'onglet souce, Nvu l'efface aussitôt quand j'enregistre... (comme flore l'explique si bien à l'effet que Nvu: "met tout votre code à la poubelle")

Cependant en utilisant SciTe, ça marche!
Est-ce qu'une façon de m'en sortir serait de faire ma page avec Nvu et juste avant de la publier, usiliser scite pour modifier le !DOCTYPE :?:
Ma configuration

Adoptez vous aussi un gentil OOozilla

Image
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Tu t'expose à ce genre de problèmes en utilisant un éditeur WYSIWYG. Si tu en utilise un (comme Nvu) il faut oublier l'idée de maitriser le code de la page, ce n'est pas compatible (ou alors tu utilise une des extension de Kaze, mais là ça devient du masochisme :lol: :lol: :lol: ).

Tu peux très bien t'en passer, et utiliser un éditeur de texte comme SciTE, le HTML n'est pas si compliqué que ça, une vingtaine de balises à tout casser 8)
Do-IT
Iguane
Messages : 537
Inscription : 03 juil. 2005, 09:46

Message par Do-IT »

calimo a écrit :ou alors tu utilise une des extension de Kaze, mais là ça devient du masochisme :lol: :lol: :lol:
:shock: :o :cry: :evil:
Redhat, CentOs, Mandriva, Ubuntu au boulot. Ubuntu à la maison. Vista et Xp grâce à la vente liée.
Soutenir KompoZer
Sebaz
Gecko
Messages : 72
Inscription : 30 nov. 2004, 04:47

Re: Faire 2 colonnes avec <div>

Message par Sebaz »

Comme je disais plus haut, j'en connait encore que très peu du html...
De plus, c'est le site de mon asso étudiante que je prépare, je vais bientôt le mettre en ligne et vais m'en occuper pendant un an ou deux. Ensuite c'est quelqu'un d'autre qui va prendre la relève d'où l'utilité de Nvu: WYSIWYG.


J'aimerai qu'on me confirme:
Sebaz a écrit :Est-ce qu'une façon de m'en sortir serait de faire ma page avec Nvu et juste avant de la publier, usiliser scite pour modifier le !DOCTYPE :?:
car si vous me dites que c'est OK, j'en serai très heureux :)
Ma configuration

Adoptez vous aussi un gentil OOozilla

Image
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: Faire 2 colonnes avec <div>

Message par calimo »

Sebaz a écrit :J'aimerai qu'on me confirme:
Sebaz a écrit :Est-ce qu'une façon de m'en sortir serait de faire ma page avec Nvu et juste avant de la publier, usiliser scite pour modifier le !DOCTYPE :?:
car si vous me dites que c'est OK, j'en serai très heureux :)
Mais de nouveau, dans deux ans, lorsque quelqu'un prendra le relai, ça n'ira plus.

Note que l'HTML n'est pas dépendant de l'éditeur utilisé. Si tu fais de l'édition HTML directe, ton suivant pourra très bien reprendre ça dans Nvu ou n'importe quel autre éditeur (par contre l'inverse est plus compliqué).

@Do-IT : c'est vrai non ? :lol: :wink:
Do-IT
Iguane
Messages : 537
Inscription : 03 juil. 2005, 09:46

Message par Do-IT »

Si c'est vrai je sais pas pas a mon avis non. mais faut demander a des pros comme daniel, eric, kaze, ... :wink:

Utiliser un editeur texte pour changer le doctype ? De strict vers transitional peut-etre. L'inverse depend du contenu du document. Pour changer le doctype html<->xhtml c'est pire, y'a tres probablement du code a modifier.

Le plus facile c'est d'utiliser Tidy (ou la futur extension de Kaze qui permet de changer le doctype [=> roadmap] ).

Faire du html à la main n'est pas un gage de qualité, on peut faire n'importe quoi (frame), et nvu ne saura pas forcement quoi en faire. Par contre un document fait avec nvu (+Kazcades pour du code propre + handcoder pour du code indenté) là tu pourra le reprendre avec un autre editeur.
Redhat, CentOs, Mandriva, Ubuntu au boulot. Ubuntu à la maison. Vista et Xp grâce à la vente liée.
Soutenir KompoZer
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Do-IT a écrit :Utiliser un editeur texte pour changer le doctype ? De strict vers transitional peut-etre. L'inverse depend du contenu du document. Pour changer le doctype html<->xhtml c'est pire, y'a tres probablement du code a modifier.
Là il ne s'agit que d'ajouter l'URL du doctype, cruellement manquant dans le code produit par Nvu :?
Do-IT a écrit :Faire du html à la main n'est pas un gage de qualité, on peut faire n'importe quoi (frame)
Avec Nvu aussi on peut faire n'importe quoi. Il faut évidemment toujours savoir ce que l'on fait, quel que soit l'outil.
Mais le HTML est facile à apprendre, donc on a vite fait de ne plus faire n'importe quoi :wink:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité