[CSS] Mise en page

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Mise en page

wannamaker

Bonjour à tous,

Il y a peu je faisais les m-e-p via des tables, par facilité et surtout parce que mon éditeur (Namo) permet de travailler en prévisualiation constante avec les tables, ce que je trouve fort pratique.

Après avoir épluché quelques tutoriaux et forums spécialisés, notemment ici, il apparait que les tables pour un usage autre que tabulaire (forums etc) ne sont pas appropriées et que les div sont plus adaptés.

Chose emebetante, lorsque je travaille avec les div mon éditeur ne fais pas de prévisualisation constante, je suis donc obligé de visualiser de temps à autre l'avancement. Si quelqu'un pouvait me renseigner sur un éditeur qui permet de faire ça ça serait sympa

Concernant l'emploi des balises, je travaille un peu au petit bonheur, sachant que je ne connais pas très bien les utilités spécifiques de chacunes, j'ai lu les descriptions sur w3schools, mais c'est un peu flou.

J'ai fais une petit esquisse avec des div:

Citation :

<!DOCTYPE html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>

<head>
<title>T E S T</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
body {
background-color: #000000;
margin: 10px 0;
padding: 0;
text-align: center;
}
.contenu_bas_gauche_vide {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 250px;
margin: 0px;
height: 18px;
}
.contenu_bas_centre_vide {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 298px;
margin: 0px;
height: 18px;
}
.contenu_milieu_vide {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 800px;
margin: 0px;
height: 13px;
}
.contenu_bas_gauche_cellule_1 {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 90px;
margin: 0px;
height: 30px;
text-align: left;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #808080;
padding-left: 20px;
}
.contenu_bas_gauche_cellule_2 {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 138px;
margin: 0px;
height: 30px;
text-align: left;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color: #808080;
padding-left: 0px;
}
.tableau_bas {
border-style: solid;
border-width: 1px;
border-color: rgb(51,51,51);
border-top-style: none;
width: 800px;
margin: 0 auto;
height: 180px;
background: url(images/splash_degrade.jpg);
}
.contenu_bas_centre {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
border-right-style: solid;
width: 298px;
margin: 0px;
height: 200px;
}
.contenu_bas_droite {
float: right;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 250px;
margin: 0px;
height: 200px;
}
.contenu_bas_gauche {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
border-right-style: solid;
width: 250px;
margin: 0px;
height: 200px;
}
.tableau_haut {
border-style: solid;
border-width: 1px;
border-color: rgb(51,51,51);
width: 800px;
margin: 0 auto;
background: url(images/splash_screen2.jpg);
height: 403px;
}
.tableau_milieu {
border-style: solid;
border-width: 1px;
border-color: rgb(51,51,51);
border-top-style: none;
width: 800px;
margin: 0 auto;
height: 13px;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: #003399;
}
.contenu_milieu_gauche {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
border-right-style: solid;
width: 230px;
margin: 0px;
height: 13px;
padding-left: 20px;
}
.contenu_milieu_droite {
float: right;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
width: 230px;
margin: 0px;
height: 13px;
padding-left: 20px;
}
.contenu_milieu_centre {
float: left;
border-style: none;
border-width: 1px;
border-color: rgb(51,51,51);
border-right-style: solid;
width: 278px;
margin: 0px;
height: 13px;
padding-left: 20px;
}

</style>
</head>

<body>

<div class="tableau_haut">
</div>

<div class="tableau_milieu">

<div class="contenu_milieu_gauche">
<p>Texte 1</p>
</div>
<div class="contenu_milieu_centre">
<p>Texte 2</p>
</div>
<div class="contenu_milieu_droite">
<p>Texte 3</p>

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

</html>

Le problème c'est qu'en prévisualisant avec IE, ça passe nickel, mais sous FF le texte se trouve hors des cellules.
je ne sais pas si ça vient de la CSS ou des div, mais je patauge un peu.

Sinon j'ai lu que les balises headers sont recommandées pour les haut de structures, mais je ne comprends pas la différence avec les div.

Enfin voilà, si quelqu'un pouvait m'éclairer un peu j'apprécierais

Message édité par wannamaker le 20-08-2005 à 22:03:51

Publicité

The-Shadow

Développeur
T'as été voir dans ton profil?

Dreamweaver MX 2004 le fait plus ou moins bien, la nouvelle version doit faire cela plutot pas mal.

wannamaker

up.
J'essaierai la dernière version de dreameaver

Sinon personne ne peut m'aider pour la mise en page Mozilla qui foire ?

