navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Help with Navigation/browser viewing

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Help with Navigation/browser viewing
Page: [1]
 
angiec22

 

Posts: 1
Joined: 9/23/2006
Status: offline

 
Help with Navigation/browser viewing - 9/23/2006 17:02:26   
Hello,
I am in the process of redesiging my site in CSS and am very new to it...any help would be greatly appreciated! My navigation bar list looked great in Firefox and Netscape but was way too spaced out in IE. I tried a "list-item spacing bug" workaround and viola! looked great in IE. The only problem is, now it virtually disappeared in the the other two! Any suggestions? Also, on a minor note, I wanted the purple box to go to the edge of the nav container but when I did the workaround I lost that and there is a little extra background space showing through on the right. Is that a quick fix? Here's the hidden file...
http://www.naturalbeautysoaps.net/testfiles/template3NAVtest.html

thanks, Angie
sticks464

 

Posts: 55
Joined: 10/16/2005
Status: offline

 
RE: Help with Navigation/browser viewing - 9/24/2006 2:30:23   
I only played with this a little bit, but this should make your menu come back.

quote:

<style type="text/css">
@import "hnbstyles.css"; /* just some basic formatting, no layout stuff */

body {
margin:0px;
padding:0px;
}

html, body{
scrollbar-face-color:#ccffcc;
scrollbar-base-color:#660099;
scrollbar-arrow-color:#660099;
scrollbar-track-color:#aa97c8;
}

#navigation {
position: absolute;
left:10px;
top:185px;
border: 2px dotted #660099;
width: 150px;
background:#ccffcc;
font-size: 10pt;
padding-bottom: 10px;
}
#navigation h3 {
font-size: 11pt;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
margin: 5px 5px 0 5px;
padding: 5px 0 5px 5px;
color: #660099;
background-color: #aa97c8;
text-align: left;
border: double 2pt #0c9;
width: 130px;
}
#navigation ul {
margin: 0px;
list-style-type: none;
padding:0px;
}
#navigation li {
display: block;
width: 127px;
height: 1em;
padding: 1px 1px 1px 12px;
color: #660099;
background-color: #aa97c8;
margin: 5px 10px 0 5px;
font-weight: bold;
}

#navigation li a:hover {
border-left: 7px solid #00cc99;
font-weight: bold;
}

#centercontent {
background-color: #fff;
border: solid 1px #660099;
position: absolute; top: 175px; left: 0px;
width: 599px;
visibility: visible;
voice-family: "\" }\"";
voice-family: inherit;
margin-top: 12px;
margin-left: 170px;
margin-right:210px;
padding: 10px;
}

html>body #centercontent {
margin-left: 170px;
margin-right:210px;
}

#rightcontent {
background-color: #cfc;
border: dotted 2px #660099;
position: absolute;
top: 180px;
right: 10px;
left: 612px;
width: 156px;
visibility: visible }

#banner {
background:#fffff;
height:150px;
border-none;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
padding:10px 10px 0px 6px;}

#footer {
background:#ccffcc;
position: absolute;
left: 10px;
top:1370px;
width: 777px;
border:1px solid #660099;
}

#bottomlinks {
background:#fffff;
position: bottom;
border:none;
}

html>body #banner {
height:39px;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

#rightcontent p {
font-size:10px
}
</style>


Make sure you change the h3 tags ie. <h3>Products</h3> in your body code.

(in reply to angiec22)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Help with Navigation/browser viewing
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts