UrbanTwitch
06-24-2008, 04:16 AM
I have to make this quick. Why is there a rather large space between Menu and Home?
http://i27.tinypic.com/2lk8rno.png
See?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><title>sodaDome Template</title>
<head>
<link rel="stylesheet" href="style3.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div><div id="greenmenu"></div>
<div id="faux_wrap">
<div id="leftmenu"><h2>Menu</h2><ol><li><a href="http://sodadome.com">Home</a></li>
<li><a href="http://sodadome.com/gallery">Gallery</a></li>
<li><a href="http://sodadome.com/gallery">Gallery</a></li>
</ol>
<p>Test one two three/ Test one two three/ Test one two three/</p>
</div>
<div id="content"><h2>Welcome to the new sodaDome!</h2>
</div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and here is CSS
body {
background-color: #caced1;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #777;
}
#header {
background: #caced1 url(images/header.PNG);
margin: auto;
width: 801px;
height: 115px;
}
/* links */
a:link {
color: #1773BC;
text-decoration: none;
font-size: 12px;
font-family: verdana;
}
a, a:visited {
color: #1773BC;
background: inherit;
text-decoration: none;
font-size: 12px;
font-family: verdana;
}
a:hover {
color: #73471B;
background: inherit;
text-decoration: none;
font-size: 12px;
font-family: verdana;
}
#greenmenu {
background: #caced1 url(images/greenheader2.PNG);
margin: auto;
width: 803px;
height: 30px;
position: relative;
right: -1px;
}
#faux_wrap{
background: red url(http://i28.tinypic.com/vmrqfs.png) repeat-y;
position: relative;
right: -1px;
width: 803px;
}
div.clear{
clear:both;
}
#leftmenu {
float:left;
width:122px;
padding-left: 15px;
padding-right: 5px;
text-align: right;
}
#leftmenu h2 {
text-align: right;
color: #4B4B4B;
font-size: 17px;
font-family: Trebuchet MS;
border-bottom: #6D6D6D solid 1px;
padding: 0px;
padding-bottom: 2px;
padding-top: 15px;
margin: 0px;
}
#right {
position:relative;
margin-left:150px;
}
#leftmenu li {
font-weight:bold;
text-decoration: none;
display: block;
text-align:right;
margin-top: 0px;
border-bottom: black dashed 1px;
padding-bottom: 2px;
margin-left: -40px;
}
#content {
padding-left: 7px;
padding-top: 0px;
float: left;
height: 100%;
width: 642px;
}
#wrapper {
width: 803px;
margin: auto;
}
#contentwrap {
width: 625px;
margin-left: 10px;
margin-top: 10px;
margin-right: 130px;
}
#contentwrap p {
font-weight: bold;
}
#content h2 {
color: #0066CC;
}
#footer {
background: #caced1 url(images/footer.PNG);
float:left;
position: relative;
right: -1px;
width: 803px;
height: 73px;
}
http://i27.tinypic.com/2lk8rno.png
See?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><title>sodaDome Template</title>
<head>
<link rel="stylesheet" href="style3.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div><div id="greenmenu"></div>
<div id="faux_wrap">
<div id="leftmenu"><h2>Menu</h2><ol><li><a href="http://sodadome.com">Home</a></li>
<li><a href="http://sodadome.com/gallery">Gallery</a></li>
<li><a href="http://sodadome.com/gallery">Gallery</a></li>
</ol>
<p>Test one two three/ Test one two three/ Test one two three/</p>
</div>
<div id="content"><h2>Welcome to the new sodaDome!</h2>
</div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and here is CSS
body {
background-color: #caced1;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #777;
}
#header {
background: #caced1 url(images/header.PNG);
margin: auto;
width: 801px;
height: 115px;
}
/* links */
a:link {
color: #1773BC;
text-decoration: none;
font-size: 12px;
font-family: verdana;
}
a, a:visited {
color: #1773BC;
background: inherit;
text-decoration: none;
font-size: 12px;
font-family: verdana;
}
a:hover {
color: #73471B;
background: inherit;
text-decoration: none;
font-size: 12px;
font-family: verdana;
}
#greenmenu {
background: #caced1 url(images/greenheader2.PNG);
margin: auto;
width: 803px;
height: 30px;
position: relative;
right: -1px;
}
#faux_wrap{
background: red url(http://i28.tinypic.com/vmrqfs.png) repeat-y;
position: relative;
right: -1px;
width: 803px;
}
div.clear{
clear:both;
}
#leftmenu {
float:left;
width:122px;
padding-left: 15px;
padding-right: 5px;
text-align: right;
}
#leftmenu h2 {
text-align: right;
color: #4B4B4B;
font-size: 17px;
font-family: Trebuchet MS;
border-bottom: #6D6D6D solid 1px;
padding: 0px;
padding-bottom: 2px;
padding-top: 15px;
margin: 0px;
}
#right {
position:relative;
margin-left:150px;
}
#leftmenu li {
font-weight:bold;
text-decoration: none;
display: block;
text-align:right;
margin-top: 0px;
border-bottom: black dashed 1px;
padding-bottom: 2px;
margin-left: -40px;
}
#content {
padding-left: 7px;
padding-top: 0px;
float: left;
height: 100%;
width: 642px;
}
#wrapper {
width: 803px;
margin: auto;
}
#contentwrap {
width: 625px;
margin-left: 10px;
margin-top: 10px;
margin-right: 130px;
}
#contentwrap p {
font-weight: bold;
}
#content h2 {
color: #0066CC;
}
#footer {
background: #caced1 url(images/footer.PNG);
float:left;
position: relative;
right: -1px;
width: 803px;
height: 73px;
}