28173 sujets

CSS et mise en forme, CSS3

Problème de header

Bonsoir,
Jais créé une page en css avec un head fixe mais j'ais un souci avec le header cat dès que j'essaie d'insérer une image ou du texte cela décale tout.
Je vous met le code au cas ou quelqu'un aurait la réponse cela m'aiderait
Dans le head 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 
<title> </title> 

<style type="text/css"> 
#printhead {display:block;} 
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;} 
body {font-family:verdana, arial, sans-serif; font-size:76%; color:#fff;} 
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:80px; background-image: url(header.jpg);; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;} 
#background{position:absolute; z-index:1; width:100%;} 
#background1{position:absolute; z-index:1; width:467;} 
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 200px 20px 200px;} 

p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} 
#fixed {position:absolute; top:100px; left:10px; width:120px; z-index:5; color:#fff; background:#801B11; border:1px solid #ffff00; padding:7px;} 
#fixed1 {position:absolute; top:260px; left:10px; width:120px; height:280px; z-index:5; color:#fff; background:#801B11; border:1px solid #ffff00; padding:7px;} 
#fixed3 {position:absolute; top:100px; right:30px; width:120px; height:380px; z-index:10; color:#fff; background:#801b11; border:1px solid #ffff00; padding:7px;} 
#fixed4 {position:absolute; top:110px; right:30px; width:120px; height:380px; z-index:10; color:#fff; background:#801b11; border:1px solid #ffff00; padding:7px;}


Après le body 


<div id="printhead"> 
</div>


En fin de compte c'est le printhead qui pose problème

Merci d'avance pour l'aide
webide
Si ne ne me trompe pas, dans ton body, tu as :


<div id="printhead"> 
   <div id="head"></div>
</div>

Si c'est bien ça, je pense comprendre l'erreur, sinon, je ne pourrais que sortir une bêtise.
Attention, tu as un point-virgule en trop sur le "background-image".

[#green]#head {
	position:absolute; 
	margin: 0; 
	top: 0; 
	right: 18px; 
	display: block; 
	width: 100%; 
	height: 80px; 
	background-image: url(header.jpg);[#red];[#green]
	font-size: 4em;
	z-index: 5;
	color: #000;
	border-bottom: 1px solid #000;
	}



Désolé de l'oubli en fin de compte voici le code complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> </title>

<style type="text/css">
#printhead {display:block;}
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%; color:#fff;}
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:80px; background-image: url(header.jpg);; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}
#background{position:absolute; z-index:1; width:100%;}
#background1{position:absolute; z-index:1; width:467;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 200px 20px 200px;}

p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:100px; left:10px; width:120px; z-index:5; color:#fff; background:#801B11; border:1px solid #ffff00; padding:7px;}
#fixed1 {position:absolute; top:260px; left:10px; width:120px; height:280px; z-index:5; color:#fff; background:#801B11; border:1px solid #ffff00; padding:7px;}
#fixed3 {position:absolute; top:100px; right:30px; width:120px; height:380px; z-index:10; color:#fff; background:#801b11; border:1px solid #ffff00; padding:7px;}
#fixed4 {position:absolute; top:110px; right:30px; width:120px; height:380px; z-index:10; color:#fff; background:#801b11; border:1px solid #ffff00; padding:7px;}
A.menulink {
position: absolute; top:90px;
float:center;
display: block;
width: 100px;
height:20px;
text-align: center;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: 1;
border: solid 1px #000000;
background-color:#ffff44;
}

A.menulink:hover {
border: solid 1px #000000;
background-color:#cc3300;
}

</style>

<script>

/*
CSS Menu highlight- By Marc Boussard (marc.boussard@syntegra.fr)
Modified by DD for NS4 compatibility
Visit  http://www.dynamicdrive.com  for this script
*/

var ns4class=''
</script>
</STYLE>


</head>

<body>
<div id="printhead">

</div>
<div id="header">
<table border="0" width="75%" cellspading="0" cellspacing="0" align="center">
  <tr align=center>
    <td width="100"><a href="index.php" class="menulink" class=&{ns4class};>Accueil</a></td>
	<td width="100"><a href="annonce/index.html" target="_blank" class="menulink" class=&{ns4class};>Annonces</a></td>
  <td width="100"><a href="galerie1/index.php"  target="_blank" class="menulink" class==&{ns4class};>Galerie</a></td>
  <td width="100"><a href="catalog-trioliste/index.php" target="_blank" class="menulink" class=&{ns4class};>Boutique</a></td>
<td width="100"><a href="contact.php" class="menulink" class=&{ns4class};>Contact</a></td>
	<td width="100"><a href="forum-trioliste/index.php" target="_blank" class="menulink" class=&{ns4class};>Forum</a></td>
  <td width="100"><a href="Liens.php" class="menulink" target="_blank" class==&{ns4class};>Liens</a></td>
  <td width="100"><a href="http://www.villa-cocotiers.com" target="_blank" class="menulink" class=&{ns4class};>Villa cocotiers</a></td>

  </tr>
</table>


</div>
<div>
<img id="background" src="fond2.jpg" alt="" title="" />
</div>

Le problème vient du fait que je souhaite pouvoir ajouter une bannière sans pour autant qu'il y ais un décalage http://ns259.ovh.net/~estcad/index.jpg
webide
Modifié par webide (23 Mar 2006 - 18:11)
Donc pour le moment, tu as un 
<div id="printhead"></div>
vide. Si tu y mets du code (<src img="...) ou du texte, ça te décale tout ?

Peut-être devrais-tu alors définir la taille du bloc div ; pour le moment, tu n'as rien spécifié.

**********

Edit : En réponse au message dessous :

Tu fais référence à ce "head" là ?
#head {position:absolute; margin:0; top:0; right:18px; 
display:block; width:100%; height:80px; 
background-image: url(header.jpg);; font-size:4em; z-index:5; color:#000; 
border-bottom:1px solid #000;}


Ce code ne fonctionne pas si tu ne l'appelles pas : <div id="head"></div>. Il ne s'agit pas d'un élément comme body, html, H1/2/3/4..., p.

Dans ton balisage, essaye de changer l'ID "printhead" par "head". Ou passe les valeurs du div#head à #printhead dans ton fichier CSS.

J'espère ne pas me planter - et QUE quelqu'un viendra corriger si c'est le cas.
Modifié par Smiley neko (23 Mar 2006 - 19:49)
Tout ce que je souhaite c'est de pouvoir insérer un bandeau publicitaire et donc avec un peu de marge faire que le head fasse 80 px. C'est pourtant défini dans le <head>, je ne vois pas trop ce que je dois faire (je débutes en css)
Sujet clos
Aller à