|
CSS - Multiple Id
I would like to have multiple id and all using hover link for all
#test1, #test2, #test3, #test4 a:hover{ color:#0F0; } this doesn't work. NOT sure why?? thanks Similar TutorialsHello! I'm gonna try to keep this as simple as I can, I don't know css at all... I have a site where I'm gonna feature trailers in Quicktime and I'm planning on using a script called clearbox to open these trailers. Go to my site and view the trailers to see what clearbox is. Now, to my problem. I'm gonna have 20 trailers per page, but all the trailers are not the same size. If you check out the trailers on my site you can see that the close button for the Pirates 2 trailer is a bit off, as to the National Treasure trailer where the button is where it's supposed to be. That's because the trailers are in different sizes, and the boxes/windows also are in different sizes. To change the position of the close button, I have to edit the clearbox.css file. What I'm getting at is that I must have one clearbox.css file for each trailer/window and that every clearbox.css file needs an id or something so I can call it from within the html/php file. Here's the code for clearbox as I have right now on my site. First up is the code I have within the head section... Code: <link href="piratesofthecaribbean2/css_trailer/clearbox.css" rel="stylesheet" type="text/css" /> <script src="piratesofthecaribbean2/js/clearbox.js" type="text/javascript"></script> <link href="nationaltreasure/css_trailer/clearbox.css" rel="stylesheet" type="text/css" /> <script src="nationaltreasure/js/clearbox.js" type="text/javascript"></script> And here are the links for the "View trailer"-buttons... Code: <a href="piratesofthecaribbean2/trailer.php" rel="clearbox(668,,330,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a> Code: <a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a> Clearly, this setting doesn't work. What I wanna know is if I can have multiple clearbox.css files with different settings (to suit each trailer/window) and if I can call these clearbox.css files in this link: Code: <a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a> I hope someone understands what I want, I really want this to work! Thanks in advance! I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP Code: <!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" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? Ok. So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this: http://www.leeksoftware.co.uk And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is: Code:
div.logo
{
height: 70px;
width: 618px;
background-color: #476cD9;
float: left;
}
div.home
{
height: 70px;
width: 100px;
background-color: #E29942;
margin-left: 619px;
float: left;
}
div.soft
{
height: 70px;
width: 100px;
background-color: #CC3333;
margin-left: 719px;
}
div.tuto
{
height: 70px;
width: 100px;
background-color: #006666;
margin-left: 819px;
}
div.cont
{
height: 70px;
width: 100px;
background-color: #254D78;
margin-left: 919px;
}
I tired adding float left to all of them but that made them go diagonal. Can any one help? Thanks Matt Based on CSS, on a static XHTML-written site, can multiple languages be used? And can they be user-switchable? Thanks, Chris this code inherits properly in FF, but not in IE. any workarounds? Code: .red
{
background:red;
}
.yellow
{
background:yellow;
}
.red.yellow
{
background:purple;
}
Code: <table border=1> <tr class="red"><td>red</td></tr> <tr class="yellow"><td>yellow</td></tr> <tr class="red yellow"><td>red yellow</td></tr> </table> I know that there have been a few posts on this in the past but none seem to specifically cover what I am after. I am currently creating a CMS for a few sites that I run. Now don't get me wrong this is nothing flashy, it's just a personal project, however, when designing pages I can get everything to display in FF, Opera and IE perfectly well, however, as I add new elementes to the page things seem to get a little.. out of place. My pages always display perfectly well in FF and Opera, however, IE 6 & IE 7 usually have small problems to do with margins and such, nothing life changing but I am very critical of my own work. My question is whether or not I should create seperate style sheets for IE6 & IE7 that overwrite certain bits of the CSS that IE doesnt like and replace it with code that works well in IE, whilst hiding it from other browsers. I would also be interested if people have other suggestions with regard to this as I am always up for learning new skills and ways of doing things. Thanks for reading! Regards, Matt. Hello, I am creating a message to display on my web sites. The HTML markup is as follows: <div class="Error"> <h3> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon" style="border-width: 0px;"> <span>Header</span> </h3> <p>Description</p> </div> And the CSS: div.Error { background-color: #FFD9D9; border: solid 1px #FF9595; padding: 0.4em; position: relative; min-height: 1.25em; width: 120px; } div.Error h3 {} div.Error h3 img {vertical-align: middle;} div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva, sans-serif;} div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-serif; I have 3 types of messages: Warning, Error and Success. The only difference between the CSS of each message is the colors properties. Should I use a class named Message to define all common properties and then 3 other classes: Error, Warning and success to define the color properties: <div class="Message Error"> Or should I use three different classes? How is this usually done? Any other advice on how I am building my message is welcome to. Thanks, Miguel does anyone know of a good, non-outdated method for installing and /or using both IE6 and IE7 on one machine (windows xp)? right now I have IE6 installed because it is the most different from FF3 (my true love), but I can't test sites on IE7. and I know (well, assume) that if I just install IE7, I can't switch back. Hi, i need to delvelop something like "SomeName X". Currently i am doing with DIV(1 DIV for 'SomeName' and 1 DIV for 'X' and finally float-left to another DIV). Since these names(like "Somename1 X",'Somename2 X"...) are populated in the div container, when it reaches the right end of the container, "X" alone getting wrapped to the next line. But it has to be along with 'SomeName' always. As other forums says, I tried with table but it didn't work since the final div container is fixed and i get multiple names with variant length. I tried clear:both, float left - it too didn't work. I have seen like the one in facebook - compose page. I would like to know how to implement this. Any help appreciated. Thanks in advance. Hi all, I have several CSS files to look after different browsers, but I use javascript to match the IE css with IE browsers, etc. Can you only have one CSS file that looks after ALL browsers? So that if the user doesn't have javascript it's not a problem? I've heard of css hacks and css filters being used but I'm not all that familiar. Ben Is it possible to use CSS to "call" multiple PHP scripts and display them on one page? I want to display several different RSS feeds on a page. I have tried using plain tables, but I get an error: "Cannot redeclare startelement() (previously declared........." I put the script in a table he http://rottweilerconnection.com/test1.php This is the RSS feed (script) without the table: http://rottweilerconnection.com/test11.php And here is the script itself http://rottweilerconnection.com/test11.zip Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! I'm trying to get multiple DIV tags with an set layout, like [Example 1] to show in this [Example 2] but also scroll along when you click on the arrows now my issue is if I use position "position:absolute" the little colour boxes stay where they are? now if I use "position:relative" I have to put the "top:-500px" and the next box as "top:-1300px" etc. but they are the top line of boxes like aaa and ccc in the first link but I cant see this being the correct way of doing this? I'm completely lost any pointers into how to get this to work would be nice? Yep, there's another multiple column problem! I'v created this website to give an example of my problem. As you can see, the #left and #content seem to ignore the border of the #navigator and slip right over it. This problem appears only in IE, in Mozilla there's no problem at all! What is happening? Here's the CSS stylesheet I'm using: body { text-align: center; } a { font-size:12px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#FF0741;} a:visited {color:BDD131;} a:hover {color:white;} #container { margin-left: auto; margin-right: auto; text-align: left; width: 90%; margin: 10px auto; font-family:verdana; font-size:12px; background-color: #EEF3C9; color: #FF0741; line-height: 130%; } #Header { padding: 0; background-color: #EEF3C9; border-style:solid; border-color:#BDD131; border-width:1px 0px; } #navigation { border-style:solid; border-color:#FFFFFF; border-width:3px 0px; text-align:right; font-size:20px; background-color:#BDD131; margin:0; padding:0; } #navigation li { display:inline; padding:20px; margin:0; } #navigation li a:hover { color:white; } #Left { float: left; width: 200px; height: 400px; margin:0px; background-color:#BDD131; } #Content { width: 550px; background-color:#EEF3C9; margin-left: 210px; margin-top:10px; padding: 40px 0px 0px 40px; } #End { clear: left; margin: 0; padding: .5em; color: #FF0741; border-style:solid; border-color:#FFFFFF; border-width:3px 0px; background-color: #BDD131; } I have a content area that looks like the following Whe Blah blah blah Blah blah blahBlah blah blah Blah blah blahBlah blah blahBlah blah blah When: Blah blah blah Blah blah blahBlah blah blah Blah blah blahBlah blah blahBlah blah blah I have it working as follows which works great in IE but doesnt work in Firefox/netscape Code:
...
.homeLabelLeft{
vertical-align:top;
text-align:left;
display:inline;
width:15%;
font-weight:bold;
margin-bottom:10px;
}
.homeLabelRight{
display:inline;
width:85%;
margin-bottom:10px;
}
...
<div class="homelabelleft">
Whe
</div>
<div class="homelabelright">
blahblahlbhablahblahblah<br>blahblahlbhablahblahblah
</div>
<div class="homelabelleft">
When:
</div>
<div class="homelabelright">
blahblahlbhablahblahblah<br>blahblahlbhablahblahblah
</div>
... there are about 10 or so of these sections on the page.
In IE this works great but in FF/Netscape the homelabelright div is Under the homelabelleft instead of beside it as is in IE. Any thoughts? hello all i'm kind of new in CSS, so i'm with some questions regarding the way i can using it. For example, at the moment i d'like to have diferent link colors in the same page. Is it possible? how? I have seen the a:link option but applies only to whole page. thank in advance I have split up a huge background image into three much smaller images. I want one of them to tile horizontally across the top of the page, another to tile vertically down the left side of the page, and the third to be in the topleft corner of the page. Is there anyway to do this in IE6? I have tried using multiple containers and the background-position attribute, but have been unable to get it right. Any ideas? i have 2 menus on my page. one is a vertical menu & other is a floating menu. i want the vertical menu to overlap the floating menu. i tried giving the floating menu a z-index of -2 since the vertical menu has z-index of -1. but it doesn't work coz the floating menu disappears. the floating menu always disappears when i give it a negative z-index. and even if i give it a positive z-index, the vertical menu does not appear above the floating menu. all this problem occurs in IE browser. this is the style for the vertical menu Code:
table.topnav
{position: relative;
top: 0;
left: 0;
padding-left: 2px;
}
table.menu
{position: absolute;
bottom: 0;
z-index: -1;
}
.pad{padding-top: 2px;}
.banner{z-index: 1;
position: relative;}
and this is the style for the floating menu Code:
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
thank you xia I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows. Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach. any ideas? the link: http://www.eightbyten.com/rc_store/shopcart_test.html the style sheet directly: http://www.eightbyten.com/rc_store/link.css Thanks! |
|||||||