Menu
Hell everyone,
I recently started to make adjustments to my new blog’s layout and I am working on some CSS problems which have arisen when I started to add some things.
My first question is:
Wheneve I add “boder: 1px solid #000;” to my header div, it pushes my header image down around 10px. I’m not sure why, could someone help me with that?
My second question is:
On my navbar on the right, I can’t add any padding to my content div because the navbar is inside of it, so it will be pushed out if there is any added.
I took all the right padding out and it lines up nicely, but how can I get around this to give my content div some padding?
Link is here: [url]http://egstorm.com/new_neczy/
Thanks for your help.
[CODE]
<div id="container">
<div id="content">
<p>Content here...</p>
</div>
<div id="navigation">
<p>Navigation here...</p>
</div>
<div id="footer">
<p>Footer here...</p>
</div>
</div>
[/CODE] [CODE]
#container {
width: 650px;
height: auto;
background: #ccc;
}
#content {
float: left;
width: 400px;
height: auto;
background: #fff;
}
#navigation {
float: right;
width: 250px;
height: auto;
background: transparent;
}
#footer {
width: 650px;
height: 30px;
background: #eee;
}
[/CODE] [CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Neczy's Blog | Test Layout</title>
<meta name="copyright" content="Copyright (c) Martin Neczypor" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
background: #7C2424 url("http://www.egstorm.com/new_neczy/images/background9.gif");
padding:0px;
margin:0px;
}
#container {
width: 730px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#header {
margin: 0;
padding: 185px 0 0 150px;
background: #7C2424 url("http://www.egstorm.com/new_neczy/images/header6.jpg") no-repeat;
height: 65px;
width: 580px;
}
#header h1 {
margin: 0;
padding: 0;
}
#header h1 span {
visibility: hidden;
}
#navcontainer {
text-align: center;
}
#navlist {
margin: 0;
padding: 0;
text-align: center;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
font-family: "Georgia", tahoma, sans-serif;
}
#navlist a:link, #navlist a:visited {
float: left;
line-height: 14px;
font-weight: bold;
margin:0 10px 4px 10px;
text-decoration: none;
color: #FFF;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
border-bottom: 4px solid #F2A477;
padding-bottom: 2px;
background: transparent;
color: #FFF;
}
#navlist a:hover {
color: #FFF;
}
#content {
width: 721px;
border: 1px solid #000;
background: #878DAA;
padding-left: 8px;
padding-right: 0px;
font-family: "Comic Sans MS", Arial, tahoma, serif;
font-size: small;
}
#content #menu {
border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
width:230px;
background:#F2A477;
margin:0px 0px 10px 10px;
}
h1, h2 {
font-family: "Georgia", tahoma, sans-serif;
}
#valid {
text-align: center;
font-size: x-small;
border-top: 1px solid #000;
font-family: "Arial", tahoma, sans-serif;
}
#content #menu a:link, #content #menu a:visited, #valid a:link, #valid a:visited {
color: #000;
text-decoration: none;
}
a {
font-size: small;
color: #F2A477;
text-decoration:none;
border-bottom:1px dotted #F2A477;
}
#content a:hover {
color: #F2A477;
text-decoration:none;
border-bottom:1px solid #F2A477;
}
#content a:link, #content a:visited {
color: #000;
text-decoration: none;
}
#valid {
padding: 10px 6px 10px 6px;
}
#valid a {
font-size: x-small;
color: #F2A477;
text-decoration: none;
border-bottom: 1px dotted #F2A477;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><span>Neczy's Blog | Test Layout</span></h1>
<div id="navcontainer">
<ul id="navlist">
<li><a href="" title="">Home</a></li>
<li><a href="" title="">Archives</a></li>
<li><a href="" title="">Contact Me</a></li>
<li><a href="" title="">About</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="menu">
<ul>
<li><a href="">Link</a></li>
<li>Link</li>
<li>Link</li>
</ul>
<div id="valid">
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a>
<br />© Copyright 2004 - Martin Neczypor</div>
</div>
<h2>Heading</h2>
<p>
<a href="">Autem aliquip</a> dolor velit, et luptatum, et feugiat illum nostrud iusto vel enim accumsan consectetuer, quis augue, dolore. Ut vel odio lobortis qui commodo aliquip qui qui in quis iriure diam ullamcorper feugait. Te exerci laoreet hendrerit ex, tation vel commodo luptatum. Eum veniam odio, in tincidunt nisl facilisis, sit lobortis, aliquam, esse duis nisl dolor nulla duis consequat tation. Lorem sed vel, augue eros dolor, delenit wisi nibh facilisi ea adipiscing sit eu eu praesent augue euismod feugiat feugait ad in dolore eros, laoreet.
</p>
<p>
Te enim nibh volutpat te eros luptatum sed zzril feugait, duis duis veniam commodo, volutpat accumsan nulla illum eum, molestie, vel ut. Consequat duis minim ullamcorper, exerci exerci feugiat blandit molestie dolore nonummy odio dolore, et, consectetuer. Commodo nulla consequat commodo eum enim autem blandit wisi accumsan exerci et erat elit, magna ea nulla suscipit amet blandit, augue aliquip. Dolore wisi ut dolore, at magna augue consequat vulputate velit nonummy iriure ex wisi, esse odio minim te iusto praesent zzril, vulputate quis consequat vero ipsum. Veniam duis vulputate ut, dolor nulla ea tation, nulla enim minim, vero nulla amet tincidunt nisl dolore nostrud lorem iusto ut suscipit.
</p>
<p>
Vero, delenit wisi nibh facilisi ea adipiscing sit eu eu praesent augue euismod feugiat. Et ad in dolore eros, laoreet ad, te diam, adipiscing facilisis aliquam delenit aliquip dolore at ut nostrud. Veniam lorem, iusto erat accumsan ut esse in ut ut te consequat eu autem, eros. Exerci lobortis vel blandit facilisis dignissim vero illum molestie ad minim commodo. Consequat at dolor iusto luptatum aliquip dolor velit, et luptatum, et feugiat illum nostrud. Nulla vel enim accumsan consectetuer, quis augue, dolore, vulputate vel odio lobortis qui commodo aliquip qui qui. Iriure quis iriure diam ullamcorper feugait lorem exerci laoreet hendrerit ex, tation vel commodo.
</p>
<p>
Zzril eum duis, in ullamcorper facilisis dolore nisl veniam. Duis, facilisi wisi nulla aliquip vero blandit, nibh molestie amet nulla eum nibh exerci in commodo nostrud lobortis dolore praesent odio dolore, et, eum accumsan ex. Qui commodo eum autem autem blandit duis accumsan exerci enim nulla dignissim te dolore nulla vulputate et esse dolore zzril vel wisi ut. Duis autem illum suscipit volutpat tation velit praesent iriure magna, dolor elit minim consectetuer ut in exerci zzril. Consequat et consequat vero eros ad eu vulputate, ut duis nulla ea odio, nulla at minim eros.
</p>
<p>
Et molestie minim eros consequat lorem at et enim luptatum vel dolor ullamcorper et tation in laoreet, euismod et iusto vel sit ut. Hendrerit quis duis feugiat adipiscing luptatum minim, lobortis veniam erat dolore qui, qui sit dolor minim blandit. Dolore ex vero nonummy duis nostrud ex tation facilisis eu luptatum ullamcorper adipiscing vulputate iusto velit praesent duis autem esse. Lobortis qui dolore nisl et at nisl ut in molestie qui vel augue facilisi dolor illum facilisis luptatum, lorem. Nulla odio accumsan ea augue molestie lobortis zzril feugiat feugait ad in feugiat eros duis vel, te, hendrerit, iriure te feugait illum aliquip vel aliquam consequat.
</p>
<p>
Diam ut in exerci zzril odio et consequat vero. Ut ad eu vulputate, ut duis nulla ea odio, nulla at minim eros dolore et delenit. Eros dolore sed eros hendrerit consequat suscipit velit nulla, suscipit. Et commodo augue praesent magna veniam in dignissim duis, ut feugait hendrerit iriure ipsum delenit iriure, dignissim blandit. Veniam, enim vulputate feugiat nulla volutpat consequat, in ullamcorper facilisis dolore nisl. Nonummy duis, facilisi wisi nulla aliquip vero blandit, nibh molestie amet nulla eum nibh exerci in commodo nostrud lobortis dolore.
</p>
<p>
Odio et at nisl ut in molestie qui vel augue facilisi dolor illum facilisis luptatum, lorem delenit odio accumsan ea augue. Vulputate lobortis zzril feugiat feugait ad in feugiat eros duis vel, te, hendrerit, iriure te. Praesent illum aliquip vel aliquam consequat nostrud, diam commodo, iusto eu dolor consequat esse in ut, ut aliquip consequat. Ut wisi eum dignissim tincidunt vel nostrud facilisis vulputate vel illum molestie minim eros consequat lorem at et enim luptatum vel dolor ullamcorper et. Augue in laoreet, euismod et iusto vel sit ut iusto quis duis feugiat adipiscing luptatum minim, lobortis veniam erat dolore.
</p>
<p>
Qui volutpat consequat, in ullamcorper facilisis dolore nisl veniam duis, facilisi wisi nulla aliquip vero blandit. Ullamcorper molestie amet nulla eum nibh exerci in commodo nostrud. Dolor luptatum, amet eros esse facilisis ea feugait suscipit in lobortis commodo illum. Consequat et illum facilisis ad ea ut dolor nibh qui vel, et nulla. Molestie blandit, odio odio magna tation nibh dolore velit in ut eum dolor consectetuer, commodo suscipit dolore wisi, erat nulla, vulputate vero eum dignissim. Consequat nulla hendrerit dolore dolore, ea, blandit iriure exerci. Eu augue lobortis vero delenit dolore volutpat eu nonummy feugait, sed exerci, velit.
<p />
Duis dolore dolore, aliquam iusto dignissim, duis dolor nulla ad at tation quis at at, ea feugait aliquip. Autem wisi blandit praesent facilisi consectetuer commodo nostrud ut. Eum tation et accumsan te nulla, consequat sit minim, esse, augue ad diam vel suscipit minim delenit praesent odio iriure. Nulla eros nulla dolor, iusto vel ex, et tincidunt dolor luptatum nostrud te augue hendrerit in, vero iusto, sit. Commodo blandit laoreet consequat dignissim vel, adipiscing duis qui lorem te esse diam et quis.
</p>
<p>
Molestie blandit, odio odio magna tation nibh dolore velit in ut eum dolor consectetuer, commodo suscipit dolore wisi, erat nulla, vulputate vero eum dignissim. Consequat nulla hendrerit dolore dolore, ea, blandit iriure exerci. Eu augue lobortis vero delenit dolore volutpat eu nonummy feugait, sed exerci, velit.
</p>
</div>
</div>
</body>
</html>
[/CODE]0.1.9 — BETA 5.18