CSS и HTML кодирование для заголовка фонового изображения - PullRequest
Новая
       4

CSS и HTML кодирование для заголовка фонового изображения

0 голосов
/ 03 июля 2010

Я очень новичок в CSS и хочу добавить заголовок на мой новый веб-сайт.

Простой, только изображение, которое отображается на верхнем фоне.Я действительно не знаю, как это сделать без большого количества кодирования.

Итак, это , что у меня есть , и это , что я хочу .И в конце этого вопроса приведен код самой страницы.Есть идеи?Спасибо, что жру! 

<!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>

Ответы [ 4 ]

1 голос
/ 03 июля 2010

Вот основная структура HTML, которую вы имеете 

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

Вот основные CSS, необходимые для размещения изображения баннера: 

    #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  */
    }
0 голосов
/ 03 июля 2010

Другие ответили на ваш вопрос, но я хотел бы добавить, что есть несколько вещей, которые я бы сделал, чтобы улучшить ваш HTML-код.

  1. Переместите тег Javascript, который загружает jQuery, на последнюю строку ранее. Текущая позиция будет блокировать рендеринг, пока скрипт не загрузится.


  2. Избавьтесь от тегов (и расположите #wrapper по центру в соответствии с предложениями с супер-названиями)

Удачи!

0 голосов
/ 03 июля 2010

Вам понравится CSS после того, как вы к нему привыкнете.Раздел, подобный следующему: 

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

может быть полностью заменен на маленькую настройку padding-top или margin-top, например: 

.wrapper { 
  padding-top: 25px;

Чтобы ответить на ваш вопрос, Керри был наотметка.Установите свойство background, указав URL-адрес аналогично тому, как он советует получить желаемый эффект.Вы, вероятно, хотите сделать это на своем классе оболочки.Algo asi: 

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

См. this для получения дополнительной информации.Наслаждайтесь!

0 голосов
/ 03 июля 2010

Немного больше информации о CSS было бы хорошо.В вашей ссылке "что вы хотите" есть указанная ширина - на странице должен быть элемент обертки (возможно, ваше подразделение #wrapper), затем выполните что-то вроде:будет установлено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...