Rechercher : dans
Par :

Adapter la hauter des balise a leur conteneur

Dernière réponse le 22 mar 2009 à 13:39:25 fanimed, le 21 mar 2009 à 16:47:21 
 Signaler ce message aux modérateurs

Bonjour,

Je veux adapter la hauteur de mes balises div a leur conteneur.

voici le code

<div id="principal">
<div id="bord_gauche"><img src ="bord_gauche.gif" height="100%" width = "100%" /></div>
<div id="contenu"><p> texte </p></div>
<div id="bord_droite"><img src ="bord_droite.gif" height="100%" width = "100%" /></div>
</div>



css:
#principal
{
width:800px;
height:auto;
}

#bord_gauche
{
width:5%;
height:100%;
float:left;
}
#contenu
{
width:90%;
height:500px;
float:left;
}

#bord_gauche
{
width:5%;
height:100%;
float: right;
}

Mon probleme est que;
lorsque la hauteur de la balise contenu augmente a cause du texte qu'il contient, les balises bord_gauche et bord_droite devraient aussi augmenter pour respecter le design que je veux adopter pour le site.
Enfait les images qui sont a gauche et a droite sont des ombres que jai decoupees avec fotoshop. ces ombres doivent avoir la meme hauteur que le texte
Je sais pas comment faire cela.

Si vous avez une solution avec "position:absolute ", developpez la parce que je lai essayer mais je mensors pas.
J'ai besoin de votre aide, proposez moi des solutions s'il vous plait

Configuration: Windows XP
Firefox 3.0.7

Meilleures réponses pour « Adapter la hauter des balise a leur conteneur » dans :
Numériser ses VHS VoirVous avez un grand nombre de vidéos sous forme de cassettes vidéo (au format VHS), il est possible de les numériser afin d'éviter de perdre leur contenu, car ce genre de support a tendance à s'altérer avec les années. Numériser vos bandes VHS sans...
Contrôleur hôte USB à haut/bas débit VoirLors de la connexion d'un périphérique USB 2.0, Windows affiche le message suivant : Installez un controleur hôte usb à haut débit ou bien Ce périphérique fonctionnera à vitesse réduite si vous n'avez pas de contrôleur haut débit installé sur votre...
Télécharger Orbit downloader VoirOrbit Downloader est un gestionnaire de téléchargement permettant de télécharger facilement et à haut débit du contenu rich media, tel que des vidéos en Flash (FLV). Basé sur une technologie Peer-to-peer (P2P) et multi-source, il supporte les...
Télécharger Desktop UI Renamer VoirCertaines icônes de Windows ne peuvent pas être renommer. Alors vous devez vous contenter de tous ces noms barbant qui ne correspondent pas toujours à leur contenu. Desktop UI Renamer, est un outil simple et pratique, qui résoudra bien des problèmes...
Paragraphes en HTML VoirParagraphes Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs répartissent au mieux leur contenu dans la fenêtre à moins qu'=un attribut NOWRAP ou NOBR soit spécifié explicitement. A l'intérieur d'un paragraphe,...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...

1

Dalida, le 21 mar 2009 à 16:58:56

Salut,

imbrique les <div>

<div id="principal">
<div id="bord_gauche">
<div id="bord_droite">
<div id="contenu"><p> texte </p></div>
</div>
</div>
</div> 

et mets tes images en arrière-plan :
#bord_gauche
{
background-image:url(bord_gauche.gif);
background-position:top left;
background-repeat:repeat-y;
} 

et idem pour le droit.
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

2

fanimed, le 21 mar 2009 à 17:42:55

J'ai imbriquer comme tu las dit mais jai pas quelque chose d'interessant hein. Jai aussi mis les images en background. mais les hauteurs de mes bords ne sadaptent toujours a la hauteur du contenu du texte. Les bords ont une hauteur presque nulle alors que le contenu a une taille atteignat 500px

Répondre à fanimed

3

Dalida, le 21 mar 2009 à 17:54:50

C'est parce que le contenu flotte.
ajoute {float:letf;} aux <div> des bordures.
[ Mathieu ]

Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

4

fanimed, le 21 mar 2009 à 18:22:40

Wi ces ce que jai fait. jai ajouter

{
float:left;
}
au css de la bordure gauche
et

{
float:right;
}

au css de la bordure droite

Répondre à fanimed

5

Dalida, le 21 mar 2009 à 18:51:22

Et ça marche ?
[ Mathieu ]

Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

6

fanimed, le 21 mar 2009 à 19:57:33

Non, malheureusement, sa ne marche pas. Il faudrait peut etre une autre solution. Les hauteurs de mes bords nùaugmentent pas kan la hauteur du contenu augmente.

Répondre à fanimed

7

Dalida, le 21 mar 2009 à 20:42:44

As-tu une version en ligne ?
[ Mathieu ]

Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

8

 fanimed, le 22 mar 2009 à 13:39:25

Non jai pas une version en ligne mais je veux te mettre sur un lien pour que tu vois le style des bordures que je veux appliquer. cest en fait une page avec des bords arrondis et les bords droits et gauche sont des images donnant laspect ombre. Pour les coins arrondis pas de problemes mais mes bors ont ue hauteur fixe. il faudra que les balises div des bords evoluent avec la hauteur du contenu. Voici le lien: www.distrimarks.com

Il me faut trouver une solution a sa.

Répondre à fanimed
Collection CommentÇaMarche.net