begin process at 2012 05 30 04:54:57
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Structure d'une page avec des DIV

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Structure d'une page avec des DIV

dimanche 18 février 2007 à 18:22:26 | Structure d'une page avec des DIV

MadM@tt

Membre Club
Bonjour j'ai une question toute simple qui me résiste depuis plusieurs année !
et comme je commence un nouveau site web, j'aimerais le faire propre, c'est à dire, sans tableaux, mais avec des DIV et un CSS.

Ma question est simple :
Comment faire une structure classique de site web avec 5 DIV qui sépare la page en 5 blocs :
1 en haut, de taille 100% de l'écran et de hauteur fixe
1 menu à gauche de taille fixe
1 menu à droite de taille fixe
1 : le contenu de la page, au milieu des 2 menus, et qui prend toute la place libre (donc de taille non fixe, c'est à dire 100% de l'espace restant)
1 en bas, qui clos la page web (pas forcément nécessaire, je peux l'integrer au bloc central)

(j'aurais bien fait un dessin mais c'est compliqué)

Voilà si vous avez une solution pour ces 5 div et leurs style CSS, ça serait pour moi la découverte du siècle, parce que c'est bien beau de se passer de tableau mais bon....

Merci beaucoup !!

Ciaò
- MadMatt -
Vb System Library
lundi 19 février 2007 à 09:50:25 | Re : Structure d'une page avec des DIV

PlayerMania

Test voir ça si cela te convient, me suis pas embeté, je t tout mit ds l'html, g fait un ptit test, ça devrait etre bon

<html>
<head>
</head>
<body>
<div id="page" style="width:100%;">
<div id="haut" style="width:100%; height:80px;">Haut</div>
<div id="gauche" style="float:left; width:200px; height:600px;">Gauche</div>
<div id="milieu" style="float:left; width:auto;">Texte de ma page</div>
<div id="droite" style="float:right; width:200px; height:500px;">Droite</div>
<div style="clear:both;"></div>
<div id="bas" style="width:100%; height:60px;">Bas</div>
</div>
</body>
</html>
lundi 19 février 2007 à 13:22:41 | Re : Structure d'une page avec des DIV

MadM@tt

Membre Club
Merci beaucoup pour la réponse, j'ai testé ce que tu as proposé mais j'avais déjà essayé ça et ça ne convenait pas car le bloc du milieu (le contenu de la page quoi) ne prend pas toute la largeur disponible, donc si on met une couleur de fond par exemple, on le voit bien.

Mais hier soir, étant bien desespéré, j'ai continué à chercher et j'ai enfin trouvé.
Je laisse la solution si ça interesse du monde :

<html>
<head>
</head>
<body>
<div id="page" style="width:100%; position: absolute;">
<div id="haut" style="width:100%; height:80px;">Haut</div>
<div id="gauche" style="position: absolute; width:200px; height:600px; left: 0px">Gauche</div>
<div id="milieu" style="margin-left: 200px; margin-right: 200px;">Texte de ma page</div>
<div id="droite" style="position: absolute; width:200px; height:500px; right: 0px">Droite</div>
<div id="bas" style="width:100%; height:60px;">Bas</div>
</div>
</body>
</html>

Merci encore

Ciaò
- MadMatt -
Vb System Library
lundi 19 février 2007 à 15:08:20 | Re : Structure d'une page avec des DIV

PlayerMania
Réponse acceptée !

Il restait un bug lorsque tu mettais plus de contenu dans la page, et le menu de droite se placais en dessou de ton contenu, il ne restait donc plus qu'a fixé les 2 menu a 80px du haut qui est la hauteur du haut de la page, tient avec ça t bon :

<html>
<head>
</head>
<body>
<div id="page" style="width:100%; position: absolute;">
<div id="haut" style="width:100%; height:80px;">Haut</div>
<div id="gauche" style="position: absolute; width:200px; height:600px; left:0px; top:80px;">Gauche</div>
<div id="milieu" style="margin-left: 200px; margin-right: 200px;">Texte de ma page<br />Texte de ma page<br />Texte de ma page<br />Texte de ma page</div>
<div id="droite" style="position: absolute; width:200px; height:500px; right:0px; top:80px;">Droite</div>
<div id="bas" style="width:100%; height:60px;">Bas</div>
</div>
</body>
</html>

Ciao et bonne prog !!
Au fait ta de la chance, normalement ici, c'est un forum JavaScript, lol...
lundi 19 février 2007 à 15:51:08 | Re : Structure d'une page avec des DIV

MadM@tt

Membre Club
Ah oui merci j'ai épuré le code que j'avais trouvé un petit peu trop.

Ciaò
- MadMatt -
Vb System Library


Cette discussion est classée dans : taille, web, page, structure, div

Répondre à ce message

Sujets en rapport avec ce message

Imprimer une page web en reduisant la taille [ par paxx ] Bonjour a tous,J'ai un petit soucis avec l'impression d'une page web.Dans cette page, j'ai un tableau de statistiques assez grand et dont la taille va Comment peut-on savoir la taille d'un élément de la page web? [ par b20n00 ] Salut, tout le monde. Je veux juste savoir comment peut-on savoir la taille d'un élément de la page web comme image, table ligne, cellule, frame ou d Intégrer une camera IP dans une page Web???? [ par yipikai ] Bonjour à tous,Je m'excuse par avance, je débute dans la matière....Voila je cherche à intégrer le flux d'une camera IP dans une page web. Actuellemen ouvrir fermer des div sur une même page css/javascript [ par catejo ] Bonjour à tous, j'ai un petit problème de script pour activer le deuxieme bouton Pour l'instant seul le premier bouton fonctionne . Que faut-t-il mo Réinitialiser le contenu dynamique d'une div cachée [ par istella ] Bonjour, J'ai un niveau débutant en Javascript et php, je dois réaliser une page qui contient des données provenant d'une base de données. Au survol d [BAR]code commentaire pour ma page web [ par amargabaamrane ] je cherche un code simple pour que les visiteurs de mon site puissent commenter mes sujets de mes [^^mad2][^^pirate]page problème d'affichage de ma page web sous IE8 [ par sandymen ] Bonjour, Depuis que j'ai inséré un diaporama sur ma page web, j'ai un problème d'affichage sous IE8. Du coup, mon fichier DWT sous dreamweaver modifié ouvrir un lien dans un "DIV" d'une même page sans recharger les autres [ par louseb84 ] salut a tous. voilà je me suis décider a m'inscrire après avoir parcouru pas mal de poste et de codes sources sans y trouver réponse. je me suis mis ouvrir un formulaire dans un div au-dessus de la page [ par cora83 ] Bonjour, voilà je ne sais pas trop comment m'y prendre... j'aimerais que lorsque que l'on clique sur une image, un formulaire (dans un div) s'ouvre a lien controle + controle - pour agrandir reduire une page web dans le navigateur [ par grainedepub ] bonjour je cherche un créer un lien qui agrandirait ou réduirait la page web dans le navigateur ce qui est équivalent à controle - controle + sur pc e


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,250 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)