|
CSS - Changing The A Href Style According To The Outer Div
Hi,
My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! Similar TutorialsI need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> I don't know if this is possible but I want to change the background color of some tables programmaticly basically what's happening is I'm ruining some asp.net code which is checking to see if something is approved or not. if it's approved then I want to change the color of the background for one of the HTML tables. if it's not approved then i want to leave it as the default background color. is there a way to do this? Thanks for the help I have a webpage that has a Link tag that links to a style sheet Code: <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" /> </head> <body> Test 0.0.1 </body> </html> However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet Code: <html> <head> <style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style> </head> <body> Test 0.0.1 </body> </html> This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally. I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag. I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings. You can see an example of this here madaboutbrighton.net/test This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings. I am baffled. All ideas most welcome, or even just let me know if you are having the same problem. Cheers!!! ok easy one. basically i have a links outside a div and inside a div called footer. how do i do it so that the links inside the footer div dont take the css style of the one outside? i am trying to do: #footer.a:hover { } and tried a:hover#footer but it aint working? edit never mind!!! I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried Code: style.cursor='hand' with both onmouseover and onmousehover. Neither works. Hi, First post to what looks like a great forum! OK, little problem and I wonder whether anyone can help. I have a page with three frames, two (top and bottom) on the left and one large delivery frame. At one stage, I want to open an external page in the main frame but change its style sheet to my own one. I know I can do this using my browser's own style sheet capability, but I need to do this for everyone who visits. Its a long story, but there are no copyright problems as I do own the copyright to the other site, I just don't have a programmer to change the dynamically generated webpages at the moment. Many thanks, Rohan hello, Im running a website that uses the hover css style to change the button from a darker colored text to a lighter colored text (two different images) but when I go to the web page and hover over it it disappears, only for a second but its still annoying, and then replaces it with the new image. is there any way to get rid of this brief disappearance? I'm testing this page in FF 3.6, so at the moment, I don't really care what doesn't work in IE. As you can see in the code below, my page consists of a couple wrapper divs around a menu and info area. I did solid color backgrounds in the code below rather than the images I've been using to make this simpler to look at. Essentially, the outer wrappers allow part of the background image of the inner wrapper to disappear when the window is too small. In addition to that functionality, I also want the info area to shrink when the window gets even smaller than that. As it is currently, that almost works--the two wrappers shrink when I get below their max-width, but the info area does not shrink until the window is well within its max-width. Here's the code: Code: <html>
<head>
<style type="text/css">
body{
text-align: center;
}
#container {
background-color: red;
max-width:990px;
min-width:760px;
position: relative;
margin: 0 auto;
}
#content{
background-color: lightblue;
max-width:990px;
min-width:760px;
margin: 0 auto;
margin-left: -200px;
padding-left: 200px; /**allows 200px of background to disappear when window too small**/
text-align: left;
}
#menu{
background-color: #ffffcc;
width: 200px;
position: absolute;
left: -20px; /**allows hangover into disappearing background--no padding necessary since will be using img links**/
}
#info{
border: #000 1px solid;
max-width: 790px;
min-width:560px;
/**doesn't shrink when window below the max, even though container and content do**/
position: relative;
left: 180px; /**width of menu plus menu left **/
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="menu">
<img height="50" width="200" alt="link" /><br />
<img height="50" width="200" alt="link" /><br />
</div>
<div id="info">
<img height="500" width="400" alt="picture" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Edit: I've found that if I make the menu relative positioned and position info absolute (and add top: 0px;) that I can get info to shrink properly. However, then the background from content is only as tall as the menu--which may or may not be shorter than the content in info. If I make the height of content 100% it looks ok, but not the way I'd like it to look. I can live with the extra background under the words in the case where there isn't enough to fill the whole height of the window, but if the window isn't tall enough for all the stuff in info, the background doesn't extend down far enough. Thanks for any ideas! Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! HI, Not only is this my first time posting, its my first site ever built using CSS (trying to learn as I go). The page displays fine in IE7 but my content boxes are outside of the wrapping container in Firefox, tried to figure it out myself, but don't really know enough yet. (URL address blocked: See forum rules) The CSS is embedded in the head of the page. Any help is much appreciated, Regards Fiona Hi, I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this: Code:
| |
----------------------
| |
----------------------
| |
Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to). Thanks Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg 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! How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. how may i define that <a name> is not related to general selector by <a> tag? e.g. i don't want when i mouse over <a name> to change its color defined ny a:hover. assidning separate class to them is nightmare. Code:
<div id="topNav">
<ul id="cssdropdown">
<li class="topNavTitle"><a href="" class="atopNavTitle">---A---</a>
<ul class="subuls">
<li><a href="a.php">AAA</a></li>
<li><a href="b.php">BBB</a></li>
</ul>
</li>
<li class="topNavSep"></li>
<li class="topNavTitle"><a href="" class="atopNavTitle">---B---</a></li>
</ul>
</div>
<style type="text/css">
li.topNavTitle a.atopNavTitle {
margin-top: 20px;
padding-top: 20px;
}
</style>
Hi, I am trying to move <a href="" class="atopNavTitle">---A---</a> <a href="" class="atopNavTitle">---B---</a> down 20px. I have tried the above style but it does nothing. What do I do wrong? Hi there, this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site. I know the #blah should be used to set an id for it, but here's my concern; 1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">). 2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different? thanks in advance. Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out... I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself... What I'm trying to accomplish is the same thing, only with a div that has textual content.... I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings... I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail.... I hope this is a decent enough description of the problem... anyway to accomplish this??? Hi, is there a method of setting the color for title="some text" in a hyperlink ? e.g. [<a href="index.php?page=links.php" title="Redlake Valley business websites">Local Links</a>] TIA Mike |
|||||||