recode site in css [Archive] - Dynamic Drive Forums

froggy

11-13-2008, 01:49 PM

Hi there,

I am learning css and would like to recode a website I done a while back. As it uses tables and isn't the best coded site!

The site is www.raglan-festival.org

So far I have the code bellow but have no idea on how to do the menu...
Any help would be great..

CSS Code:

body {
background-color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
background-image:url(background.gif);
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #0099FF;
color:#FFFFFF;
padding:5px 15px;
margin:0px
}

h2 {
font-size:20px;
color:#0099FF;
font-weight: normal;
padding: 5px 10px;
margin:0px;
}
/* ----------container to center the layout-------------- */
#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

/* ----------banner for logo-------------- */
#banner {
text-align: left;
padding: 0px;
margin: 0px;
}
#banner img {
padding:10px 0px;
}

/* -----------------content--------------------- */
#content {
padding: 40px 0px 0px 0px;
margin-left: 240px;
margin-top:0px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navi------------- */
#left {
float: left;
width: 240px;
margin: 0px 0px 0px 0px;
padding: 40px 0px 0px 0px;
}

/* -----------footer--------------------------- */
#bottomlinks {
clear: both;
margin: 0px;
padding: 0px;
text-align: right;
}
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
<title>Raglan Music Festival</title>
<link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="banner" >
<img src="raglanfestlogo.jpg" alt="" width="246" height="123" border="0" />
</div>
<div id="left">
<h2> </h2>
</div>
<div id="content">
<h2>Raglan Music Festival </h2>
</div>
<div id="footer">
<h1>footer</h1>
</div>
<div id="bottomlinks">
<h1>links</h1>
</div>
</div>
</body>
</html>

Medyman

11-13-2008, 01:55 PM

Take a look at the menus here (http://www.dynamicdrive.com/style/csslibrary/category/C1/) to get an idea of how menus are created with CSS.

Let us know if you have any specific hiccups.

froggy

11-13-2008, 03:41 PM

Hi,

Thank you for your help. I now have a menu.

I need to place the rightcorner.gif image to the right of the image so that it looks like a curve down to the horizontal line. As per the original menu on the festival site.

Here is my new code....any help or advice would be great.

CSS Code:

body {
background-color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
background-image:url(background.gif);
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #0099FF;
color:#FFFFFF;
padding:5px 15px;
margin:0px
}

h2 {
font-size:20px;
color:#0099FF;
font-weight: normal;
padding: 5px 10px;
margin:0px;
}
/* ----------container to center the layout-------------- */
#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

/* ----------banner for logo-------------- */
#banner {
text-align: left;
padding: 0px;
margin: 0px;
}
#banner img {
padding:12px 0px;
}
/* -----------------content--------------------- */
#content {
padding: 40px 0px 0px 0px;
margin-left: 263px;
margin-top:0px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
p, pre{
padding: 5px 10px;
margin:0px;
}
/* --------------left bar------------- */
#left {
float: left;
width: 240px;
margin: 0px 0px 0px 0px;
padding: 40px 0px 0px 0px;
}

/* -----------footer--------------------------- */
#bottomlinks {
clear: both;
margin: 0px;
padding: 0px;
text-align: right;
}
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right;
}
/* -----------menu1--------------------------- */
#navigation {
text-align: left;
margin: -47px 0px 0px 263px;
width:505px;
height:33px;
padding: 0px;
background-color:#0099FF;
}
.nav1{
width: 100%;
overflow: hidden;
}
.nav1 ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 14px Verdana;
list-style-type: none;
}
.nav1 li{
display: inline;
margin: 0;
}
.nav1 li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
color: #000000;
}
.nav1 li a:visited{
color: #000000;
}
.nav1 li a:hover{
color: #FFFFFF;
}
#rightcornerbox {
margin: -45px 0px 0px 768px;
}

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
<title>Raglan Music Festival</title>
<link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="banner" ><img src="raglanfestlogo.gif" width="263" height="139" />
<div id="navigation" class="nav1">
<ul>
<li><a href="http://www.raglan-festival.org">About</a></li>
<li><a href="http://www.raglan-festival.org">Contact</a></li>
<li><a href="http://www.raglan-festival.org">Schedule</a></li>
<li><a href="http://www.raglan-festival.org">Sponsors</a></li>
<li><a href="http://www.raglan-festival.org">Links</a></li>
</ul>
</div>
<div id="rightcornerbox"><img src="rightcorner.gif" /></div>
</div>
<div id="left">
<h2> </h2>
</div>
<div id="content">
<h2>Raglan Music Festival </h2>
</div>
<div id="footer">
<h1>footer</h1>
</div>
<div id="bottomlinks">
<h1>links</h1>
</div>
</div>
</body>
</html>