Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Menu Gone Bad

Quite Irritating to say the least.

         

SynergyWD

12:47 am on Aug 11, 2004 (gmt 0)

10+ Year Member



I recently downloaded ANOTHER template from Bravenet.com and quickly ran into a problem when I began editing the CSS and HTML code. If you put the following code together, you should see a menu ABOVE another menu. The top one is supposed to be horizontal or "inline" according to CSS vocab. Could some one fix this for me? I feel there is very simple answer: (Don't mind the mess, the code is being edited. )

CSS named green_b:

body
{
font: 16px arial;
background-color: #000000;
}

a:link {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:active {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:visited {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:hover {font: bold 13px arial; color: #eeeeee; text-decoration: underline;}/*this one changes the mouseover or hover state of the link*/

.border
{
border: solid 1px #889573;
}

.left
{
float: left;
}

.right
{
float: right;
}

.scroll
{
overflow: auto;
}

.title
{
background-color: #64951A;
color: #ffffff;
font-face: Arial;
font-weight: bold;
font-size: 36px;
padding: 10px 20px 10px 20px;
margin-bottom: 10px;
border-top: solid 2px #889573;
border-left: solid 2px #889573;
border-right: solid 2px #889573;
}

.ctitle
{
color: #ffffff;
font-face: Arial;
font-weight: bold;
font-size: 18px;
}

.titlemargin
{
margin: 10px 0px 10px 0px;
}

.subtitle
{
color: #ffffff;
font-face: Arial;
font-weight: bold;
font-size: 14px;
}

.content
{
padding: 0px 20px 0px 20px;
font-face: Arial;
font-size: 12px;
color: #ffffff;
padding: 0px;
margin: 0px;
}

.content.padleft
{
padding-left: 180px;
}

.content.padright
{
padding-right: 180px;
}

.sidebar
{
clear: both;
width: 150px;
height: 400px;
background-color: #889573;
color: #64951A;
font-weight: bold;
padding: 10px 0px 5px 0px;
}

.sidebaritem
{
width: 130px;
background-color: #4F5743;
color: #889573;
font-size: 14px;
padding: 2px;
margin-bottom: 3px;
text-align: center;
}

.horiz
{

clear: none;
}

.sidebaritem.first
{
margin-top: 10px;
}

.footer
{
background-color:#64951A;
font-size: 10px;
font-face: arial;
text-align: center;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Website Powered by Bravenet</title>
<link rel="stylesheet" type="text/css" href="green_b.css">
</head>
<body>
<div class="wrapper">
<div class="title">My Website</div>

<div class="horiz">
<div class="sidebaritem horiz"><a href="">menu item</a></div>
<div class="sidebaritem horiz"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
</div>

<div class="sidebar left" align="center" style="margin-right: 20px;">
<div class="subtitle">Cool Links</div>
<div class="sidebaritem first"><a href="#">link</a></div>
<div class="sidebaritem"><a href="#">link</a></div>
</div>

<div class="content" style="padding: 20px;"><br />
<p class="ctitle">Welcome to Your New Website</p>
<p>Welcome to your new home on the Net! If you don't have your own Domain Name yet, you can get one through your Hosting Manager. Also in your Hosting Manager, you can find handy tools to maintain and update your Web Site, such as our Java-based FTP Applet, an easy way to upload your files to the server.</p>
<p>From the Hosting Manager you will also find links to our Web-based File Manager which includes a Text Editor and Visual Editor, making Site maintenance easy. And don't forget to check out the <a href="http://www.bravenet.com/resources/index.php">Resource Area</a> for HTML help, scripts, clip art, audio clips, fonts, and more!</p>
<p class="title2">Adding Fun Tools to Your Site</p>
<p>Through your Bravenet Account, you can choose many of our FREE Tools to enhance your Site. Add as many as you like! Get a Hit Counter, Guestbook, Message Board, Email Form, Minipoll, Web Journal, or any of Bravenet's other great <a href="http://www.bravenet.com/webtools/index.php">Tools and Services</a> to make your Site fun and interactive.</p>
<p>Finally, don't forget to join the <a href="http://www.bravenet.com/webtools/affiliate/index.php">Bravenet Affiliate Program</a> and earn money everytime you send somebody to join Bravenet.</p><br />
</div>
</div>
</body>
</html>

Thanks in advance!

vkaryl

1:10 am on Aug 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is there a real reason to deal with the stuff bravenet provides?

SynergyWD

1:51 am on Aug 11, 2004 (gmt 0)

10+ Year Member



It beats composing your own code. I just needed a quick site built until I can make my own setup. I did by the way find out the answer to my problem.

vkaryl

1:59 am on Aug 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's good. Thanks for letting us know.