Pb de dimensionnement d'image avec div et css
boudz
-
Enax Messages postés 204 Statut Membre -
Enax Messages postés 204 Statut Membre -
Bonjour,
je crée un site web avec divisions en div (une bannière en haut, le corps de la page divisé verticalement entre le menu à gauche et le contenu à droite ; et en bas le pied de page).
Rien de très compliqué, sauf que je souhaite insérer des boutons ds la division "menu", et qu'ils dépassent de la largeur de la div de gauche! Je voudrais que ces boutons s'adaptent à la taille de la div (selon la résolution de l'ecran) pour ne pas empiéter sur la div du contenu.
Pour info, mes div menu et contenu sont configurées comme cela pour la largeur (ds la css):
20% pour le menu
80% pour le contenu
voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Granada, capital cultural</title>
</head>
<body>
<div id="bandeau"> <img src="../images/banniere.jpg"> </div>
<div id="menu"> <a href="accueil.html"> <img src="../images/accueil.jpg"> </a> </div>
<div id="contenu">Ceci est le contenu</div>
<div id="pied_page"> <a href="mailto:***@hotmail.com"> cliquez ici pour me contacter </a>
</div>
</body>
</html>
et ma css :
div {
text-align:center;
}
div#bandeau {
width:750px;
height:140px;
margin: 0 auto;
background-color:#FFFFFF;
}
div#menu {
float:left;
width:20%;
background-color:#FF6699;
}
div#contenu {
float:left;
width:80%;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:100%;
height:50px;
background-color:#FFFFFF;
}
A {
color:#ad241c;
text-decoration:none;
}
A:hover {
color:#ad241c;
text-decoration:underline;
}
Merci de votre réponse !
Boudz
je crée un site web avec divisions en div (une bannière en haut, le corps de la page divisé verticalement entre le menu à gauche et le contenu à droite ; et en bas le pied de page).
Rien de très compliqué, sauf que je souhaite insérer des boutons ds la division "menu", et qu'ils dépassent de la largeur de la div de gauche! Je voudrais que ces boutons s'adaptent à la taille de la div (selon la résolution de l'ecran) pour ne pas empiéter sur la div du contenu.
Pour info, mes div menu et contenu sont configurées comme cela pour la largeur (ds la css):
20% pour le menu
80% pour le contenu
voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Granada, capital cultural</title>
</head>
<body>
<div id="bandeau"> <img src="../images/banniere.jpg"> </div>
<div id="menu"> <a href="accueil.html"> <img src="../images/accueil.jpg"> </a> </div>
<div id="contenu">Ceci est le contenu</div>
<div id="pied_page"> <a href="mailto:***@hotmail.com"> cliquez ici pour me contacter </a>
</div>
</body>
</html>
et ma css :
div {
text-align:center;
}
div#bandeau {
width:750px;
height:140px;
margin: 0 auto;
background-color:#FFFFFF;
}
div#menu {
float:left;
width:20%;
background-color:#FF6699;
}
div#contenu {
float:left;
width:80%;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:100%;
height:50px;
background-color:#FFFFFF;
}
A {
color:#ad241c;
text-decoration:none;
}
A:hover {
color:#ad241c;
text-decoration:underline;
}
Merci de votre réponse !
Boudz
A voir également:
- Pb de dimensionnement d'image avec div et css
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Image de manchots sur une image de plage ✓ - Forum Graphisme
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop