CSS контейнер div не выравнивается по верху страницы - PullRequest
Новая
       0

CSS контейнер div не выравнивается по верху страницы

0 голосов
/ 03 октября 2011

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

  1. Вверху: заголовок div (#intro) (содержит небольшое градиентное изображение), и #hero div (содержит изображения)
  2. Содержит два столбца: #content div
  3. Внутри #content div слева: #mainContent div
  4. Внутри #content div справа: #sideBar div
  5. Внизу (за пределами #mainContainer div): #footer div внизу (включая градиентное изображение, такое как заголовок div)

Просто, верно? Но у меня возникают проблемы с размещением div #mainContainer в верхней части браузера (без пробелов или отступа по умолчанию в 6-8 пикселей / отступы для всех браузеров вверху) и с тем, чтобы 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>

Ответы [ 4 ]

1 голос
/ 03 октября 2011

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

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

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

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

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

Edit:

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

1 голос
/ 03 октября 2011

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

0 голосов
/ 03 октября 2011

вам нужно установить свойства html и body css margin и padding в 0.

используйте следующее в вашем css файле 

html, body {
margin: 0;
padding: 0;
}
0 голосов
/ 03 октября 2011

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

...