Comment puis-je apporter une image dans le texte en HTML?

Je suis dans le processus de création d'un modèle de site web avec Adobe Dreamweaver CS6 en HTML et CSS, et j'ai créé un en-tête avec le position:fixed; déclaration, mais quand j'ai vue le code de vivre, mon mannequin texte s'affiche sur le haut de l'image pour une raison quelconque. Est-ce un problème commun dans le HTML? Est-il un correctif pour cela?

Mes articles du code

Mon code 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>DC Personal Training</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<link href="../CSS/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
<!-- end .header --><img src="../Images/header.png" width="1567" height="177" alt="Dan Christopherson Personal Training" /></div>
<div class="container">

  <div class="content">
    <h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="Content" -->Just some
    <!-- end .content -->
    dummy text.<!-- TemplateEndEditable --></div>
  <div class="footer">
    Copyright Dan Christopherson Personal Training, 2013. All rights reserved. Website by Xtreme Web Design.
  <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

Mon CSS:

@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
color: #FFF;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #000000;
margin: 0 auto; 
}
.header {
background-color: ;
position: fixed;
top: 0;
vertical-align: top;
}
.sidebar1 {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 950px;
float: left;
}
.sidebar2 {
float: left;
width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
.content ul, .content ol { 
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px; 
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
.footer {
padding: 10px 0;
background-color: #000000;
position: relative;
clear: both;
color: #8cc638;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Merci d'avance.

Oui, merci de poster votre HTML, CSS, et un exemple ou un violon.
Probablement z-index le résoudre, mais merci de ne poster votre code.
Venez d'ajouter. 🙂
Si vous essayez de mettre un lien derrière une image (ou autre chose), de sorte que le lien est suivi en cliquant sur l'image, sachez que cela pourrait être considéré comme le détournement de clics par le navigateur.
Merci pour le heads-up, mais je suis seulement en l'utilisant comme un en-tête.

OriginalL'auteur JayD2208 | 2013-03-14

5

Ajouter z-index: 100; après position: fixed; dans votre règle css pour votre élément d'en-tête.

J'ai ajouté ceci à la première, et merci, c'est super.
merci de ne pas copier l'intégralité du contenu d'une réponse à une autre sans attribution.
Je suis désolé, attribution? Je suis nouveau sur ce...

OriginalL'auteur Jake Zeitz
1

'z-index' doit être utilisé en combinaison avec "position".
"position" seront les seuls à travailler, il va définir la position de l'correspondant div ou quel que soit l'élément. Par défaut, tout ce qui sont dans la même couche (même z-index), pour mettre un élément en haut (ou en bas) de l'autre, de définir un autre numéro, moins, 0 (zéro), ou un nombre entier positif.

OriginalL'auteur Marcellino Santoso 林

Vous devez vous connecter pour publier un commentaire.