|
CSS - Blogger Navbar Drop Down Color
Hey, I am trying to edit a blogger template. What I want to do is make each drop down menu a different background color. SO like one item says 1 (hover) 2 | 3 | 4 (background is red) next to 1 is 5 (hover) 6 | 7 | 8 (background is green).
Here is the layout and an example @ www. faketester.blogspot .com Similar TutorialsHere's my CSS. Code: body { margin: 0; paddeing: 0; } #overall { padding: 0; margin: 0; } #content { padding-top: 40px; padding-left: 10px; } #nav { width: 100%; float: left; margin: 0 0 0 0; height: 30px; padding: 0 0 0 0; background-color: #660000; boder-bottom: 1px solid #000000; } #navbar { margin: 0; padding: 0; border-bottom: 1px solid #000000; height: 30px; background-color: #660000; } #navbar ul { list-style: none; width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; padding: 0; } #navbar li { list-style: none; margin-left: auto; margin-right: auto; width: 150px; height: 30px; background-image:url('images/block.jpg'); float: left; } #navbar li a { display: block; margin: 0 0 0 0; padding: 5 0 6 0; text-align: center; color: #ffcc00; text-decoration: none; } #navbar li a:hover { background-image:url('images/blockselect.jpg'); } #navbar li ul { display: none; width: auto; background-color: #660000; } #navbar li:hover ul { display: block; position: absolute; margin: 0; padding: 0; } #navbar li:hover li { float: none; } #navbar li: hover li a { background-image:url('images/block.jpg'); color: #ffccoo; } #navbar li li a:hover { background-image:url('images/blockselect.jpg'); }
And my HTML: Code: <link rel="stylesheet" type="text/css" href="style.css"> <div id="overall"> <div id="nav"> <div id="navbar"> <ul> <li><a href="#">Item One</a><ul> <li><a href="#">Sub Item One</a></li> <li><a href="#">Sub Item Two</a></li> <li><a href="#">Sub Item Three</a></li></ul> </li> <li><a href="#">Item Two</a><ul> <li><a href="#">Sub Item Four</a></li> <li><a href="#">Sub Item Five</a></li> <li><a href="#">Sub Item Six</a></li></ul> </li> <li><a href="#">Item Three</a><ul> <li><a href="#">Sub Item Seven</a></li> <li><a href="#">Sub Item Eight</a></li> <li><a href="#">Sub Item Nine</a></li></ul> </li> </ul> </div> </div> <div id="content"> Sauce </div> </div> Now, here's what I want to do: Take the nav-bar, and center it horizontally across the page. However, I want to retain the drop-down box background image and width, so the image doesn't get screwed up. I'd also like (rather than the nav bar wrapping to the next line) when the window gets too short, for a scroll bar to appear. Here's my question: HOW THE HECK? I started trying to learn CSS a couple years ago, never really got into it. Trying again, but I need help... dimensions of the background image(s) are 150x30. Ok so I've got a dropdown menu (what you use to select size/font/color when posting a thread) for a search form i'm doing, but the thing is nothing i seem to do in css seems to be able to get rid of the ugly grey outline and grey dropdown button, but as i'm seeing here on the forums the same ugly grey outline appears, is this a problem that is only resolved with like the latest version of i.e., is it possible or not? Thank you, Robert Velasquez UpBeetMusic.com Help! I've spent WAY too much time on this....you wouldn't believe! I made a sliced image header in Photoshop and put it on my site using Dreamweaver. The home page and the calendar page built in Dreamweaver look fine. However, the other pages are actually a Blogger blog at a subdomain. When I put the header in the blog, it does wonky stuff! It looks worse in IE and Firefox (well, maybe--the last code testing did make IE look better). I know its a CSS problem. I've tried lots of different things and have watched them make changes, but nothing fixes it. I don't want to start all over and have my time be a total waste. I am only self-taught on all this stuff, so I think I need someone more knowledgeable to help me. The site is a www hanoverlutheran.com (I understand it takes 5 posts before I can share links, so that's abbreviated). Oh please! I hope someone has the answer! I spent 12 hours alone on it yesterday and many more today! I'm having trouble getting a layout to look correct in IE (i know same old story) Looks fine is Fire Fox. Here is a link to see what the problem might be Let me know if you need to see the source code. Thanks, Jrock For the life of me, I can't figure out what is causing this problem. One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain. I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines. If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something... Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? 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. 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. 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. 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? Hello, This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway... I finally got my buttons to work! It's time for the Smirnoff! But my button are still giving me ...! Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking... Everything checks out with W3C except my buttons. Here's the html: Code: <div> <span id="navcontainer1" class="button1"> <ul> <li> <a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer2" class="button2"> <ul> <li> <a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer3" class="button3"> <ul> <li> <a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer4" class="button4"> <ul> <li> <a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer5" class="button5"> <ul> <li> <a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li> </ul> </span></div> Don't laugh...they work! Here's the stylesheet: Code: .button1 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}
#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}
.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}
#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}
.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}
#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}
.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}
#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}
.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one.
left: 520px;
}
#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}
#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}
W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!) I was just thinking if they could somehow "validate" then maybe they would be more predictable. Any suggestions? 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. Greetings, I am attempting to increase the space between the navigation links listed on the left column of this index page. fop27.org/fopnet/FPT/ I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page. I have minimal knowledge of css and would greatfully appreciate any assistance. All the Best! I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav. Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16 If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16 In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from a list apart. Here are the things I'm struggling with: 1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left. 2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area. The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list) Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless. Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute. Thanks! Arg, I want a simple, yet clean and cool looking navbar. I am using a modified style from oswd.org and it has something like this: (solid line) ------------|Linkone|----|Linktwo|----|Linkthree|---------- like that with boxes around the links. I like it but if I add to many links and then view it with a very small resolution it doesn't look so good. It all splits up onto different lines and there is still only one solid line. I know a good bit about CSS so what do you think I should try? Tabs? Just a plain old simple line of lines that have color and stuff? |
|||||||