|
CSS - 'overwriting' Css Within A Div?
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 Similar TutorialsDear 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 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; } 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 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: 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 |
|||||||