базовый макет HTML / CSS не работает

0

Привет, я пытаюсь создать очень простую страницу, но где-то я теряюсь. моя идея - создать что-то с этой структурой http://i57.tinypic.com/4r49ia.jpg очень просто... каждый цвет - div.one поверх друг друга. черный прямоугольник - единственная сложная часть, место для видео для youtube.

я сделал этот код, но он просто перепутался

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;" >

<div id="container" style="margin:0; padding:0; text-align:center;" >

 <div id="header" style="background-color:green; height:110px;width:2000px;">
 </div>

 <div id="menu" style="background-color:blue; height:70px;width:2000px;">
  <p>text here</p>
 </div>

 <div id="content" style="background-color:red; text-align:center; height:800px;width:2000px;">
 # here goes youtube video #
 </div>

 <div id="footer" style="background-color:yellow;height:200px;width:2000px; ">
 </div>

</div>

</body>
</html>

что я делаю неправильно? пожалуйста помогите.

я получаю зеленую линию, затем синюю линию (но без текста), а красная область - полностью. то там желтый div... почему?

  • 0
    Вы действительно должны рассмотреть возможность записи вашего CSS во внешний файл CSS. Облегчает чтение и организацию.
  • 0
    У вас есть странные цитаты вокруг содержания. Может быть, проблема оттуда.
Теги:

6 ответов

0
Лучший ответ

сначала вы должны использовать либо margin, либо float в макетах, во-вторых, почему вы используете такое большое значение пикселя

<div id="main" style="width:960px;margin:0px auto;">
        <div id="hdr" style="float:left;width:100%;height:130px;background:orange;">
            header
        </div>
        <div id="bdy" style="float:left;width:100%;height:500px;background:green;">
            body
        </div>
        <div id="ftr" style="float:left;width:100%;height:80px;background:#cccccc;">
            footer
        </div>
    </div>
Поделиться
  • 0
    ты удивительный человек !!! я застрял на этом с 5 часов
  • 0
    Последняя вещь. если я копирую видео с YouTube (я сделал классическую вещь ... делюсь, копирую код и вставляю его в мой div), я просто получаю пробел, но никогда не загружается. Почему?
Показать ещё 2 комментария
3

Похоже, вы используете комбинацию регулярных котировок → "и" умных кавычек ", которые Mac иногда вводит (если мне нужно было догадаться). Посмотрите, как цитаты перед маржем и после белого, не совпадают

<body style="margin:0; padding:0; text-align:center; color:white;" >

Изменение "умных кавычек" на обычные кавычки должно исправить вашу проблему и щелкнуть правой кнопкой мыши независимо от вашего редактора и выключить Замены/Умные цитаты, чтобы это не повторилось.

Поделиться
1

Не уверен, какой редактор вы используете, но: '' 'и это' '' не являются теми же знаками...

 <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body style="margin:0; padding:0; text-align:center; color:white;" >

    <div id="container" style="margin:0; padding:0; text-align:center;" >

     <div id="header" style="background-color:green; height:110px;width:2000px;">
     </div>

     <div id="menu" style="background-color:blue; height:70px;width:2000px;">
      <p>text here</p>
     </div>

     <div id="content" style="background-color:red; text-align:center; height:800px;width:2000px;">
     # here goes youtube video #
     </div>

     <div id="footer" style="background-color:yellow;height:200px;width:2000px;">
     </div>

    </div>

    </body>
    </html>

Это сработает - вам придется исправить пустое пространство (вызванное заполнением/разметкой) тэга p.

Поделиться
0

замените тег тела этим

<body style="margin:0; padding:0; color:white;">
Поделиться
0

Я подтверждаю, что это происходит от ваших " персонажей".

DEMO

Поделиться
0

Это может быть из-за "width: 2000px;". Вы не видите это на экране с низким разрешением. Попробуйте, например:

    <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;" >

<div id="container" style="margin:0; padding:0; text-align:center;" >

     <div id="header" style="background-color:green; height:110px;width:200px;">
         dfdasfasd
     </div>

     <div id="menu" style="background-color:blue; height:70px;width:200px;">
      <p>text here</p>
     </div>

 <div id="content" style="background-color:red; text-align:center; height:800px;width:200px;">
 # here goes youtube video #
 </div>

 <div id="footer" style="background-color:yellow;height:200px;width:200px; ">
 </div>

</div>

</body>
</html>

С Днем Святого Валентина ^ _ ^

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню