Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP [CSS] demande test (hors IE et firefox:win) modele page 3 colonnes

[CSS] demande test (hors IE et firefox:win) modele page 3 colonnes

2 réponses
Avatar
hd
Bonjour,

Après pas mal d'heures de travail, j'espères avoir fait un modèle qui
tienne la route par rapport à mes besoins.
S'il y en a qui veulent bien le tester.
Merci d'avance
a+
Hervé



Test OK pour IE 6.0 et firefox 0.8 (sous windows XP):
-------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0 ;
} /* marges intérieures et extérieures */

#haut-page,#bas-page { /* style des en-tête et en-pied */
font-size: 15px; /* taille de la police */
margin: 0; /* pas de marge : colle aux bords de l'écran */
background-color: #dda; /* couleur de fonds */
text-align:center ; /* le texte est centré */
border-top: 3px solid black; /* style de l'encadrement haut */
border-bottom: 3px solid black} /* style de l'encadrement bas */

#milieu-page{
padding: 10px;
}

#bas-page.footer { clear: both; }

#menu-princ
{
width:100%;
line-height:normal;
background:#DAE0D2;
border:dashed 1px orange ;
}

#gauche { /* boite gauche (avec le menu) */
float: left;
padding: 10px;
background-color: #E7E4E4 ; /* couleur de fond */
border:dashed 1px orange ;
width:23%;
voice-family: "\"}\"";
voice-family:inherit;
width:21%;
}
html>body #gauche {
width: 21%;
}

#centre { /* boite qui "pousse" vers le bas le reste de la page */
margin: 0 25% 0 25%;
border:dashed 1px orange ;
padding:10px; /* marge intérieure - indispensable */
background-color: #CCCCCC} /* couleur du fond */

#droite { /* boite droite (avec le commentaire) */
float: right;
padding: 10px;
background-color: #E7E4E4 ; /* couleur de fond */
border:dashed 1px orange;
width: 23%;
voice-family: "\"}\"";
voice-family:inherit;
width:21%;
}
html>body #droite {
width:21%;
}
-->
</style>
</head>

<body>

<div id="haut-page">
EN-TETE
</div>


<div id="menu-princ">
MENU ACCUEIL
</div>

<div id="milieu-page">

<div id="gauche">
<p>Colonne gauche</p>
<p>Colonne gauche</p>
<p>Colonne gauche</p>
</div>

<div id="droite">
Colonne droite
</div>

<div id="centre">
Colonne centre
</div>

</div>

<div id="bas-page" class="footer">
PIED PAGE
</div>


</body>
</html>
-------------
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
hd a ecrit :

j'espères avoir fait un modèle qui
tienne la route par rapport à mes besoins.
S'il y en a qui veulent bien le tester.




IE5.0 et Moz 1.2 (vieux Mac)
C'est tout bon !
voir ici (capture IE) :
http://perso.wanadoo.fr/stephane.moriaux/truc/ecole_4_5.jpg
reste plus qu'à mettre un petit blanc au-dessus du footer
égal à celui sous menu-principal

NB :
menu_princ : peut-être en float si tu en as besoin
alors
#milieu-page { clear:both; margin:0; margin-bottom: 10px;}
#bas-page.footer { clear: both; }
peut être remplacé par
#bas-page { clear: both; }
et on vire la classe footer du bas de page

--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Eric
S'il y en a qui veulent bien le tester.



Win 2000 pro :
- NN6 : ça roule
- Opera 7.11 : les border: dashed n'apparaissent pas

Eric
http://ericfederici.free.fr