название вопроса div css3 - PullRequest
Новая
       1

название вопроса div css3

1 голос
/ 17 сентября 2011

У меня есть этот HTML-код, над которым я работаю: 

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>templates</title>
      <meta name="description" content="" />
      <meta name="author" content="wobben" />
      <meta name="viewport" content="width=device-width; initial-scale=1.0" />
      <link rel="shortcut icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
      <link rel="stylesheet" href=styles.css"> 
 </head>
 <body>
   <div id="container">
       <header>
           <img src="http://www.tamarawobben.nl/images/3.jpg" alt="" width="750" height="225" />
       </header>
       <nav>
           <p><a href="/">Home</a></p>
           <p><a href="/contact">Contact</a></p>
       </nav>
      <footer>
        <p>&copy; Copyright  by wobben</p>
     </footer>
 </div>
 </body>
 </html>

В старом CSS имя заголовка будет #header.Это все еще так?Я спрашиваю, потому что он находится в другом месте, чем старый код HTML4.

Я все изменил, но все еще не повезло.

У меня есть это в виде HTML: 

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <meta name="description" content="">
 <meta name="author" content="">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="style.css">
 <script src="/js/modernizr-2.0.6.min.js"></script>
 </head>
 <body>
 <div id="container">
     <header>
        <img src="http://www.tamarawobben.nl/images/3.jpg" alt="" width="750" height="225" />
 </header>

И у меня есть это в моем CSS: 

  header {display: block; height: 225px; width: 758px; margin: 0 1px 10px 1px; background: #fff;}
  #container {
width: 760px;
margin: 10px auto;
padding: 1px 0;
text-align: left;
background: #fff;
color: #303030;
   }

Но изображение по-прежнему слева, а не по центру.

Может ли кто-нибудь помочь мне еще раз.

Roelof

Ответы [ 3 ]

0 голосов
/ 18 сентября 2011

Если вы хотите использовать новые теги HTML5, в то же время поддерживая более старые браузеры, вам действительно нужно использовать Modernizr . Это поможет вашей странице обрабатывать новые теги и изящно ухудшаться в браузерах, которые не поддерживают CSS3.

Прочитайте эту статью для хорошего объяснения: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

Чтобы напрямую ответить на ваш вопрос, используйте синтаксис, который дал Джейсон: 

header { display: block; }
0 голосов
/ 18 сентября 2011

Чтобы устранить эту неразбериху, эра заголовка, навигации, тега нижнего колонтитула уже наступила. Каждый крупный браузер (Chrome, Safari, Firefox, Opera) поддерживает его, поэтому вы не можете сказать, что он не прибыл. Если вы хотите поддержать будущее, используйте их. Однако, если у вас есть клиент 90-х годов, то не стоит и избавьте себя от головной боли.

0 голосов
/ 17 сентября 2011

Если вы используете <header>, как указано выше, и хотите стиль , вы должны сделать следующее в вашей таблице стилей 

header{
    display:block;
    //OTHER STYLES YOU WANT
}

, так как header рассматривается как *Элемент 1008 * в некоторых браузерах.

Кроме того, все IE ниже 9 не отображают эти элементы в DOM .... поэтому они не будут отображаться вообще.

Один из способов получитьвокруг этого стоит использовать скрипт onload для создания этих элементов в DOM.Что-то вроде 

var e = ("abbr,article,aside,audio,canvas,datalist,details, 
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video").split(',');

for (var i = 0; i < e.length; i++){
    document.createElement(e[i]);
}
  • Разрывы строк в массиве только для форматирования SO
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...