shankha
25 Jan 2010, 09:12 AM
hi i am a newbie at css. i am trying to make a simple site with a css. i have 2 problems.
1. i have a header image and a css menu. the header (website logo) comes first, then the css menu. now there is a fairly large gap between the logo and menu. how do i fix this.
2. the catagories and archives have dropped to the bottom of the page. how do i increase the left margin and bring them to the top left hand corner of the screen?
the source codes are given below. this i urgent! please help me!
style.css
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #222;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #FF9600;
}
a:hover {
text-decoration: underline;
color: #111;
}
#wrap {
margin: 0 auto;
width: 500px;
}
#header {
background: #fff url(images/revheader_nf.jpg) no-repeat;
height: 180px;
}
h1 {
padding: 10px 0 0 5px;
font-size: 18px;
color: #000;
}
h1 a {
padding: 10px 0 0 5px;
font-size: 18px;
color: #000;
font-weight: 100;
text-decoration: underline;
}
#content {
padding: 0 10px;
background: #fff url(images/content.jpg) repeat-y;
}
.right {
float: right;
width: 400px;
text-align: justify;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #FF9600;
}
.right h2 a {
text-decoration: none;
color: #fff;
}
.right h2 a:hover {
color: #111;
}
.left {
float: left;
width: 150px;
}
.left h2 {
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #FF9600;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 20px;
color: #FF9600;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {
}
.articles {
padding: 10px;
}
#bottom {
background: #fff url(images/bottom.jpg) no-repeat;
padding: 10px 0;
}
#footer {
text-align: center;
font-size: 11px;
color: #aaa;
padding-bottom: 10px;
}
#footer a { color: #aaa; }
#footer a:hover { color: #111; }
.Sidebar{
float:left;
width:200px;
margin-left: 10px;
margin-top: 10px;
width: 80px
}
menu_style.css
.wrapper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(images/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(images/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 80px;
}
.nav-right {
background: url(images/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 80px;
}
.nav ul {
/*width: 648px;*/
height: 80px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
padding: 0 7px;
background: url(images/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(images/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(images/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(images/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 80px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(images/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(images/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}
.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/**/
.nav .btm-bg {
background: url(images/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
/*
.content {
width: 670px;
background: transparent url(images/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
/*
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
*/
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style media="all" type="text/css">@import "menu_style.css";</style>
</head>
<body>
<div id="wrap">
<h1><a href="#"> </a></h1>
<div id="header">
</div>
<!-- menu -->
<div class="wrapper1">
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation">
<li class="active">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Home</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>
<!--
<div class="content">
<p> </p>
<p> </p>
</div>
<div class="content-bottom"></div>
-->
</div>
</div>
<div id="content">
<div class="right">
<h2><a href="#">Example of heading 2</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
<br /><br />
<!--
<img src="images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
-->
<img src="images/products/pregnancy.gif" width="150" height="263" alt="pregnancy" style=" border: 3px solid #ccc;"/>
<br /><br />
</div>
<h2><a href="#">Example of heading 2</a></h2> <!-- replace "#" with link -->
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
<br /><br />
</div>
<h2><a href="#">Example of heading 2</a></h2> <!-- replace "#" with link -->
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
</div>
</div>
<div class="sidebar">
<div class="left">
<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li>
<li><a href="#">Europe Sport</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li>
<li><a href="#">Last Category</a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="#">January 2009</a></li>
<li><a href="#">February 2009</a></li>
<li><a href="#">March 2009</a></li>
<li><a href="#">April 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">August 2009</a></li>
<li><a href="#">September 2009</a></li>
<li><a href="#">October 2009</a></li>
<li><a href="#">November 2009</a></li>
<li><a href="#">December 2009</a></li>
<li><a href="#">January 2010</a></li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="bottom">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
1. i have a header image and a css menu. the header (website logo) comes first, then the css menu. now there is a fairly large gap between the logo and menu. how do i fix this.
2. the catagories and archives have dropped to the bottom of the page. how do i increase the left margin and bring them to the top left hand corner of the screen?
the source codes are given below. this i urgent! please help me!
style.css
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #222;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #FF9600;
}
a:hover {
text-decoration: underline;
color: #111;
}
#wrap {
margin: 0 auto;
width: 500px;
}
#header {
background: #fff url(images/revheader_nf.jpg) no-repeat;
height: 180px;
}
h1 {
padding: 10px 0 0 5px;
font-size: 18px;
color: #000;
}
h1 a {
padding: 10px 0 0 5px;
font-size: 18px;
color: #000;
font-weight: 100;
text-decoration: underline;
}
#content {
padding: 0 10px;
background: #fff url(images/content.jpg) repeat-y;
}
.right {
float: right;
width: 400px;
text-align: justify;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #FF9600;
}
.right h2 a {
text-decoration: none;
color: #fff;
}
.right h2 a:hover {
color: #111;
}
.left {
float: left;
width: 150px;
}
.left h2 {
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #FF9600;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 20px;
color: #FF9600;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {
}
.articles {
padding: 10px;
}
#bottom {
background: #fff url(images/bottom.jpg) no-repeat;
padding: 10px 0;
}
#footer {
text-align: center;
font-size: 11px;
color: #aaa;
padding-bottom: 10px;
}
#footer a { color: #aaa; }
#footer a:hover { color: #111; }
.Sidebar{
float:left;
width:200px;
margin-left: 10px;
margin-top: 10px;
width: 80px
}
menu_style.css
.wrapper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(images/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(images/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 80px;
}
.nav-right {
background: url(images/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 80px;
}
.nav ul {
/*width: 648px;*/
height: 80px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
padding: 0 7px;
background: url(images/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(images/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(images/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(images/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 80px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(images/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(images/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}
.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/**/
.nav .btm-bg {
background: url(images/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
/*
.content {
width: 670px;
background: transparent url(images/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
/*
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
*/
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style media="all" type="text/css">@import "menu_style.css";</style>
</head>
<body>
<div id="wrap">
<h1><a href="#"> </a></h1>
<div id="header">
</div>
<!-- menu -->
<div class="wrapper1">
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation">
<li class="active">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Home</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>
<!--
<div class="content">
<p> </p>
<p> </p>
</div>
<div class="content-bottom"></div>
-->
</div>
</div>
<div id="content">
<div class="right">
<h2><a href="#">Example of heading 2</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
<br /><br />
<!--
<img src="images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
-->
<img src="images/products/pregnancy.gif" width="150" height="263" alt="pregnancy" style=" border: 3px solid #ccc;"/>
<br /><br />
</div>
<h2><a href="#">Example of heading 2</a></h2> <!-- replace "#" with link -->
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
<br /><br />
</div>
<h2><a href="#">Example of heading 2</a></h2> <!-- replace "#" with link -->
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
</div>
</div>
<div class="sidebar">
<div class="left">
<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li>
<li><a href="#">Europe Sport</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li>
<li><a href="#">Last Category</a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="#">January 2009</a></li>
<li><a href="#">February 2009</a></li>
<li><a href="#">March 2009</a></li>
<li><a href="#">April 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">August 2009</a></li>
<li><a href="#">September 2009</a></li>
<li><a href="#">October 2009</a></li>
<li><a href="#">November 2009</a></li>
<li><a href="#">December 2009</a></li>
<li><a href="#">January 2010</a></li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="bottom">
</div>
<div id="footer">
</div>
</div>
</body>
</html>