Aidenet.com Aide informatique et nouvelles technologies
 |
|
|
||||||||||||||||||||||||||||
|
Aidenet.com Aide informatique et nouvelles technologies
|
|||||||||||||||||||||||||||||||
Forum d'entraide sur l'informatique et les nouvelles technologies
Vous n'êtes pas identifié.
Pages: 1
Bonsoir,
Je suis en train de faire un site web et de faire une belle mise en page avec du css...
Ma mise en page est la suivante :
1>> un entete
2>> un menu déroulant (dans une div)
3>> le corps (dans une div) (id=corps)
3.1>>> une div qui ne sert pas à grand chose (id=contenu_b)
3.1.1>>>une div avec une image (id=contenu_image)
3.1.2>>>une div avec du texte (id=contenu)
4>> un bandeau d'animation ou autres images aléatoires (dans une div) (id=galerie)
5>> Le pied de page(dans une div) (id=pied)
Mon problème est le suivant :
- Entre le point 3.2 et 4
- 3.2 est une div à hauteur variable
- Je voudrais que 3.2 s'adapte en hauteur en fonction du texte qu'il y a sur les pages
- Au lieu de ça, je me retrouve avec du texte qui dépasse et s'affiche sur la div du dessous
Comment faire en sorte que 3 et 4 soient en alignement automatique l'un et l'autre mais que 3 est une taille variable suivant son contenu ??
Voici mon code CSS (j'espère que c'est pas trop le bazard..), j'attend vos commentaire...
/*http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html*/
html, body {
margin: 0;
padding: 0;
/*height: 100%;*/
background-color:#745C2D;
}
body#top {
margin : 0 auto;
font-family : Arial,Helvetica;
font-size: 12px;
margin-top: 0;
}
/*
* Entete, bandeau
*/
/* cadre entete avec bandeau*/
div#entete {
margin : 0 auto;
width: 1000px;
height: 173px;
background : url(images/banniere.jpg) no-repeat;
}
/*
* Partie centrale du site
*
*****************************/
div#corps {
/*position:absolute;*/
position: relative;
background-image: url(images/fond-body.jpg);
width:1000px;
margin: 0 auto;
/*min-height: 100%;*/
/*height:100%;*/
/*border: dashed 1px blue;*/
z-index:1;
}
div#contenu_b {
margin-left:40px;
margin-right:30px;
padding-top:20px;
margin-top:0px;
min-height: 500px;
/*height:auto;*/
}
div#contenu_image {
float: left;
/*width: 1000px;*/
/*padding: 0;*/
/*margin: 0 auto;*/
/*padding-right: 10px;*/
/*padding-left: 10px;*/
/*margin-top: 10px;*/
}
div#contenu {
/*float: left;*/
/*width: 1000px;*/
/*padding: 0;*/
/*margin: 0 auto;*/
/*margin-right: 5px;*/
/*margin-left: 20px;*/
position:absolute;
/*display:block;*/
left:390px;
padding-left: 20px;
padding-right:20px;
/*height:auto;*/
display:block;
}
#contenu div.titre {
/*padding-left: 20px;
padding-right:20px;*/
font-size:25px;
font-family: Arial;
font-weight:bold;
color: #511112;
}
#contenu div.surtitre {
/*padding-left: 20px;
padding-right:20px;*/
}
#contenu div.chapo {
/*padding-left: 20px;
padding-right:20px;*/
}
#contenu div.intro {
padding-left: 20px;
padding-right:30px;
_padding-right:0px;
font-size:14px;
font-family: Arial;
color: #511112;
}
#contenu div.ps {
/*padding-left: 70px;
padding-right:20px;*/
font-size:10px;
font-family: Arial;
color: #511112;
}
#contenu div.notes{
/*padding-left: 20px;
padding-right:20px;*/
}
/*
* Galerie photo et anim flash
*
***********************************/
#galerie {
width: 1000px;
height:170px;
background-image: url(images/galerie.jpg);
/*position: relative;*/
/* display:inline;*/
margin: 0 auto;
}
#galerie div.flash {
/* display:block;*/
position:relative;
float: left;
margin-top:15px;
margin-left:40px;
height: 149px;
width: 373px;
border: 1px dashed green;
}
#galerie div.photo {
/* display:block;*/
position:absolute;
float: left;
margin-top:15px;
margin-left: 450px;
height: 145px;
width: 500px;
border: 1px dashed green;
}
/*
* Pied de page
*
***********************************/
div#pied {
width: 1000px;
height:6px;
background-image: url(images/fond-footer.jpg);
margin: 0 auto;
}
#ours a {
color: black;
}
div#ours {
/*display: block;*/
/*background: #a3a5a2;*/
/*height: 18px;*/
width:1000px;
height:5px;
position: relative;
/*text-align: right;*/
/*border: 1px dotted black;*/
/*color: white;*/
margin: 0 auto;
/*margin-right: 15px;*/
margin-top: 5px;
/* margin-left:400px;*/
font-size: 10px;
}
/*
* n'est plus utile
*
*****************************/
div#contenu_g {
margin-top:0px;
margin-left:0px;
width:200px;
}
/*
div#contenu_b {
margin-left:40px;
margin-right:30px;
padding-top:30px;
margin-top:0px;
}
div#contenu_b h1{
font-size: 18px;
font-weight: bold;
color: black;
}*/
/*
* Recup feuille habillage SPIP Mise en page des textes (bordures...)
*/
/*.surtitre {
margin-top: 0.5em;
margin-bottom: 0.5em;
padding-left: 2 em;
font-size: 1.5em;
}
.chapo {
line-height: 1.4em;
margin-top: 1em;
}
.ps {
padding-top: 0.6em;
margin-top: 0.6em;
border-top: 1px dashed #404040;
}
.notes {
margin-top: 0.6em;
margin-bottom: 0.6em;
border-top: 1px solid #a0a0a0;
padding: 1.5em;
}*/Merci d'avance, un internaute...
Hors ligne
Bonjour ou bonsoir !
Alors j'ai trouvé une alternative...
J'ai mis sur chacune de mes div : border 1px dashed blue; pour tester afin de pouvoir avoir mes divers alignements ! Et au final en laissant un truc du genre : border:1px none; ça résoud le problème 
L'essentiel c que ça marche n'est il pas ?
Qu'en pensez vous ?
Hors ligne
J'en pense que c'est pas du code propre ^^
tu mets 2 valeurs différentes sur un style... 1px sur une bordure et tu lui dis après que cette bordure n'existe pas...
Mais bon si ça passe les principaux navigateurs tu as raison l'essentiel c'est que ça marche ^^
Hors ligne
Pages: 1
|
|
|
|