css container div не соответствует началу страницы

У меня есть двухстоечный макет. У меня есть #mainContainer DIV, который содержит все из следующих (за исключением #footer):css container div не соответствует началу страницы

через вершину: заголовок DIV (#intro) (содержит небольшое изображение градиента), и #hero DIV (содержит изображения)
Чтобы содержать две колонки: в #content DIV
в #content DIV на слева: #mainContent DIV
в рамках #content DIV справа: в #sidebar DIV
Через нижнюю часть (за пределами #mainContainer div): #footer div внизу (включая градиентное изображение, подобное заголовку div)

Простой, не так ли? Но у меня возникли проблемы с тем, чтобы div #mainContainer был в верхней части браузера (без пробелов или 6-8px по умолчанию/добавление всех браузеров вверху) и получение div #footer для охвата всего дна окна браузера (не внутри любого из Div). (игнорируйте встроенные стили в нижнем колонтитуле). Может ли кто-нибудь помочь мне?

ОБНОВЛЕНО: ДОБАВЛЕНО HTML

body { 
font-family:Arial, Helvetica, sans-serif; 
margin:0; 
padding:0; 
background:#bbb; 
text-align:center; 
} 



#mainContainer { 
width:980px; 
margin: 0 auto; 
background: #fff url(../i/content-box-header-gray.jpg) repeat-x; 
text-align:left; 
/*height: 700px;*/ 

} 

#intro { 
/*top:0;*/ 
margin: 0; 
text-align:left; 

} 


#hero { 
width:960px; 
padding-left:10px; 
padding-right:10px 

} 



#content { 
width:960px; 
padding-left:10px; 
padding-right:10px; 
} 

#mainContent_left { 

float:left; 
width:640px; 
margin:0; 
padding-right: 20px; 
background:#ccc; 
} 



#sideBar { 
float:left; 
width:300px; 
margin:0; 
/*padding-right: 20px;*/ 
background:#ffd; 
} 


#footer { 
width:960px; 
clear:both; 
background:#cc9; 
}

HTML:

<title>Descriptions </title> 


<link rel="stylesheet" href="css/mainstyles.css" type="text/css" /> 
</head> 

<body> 
<div id="mainContainer"> 

<div id="intro"><h2>introducing</h2></div> 

<div id="Hero"> 
    <ul> 
     <li class="name"></li> 
     <li class="textJoin">is a member of </li> 
     <li class="name"></li> 
    </ul> 
</div> 

<div id="content"> 
    <div id="mainContent"> 

     <h3>First Topic title</h3> 
     <p>floated left image and text</p> 
     <p>Some content</p> 
     <p>Some content</p> 

     <h3>Second Topic title</h3> 
     <p>Some content</p>   
     <p>Image here</p> 

     <h3>Third Topic title</h3> 
     <p>(floated left image here) Some text</p> 

     <h3>Fourth Topic title</h3> 
     <p>(floated left image here) Some text</p>> 

     <h3>Fifth Topic title</h3> 
     <p>(floated left image here) Some text</p>   
     <p>Image here</p> 

     <p>(link to FAQ page)</p> 

    </div> 


    <div id="sideBar">sidebar content 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
    </div> 


    <div id="footer_warranty">footer content 
     <div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p> 
</div> 
     <div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;"> 
<p>some text</p></div> 
     <p style="clear:both;" /> 
    </div> 
</div> 
<p style="clear:both;" /> 
</div> 

</body> 
</html>

источник

2011-10-03 Chris22

Не могли бы вы создать простую демонстрацию @ http://jsfiddle.net/? Это помогло бы намного лучше понять, чего именно вы хотите достичь. – Andrej

Сколько интервалов осталось? Некоторые браузеры добавляют границу тегу body. – krs1

Андрей, я не знаю, как использовать jsfiddle.net. Я добавил HTML. – Chris22

Я не могу воспроизвести вашу проблему. Тем не менее, я создал скрипку для вас, где я также добавил некоторые правила сброса CSS, которые должны позаботиться о такой проблеме, как перекресток любых браузеров.

Вы всегда должны использовать сброс CSS при запуске нового сайта. Таким образом, это все на ваших условиях, и вам не нужно «кодировать» поведение конкретного браузера.

Я также создал некоторый код-заменитель, так как вы его не предоставили.

Я надеюсь, что сброс исправляет вашу проблему.

http://jsfiddle.net/dekket/eERsK/

Edit:

Проверить эту новую скрипку. На работу. http://jsfiddle.net/dekket/6bTkZ/

источник

2011-10-03 14:08:33

Спасибо, Патрик, я просто добавил HTML. Я не могу использовать сброс, так как на сайте уже есть таблица стилей сброса. Я проверю ваш код. Я думаю, что нашел ответ в шаблонах Dreamweaver для 2-столбцового фиксированного макета. – Chris22

@ Chris22, я создал для вас новую скрипку. Он должен работать. –

Я полностью не согласен с _ «Вы всегда должны использовать сброс CSS при запуске нового сайта». Это ненужно и излишне. _Unnecessary_ для сброса элементов, которые вы не используете, и _redundant_ для сброса элементов, когда вы просто перезапишите сброс позже. Зачем вам это нужно, если вы знаете, как написать правильный CSS для всех элементов, которые вы использовали? – Sparky

Импортируйте сброса таблицы стилей Мейера: http://meyerweb.com/eric/tools/css/reset/

источник

2011-10-03 13:41:13 Michiel

float:left попробуйте добавить и overflow:hidden к вашему #mainContainer

источник

2011-10-03 14:11:14

Спасибо, Kasun. Что делают эти правила в точности? Что поставит #mainContainer в верхней части браузера? – Chris22

это стили css #mainContainer {float: left; overflow: hidden} –

вам нужно установить поля и отступы свойства HTML и CSS тело 0.

использовать в вашем файле CSS

html, body { 
margin: 0; 
padding: 0; 
}

источник

2011-10-03 14:16:07 Mike

Майк, элемент body уже установлен. запись правила для элемента html будет перезаписана с помощью файла сброса. – Chris22

ну, конечно. если, однако, у вас не было необходимости для всего файла сброса css или если вы хотите знать, какие элементы были затронуты напрямую, мое решение для вас. – Mike

css container div не соответствует началу страницы

ответ

Смежные вопросы