|
CSS - Calling Another Object's Style With Css..
is there a way of doing something like:
css Code: Original - css Code .test{ width:auto; } .test2{ margin-right: .test width; }
??? thanks in advance. Similar TutorialsI have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color 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! Hi, I'm trying to implement a confirm box that darkens the page until the user clicks ok. I've got a div the size of the whole page with a black background and opacity .2. Inside that there is a div with the confirmation text inside with opacity 1.0, but it is not showing up fully opaque. It was my understanding that opacity is not inherited, so I shouldn't even have to specify an opacity at all for the inner div. Why isn't it showing up as fully opaque? http://evenhealth.com/test.html The confirm box is exactly in the center of the page. It's pretty hard to see because of the opacity problem. Code: <html>
<head>
<link rel="Stylesheet" href="/main.css" type="text/css">
</head>
<body>
<div id=confirmpage>
<div id=confirmdiv>
<div class=confirmbox>
<a href="#" onclick="document.getElementById('confirmpage').style.display = 'none';return false">Close Me</a>
</div>
</div>
</div>
<a href=# onclick="document.getElementById('confirmpage').style.display = 'block';return false">Click me to test confirm box.</a>
</body>
</html>
Code: #confirmpage{
position:absolute;
top: 0;
left: 0;
z-index:1;
width:100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
opacity: 0.2;
display:none;
}
#confirmdiv{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
filter:alpha(opacity=100);
opacity:1.0;
}
.confirmbox{
filter:alpha(opacity=100);
opacity:1.0;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
border: 1px solid red ;
}
Hi, If you place the below code in a blank HTML page and view it with Safari 2.0.4, you'll see a 130 pixel vertical gap between 1 and 2, and a 320 pixel horizontal gap between 3 and 5. I guess that CSS could fix it but I don't know how. Code: 1 <div> 2 <a> 3 <object> 4 </object> 5 </a> 6 </div> 7 Please test your own fix before suggesting it to me, thanks. I could really use some help on this one because I'm stuck. Normally in CSS you can use background: to bring in an image or a swf file and then display a logo over it from within the HTML as below. <css> .row-logo{ background: url(banners/boats_harbor.jpg) 0 0 no-repeat; height:172px;} .row-logo img{ width:387px; height:110px; margin:0 0 0 0;} <html> <div class="row-logo"><a href="index.html"><img src="banners/ehba_logo.png" alt="" /></a></div> However, I am currently working on a banner that rotates through images via javascript that I want to have in the background under css and still be able to display a logo from within the HTML code. As shown above, that is easy with a picture, but how do you call the javascript and then its ID from within the HTML? Can anyone help me with this? Thanks you in advance!! Jim Hey guys, still learning CSS here. I came across an issue and I'm sure I saw a solution somewhere before but can't for the life of me find out where it was. Basically I'm thinking of variables. I want .: Link :. but do not want to use formatting for the symbols each time, as they are a different color. Is there any way I can preset each side so I can call them into a text line? 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 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;
}
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 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 ;
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? Is there a way to use CSS to apply "no" style to something? I know it's strange... I'll explain. I have a general style for all the forms on my website but there is one form I want to appear as the standard default looking form. I don't want to assign an id or anything to the styled forms because then I would have to go back and edit every single page... I'd much rather do something to the 1 form to make it look like the browser default. Is there a way to exclude something from taking on a general style? Any help is appreciated! Thanks! Hi there, I have a list which I want to display the sub items without any left spacing.. so they are listed directly beneath the parent item. It works fine in IE, but not in FF or Opera. This is what I have: Code:
<ul id="treemenu1" class="treeview" style=" padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 10px; padding-left: 0px;" >
<li style="list-style: none;">
<img src="images/arrow.gif" border="0" >
<a class="nav_main" href="#"><strong>Parent Item</strong></a>
</li>
<ul style="list-style: none;">
<li style="border-bottom: 1px dashed #444444; padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 0px; "><a class="nav_sub" href="page"><img src="images/arrow.gif" border="0" >Sub Item</a></li>
etc...
I have tried use margin-left: 0px but that still doesn't work. Any ideas what I'm doing wrong? Hi all i am currently in the process of playing with "display: table-cell" and such instead of tables and i am wondering how you can get a table-row to span across the table cells below it instead of just the first one? I have a form label styled from an external stylesheet. I don't understand why some style options don't seem to work. For example, setting the width of the label seems to have no effect. But setting the font does work. I assume it is because of some parent div style? The stylesheet is from a template in which I am attempting to make some additions. I'm actually having the same problem with unordered lists. Could someone explain what would cause some style options to be ignored? I can post the stylesheet, but it is rather long. Thanks. Hello, I am trying to do some tweaking on my website to clear up some "standards" issues. For example I get this error "The P ALIGN attribute is deprecated in HTML 4.01". What they want is for me to put the align into a CSS file to correct this. I personally I am NOT found of CSS files I just like putting things into the source... But it now seems if I want things totally error free I am going to need to start using one. If I put the CSS code directly into a HTM/HTML file all works ok. My problem is if I try and use a style.css file NOTHING works. I get NO errors like this in the CSS file or html but the call to p align=justify or center is just ignored. before the </head> just above it I use this line <link href="style.css" rel="stylesheet" type="text/css" media="print"> I try and call the CSS file like this in the html code <p class="j"> My style.css file has this in it p.j { text-align: justify; } p.c { text-align: center; } From everything I read this is 100% correct... yet it does not work. Thanks in advance for any advice you might have. whonoes Hi, I have a style for <a> like the following Code:
a.navselect:hover,a.navselect:link,a.navselect:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; text-align: center }
Then i use it as Code: <a class="navselect" href="https://swww.go.trade.com/NASApp/MarketTabCtx/MarketTabServlet">Markets</a> but if i have 20 links i have write my class 20 times like above. Can i put a <div> statement around all my links and some how define <a> for my div so that all <a> with in that div get that style Hi guys, This has been driving me crazy for the past couple of hours which leads me to the conclusion that this is a bug. The code is self explanatory, any ideas why it will not work: <option value="images.php?vidno=1"><span style="color:#ff0000;">Title:</div>XYZ Thanks in advance, Rob. |
|||||||