|
CSS - Navigation Menus Confusion In Css
Hi there, thanks for reading my post.
I am looking to build a website using ASP, with databases. After receiving some advice from some (more experienced) friends, they recommended learning CSS. They said something along the lines of "its better than using frames because Search Engines will index your site better and you will have more control over your pages - changing one style sheet can change your whole site easily". I thought it sounded like what I need as I am hoping to produce a fairly professional looking site, however I am still a little confused. I am unsure if this is a "webdesign" problem, so forgive me if I have posted in the wrong place, but I am interested to know how navigation menus are made. What I mean is, I dont understand how to make a menu on the left of the page control the right panel of a page without using frames . I have spent some time reading the (70) examples on www.w3schools.com but I cannot seem to find the answer - so now I am worried that it cannot be done!! If anyone could perhaps paste some quick code for me to look at/reverse engineer or, equally useful, perhaps give links to a few tutorials/web resources on this I would be very grateful. Another question if I may (?!) - when designing navigation menus (top or left or whatever), is it best to use text that highlights to make the links to navigate the site, or to make the links into pictures (i.e. have a whole menu created from small buttons aligned underneath each other). I hope my question is clear. Thanks to anyone who can help, Regards, Porky Similar TutorialsI have two navigation menus on my site. One that is horizontal across the top and the second is vertical along the left side. Both of these have rollover effects. I would like to code this with as few lines as possible. So far, I only have the code for the left-side navigation menu. What else should I add for the horizontal menu? Code: #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navbar li{
border-bottom:1px solid #003366;
margin:0 /*dictates the space between navbar items */
}
#navbar li a {
display: block;
padding: 5px 0 5px 5px;
border-left: 10px solid #1958b7;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navbar li a:hover {
border-left: 10px solid #1c64d1;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
Hi, I want to make something that works like this: dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html# (cant post proper urls as I'm new) Whereby each link has a number of sub-links under it, and when you click a main link, the sub links for the previous one shut and the new one opens. But the tutorial on that site is not much help. It just gives you a load of code to copy into your editor, and when I've done that it didn't work anyway. Could someone point me in the direction of a tutorial to do this or let me know what I should be doing, as I can't seem to find anything on how to do it. Thanks! I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh? Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery). Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated! You can find the sample at: http://www.myztacia.com/animated-menu2.html I figured it was easier to post the link than force you to create the webpage yourself Hi, I have a problem: the navigation submenu is appearing underneath the floated element (the images) that is placed under it. How can I get the navigation menu to appear 'over' the images? You can see it he http://serve5.net/xcage/ http://serve5.net/xcage/stylesheets/xcage.css Thanks. Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hey, I have the following in a CSS document: Code: /* Link Colors */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #888888; }
a:active { color: #000000; }
/* User Class colors */
.classadmin { color: #FF0000; font-weight: bold; }
.classmod { color: #0066FF; font-weight: bold; }
.classmember { color: #00CC00; font-weight: bold; }
In the Active Users section of my site, I link to the user's profile, and I would also like the color of the link to be the color of the user's class. My HTML code is: Code: <a class="classmember" href="user.php?id=1">$username</a> But, I also have a Color Key: Code: Color Key: <font class="classmember">Member</font>, <font class="classmod">Moderator</font>, <font class="classadmin">Administrator</font>. I thought I could do something like: a.classmember:link { color: #00CC00; font-weight: bold; } But that messes up the Color Key. So, I don't know how I can have the .classmember, .classmod, and .classadmin override the a:link {} pseudoclasses. Thanks for any suggestions! Hi There - Am having some confusion with CSS inheritance. I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms. I have a large container div with id=forum. Nested inside a table inside that div are more divs. Inside of that I have links inside a div that has class=name. Like this: Code: <div id="forum"> <ul> </ul> <table> <thead> </thead> <tbody> <tr class="odd"> <td class="container" colspan="4"> <div style="margin-left: 0px;"> <div class="name"> </div> <div class="description">Containers that will look OK as and when we decide to use forum Containers.</div> </div> </td> </tr> <tr class="even"> <td class="forum"> <div style="margin-left: 30px;"> <div class="name"> <a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a> </div> How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this. Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above. Here's what I was trying to use: Code:
#forum .name a:link, a:visited, a:hover {
color:#F79239;
}
I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this. I'm trying to align one div to the bottom inside of another, and a third div to just beneath that one. Since the third div will appear on mouseover, it needs to lie on top of other content that will already be there. I've tried various combinations of positioning, setting margins, etc., but I can't figure out a solution that will work in all the browsers. This is just the bare bones so that you can maybe see what I'm trying to achieve here.... Confused? Yes, me too; Here's the html: Code: <html> <head> <link href="test2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="widebar"> <div id="tabs"> <div class="menu1">I want these</div> <div class="menu2">to align to the</div> <div class="menu3">very bottom </div> <div class="menu4">of this div </div> <div id="tabs2">Align this to the bottom left corner of the Tabs 1 section so that it shows up just below the dark blue area</div> </div> </div> Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way. The div that appears on mouseover should sit "on top" of this text with no interference. </body> </html> And here's the css, thus far: Code:
/* css */
#widebar {
width:100%;
height: 200px;
background: #ffccff;
}
#tabs {
float:right;
display:block;
#position: absolute;
#bottom:0;
height: 200px;
background:#334ddd;
width:50%;
}
#tabs2 {
clear:both;
#position: relative;
#bottom: 0;
background: #567dfe;
}
.menu1, .menu2, .menu3, .menu4 {
float:left;
width: 100px;
background: #ccc;
}
Hi all, first post to the forum after signing up over two years ago... I work mostly on the server side, so I'm hoping that someone can advise me on the trouble I'm having with CSS. http://www.commafruit.co.uk/play/css/imageplace.html In the link above, I have two images, both with the following css: Code: <img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:10px;' /> <img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:20px;' /> Please could someone explain why they are not in line vertically? They both have left:20px, so surely they should be one on top of the other? The fact that this is not the case in Firefox or IE makes me think I'm really missing the point, and I've been going around and around trying to figure out what. Thanks for any replies. Also, I'd prefer not to use absolute positioning as I'd like to keep the images relative to the div. B. Hi everyone! I'm taking my first CSS class and am running into some problems formatting a table. Specifically getting the rows to line up center along with the table headings. Well, except for the first one that should be left aligned. This is my validated CSS code: Code:
.cell-alpha {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
width: 85%;
}
.cell-bravo {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
text-align: center;
}
tbody tr.odd {
background-color:lightyellow;
color: red;
}
tbody tr.even {
background-color:red;
color: white;
}
tbody tr.total {
background-color:#6699FF;
color: yellow;
}
table {
table-layout: fixed;
width: 700px;
}
How would I get each column centered since the data is entered in table row sections? Also, how to get all of the headings to line up baffle me. This is how it SHOULD look : URL And this is how its rendering with my CSS: table Hi I want to create a text rollover menu on the very left hand side only (standard display). I want it in a table so I can have content on right hand side. I don't know whether to have each link in its own cell or 1 big cell and have a list of items. I decided to have a list of items but the items display on right side of the table cell and align left doesn't work. Code:
a {
display: block;
width:100px;
text-decoration: none;
}
#list1 { /* all list items */
background: lightblue;
border-width:1px; /* thin is not the same in different browsers */
border-color:black;
border-style:solid; /* required */
list-style-type:none;
}
I just want the list to display on left hand side and have a box around each item which it isn't. I am spending way too long fiddling about with this . I am having trouble understanding what exactly the CLASS, ID, DIV, and SPAN elements and attributes do. What are there purposes? How do the relate to each other? When should one be used and not another? In laymens terms please. Thanks Everytime I think I am getting the hang of CSS -- for simple pesonal homepages, etc -- they still always seem to get the worse on me. I am trying to generate a moderately simple page with title, prelude, menu (as per a table) with menu, content and comment box, followed by a quick sumary, etc. I seem to be having troubles getting the three -- menu, content & comment boxes -- to size correctly. I have a surounding box (by a div) for them, but they do not seem to entirely follow/use it as their parent... If I set them to top:0, it is the top of the window frame, but otherwise they seem to position within their more local parent div. Ultimately, I am striving to get into this CSS way of 'life', but it is very difficult as I am working mainly alone. I do have books but perhaps I am not seeing the info entirely correct... Perhaps some of you chaps/gurus can help me here. I have recently gathered that "html" is or should be used in the CSS file too...? Looking for help. My current (broken) home page can be accessed via: "dgringo.homeip.net/~dgringo/index.shtml" Here is the code and the CSS file: <head> <title>...</title> <script language="JavaScript" type="text/javascript" src="main.js"></script> <link rel="stylesheet" href="entry.css" type="text/css" /> </head> <body> <h1>Me (iMac's) Web-space</h1> <div id="prelude"> <!--#include virtual="includes/header.incl" --> </div> <table id="main"> <tr> <td id="menu"> <!--#include virtual="includes/menu.incl" --> </td> <td id="content"> <!--#include virtual="includes/body.incl" --> </td> <td id="topics"> <p> <!--#include virtual="includes/topic1.incl" --> </p> <p> <!--#include virtual="includes/topic2.incl" --> </p> </td> </tr> </table> <div id="footer"> <!--#include virtual="includes/footer.incl" --> </div> <div class="adendeum"> Last updated <!--#echo var="LAST_MODIFIED" --><br /> </div> </body> </html> ------------- The CSS file now follows: a:link {text-decoration:none;color: black;} a:visited {text-decoration:none;color: black;} a {color: black;} a:hover {text-decoration:underline;color: silver;} body { color: #000000; background: #669999; } h1 { text-align: center; } #prelude { width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; text-align: center; } #main { display: block; width: 100%; border: silver dotted; height: 16em; } #main td { border: dashed; } #menu { position: absolute; width: 20%; left: 2%; } #content { position: absolute; left: 23%; width: 50%; } #topics { position: absolute; left: 74%; width: 20%; } p:first-line { color: gray; background-color: green; } #footer { text-align: center; width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-left: 10px; padding-bottom: 3px; padding-right: 10px; } .adendeum { font-weight: lighter; color: gray; text-align: center; } Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } Hi there. I've become fond of the idea of non-javascript menus. I've been experimenting a little. So with help from various sources I managed to get a simple set working. I have this... Code:
#menu ul li > ul {
display: none;
position: absolute;
top: 18px;
left: 0;
width: 170px;
}
which correctly 'hides' the sub-menu. Then I have this Code:
#menu ul li:hover > ul {
display: block;
}
which should 'unhide' the sub-menu. Now, because I'd had success with the menu, I thought I should now look at validating my html and css. So far, I've just looked at the html part. My question is, why does it work with this code (which doesn't validate under Strict doctype)? Code:
<div id="menu">
<ul>
<li class="small"><a href="blah.php">About</a>
<li>Details On...
<ul>
<li class="small"><a href="blah.php">Registering</a>
</ul>
</ul>
</div>
and not this (which does validate)? Code:
<div id="menu">
<ul>
<li class="small"><a href="blah.php">About</a></li>
<li>Details On...</li>
<li>
<ul>
<li class="small"><a href="blah.php">Registering</a></li>
</ul>
</li>
</ul>
</div>
I'll listen to any thoughts on this, even the use (or not) of doctype strict. Thanks for listening! Stay JOLLY H Hi, I wanted to do a horizontal popout menu. I have the code and it works but I am trying to undertsand it better. It uses a csshover.htc file which i didn't download but the thing still works fine with a ie sniffer code in it. It doesn't use any javascript which I thought it needed. There seems a few ways to do expanding menus in css (with/without javascript)? Menus are more complicated than they look but I would some explanation on the above points before i continue. Please help me. This is driving me crazy. I am getting a problem in IE and I can't seem to figure out how to fix it. Of course, it works just fine in Firefox, but not IE. In IE, go to to this page. On the horizontal drop-down menu, go to "Guides." Then scroll through the three drop-down options and back up. Notice how the 3rd level menu suddenly dissapears behind the 2nd level menu? Here's the portion of my CSS file controling the menu: Code: /********** LAYOUT - HEADER **********/
#header {background: #ffffff;
margin-top: 10px;
margin-bottom: 25px;
padding: 0 0 8px;}
img.headerimg {margin-left: 25px;}
/** NAV - top horizontal nav **/
#nav,
#nav ul
{padding: 0;
margin: 0;
list-style: none}
#nav {height:1.5em;
font: 80% arial;
margin-top: 1em;
margin-left: 75px;}
#nav li {position:relative;
float: left;
width: auto;
display:block;
margin: 0;
padding:0}
#nav a
{display: block;
padding: 3px 10px 2px;
border-bottom: 1px solid rgb(98,61,15);
border-top: 1px solid rgb(98,61,15);}
/************* 2nd tier *************/
#nav li ul {width: 15em;
position: absolute;
left: -999em;
background: #ffffff}
#nav li:hover ul,
#nav li.sfhover ul
{left: 10px;
z-index:55555}
#nav li li {background:#9BCD9B;
float:none;
border: 1px solid rgb(98,61,15);
border-top: none;
padding-left: 0}
#nav li li a,
#nav li li a:link,
#nav li li a:visited,
#nav li li a:hover
{color:#000;
padding: 3px 10px;
border-bottom: none;
border-top: none;}
#nav li li a:hover {color: #000;
background: #FFDAB9;}
#nav li.active {background: #FFDAB9;}
#nav li.active a {color: #000000}
/************* 3rd tier *************/
#nav li ul ul {width: 30em;
font-size: 100%;
margin-left: 7em;
margin-top: -.7em}
#nav li:hover ul ul,
#nav li.sfhover ul ul
{left: -999em;}
#nav li li:hover ul,
#nav li li.sfhover ul
{left: auto;}
#nav li li li
{background: #f6f6f6;
border-top: 1px solid #fff;}
#nav li li li a,
#nav li li li a:link,
#nav li li li a:visited,
#nav li li li a:hover
{color: #006400}
/************* 4th tier *************/
#nav li ul ul ul{width: 30em;}
#nav li:hover ul ul ul,
#nav li.sfhover ul ul ul
{left: -999em;}
#nav li li li:hover ul,
#nav li li li.sfhover ul
{left: auto;}
#nav li li li li {background: #FFDAB9;}
#nav li li li li a:hover {color: #000;
background: #9BCD9B;}
Please help me! Thanks! Manny Can someone recommend a workaround for this issue I am having please. Rollover the top blue menus to see what i mean. There is an advert appearing in an iframe and it is blocking the drop down menus above it. Z indexes etc don't seem to help. this is the link ( very frustrating you can't post a link - it would make things easier for people to help ) sidouglas.net/nz-tourism-guide-prototype/index.html index.html: Iframe source is the same as the domain; menu can appear above the iframe no problem. index2.html: iframe source references another domain; menu dissapears. index3.html: iframe source is same as domain - but references swf resources from another domain. menu dissapears. Surely someone has faced this same issue? I am tied down to having to a situation with index2.html as there has to be a click tracking registering from another domain. Very frustrating, please help. Thanks. i have 2 menus on my page. one is a vertical sliding menu & other is a floating menu. i want the vertical sliding menu to slide over the floating menu. i tried giving the floating menu a z-index of -2 since the vertical menu has z-index of -1. but it doesn't work coz the floating menu disappears. the vertical menu is written with tables while the floating menu has a div tag around it. this is the style for the vertical menu Code:
table.topnav
{position: relative;
top: 0;
left: 0;
padding-left: 2px;
}
table.menu
{position: absolute;
bottom: 0;
z-index: -1;
}
.pad{padding-top: 2px;}
.banner{z-index: 1;
position: relative;}
and this is the style for the floating menu Code:
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
thank you xia Hello, I'm trying to replace one CSS nav menu with another, is there anyone who is familiar enough to assist me? |
|||||||