28172 sujets

CSS et mise en forme, CSS3

Background

Bonjour.

J'ai testé mon site sur plusieurs ordi, et il se trouve que le content dépasse du background sur certains. Du coup, ce n'est pas esthétique, et surtout illisible (texte blanc sur fond blanc). Je voudrais que le background soit toujours derrière le texte.

Existe-t-il une solution?

Je vous présente mon html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<meta name="google-site-verification" content="O93vfKlpvmIBispYEDHs8UF4ekt7tprbfHGRu59GxdM" />
	<meta name="msvalidate.01" content="F6C49237AE5340F44BBACC9F91DB0984" />
	<title>{TITRE}</title>
	<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1"/>
	<meta name="identifier-url" content="www.ndigo.fr" />
	<META NAME="DESCRIPTION" CONTENT="{DESCRIPTION}">
	<META NAME="KEYWORDS" LANG="fr" CONTENT="{KEYWORDS}">
	<META NAME="LANGUAGE" CONTENT="FR">
	<META NAME="ROBOTS" CONTENT="index, follow, all">
	<META NAME="GOOGLEBOT" CONTENT="index, follow, all">
	<META NAME="AUTHOR" CONTENT="Ugo DI CREDICO">
	<META NAME="COPYRIGHT" content="© N'DIGO all rights reserved">
	
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" charset="ISO-8859-1" />
	<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
	<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
	<link type="text/css" href="css/galerie_photo.css" rel="stylesheet" />
	
	<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/pikachoose.js"></script>
	<script type="text/javascript" src="js/mootools-core.js"></script>
</head>

<body>
<img id="background" src="images/fond8.jpg">
   <div id="content">
   
<img class="logo" src="images/titre.png" alt="titre"/>

				<ul id="menu_horizontal">
<li><a href="index.php?lien=accueil"><img class="menu"  height=60px width=80px src="images/accueil.png" border="0"/></a></li>
<li><a href="index.php?lien=visite"><img class="menu"  height=60px width=80px src="images/visite.png" border="0"/></a></li>
<li><a href="index.php?lien=acces"><img class="menu"  height=65px width=80px src="images/acces.png" border="0"/></a></li>
<li><a href="index.php?lien=region"><img class="menu"  height=75px width=80px src="images/region.png" border="0"/></a></li>
<li><a href="index.php?lien=contact"><img class="menu"  height=65px width=80px src="images/contact.png" border="0"/></a></li>
</ul>
		<div id="texte">{CORPS}</div>
		</div>
</img>
</body>
</html>


Et mon css:


#background{
    width:100%;
    height:100%;

 }

#content{
	margin-top:2%;
    margin-left:20%;
	position:absolute;
    left:0;
    top:0;
}



Le test est facile a faire, avec n'importe quel navigateur, vous aller sur le site et vous zoomer.

http://localhost/index.php?lien=visite

Comment faire pour que le texte et/ou le diaporama soient toujours sur le background?


Merci: Smiley biggrin
Bonjour, oui la solution existe et elle t'étais donnée dans le post suivant: Smiley cligne

Background Firefox

En plus, as-tu passé ton code au validateur ? Tu as beaucoup d'erreurs et cela nuit quand tu cherches à corriger des bugs.
Ok, je ne connaissais pas le validateur en fait.

Je pense que je dois le trouver sur votre site, je vais chercher.

Je vais bien décortiquer votre article du coup pour le background, promis.

Merci de me répondre à chaque fois. Smiley ravi

Bonne soirée.
Sujet clos
Aller à