Badze

Aime les frites

c'est tes <p></p> qui font sortir ton texte en dehors de la cellule.
Ta cellule est trop petite par rapport au texte donc le texte sort de ton DIV pour firefox.

c'est IE qui te fait des miseres.

enleve les height: 13px, tu verra par toi meme

Message édité par Badze le 21-08-2005 à 21:16:37

ANViL

yep...definitely ♫

Hmm en fait après avoir retiré les 'height 13px' pour les informations de hauteur de cellules / tableau, j'obtiens ça:

Les marges verticales apparaissent bien, mais la ligne du dessous est collée à celle de 'tableau_haut'

Edit: sous IE c'est toujours nickel :sarcastic:

Message édité par ANViL le 21-08-2005 à 21:35:13

ANViL

yep...definitely ♫

Dans la foulée, et comme je n'ai pas envie de faire un nouveau post, j'expose un petit dillemme que je ne comprends pas:

si j'écris ça:

Citation :

body {
background: url(images/truc.jpg)
background-attachement: fixed;
}

...IE n'en veut pas.

Par contre:

Citation :

body {
background: url(images/truc.jpg) fixed;
}

là ça marche ôô

Je sais qu'IE est sécial mais si quelqu'un avait une explication rationnelle j'aimerais autant :hello:

Message édité par ANViL le 21-08-2005 à 21:52:38

kirua_sama

Learn sciences with senses

j'ai le meme probleme XD

Badze

Aime les frites

Voila ce que j'arrive a obtenir en refaisant ce que ta fait, je ne pense pas que j'ai fait le top du top, mais cela fonctionne sous IE et Firefox. Ton probleme proviens de plusieurs facteurs, bref.

Code :

<!DOCTYPE html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>T E S T</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
body {padding: 0; text-align: center; font: 13px Verdana, Arial, Helvetica, sans-serif; }
.tableau_haut { border: 1px black solid; width: 752px; margin: 0; height: 400px;margin-left: auto; margin-right: auto;}
.tableau_milieu2 {padding: 0; bottom: 0px; width: 754px; margin-left: auto; margin-right: auto;}
.contenu_milieu_gauche { border: 1px black solid; border-top: none; width: 250px; margin: 0; padding: 0; background: blue; float: left;}
.contenu_milieu_centre { border: 1px black solid; border-top: none; border-left: none; width: 250px; margin: 0; padding: 0; background: #FFF; float: left;}
.contenu_milieu_droite { border-bottom: 1px black solid; border-right: 1px black solid; width: 250px; margin: 0; padding: 0; background: red; float: left;}
</style>
</head>
<body>
<div class="tableau_haut"></div>
<div class="tableau_milieu2">
<div class="contenu_milieu_gauche">test 1</div>
<div class="contenu_milieu_centre">test 2</div>
<div class="contenu_milieu_droite">test 3</div>
</div>
</body>
</html>

Badze

Aime les frites

un point virgule ";" est surement la solution

Citation :

body {
background: url(images/truc.jpg);
background-attachement: fixed;
}

kirua_sama

Learn sciences with senses

moi meme avec le ";" c'est pareil. Z'avais meme pas vu qu'il l'avait oublier :£

Publicité

ANViL

yep...definitely ♫

Désolé pour la faute effectivement je n'avais pas vu.
Mais comme kirua le dit, ça ne change tout de même rien avec IE

kirua_sama

Learn sciences with senses

de toute facon je ne pense pas qu'il soit possible d'expliquer toutes les idioties qu'IE a dans le crane.... ton fait restera inexplicaple :oops:

wannamaker

-> badze :sol:

Ca fonctionne nickel !
Je pense que je vais grandement m'insipirer de ton code CSS :bounce:

J'ai vu que tu avais gérer les margins (source de mes problèmes ?)
Merci à tous pour l'aide

P.S: Je confirme le comportement erratique d'IE avec la syntaxe de background 'correcte'

Message édité par wannamaker le 22-08-2005 à 10:36:58

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Mise en page

Sujets relatifs
please, help pour mise en page CSS....	Vos Méthodes pour faire une intégration graphique et mise en Page CSS
mise en page CSS sous IE	Problème de mise en page avec CSS
CSS et mise en page	[Conseils]Mise en page contenant plein d'élément gif avec CSS ou HTML
mise en page css-->probleme son flash	Gros pb de mise en page Css
[CSS] pb mise en page IE 5	css IE, FF et mise en page
Plus de sujets relatifs à : [CSS] Mise en page

Page générée en 0.074 secondes