Images de fond superposées
magicpimiento
Messages postés
8
Statut
Membre
-
ideal -
ideal -
Bonjour,
Bon voilà hier j'ai eu un petit souci car j'avais zappé les padding de base de body, du coup j'ai remis mon html mais reste un souci de positionnement, mon contenu deborde de ma page.
Ca ne viens pas de l'image car elle apparait déformée vars le bas, le fond est bien positionné mais l'image que j'applique par dessus est étirée vers le bas.
J'ai bien testé de lui donner une valeur de 100% de son conteneur mais je n'y arrive pas.
Merci de m'eclairer.
/code
Et pour voir ça en ligne:
file:///C:/Documents%20and%20Settings/Utilisateur/Bureau/V2.2/siteV2.1/acceuil.html
PS: je viens de voir que ça ne donne pas du tout la même chose avec IE
Bon voilà hier j'ai eu un petit souci car j'avais zappé les padding de base de body, du coup j'ai remis mon html mais reste un souci de positionnement, mon contenu deborde de ma page.
Ca ne viens pas de l'image car elle apparait déformée vars le bas, le fond est bien positionné mais l'image que j'applique par dessus est étirée vers le bas.
J'ai bien testé de lui donner une valeur de 100% de son conteneur mais je n'y arrive pas.
Merci de m'eclairer.
Code html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="styles.css" >
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
</head>
<body>
<div id="doc">
<div id="header">
</div>
<div class="nav">
<div id="navbar">
<ul>
<li><a href="#" class="type2">Loggin</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Tournois</a></li>
<li><a href="#">Outils</a></li>
<li><a href="#">Aide</a></li>
</ul>
</div>
</div>
<div id="contenu">
<div id="content"><img class="img2" src="images/Acceuil.png"
width=100%
height=50%
ALT="Acceuil"
TITLE="Acceuil" /><img src="images/fondcorp.jpg"
width=100%
height=100% />
</div>
</div>
</div>
<script type="text/javascript">
Event.observe(window, 'load', function() {
var options = "resizeSpeed : 8, classNames : {toggle : 'accordion_toggle',toggleActive : 'accordion_toggle_active',content : 'accordion_content'},defaultSize : {height : null, width : null},direction : 'vertical', onEvent : 'click'";
new accordion('container-selector', options);
});
</script>
</body>
</html>
code css:
body{text-align:center;
color:#ffffff;
background-color:#E6B780;
height:100%;
width: 100%;
padding:0;
margin:0
}
#doc{
position: relative;
}
#header{
height:96px;
background: #211919 url(images/header.png) center no-repeat;
margin-bottom: -6px;
padding:0;
}
.nav{
height:30px;
width: 100%;
background-image:url(images/fondnavigation.png);
border-top:#8c7b69 1px solid;
border-bottom:#000000 0px solid;
color: #ffffff;
font-family:verdana;
font-size: 16px;
font-weight:bold;
margin:0;
padding:0;
}
#navbar ul {
margin-left: 0;
padding-left: 0;
margin-top:6px;
}
#navbar li {
display: inline;
list-style-type: none;
}
#navbar a {
padding: 3px 10px;
margin-bottom:8px;
}
#navbar a:link, #navbar a:visited {
background-color: transparent;
color: #FFFFFF;
text-decoration: none;
}
#navbar a:hover {
background-color: transparent;
color: #53C8CB;
text-decoration: none;
}
#content{
height:100%;
width: 100%;
padding:0;
margin:0
}
#contenu{
height:100%;
width: 100%;
padding:0;
margin:0
}
.img2 {position:absolute;
height:100%;
width: 80%;
}
#footer{
height:26px;
background-image:url(images/fondnavigation.png);
border-top:#000000 2px solid;
margin:0;
padding:0;
}
h2 {
color: #36b1cc;
}
a.type1 { color: #53C8CB; }
a.type1:hover { color: #4B7FDB;}
a.type2 { color: blue; }
a.type2:hover { color: green; }
/code
Et pour voir ça en ligne:
file:///C:/Documents%20and%20Settings/Utilisateur/Bureau/V2.2/siteV2.1/acceuil.html
PS: je viens de voir que ça ne donne pas du tout la même chose avec IE
A voir également:
- Images de fond superposées
- Comment mettre une vidéo en fond d'écran - Guide
- Des images - Guide
- Fond de page word - Guide
- Trame de fond word - Guide
- Enlever le fond d'une image - Guide
5 réponses
bonjour
je comprends pas très bien ce que tu veux faire avec les images dans la div contenu.
est-ce une image de fond? en background? sinon il faut des dimensions.
ou doit être positionnée l'image accueil?
je comprends pas très bien ce que tu veux faire avec les images dans la div contenu.
est-ce une image de fond? en background? sinon il faut des dimensions.
ou doit être positionnée l'image accueil?
Et bien en fait l'image images/fondcorp.jpg est le fond pour toutes les pages du site et par dessus je voudrais positionner ce que je veux, soit une image soit du texte soit les deux.
pour le texte pas de souci mais c'est pour les image que je bloque
Configuration: Windows XP / Firefox 3.6.6
pour le texte pas de souci mais c'est pour les image que je bloque
Configuration: Windows XP / Firefox 3.6.6
ooops je viens de voir que j'ai pas mis le bon lien:
http://mwspimiento.free.fr/pimiento/V2.2/siteV2.1/acceuil.html
(je vois pas de fonction éditer, donc désolé pour le multipost
http://mwspimiento.free.fr/pimiento/V2.2/siteV2.1/acceuil.html
(je vois pas de fonction éditer, donc désolé pour le multipost
un exemple
html
style
image1 est l'image superposée.
html
<div id="contenu"> <div id="contenu1"> <img src="image/image1.jpg" class="img1"> <img src="image/image0.jpg"> </div> </div>
style
#contenu1{
position: relative;
}
.img1{
position: absolute;
top: 25px;
left: 200px;
}
image1 est l'image superposée.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
