¿Cómo puedo traer una imagen delante del texto HTML?

Question

Mar 14, 2013, 08:45 PM

¿Cómo puedo traer una imagen delante del texto HTML?

Estoy en el proceso de crear una plantilla de sitio web con Adobe Dreamweaver CS6 en HTML y CSS, y he creado un encabezado con elposition:fixed; Declaración, pero cuando veo el código en vivo, mi texto ficticio se muestra en la parte superior de la imagen por alguna razón. ¿Es este un problema común en HTML? ¿Hay una solución para esto?

Mis secciones de códigoMi 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>

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

Gracias por adelantado.

Deja tu comentario