CODEWITHSUNDEEP
htmlcss
DomingoSL
DomingoSL

Reputation: 15504

CSS and HTML coding suggestion for a background image header

I'm very new at CSS and i want to put a header on to my new web site.

A simple one, only an image who goes on the top background. I really don't know how to do it with out much coding.

So, this is what i have, and this is what i want. And at the end of this question is the code of the actual page. Any ideas? Thanks so munch!

<!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" dir="ltr" lang="es-ES"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Tablon</title> 
    <link rel="stylesheet" href="LIB/main.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="LIB/titulos.css"> 
    <!--[if IE]>
        <link rel="stylesheet" href="LIB/ie.css" type="text/css" media="screen" />
    <![endif]--> 
    <style type="text/css"> 
.style1 {
    text-align: right;
}
    .style2 {
        vertical-align: top;
        margin-top: 3pt;
        margin-bottom: 3pt;
    }
    #apDiv1 {
    position:absolute;
    left:116px;
    top:398px;
    width:800px;
    height:37px;
    z-index:1;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
}
    </style> 
</head> 
<body> 
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script> 
<marquee> 
</marquee> 

    <div class="wrapper"> 
      <p>&nbsp;</p> 
      <p><br /> 
      </p> 
      <center>&nbsp;</center> 
        <div class="aux"> 
          <div id="container"> 
<ul class="menu"> 
                    <li id="noticias" class="active">Mensajes</li> 
                    <li id="tutoriales">Profesores</li> 
                    <li id="enlaces">Enlaces</li> 
            </ul> 
                <span class="clear"></span> 
                <div class="content noticias"> 

                    <h3>Ultimos mensajes</h3> 
                    <br /> 
                  <div class="style1" style="vertical-align: middle; text-align: right; background-color: #1E1E1E; height: 21px;"> 
                    <img alt="" height="16" src="IMG/feed16.png" width="16" class="style2" /> 
                        <a href="rssfeed.php">Subscribirce al canal RSS </a> 
                  </div> 
                  <ul> 
                    <br> 
                      <div id="todo"> 
                        <div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px"> 
                        <IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" /> 
                        </div> 
                        <div id="sms" style="height: 86px;background-color: #1E1E1E;"> 
                        <a href="msgs.php?user=djsoftlayer"> djsoftlayer</a>: Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg
                        </div> 
                        </div> 
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=44&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg"> 
    <img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div> 
                        <br><div id="todo"> 
                        <div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px"> 
                        <IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" /> 
                        </div> 
                        <div id="sms" style="height: 86px;background-color: #1E1E1E;"> 
                        <a href="msgs.php?user=djsoftlayer"> djsoftlayer</a>: testing
                        </div> 
                        </div> 
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=43&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=testing"> 
    <img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div> 
                        <br><div id="todo"> 
                        <div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px"> 
                        <IMG src="http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80" alt="-" /> 
                        </div> 
                        <div id="sms" style="height: 86px;background-color: #1E1E1E;"> 
                        <a href="msgs.php?user=nata"> nata</a>: grande
                        </div> 
                        </div> 
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=42&autor=nata&foto=http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80&sms=grande"> 
    <img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div> 
                        <br>                  </ul> 
            </div> 
                <div class="content tutoriales"> 
                    <h3>Profesores</h3> 
                    <ul> 
                    <br><li><IMG src="IMG/bullet.png" alt="-" /><a href="msgs.php?user=djsoftlayer">djsoftlayer</a></li><li><IMG src="IMG/bullet.png" alt="-" /><a href="msgs.php?user=nata">nata</a></li><body style="background-image: url('IMG/bg.png')"> 

                    </ul> 
                </div> 
                <div class="content enlaces"> 
                    <h3>Deberías Visitar...</h3> 
                    <ul> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Nuestra startup! :)</li> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Te gustan los juegos pixel art? ;)</li> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Anterior empresa</li> 
                    </ul> 
                </div> 
          </div> 
        </div> 
    </div> 
    <script type="text/javascript" src="JS/tabs.js"></script> 

</body> 
</html>

Upvotes: 0

Views: 8752

Answers (4)

mariachimike
mariachimike

Reputation: 1333

Others have answered your question, but I'd like to add that there are a couple things I'd do to improve your HTML code.

  1. Move the Javascript tag which loads jQuery to the last line before . The current position will block rendering until the script has loaded.

    <script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="JS/tabs.js"></script> </body>

  2. Get rid of the , tags (and center your #wrapper as superUntitled proposes)

Good luck!

Upvotes: 0

superUntitled
superUntitled

Reputation: 22567

Here is the basic html structure you have

<body>  
    <div id="wrapper">
        <div id="container">
            <p>content</p>
        </div>
    </div>
</body>

Here is the basic css you need to place your banner image:

    #wrapper { 
        width: 600px; /*  this is the width of your background image */
        background: url(/path/to/image.jpg); /*  this sets the div background as an image */
        margin: 0px auto; /* this centers the div */
        padding-top: 20px; /* this "pads" the div 20px on the top */
    }
    #container { 
        width: 400px;  /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
        margin: 0px auto; /* to center the div with the div#wrapper  */
    }

Upvotes: 1

Tahbaza
Tahbaza

Reputation: 9546

You're going to like CSS after you get used to it. The section like this:

<p>&nbsp;</p> 
      <p><br /> 
      </p> 
      <center>&nbsp;</center>

can be completely replaced with a little padding-top or margin-top setting like this:

.wrapper { 
  padding-top: 25px;

To address your question, Kerry was on the mark. Set the background property, specifying the url similarly to as he advises to get your desired effect. You probably want to do this on your wrapper class. Algo asi:

  background-image: url('relative/path/toImage.png');
  background-repeat:no-repeat;
  background-position:center top;
}

See this for more. Enjoy!

Upvotes: 0

Kerry Jones
Kerry Jones

Reputation: 21858

A bit more information on the CSS would be good. In your "what you want" link there is an specified width -- there needs to be a wrapping element on the page (possibly your #wrapper division), then do something like:

background: url(/link/to/background/image.ext)

And you'll be set.

Upvotes: 0

Related Questions