-1
Так что моя проблема в основном заключается в том, что у меня есть 3 divs на странице, а мой средний контент div всегда находится на расстоянии 50 пикселей от моих заголовков и нижних колонтитулов.Почему мои divs расположены вертикально друг от друга?
Почему происходит такое разделение? Я не указывал никаких полей в файлах css.
Амар
EDIT: Вот код для файла CSS:
@-webkit-keyframes showBody{
from { opacity: 0; }
to { opacity: 1; }
}
body { -webkit-animation: showBody 3s; position:relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D)); height: 100%; margin: 0; background-repeat: no-repeat;
background-attachment: fixed; }
#links li {list-style: none; display: inline; margin-right: 30px;}
a {text-decoration: none;}
#header { border-top-left-radius: 25px ; border-top-right-radius: 25px; background-color: #FFF; margin-top: 0px; margin-left: auto; margin-right: auto; width:1100px; height: 60px;border-top: 1px solid; border-left: 1px solid; border-right: 1px solid;}
#navmenu {height: 34px; width: auto; position: relative; left: 100px; top: -25px; }
#contentArea { background-color: #FFF; border-left: 1px solid; border-right: 1px solid; width: 1100px; margin-right: auto; margin-left: auto;}
#footer {border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; background-color: #F00; margin-left: auto; margin-right: auto; width:1100px; height: 100px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; }
#links {width: 1100px; background-color: #FFF; float: top; border-bottom: 1px solid;}
#links li {list-style: none; display: inline; margin-right: 30px;}
#copyrightinfo {width: 1100px; }
#navmenu {float: top; margin-top: 0px;}
#container {border-radius:
20px;}
А вот код HTML файла:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/pagestyle.css" rel="stylesheet"/>
<link type="text/css" href="css/navmenustyle.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="navmenu">
<ul id="frodoNav">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Social">Social</a></li>
<li><a href="#" title="Reviews">Reviews</a></li>
<li><a href="#" title="Special Stories">Special Stories</a></li>
<li><a href="#" title="Travel With Kids">Travel With Kids</a></li>
<li><a href="#" title="Support">Support</a></li>
</ul>
</div>
</div>
<div id="contentArea" style="clear: both;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.
Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.
Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
</div>
<div id="footer">
<div id="footer-nav">
</div>
</div>
</body>
</html>
Пожалуйста, покажите нам свой код. – Sampson
, пожалуйста, укажите код – skub
Вы можете использовать 'position: absolute;' ... –