|
CSS - Css Navigation Or Background Change
Hi all,
I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/ I have a horizontal navigation towards the top. Here are my queries: I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change. OR Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS? Please help!!! Thanks! Janusz Similar TutorialsI have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! I am going to heck right now trying to get this navigation to work. Here is what it is A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise? I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px. I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions. Thanks for your help! Open in FF to see how it's supposed to work: Open in IE to see problem. Here's the HTML Code:
<div id="Menu">
<div id="nav_header">
<div id="text">
Admissions & Financial Aid
</div>
</div>
<ul id="nav_level_1">
<li id="submenu"><a href="../index.php">Applying to Union</a></li>
<ul id="nav_level_2">
<li id="nav_active"><a href="index.php">Types of Admission</a></li>
<ul id="nav_level_3">
<li><a href="Transfer.php">Transferring to Union</a></li>
<li><a href="Early.php">Early Decission</a></li>
<li><a href="Regular.php">Regular</a></li>
<li><a href="international.php">International Admission</a></li>
<li><a href="aop_heop.php">AOP/HEOP</a></li>
<li><a href="Medical.php">Eight-year Medical</a></li>
<li><a href="Law.php">Six-year Law</a></li>
<li><a href="MBA.php">Five-year MBA</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../Applications.php">Apply Online</a></li>
<li><a href="../Forms/index.php">Download Application Materials</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../../FAQs/index.php">Have a Question?</a></li>
<li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>
<li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>
<li><a href="../../interviews.php">Interviews</a></li>
<li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>
<li><a href="../../About/index.php">Admissions Staff</a></li>
<li><a href="../../AlumniAdmissions/index.php"></a></li>
<li><a href="../../Media/index.php"></a></li>
<li><a href="/union/admissions/Viewbook/index"></a></li>
<li><a href="/union/admissions/Alumni/index"></a></li>
<li><a href="../../sample.php"></a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
</div>
Here is the pertinent CSS Code:
/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color: #d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#nav_level_2 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
#nav_level_3 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#e5dece;
line-height:17px;
word-wrap: break-word;
}
/* End unordered list base styles */
/* To get indented, wrapping, text that's cross browser compatible
we need to additionally style the unordered lists and line items under each top <ul>
*/
#nav_level_1 li {
margin-left:20px;
}
#nav_level_1 li ul {
margin-left:-20px;
}
#nav_level_2 li {
margin-left: 40px;
}
#nav_level_2 li ul {
margin-left:-40px;
}
#nav_level_3 li {
margin-left:60px;
}
#nav_level_1 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 4px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 20px;
}
#nav_level_2 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 24px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 40px;
}
#nav_level_3 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 44px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 60px;
}
#Menu #submenu {
list-style-type: circle;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#submenu2 {
list-style-type:circle;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
Hi, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this? Here is my code - Code: @import url('layout.css');
body {
background-image: /images/skyBACK.gif;
background-repeat: repeat-y;
background-attachment: scroll;
background: url('images/skyBACK.gif');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#container {
width: 1020px;
margin: 10px auto;
}
#masthead {
text-align: center;
width: 698px;
height: 140px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fafaff;
}
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#content {
float: left;
width: 518px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#footer {
text-align: center;
clear: both;
width: 698px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
color: #3d6c87;
}
#masthead h3 {
color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a {
color: #0033ff;
text-decoration: none;
display: block;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a:hover {
color: #fff;
text-decoration: none;
border: 1px solid #5f8ea9;
background-color: #5f8ea9;
}
/* Content Styles */
h6 {
color: #000000;
}
h5 {
color: #000000;
}
h4 {
color: #000000;
}
h3 {
color: #000000;
}
h2 {
color: #000000;
}
#content h1 {
color: #000000;
}
#content img {
padding: 1px;
border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
color: #808080;
margin-top: 5px;
}
#footer a {
color: #5f8ea9;
text-decoration: underline;
}
#footer a:hover {
color: #33627d;
text-decoration: none;
}
a {
color: #0033ff;
text-decoration: underline;
}
a:hover {
color: #33627d;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
This is very strange to me any help would be greatly appreciated. Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area? Thank you I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS Hi All, Anyone know of a way to change acheive this behaviour? I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself). Thanks in advance for any pointers. Cheers, :)Ben Trying to get my td backgrounds and my links to change colors when you roll over into the td. However only both change when you roll over the link within the td. If you roll over just the td, it changes, but I need both the link color and the bg color to change when you roll over the td. Here's what I'm going for, the category set up I mean: http://www.colemancampingstore.com/link-hiking.html Here's my CSS etc. PHP Code: td:hover.cats { background-color: #446644; color:white; } a:link.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; } a:visited.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; color: #000; } a:hover.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } a:active.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; } echo "<td class='cats' ><center>"; echo "<b><a href='links.php?cat=".$myrow['cat']."' class='catlink'>".$myrow['cat']." </a></b><br>"; echo "</center></td>"; } Is there a way to achieve this effect without using javascript and junk? I have a list of things, and i would like it to change the entire background of the item scrolled over... I don't want it to be a link, just change the background of the div when it is scrolled over. Guys, Im new to UI design, pls help... This is a part of my code - Code: <div class="yellow"><a href="#">test link 1</a></div> <div class="yellow"><a href="#">test link 2</a></div> <div class="yellow"><a href="#">test link 3</a></div> Now when i click on a link, the css class "Yellow" should be changed to class "Red" - (the div has yellow css class by default, when a link is clicked the css class for the div should be changed). And when the link on the second div is clicked, the first div should go to its default class (yellow) and second div (the one clicked) should change its class from yellow to red. Please Help. Thanks. I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks! Cheers ~Kat Menu bar at: (cater-express dot com) Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad Hi All I wonder if someone can help me, I would like to change background and foreground colour of two <td>'s that are in One <tr> . This is the tricky part, I want it so that when I Hover on <tr> one <td>'s Foreground colour is changed and other <td>'s Background colour. To me that seem impossible in css alone and if that is not the case can someone please enlighten me. Thanks Hi, I have 5 input textbox in my page. I want to change the background color of one input textbox to red. How to change the color of the input box to red? Thank you I have these two areas. Code:
.MenuItem {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:0px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
.MenuItemTop {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:2px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code:
.MenuItemTop a:hover, .MenuItem a:hover {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
background-color:#000000;
}
Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad Using transparent gif text. It is linked On mouse over, there is a white background with an opacity of 50%, can I do this with only CSS or will I need to use javascript? How do I do this? I've figured out the opaque text on 50% opaque white background. hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is: http://rollinlow54.com/galleries/ now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he http://rollinlow54.com/fixme.php Here is the CSS for the code in the first page: Code: #links a
{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 4px;
padding: 3px;
text-decoration: none;
width: 170px;
float: left;
background-color: #3A628A;
color: white;
font-family: arial, verdana, sans serif;
font-size: 11px;
}
#links a:hover
{
text-decoration: none;
background: #0A2F54;
}
that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML: Code: <div id="links">
<a href="http://rollinlow54.com/">galleries (18)</a>
<a href="http://rollinlow54.com/">site statistics</a>
<a href="http://rollinlow54.com/">download my resume (pdf)</a>
<a href="http://rollinlow54.com/">contact information</a>
<a href="http://rollinlow54.com/">visit company site</a>
</div>
there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this?? I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div. It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow. As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special. Code: #sect1 ul.stories a:hover{
background-color:#d9f7ff;
color: #71808F;
}
Thanks! cae i have been using the website tonight program on godaddy.COM i would like to change the background to a personal picture i have. when i called they told me they had no idea how to do it but it might have something to do with the css and to view the advanced css option here is what i found : Code: /*----------------------------------
Theme411_Clean_Slate
Cat Generic
----------------------------------*/
body {
font-family: "Times New Roman", Times, FreeSerif, serif;
}
.sf_outer_wrapper {
}
.sf_extra1 {
}
.sf_wrapper {
}
/*--------------------------------
Top Navigation
---------------------------------*/
.sf_navigation_top {
display: none;
}
.sf_navigation_top ul{
}
.sf_navigation_top ul:after{
}
.sf_navigation_top ul li {
}
.sf_navigation_top ul li.sf_last_nav_item{
}
.sf_navigation_top ul li.sf_first_nav_item{
}
.sf_navigation_top ul li a {
}
.sf_navigation_top ul li a:visited {
}
.sf_navigation_top ul li a:hover {
}
/*--------------------------------
End Top Navigation
---------------------------------*/
.sf_extra10 {
}
/*--------------------------------
Header
---------------------------------*/
.sf_header_wrapper {
}
.sf_extra2 {
}
.sf_main_header {
}
.sf_extra3 {
}
.sf_sub_header {
}
/*--------------------------
End Header
--------------------------*/
.sf_extra4 {
}
/*--------------------------------
Bottom Navigation
---------------------------------*/
/**
* @section navigation
*/
.sf_navigation {
padding:0;
margin: 0;
}
.sf_navigation ul {
height: auto !important;
height: 9%;
list-style-type:disc;
margin:0;
padding:0 0 0 30px;
width: 900px;
}
.sf_navigation ul li {
margin:5;
padding:0;
width:200px;
}
.sf_navigation ul li a {
display:block;
margin: 0;
padding:0;
text-decoration: none;
width:175px;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
}
/**
* @section subnav
*/
.sf_navigation ul.subnav {
background:#ffffff;
left: -999em;
list-style-type:none;
margin:-1.12em 0 0 160px;
padding:0;
position: absolute;
float: left;
width: 170px;
z-index:1000;
}
.sf_navigation ul.subnav li {
float: left;
width: 170px;
margin:0;
padding:3;
}
.sf_navigation ul.subnav li a {
width: 170px;
display: block;
padding:2px 0;
margin: 2;
background-image:none;
}
.sf_navigation ul.subnav li a {
text-decoration:none;
}
.sf_navigation ul.subnav li a:hover {
background:#f1f1f1;
text-decoration:underline;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe {
position: absolute;
left: 4;
top: 3;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
/*--------------------------------
End Bottom Navigation
---------------------------------*/
.sf_extra5 {
clear:none !important;
clear:left;
}
/*--------------------------------
Page Title
---------------------------------*/
.sf_pagetitle {
color: 000000 ;
}
/*--------------------------------
End Page Title
---------------------------------*/
.sf_extra6 {
}
.sf_extra11 {
}
/*--------------------------
Content
--------------------------*/
.sf_content {
}
.sf_content img {
}
/*--------------------------
End Content
--------------------------*/
.sf_extra12 {
}
.sf_extra7 {
}
/*--------------------------
Footer
--------------------------*/
.sf_footer {
clear: both;
}
/*--------------------------
End Footer
--------------------------*/
.sf_extra8 {
}
.sf_extra9 {
}
/*--------------------------
Extra Stuff
--------------------------*/
a:link {
}
a:visited {
}
a:hover {
}
.sf_banner {
margin: 40px auto 0 auto;
text-align: center;
}
.sf_banner a{
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
PLEASE HELP ME WHAT DO I DO TO CHANGE MY BACKGROUND TO A PERSONAL PICTURE I HAVE Nevermind, fixed. Changed Pixels into Percentages. Delete thread. |
|||||||