|
CSS - Overwriting A Style In The <head>
Hello,
I am hoping someone can help me. I've tried googling this and am not finding anything that helps or makes sense. I'm still relatively new to CSS. Anyway, here's my issue: I have a jquery navigation and have a style for the list in my <head> section. On one of my pages, I want to have a regular, vertical, bulleted list but something isn't letting it be vertical. I *think* it's the <head> style but I'm not sure. Would someone please have a look? Here's the HTML: [code] <script type="text/javascript" src="js/font_size.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!-- navigation code adapted from code --> <script type="text/javascript" src="js/jquery.bgpos.js"></script> <style type="text/css"> ul {list-style:none;margin:0;padding:0;} li {float:left;width:110px;margin:2px;padding:0;text-align:center;} li a {display:block;padding:5px 10px;height:100%;color:#580d0a;text-decoration:none;border-right:2px solid #847f2e;border-bottom:2px solid #847f2e;} li a:hover, li a:focus, li a:active {background-position:-150px 0; color: #ebce72;} #nav a {background:linktomy(img/nav_bar.png) repeat 0 0;} </style> <script type="text/javascript"> $(function(){ $('#nav a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="primary_container"> <div id="logo"> <a href="index.html"><img border="0" src="img/3hearts.png" alt="Heart Homes Tucson" /></a> </div> <div id="nav_bar"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a class="nav-on" href=""><strong>Services & Locations</strong></a></li> <li><a href="">Faithful Heart Home</a></li> <li><a href="">Loving Heart Home</a></li> <li><a href="">Young at Heart Home</a></li> </ul> </div> <div id="text_container2"> <h1> Services</h1> Tucson Heart Homes believes that everyone deserves the best care which is why our many services include: <ul top="-10px" left= "20px" list-style="disc" display="list-item"> <li>3 home-cooked and nutritious meals, as well as snacks, daily</li><br /> <li>24-hour State Certified Caregivers</li> <li>Fun daily activities designed to meet residence needs</li> <li>Personallized care plans by our Registerd Nurse</li> [code] .... etc I've tried creating a separate div in my CSS, I've tried putting the settings in here, nothing is working.... The CSS I have for the nav is: [code] div#nav_bar{ position: absolute; top: 125px; left: 5px; } ul#nav{ display: block; width: 150px; padding: 5px 18px; margin: 5px; margin-bottom: 5px; } [code] Any help is greatly appreciated! This is my final project for a class and this is the LAST thing not working. Thank you! SMCorning Similar TutorialsOr can it be within the body tag? What is the standard? TIA Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. I have a div containing some content from a database like so: Code: <div class="container"> Dynamic Content Here!!! </div> now, the dynamic content contains its own div and span elements, with their own css style attributes. Is there a way to make sure I overwrite the style elements of the inner divs/spans? I've tried applying classes to the div buts thats about all I can think of!? cheers, tom Dear all. Trying to overwrite a general <a>-formatting. For <a> <img /> </a> I do not want to have this formatting. How can I do this? I appreciate if you spend some time looking on this snippet (also via attachment). What should happen: The <a>-Tag makes show a small x in front of the link. For <img>-Tags included in <a> I don't want to show them. Any ideas? Code:
body {
background-color: #C1CDA9;
}
a {
background-image: url(arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;
}
a img {
border: 1px solid white;
background-image: none; /* ??? should remove background (cross) from picture 4 */
}
#element {
background-color: lightgrey;
border: 1px solid grey;
}
#element a img {
border: 5px solid red;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<a href="#">Link</a><br />
1<img src="eyecatcher.gif" /><br />
<a href="#">2<img src="eyecatcher.gif" /></a><br />
<div id="element">
<a href="#">Link</a><br />
3<img src="eyecatcher.gif" /><br />
<a href="#">4<img src="eyecatcher.gif" /></a><br />
</div>
</body>
</html>
Attempting to inherit all main attributes of a column, and modifying few, what is the correct way to inherit/overwrite the attributes of col3 here ? Code: .col3, col3b {
float: left;
position: relative;
background: #FFFFFF;
width: 25%;
height: 80%;
left: 3%;
border-left: 1px solid #333;
margin: 3px 2px 4px 0;
}
.col3b {
border-left: none !important;
}
Tried as well like: Code: .col3 {
}
.col3 .col3b {
border-left: none !important;
}
note: not talking about a single 'inherit' value I have a list, within a narrow width. Several items are too wide, and wrap. This would be okay, but the next line is then written on top of the wrapped text. What property could I use to prevent this? An example is in the image below: I have 2 content areas. One with id sidebar2 and another with id maincontent. I want the links in these separate content areas to have different hover colors and possibly other characteristics. My problem is, the styles for sidebar2 are being overwritten by the styles in maincontent as it is below it in the style sheet (cascade). The hover of the words "Good Game" in this example is green which clashes with the background of the sidebars content. It should be a blue color. Why does a completely separate id overwrite the styling in a previous id? How can I improve this code to get the desired results. Line numbers eg (line 140) are just referencing where the code appears within the stylesheet and are not actually in the css sheet. HTML example: <div id="sidebar2"> <h1>Daily Content</h1> <ul> <li> <a href="(URL)">Good Game</a> </li></ul> </div> #sidebar2 li a:link, li a:visited (line 140) { text-decoration: none; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #336699; } #sidebar2 li a:active, li a:hover (line 148) { text-decoration: none; color: #2986aa; text-indent: 5px; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; } #mainContent a:link, li a:visited (line 157) { text-decoration: none; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #003366; } #mainContent li a:active, li a:hover (line 166) { text-decoration: none; color: #99cc66; text-indent: 5px; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; } Colleagues, I seem to be having an issue on a page I am developing, where I am using CSS to position many of my elements. I have a banner at the top, and then have used absolute positioning of a couple of flash movies, a graphic and a javascript menu. I have used Xara Webstyle for creating the JS-based Menu. The problem I am experiencing, is that these are positioned in the order I mentioned, from the top to the middle of the page. I also then have some CSS positioned items below the menu. This menu is a tiered, or flyout menu of sorts, and when it drops down is should overlap the absolutely positioned items in the bottom of the page, but those items are overlapping the menu, I assume, because they are absolutely positioned. What I would like is to make the bottom items "go to the background" so to speak, so the javascripted menus writes over them. Is there some setting I am missing that would allow these bottom elements to be in background, so to speak, so that the menu drops will be on top?? Thanks for your help, in advance. Kork I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I'm trying to figure out why part of the image on a website I'm working on isn't fully showing. Here is the reference url: URL Look on the right hand side of the "Who Are You?" green box and you will see that the black drop shadow is missing in this section. It's actually there, but has slid under one of the other images. I've tried to figure out how to get it back without messing everything up but cant. Please advise. Ok, I am having some issues on the width of my body (I think). It displays correctly on normal size screens but on my imac there is dead space to the right. There is also two link buttons that have a picture above and below it and for some reason that makes it not clickable. I have tried the overflow:hidden option and that doesn't seem to do anything. I have attached a pic below so that you can see what I am talking about. Not sure what is going on here but if you have a minute to make some suggestions I would be very grateful! Here is my CSS. Please let me know if you see anything obvious here. body{ margin:auto; padding:0; background:#000 url(images/headBg11.png) repeat; width: 100%; } #b_Head{ width:100%; height:150px; margin:0px; padding:0px; background:url(images/headBg.gif) repeat-x; } #bg_Head{ width:934px; height:315px; margin:0 auto; padding:0px; } #logo{ width:235px; height:53px; margin:75px 0 0 110px; padding:0px; float:left; color: #fff; font-size: 46px; position: absolute; } #logo span{ font-family:Tahoma; font-size:58px; color:#297f50; font-weight:bold; line-height:50px; margin:0px; padding:0px; } #banner{ width:450px; height:156px; margin:20px 0 0 7px; padding:0; float:left; background:url(images/banner.png) no-repeat; position: absolute; color: #fff; } #b_Wrap{ width:934px; margin:auto; padding:0; background:#fff url(images/page.gif) repeat; height: 900px; } #content{ width:100%; margin:0 auto; padding:33px 0 0px 0; } .borderLeft { width:5px; height:862px; padding:0; float:left; background:url(images/bborder.png) repeat-y; } .borderRight { width:5px; height:862px; padding:0; float:right; background:url(images/bborder.png) repeat-y; } #rigtPanel{ width:218px; margin:30px 0 0 0; padding:0 0 0 10px; float:left; margin-top: 40px; } #rigtPanel .services{ width:218px; margin:0px; padding:0px; float:left} #rigtPanel .services ul li a{ width:55px !important; height:16px; margin:25px 0 0 0; /* [disabled]margin-left:5px; */ padding:0px; float:right; font-family:Arial; font-size:10px; color:#000000; line-height:14px; text-align:center; text-decoration:none; border:#bdbcbd solid 1px; background:#FFFFFF; /* [disabled]overflow: hidden; */ } #rigtPanel .services ul li a:hover{ text-decoration:none; /* [disabled]background: #cccccc; */ } #rigtPanel .services ul li .author{ width:130px; height:21px; margin:-25px 0 10px 0; padding:0px 0 0 32px; float:left; font-family:Arial; font-size:11px; color:#343434; line-height:20px; background:url(images/author.jpg) no-repeat 10px 0; } #rigtPanel .borderBottom { width:177px; height:21px; margin:-5px 0 0 0px; padding:5px 0 0 40px; float:left; background:url(images/border.png) no-repeat; } #rigtPanel .borderTop { width:177px; height:21px; margin:-25px 0 0 0px; padding:10px 0 0 40px; float:left; background:url(images/border.png) no-repeat; } #rigtPanel .services ul li .author span{font-weight:bold} How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
Hai guyz!! I've been workin' on this website template since December and I was just wonderin' if you guyz (the pros) would share your opinion on the design -- pretty peasss! http://i898.photobucket.com/albums/ac183/micha8l/web_page.png k thx, Mike Can anybody solve the mystery of what's going on on this page?: http://www.j-archive.com/showscores.php?game_id=3346 The "Jeopardy! Round" score table and the "Double Jeopardy! Round" score table should look exactly the same, but on my browsers (Chrome 4 and IE6) the "Double Jeopardy! Round" table has a wider td for the first row. It's as if it's "inherited" the width of the tds that follow it (or perhaps came before it?)... I've checked over the markup and the CSS several times and I can't find any errors that would cause this. What's going on? Thanks-- Hi all, I was wondering if anyone could help me create a new bar similar to that on DeviantArt. I've had a shot at it, but mine shifts when you put the mouse over it and I don't know why. There seems to be enough room for it etc. Here's my homepage so you can see what I mean - http://www.ltheobald.co.uk Here's what I have so far... Code:
HTML (cut down version - just one button):
<table height="100%" width="100%" cellspacing="1" cellpadding="0">
<tr height="34px">
<td class="NavHolder">
<div class="NavButton" onmouseover="this.className = 'NavButtonOver';" onmouseout="this.className = 'NavButton';">
<table class="NavButtonTable">
<tr>
<td class="NavButtonPic">
<a href="index.php"><img src="images/home.gif" alt="Home"></a>
</td>
<td class="NavButtonText">
<a href="index.php">Home</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS:
.NavHolder {
padding: 3px;
background-color: #AACCFF;
}
.NavButton {
float: left;
}
.NavButtonOver {
float: left;
background-color: #8CAAD4;
border: 1px solid black;
}
.NavButtonTable {
padding: 0px 5px;
}
.NavButtonPic {
}
.NavButtonText {
vertical-align: middle;
Font-Size: 11px;
}
No idea why NavButtonPic is there. I'll remove that later. Anyway, can anyone see from this why the buttons are shifting? Also if anyone can tell me how to get a rounded rectangle border like on DeviantArt (http://www.DeviantArt.com), I'd like to know. Thanks, Lee |
|||||||