|
CSS - Second Navbar For Active Page & Additional Links
Similar TutorialsWhen I use a the page title as a link, to go to a category or external page, in WordPress (most recent version) the page title with a link rather than just text in the title, gets moved about 3px down in stead of staying in line with the rest. I am using the Graphpaper Press Gridline Lite theme. the Website is gregdelima.com and the relevant CSS is: gregdelima.com/wp-content/themes/gridline_lite/gridline_lite/style.css Hi, I wanted to make active page link as bold and blue. When I hover the menu/link it works but when I click the menu item/link it doesn't. Here is my script. Please help its driving me crazy. #menu { font-family: "trebuchet ms", verdana, sans-serif; font-size: 14px; font-weight: none; position: absolute; height: 27px; top: 60px; left: 0px; width: 100%; padding: 0px; color: #000000; background-color: #eee } a:link { font-weight: none; text-decoration: none; color: #000; } a:visited { font-weight: none; text-decoration: none; border-bottom: 1px dotted #369; color: #000; } a:hover { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } a:active { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } #menu a:active { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } Whats' wrong with this? a:active doesn't seem to work at all: Code: <style type="text/css">
#navcontainer
{
margin: 5px 0 0 5px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
background: #000000;
width: 80px;
height: 18px;
border-top: none;
border-left: 1px solid #9B9B9B;
border-bottom: none;
border-right: none;
padding: 0;
margin: 0 0 5px 0;
font-family:Arial, Helvetica, sans-serif;
color: #26DC18;
font-weight:bold;
text-decoration: none;
display: block;
text-align: center;
}
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
#navcontainer ul li a:active
{
background: #000000;
color: #fff0000;
}
</style>
HTML [CODE<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Home</a></li> <li><a href="inventory.php">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> [/CODE] P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be. Thanks! Hi, there - I'd like to add some Google Ads to my website. In order to do so without compromising the original layout, I am looking for help to create a floating layer containing the ads - this way, I can position the ads automatically as far to the right of the screen as possible without stretching the fixed width of the website. Any ideas? Thanks in advance! I know I am going to sound very silly in this, I have only very basic knowledge of CSS, other than that I only know bits of HTML. I haven't tried making a site for a couple of years, and I've only ever made sites with frames before. Now everyone is telling me that you really shouldn't use frames because they cause all kinds of problems with links/search engines/ etc. So I've used CSS to make the layout, very basic- column of links on left, content on the right. The thing I can't get my head round is that all the content has to be on every single page, so that each one has all the links on the left coded into it... so if I want to alter this menu at all, say to add or remove a link, I have to edit every single page, which is 200+ pages! Surely there is a way to not have to do this? To somehow set a template for the content etc so that I dont have to press copy paste 200 times! Or am I just going to have to deal with it? It seems so mental after how easy it is to change things with frames! Thanks so much for any help you can offer. I want to show in a page two different link styles, to achieve this I have created two css files, one for each link style, and I have attached it in the page thus: Code: <html> <head> <title>Link format test</title> <link href="StylesCSS/link1.css" rel="stylesheet" type="text/css"> <link href=" StylesCSS/link2.css" rel="stylesheet" type="text/css"> </head> <body> Then I have applied the styles thus: Code: <a href="index.aspx" class="letterLink1">Home</a> <a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a> And both css files are as follow: link1.css Code:
a:link {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
.letterLink1 {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
link2.css Code:
a:link {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
a:hover {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
a:active {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
.letterLink2 {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
But when I load the page, the link1 a:hover and a:active are showed as link2 a:hover and a:active. What is wrong? Thank you, Cesar ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top. i am trying to do something like this but my page just gets messed up if i move the links to below. page layout: Code: <div> //overall <div>//top> <div>side Links/menu <div>contents <div>footer Hello I am trying to fix my links so they remain in the same place regardless of how large the users window is when they browse the site. I have tried using the following code in my style sheet. h3 { position:absolute; bottom:330px; top:670px; } but the link still moves around when you minimise the browser on the site. Bear in mind I have a think black border as well which runs all around the screen. Any help would be much appreciated. I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? Firstly I'm a new member here so hi to everyone. I am fairly new to css. I am trying to create a navbar menu with css, I have used ul and li for the links and its positioned on the left hand side of the page, just where i want it, but my problem is I cant seem to get my text paragraphs to lie at the side of the navbar, they either are above it or below it, obviously im doing something wrong but not sure what. Many Thanks. I found a horizontal Dropdown menu I really want to emulate he Austin360.com What I like about it is that the widths of the top level list items adjust to the widths of their text -- rather than all being the same width. Also the top level list appears to "stretch" horizontally, filling up the entire width of the container. (Although I can't see any widths anywhere in the stylesheet!) How'd they do that? Hi all, I recently started making a site is css and I had no problems until I came to making the navigation bar. Now I want to have like a button effect on the text so I made this: Code: a.navbar:link {
display:block;
position:absolute;
height:25px;
width:150px;
background-color:#FFCC99;
top:40px;
left:0px;
z-index:1;
}
The only problem is that if I apply this to all my navbar links they overlap each other because the positioning is always the same. Any help much appreciated! Jack. Hi, Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down. Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link.. Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner).. any thoughts? www. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } I'm very new to CSS, and I'm learning to use div tags for my layout. My navbar is a div within my header div, and it's not lining up the way I'd like. Here's a link for an example: www . cooperworkskilns . com The Home button should be at the bottom left of the header. Here's the pertinent css: #header{ margin:0px 0px 10px 0px; padding:0px; width: 700px; height: 125px; border-bottom: 1px solid #666; background-image:url(../img/header.gif); } #navbar{ margin:0px 0px 0px 0px; padding:0px; width: 700px; } Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code:
#navbar ul {
margin: 10px auto auto auto;
padding: 6px;
list-style-type: none;
text-align: left;
background-color: #000;
font-family: arial;
}
#navbar ul li {
display: inline;
font-family: arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #000000;
font-family: arial;
}
#navbar ul li a:hover {
color: #000000;
background-color: #ffffff;
font-family: arial;
}
And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif. what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css. should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated. |
|||||||