Запрос о заголовке изображения.Является ли HTML и CSS правильным / наиболее эффективным способом сделать это? - PullRequest
Новая
       2

Запрос о заголовке изображения.Является ли HTML и CSS правильным / наиболее эффективным способом сделать это?

0 голосов
/ 13 марта 2012

Вот так выглядит мой сайт (Примечание: я пытаюсь научиться создавать HTML-код для этого сайта прямо сейчас. Я буду беспокоиться о дизайне позже. Теперь я знаю, как это сделать о дизайне сайта. Но что угодно)

http://imgur.com/10ZC7

Для заголовка этот HTML правильный / эффективный? Если нет, каков правильный / эффективный способ достижения этого эффекта для заголовка? В заголовке все одно изображение.

Заранее спасибо за любую помощь!

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>CogRobot Studios</title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
    <!--[if IE]>
     <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
  </head> 

  <body>

    <div id="wrap" class="container">
     <div id="bigheader"> </div>
    <div id="header" class="rounded-corners column span-24 last"></div>

    <div id="content" class="column span-15 colborder">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

    </div>

    <div id="sidebar" class="column span-7 last">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

    </div>

    <div class="rounded-cornersbottom" id="footer">
      &copy; 2005, Lorem ipsum dolor sit amet.
      <br />
      All trademarks and registered trademarks appearing on 
      this site are the property of their respective owners.
    </div>
    </div>

  </body>
</html>

CSS 

#wrap{
    position: relative;
    top: 150px;
}

body { 
  background:   background: url("../images/header.png");
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;

}

p, ul, li, h1, h2, h3, h4 {
    margin: 0;
}

h3 {
    margin: 0 0 20px 0;
    padding: 0 0 5px 0;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
#bigheader{
      background: url("../images/gearheader2.png") no-repeat;
      min-height: 347px;
      min-width: 1062px;
      top: -115px;
      right: 0px;
      position: absolute;
      width: 100%;
      z-index: -99;
      margin: 0 auto;
}

#header {

  width:            950px;
  height:           177px;
}

#content{
 background:       #dbdbdb;
 font-size:        105%;
 padding: 20px 20px 20px 20px;
 margin: 0;
 width: 590px;

}

#sidebar {
  float: right;
  background:       #dbdbdb;
  font-size:        105%;
 padding: 20px 20px 20px 20px;

  margin: 0;

}

#footer {
  background-color: #838383;
  color:            #c8c8c8;
  text-align:       center;

  font-size:        90%;
  clear:            left;
}

h1 {
  font-size:        120%;
  color:            #954b4b;
}

h2 { 
    font-size: 110%; 
}

.slogan { 
    color: #954b4b; 
}

.beanheading {
  text-align:       center;
  line-height:      1.8em;
}

a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}

.rounded-corners {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;

    -khtml-border-radius: 20px; 
}

.rounded-cornersbottom {
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;

    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;

    -khtml-border-radius: 20px;
}

Ответы [ 2 ]

0 голосов
/ 13 марта 2012

Привет! Я внес некоторые изменения в ваш HTML из-за некоторых ошибок, так что теперь он работает нормально.

И в части заголовка я внес несколько изменений, как указано ниже: -

# bigheader (я применил здесь изображения маленьких кружков, а не ваше тяжелое изображение большого заголовка, помещенное в заголовок с положением).

# header (я сделал заголовок полностью на основе CSS, используя border-radius & color).

Вы можете увидеть ваш обновленный HTML здесь: - http://jsfiddle.net/KXGfj/23/

0 голосов
/ 13 марта 2012

Эй, вы использовали одну из фреймворков CSS.В любом случае, да, я не знаю, насколько это правильно, но я обычно инкапсулирую элемент sub header внутри элемента div заголовка.

, в вашем случае что-то вроде ::
{(bigheader) {(заголовок)}}

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

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

...