Gestion de DIV + css: compliqué ne
jbdk62
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour a tous
je me crée un petit site web.
l'idee est d'avoir dessus un blog, des liens, qqs pages de texte et qqs pages de photos
j'essaie de concevoir l'ossature du site avec des "div".
et je lutte...
les div se chevauchent, ne se mettent pas a l'endroit que je veux, etc...
voila l'idee du site image):
http://www.siteduzero.com/upload-216.html?dir=1&parent_id=3123083&img=143440&mid_img=143753&textarea=texte
dans l'ideal, j'aimerai que:
- la partie principale ("le contenu") puisse s'alonger en fonction de ce qu'il y a dedans et qu'on puisse naviguer dedans avec une barre de defilement.
- que donc, quelque soit notre position dans "le contenu", on voit le titre et le menu du haut
- que le "pied de page" se deplace en fonction de la taille du contenu pour etre toujours en bas.
- le tout, transparent, pour pouvoir voir une unique image de fond caler en haut a gauche
qq'un de bien attentionné pourrai-til me guider sur ce truc?
je sais que je reclame trop mais je sais aussi que certains peuvent faire ca en 2 temps 3 mouvements et moi je prends des jours!!!
voila mon css et mon index:
ps: j'ai mis des "float", des "padding", etc un peu partout mais bon, c'est du bluff, j'y comprends plus rien.
********CSS**************************************
********CSS**************************************
********CSS**************************************
div {
text-align:center;
}
body {
background-color:#000000;
background-image:url(./deco/Old_World_Map.jpg)
}
/* *************** FORMAT DU TITRE ****************** */
div#Titre {
width:960px;
height:50px;
font-size:34pt;
font-family:impact;
}
/* *************** FORMAT DU MENU ****************** */
div#BandeauMenu {
float:top;
width:960px;
height:50px;
font-size:24pt;
font-family:impact;
}
/* *************** FORMAT DE LA PARTIE GAUCHE ****** */
div#BarreGauche {
float:left;
width:50px;
height:400px;
}
div#EnteteSousMenu {
float:left;
width:150px;
height:40px;
}
div#SousMenu {
float:left;
width:150px;
height:360px;
font-size:16pt;
font-family:Impact;
}
/* *************** FORMAT DU CONTENU ************** */
div#Contenu {
float:left;
width:750px;
height:600px;
font-size:10pt;
font-family:Impact;
color:#FFFFFF;
}
/* *************** FORMAT DU DU RESTE ************** */
div#PiedPage {
position: relative;
width:960px;
height:100px;
background-color:#FF3300;
}
********INDEX**************************************
********INDEX**************************************
********INDEX**************************************
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>titre de la page</title>
</head>
<body>
<div id="Titre">
<b style='color:white'>T</b>
<b style='color:#FF9900'>itre du </b>
<b style='color:white'>S</b>
<b style='color:#FF9900'>ite</b>
</b>
</div>
<div id="BandeauMenu">
<a href='./index.html'>Accueil </a>
<a href='./index.html'>Accueil2 </a>
<a href='./index.html'>Accueil3 </a>
<a href='./index.html'>Accueil4 </a>
</div>
<div id="BarreGauche">
<div id="EnteteSousMenu">Menu haut</div>
<div id="SousMenu">
<br><a href=''>test</a>
<br><a href=''>test</a>
<br><a href=''>test</a>
</div>
</div>
<div id="Contenu">
<div id="bloc_news">Bloc News</div>
</div>
<div id="PiedPage">Ceci est le pied de page</div>
</body>
</html>
********FIN*************************************
je me crée un petit site web.
l'idee est d'avoir dessus un blog, des liens, qqs pages de texte et qqs pages de photos
j'essaie de concevoir l'ossature du site avec des "div".
et je lutte...
les div se chevauchent, ne se mettent pas a l'endroit que je veux, etc...
voila l'idee du site image):
http://www.siteduzero.com/upload-216.html?dir=1&parent_id=3123083&img=143440&mid_img=143753&textarea=texte
dans l'ideal, j'aimerai que:
- la partie principale ("le contenu") puisse s'alonger en fonction de ce qu'il y a dedans et qu'on puisse naviguer dedans avec une barre de defilement.
- que donc, quelque soit notre position dans "le contenu", on voit le titre et le menu du haut
- que le "pied de page" se deplace en fonction de la taille du contenu pour etre toujours en bas.
- le tout, transparent, pour pouvoir voir une unique image de fond caler en haut a gauche
qq'un de bien attentionné pourrai-til me guider sur ce truc?
je sais que je reclame trop mais je sais aussi que certains peuvent faire ca en 2 temps 3 mouvements et moi je prends des jours!!!
voila mon css et mon index:
ps: j'ai mis des "float", des "padding", etc un peu partout mais bon, c'est du bluff, j'y comprends plus rien.
********CSS**************************************
********CSS**************************************
********CSS**************************************
div {
text-align:center;
}
body {
background-color:#000000;
background-image:url(./deco/Old_World_Map.jpg)
}
/* *************** FORMAT DU TITRE ****************** */
div#Titre {
width:960px;
height:50px;
font-size:34pt;
font-family:impact;
}
/* *************** FORMAT DU MENU ****************** */
div#BandeauMenu {
float:top;
width:960px;
height:50px;
font-size:24pt;
font-family:impact;
}
/* *************** FORMAT DE LA PARTIE GAUCHE ****** */
div#BarreGauche {
float:left;
width:50px;
height:400px;
}
div#EnteteSousMenu {
float:left;
width:150px;
height:40px;
}
div#SousMenu {
float:left;
width:150px;
height:360px;
font-size:16pt;
font-family:Impact;
}
/* *************** FORMAT DU CONTENU ************** */
div#Contenu {
float:left;
width:750px;
height:600px;
font-size:10pt;
font-family:Impact;
color:#FFFFFF;
}
/* *************** FORMAT DU DU RESTE ************** */
div#PiedPage {
position: relative;
width:960px;
height:100px;
background-color:#FF3300;
}
********INDEX**************************************
********INDEX**************************************
********INDEX**************************************
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>titre de la page</title>
</head>
<body>
<div id="Titre">
<b style='color:white'>T</b>
<b style='color:#FF9900'>itre du </b>
<b style='color:white'>S</b>
<b style='color:#FF9900'>ite</b>
</b>
</div>
<div id="BandeauMenu">
<a href='./index.html'>Accueil </a>
<a href='./index.html'>Accueil2 </a>
<a href='./index.html'>Accueil3 </a>
<a href='./index.html'>Accueil4 </a>
</div>
<div id="BarreGauche">
<div id="EnteteSousMenu">Menu haut</div>
<div id="SousMenu">
<br><a href=''>test</a>
<br><a href=''>test</a>
<br><a href=''>test</a>
</div>
</div>
<div id="Contenu">
<div id="bloc_news">Bloc News</div>
</div>
<div id="PiedPage">Ceci est le pied de page</div>
</body>
</html>
********FIN*************************************
A voir également:
- Gestion de DIV + css: compliqué ne
- Logiciel gestion locative gratuit excel - Télécharger - Comptabilité & Facturation
- Gestion de fichiers - Télécharger - Gestion de fichiers
- Logiciel gestion photo gratuit - Guide
- Gestion autorisation application android - Guide
- Logiciel gestion cabinet médical gratuit - Télécharger - Organisation