18041 sujets

Questions générales et questions de débutants

Positionnement image de fond superposées css

Bonjour,
C'est encore moi et mes positions ^^

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 de ce temps je vais potasser ça: http://www.alsacreations.com/xmedia/tuto/exemples/design_css2/

<!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>




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; }


Et pour voir ça en ligne:

file:///C:/Documents%20and%20Settings/Utilisateur/Bureau/V2.2/siteV2.1/acceuil.html
Modifié par mwspimiento (23 Jul 2010 - 15:05)
Pour que ce soit plus clair:

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.

Mais je pense avoir trouvé une solution ici:

http://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html

Mais ça n'a pas l'air d'être compatible avec IE
Modifié par mwspimiento (23 Jul 2010 - 20:06)
Bonjour,

La technique d'intégration utilisée, à savoir un contenu qui est constitué par une image unique (illustration et textes inclus), est contraire à toutes les bonnes pratiques d'intégration web, d'accessibilité, etc. Je déconseille formellement de poursuivre sur cette voie.
Bonjour,

Non non le texte sera bien en html et non avec un format image (je l'ai juste mis pour les test sur l'image pour une question de pratique et pour pas m'encombrer).

Ce sera bien 2 images (sans texte et un texte par dessus), faite comme si le texte n'existait pas Smiley langue
Il devra être visible sans le css.

mwspimiento a écrit :

pour le texte pas de souci mais c'est pour les image que je bloque.


PS: Mais après réflexion c'est peut être pas un super solution, bien que ça m'aurait permis de gérer plusieurs images pour avoir différents background, ça doit venir d'une déformation de shoshop et de ces calques, je vais revoir ma copie si je peux faire la même chose plus simplement.
Modifié par mwspimiento (23 Jul 2010 - 21:20)
Sujet clos
Aller à