What happens when the same property is defined twice in a style sheet? This is what I have in a style sheet I am looking at:
a:hover{
color: #ff6666;
}
and then later in the style sheet is this:
ul.navbar a:hover{
color: #ff9999;
}
Does one hover override the other?
CSS noob questions
Moderators: SecretSquirrel, just brew it!
20 posts
• Page 1 of 1
CSS noob questions
posted on Tue May 26, 2009 11:32 am
- flip-mode
- Lord High Gerbil
- Posts: 8733
- Joined: Thu May 08, 2003 11:42 am
- Location: Cincinnati, OH
Re: CSS noob questions
posted on Tue May 26, 2009 11:51 am
Depends, are they both in an outside stylesheet? Outside style sheets are rendered with the least authority, then Inside, then Inline.
It's pronounced "Shy-town"... got it?
The videogame movie transient property states that the awesomeness of the game is approximately equal to the crappiness of the movie.
Alcohol is both the cause and solution to all the worlds problems.
The videogame movie transient property states that the awesomeness of the game is approximately equal to the crappiness of the movie.
Alcohol is both the cause and solution to all the worlds problems.
- khands
- Graphmaster Gerbil
- Posts: 1213
- Joined: Mon Dec 01, 2008 11:32 am
- Location: Chitown
Re: CSS noob questions
posted on Tue May 26, 2009 11:57 am
w3.org specification on cascading
Long story short:
ul.navbar a.hover { } takes precedence over the general a:hover { } since it is more specifically designated (has more elements).
If the specificity is the same, then whichever one is defined later will be used. (i.e. table {} is defined at both lines 5 and 10. The one defined at 10 will be used.)
Lastly, while I don't see it listed on that page, if you have multiple stylesheet on a page that define an element, whichever is declared is used, with in-line style information overriding those. eg:
The final color will be green. Without the in-line style it'll be Red.
Long story short:
ul.navbar a.hover { } takes precedence over the general a:hover { } since it is more specifically designated (has more elements).
If the specificity is the same, then whichever one is defined later will be used. (i.e. table {} is defined at both lines 5 and 10. The one defined at 10 will be used.)
Lastly, while I don't see it listed on that page, if you have multiple stylesheet on a page that define an element, whichever is declared is used, with in-line style information overriding those. eg:
- Code: Select all
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a { color: Red;}
</style>
</head>
<body>
<a href="test.html" style="color: Green;">Link</a>
</body>
</html>
test.css:
a { color: Blue;}
The final color will be green. Without the in-line style it'll be Red.
Intel i7 860, Asus P7P55D Pro, 4x2GB Corsair XMS3 1600 (CMX4GX3M2A1600C9), EVGA GTX 560 Ti Superclocked
Seagate 7200.7 160GB, WD Caviar Black 640GB, WD Caviar Green 1TB, WD Caviar Green 2TB
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
Seagate 7200.7 160GB, WD Caviar Black 640GB, WD Caviar Green 1TB, WD Caviar Green 2TB
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
- emorgoch
- Gerbil Elite
- Posts: 686
- Joined: Tue Mar 27, 2007 10:26 am
- Location: Toronto, ON
Re: CSS noob questions
posted on Tue May 26, 2009 12:03 pm
khands wrote:Depends, are they both in an outside stylesheet? Outside style sheets are rendered with the least authority, then Inside, then Inline.
I just verified with both IE8 and firefox 3.0.10. Inside stylesheet do not take precedence over outside stylesheets. The order in which they're declared determines the precedence.
- Code: Select all
<html>
<head>
<style type="text/css">
a { color: Red;}
</style>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="test.html">Link</a>
</body>
</html>
Intel i7 860, Asus P7P55D Pro, 4x2GB Corsair XMS3 1600 (CMX4GX3M2A1600C9), EVGA GTX 560 Ti Superclocked
Seagate 7200.7 160GB, WD Caviar Black 640GB, WD Caviar Green 1TB, WD Caviar Green 2TB
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
Seagate 7200.7 160GB, WD Caviar Black 640GB, WD Caviar Green 1TB, WD Caviar Green 2TB
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
- emorgoch
- Gerbil Elite
- Posts: 686
- Joined: Tue Mar 27, 2007 10:26 am
- Location: Toronto, ON
Re: CSS noob questions
posted on Tue May 26, 2009 12:12 pm
Well yes for the most part however, anything labeled '!important' always wins out regardless. Comes in handy every once in a while.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
- steelcity_ballin
- Gerbilus Supremus
- Posts: 11761
- Joined: Mon May 26, 2003 4:55 am
- Location: Pittsburgh PA
Re: CSS noob questions
posted on Tue May 26, 2009 12:13 pm
emorgoch wrote:I just verified with both IE8 and firefox 3.0.10. Inside stylesheet do not take precedence over outside stylesheets. The order in which they're declared determines the precedence.
Well that's awfully broken, and not what I learned either, they must've changed the standard since 04.
Last edited by khands on Tue May 26, 2009 12:14 pm, edited 2 times in total.
It's pronounced "Shy-town"... got it?
The videogame movie transient property states that the awesomeness of the game is approximately equal to the crappiness of the movie.
Alcohol is both the cause and solution to all the worlds problems.
The videogame movie transient property states that the awesomeness of the game is approximately equal to the crappiness of the movie.
Alcohol is both the cause and solution to all the worlds problems.
- khands
- Graphmaster Gerbil
- Posts: 1213
- Joined: Mon Dec 01, 2008 11:32 am
- Location: Chitown
Re: CSS noob questions
posted on Tue May 26, 2009 12:30 pm
khands wrote:emorgoch wrote:I just verified with both IE8 and firefox 3.0.10. Inside stylesheet do not take precedence over outside stylesheets. The order in which they're declared determines the precedence.
Well that's awfully broken, and not what I learned either, they must've changed the standard since 04.
I can't find anything specific to this scenario in the W3 CSS or XHTML specification. The closest I can get is from rule 6.4.1 in the CSS2.1 spec.
6.4.1 Cascade Order wrote:4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
While it mentions imported stylesheets, I believe it only applies when the stylesheet itself imports another stylesheet, not when you have an internal vs. external stylesheet in an HTML doc.
Intel i7 860, Asus P7P55D Pro, 4x2GB Corsair XMS3 1600 (CMX4GX3M2A1600C9), EVGA GTX 560 Ti Superclocked
Seagate 7200.7 160GB, WD Caviar Black 640GB, WD Caviar Green 1TB, WD Caviar Green 2TB
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
Seagate 7200.7 160GB, WD Caviar Black 640GB, WD Caviar Green 1TB, WD Caviar Green 2TB
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
- emorgoch
- Gerbil Elite
- Posts: 686
- Joined: Tue Mar 27, 2007 10:26 am
- Location: Toronto, ON
Re: CSS noob questions
posted on Tue May 26, 2009 12:51 pm
I'm pretty sure it goes inline, document, external linking but within each it's last declared.
so if I have an inline declaration like so:
Then the width of my div would be 350 px.
so if I have an inline declaration like so:
- Code: Select all
<div style="width:500px; float:left; position:relative: top:-50px; width:350px">
BLAH BLAH BLAH
</div>
Then the width of my div would be 350 px.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
- steelcity_ballin
- Gerbilus Supremus
- Posts: 11761
- Joined: Mon May 26, 2003 4:55 am
- Location: Pittsburgh PA
Re: CSS noob questions
posted on Tue May 26, 2009 1:14 pm
That's what I thought, but I guess not, or maybe I'm just using the wrong terminology, it's been a while since I had to do anything with CSS.
It's pronounced "Shy-town"... got it?
The videogame movie transient property states that the awesomeness of the game is approximately equal to the crappiness of the movie.
Alcohol is both the cause and solution to all the worlds problems.
The videogame movie transient property states that the awesomeness of the game is approximately equal to the crappiness of the movie.
Alcohol is both the cause and solution to all the worlds problems.
- khands
- Graphmaster Gerbil
- Posts: 1213
- Joined: Mon Dec 01, 2008 11:32 am
- Location: Chitown
Re: CSS noob questions
posted on Mon Jun 08, 2009 10:07 am
Another question: I am trying to create an array of 9 pictures that are distributed evenly according to the window size. Here is how I am trying to do it
A <div> for each row - top, middle, bottom. I'll prolly need another <div> to contain them all.
A class each for left:0px and a right:0px - this takes care of the 1st and 3rd image in each row.
The middle image, I just can't figure it out. I've tried the {margin-left:auto; margin-right:auto } trick and it does not work.
This is probably child's play for someone here.
A <div> for each row - top, middle, bottom. I'll prolly need another <div> to contain them all.
A class each for left:0px and a right:0px - this takes care of the 1st and 3rd image in each row.
The middle image, I just can't figure it out. I've tried the {margin-left:auto; margin-right:auto } trick and it does not work.
This is probably child's play for someone here.
- flip-mode
- Lord High Gerbil
- Posts: 8733
- Joined: Thu May 08, 2003 11:42 am
- Location: Cincinnati, OH
Re: CSS noob questions
posted on Mon Jun 08, 2009 10:17 am
Well I would make your 3 divs, 1 for each row. Give the div a class of "imgHolder".
The first CSS declaration will make each div the width of the window and center their contents. I used text-align because I think it used to be necessary for ie6/7... not sure now. The second declaration says for any image inside of the class .imgHolder, apply padding to the top, right, bottom, and left respectively. Off the top of my head, the centering *may* not work because a width has to be set explicitly and I'm not sure if width:100% counts. If not, you can always wrap a div around all the divs and width:100% on that.
- Code: Select all
.imgHolder{
width:100%;
margin:0px auto;
text-align:center;
}
.imgholder img{
padding:0px 10px 0px 10px;
}
The first CSS declaration will make each div the width of the window and center their contents. I used text-align because I think it used to be necessary for ie6/7... not sure now. The second declaration says for any image inside of the class .imgHolder, apply padding to the top, right, bottom, and left respectively. Off the top of my head, the centering *may* not work because a width has to be set explicitly and I'm not sure if width:100% counts. If not, you can always wrap a div around all the divs and width:100% on that.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
- steelcity_ballin
- Gerbilus Supremus
- Posts: 11761
- Joined: Mon May 26, 2003 4:55 am
- Location: Pittsburgh PA
Re: CSS noob questions
posted on Mon Jun 08, 2009 10:28 am
SB, is there a way to get the images to adjust to changes in window size - spread farther as window gets wider type of thing?
- flip-mode
- Lord High Gerbil
- Posts: 8733
- Joined: Thu May 08, 2003 11:42 am
- Location: Cincinnati, OH
Re: CSS noob questions
posted on Mon Jun 08, 2009 10:59 am
flip-mode wrote:SB, is there a way to get the images to adjust to changes in window size - spread farther as window gets wider type of thing?
Hmm yes, but not without some javascript I think. Basically your image has a maximum size. Lets say that unaltered the image is 1024x768. Obviously stacking 9 of these on a page would require some scaling. So here's some more thought, do you only have 1 file size and simply force the image smaller/larger (causing image distortion on the image) or do you have a few different versions of the image to allow for a clean image?
To do what you're asking, you'd have to calculate a few different things. Mainly the browser size and what you want each image size too be at X resolution. You can set styles via javascript too so any styling you'd want differently based on a resolution can happen too. Here's an easy resource to get started with capturing the resolution with javascript. http://www.w3schools.com/htmldom/dom_obj_window.asp
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
- steelcity_ballin
- Gerbilus Supremus
- Posts: 11761
- Joined: Mon May 26, 2003 4:55 am
- Location: Pittsburgh PA
Re: CSS noob questions
posted on Mon Jun 08, 2009 11:10 am
I'll check out that link, but all the images are 200px X 200px, so it would be a 600 x 600 block at minimum, and scale up from there, or maybe a 610 X 610 block to leave a little space between the images.
You can see where I'm going by looking at the page as it is currently formatted:
http://www.glaserworks.com
Edit:
And I don't want the images to scale, I just want them to spread apart, aka, the space between each 200x200 image grows or shrinks with the window size. The idea is to have the company logo behind the images. I don't know how cool that will look, but I wanted to try it and see.
You can see where I'm going by looking at the page as it is currently formatted:
http://www.glaserworks.com
Edit:
And I don't want the images to scale, I just want them to spread apart, aka, the space between each 200x200 image grows or shrinks with the window size. The idea is to have the company logo behind the images. I don't know how cool that will look, but I wanted to try it and see.
- flip-mode
- Lord High Gerbil
- Posts: 8733
- Joined: Thu May 08, 2003 11:42 am
- Location: Cincinnati, OH
Re: CSS noob questions
posted on Wed Jun 24, 2009 4:31 pm
I know you can do it with CSS and Javascript on the client side, and I think you can also do it somehow with PHP on the server side.
Here is an article on doing it with javascript and css:
http://www.agilepartners.com/blog/2005/ ... avascript/
Although any JS library worth its salt should have something in its documentation about resizing images.
Here is an article on doing it with javascript and css:
http://www.agilepartners.com/blog/2005/ ... avascript/
Although any JS library worth its salt should have something in its documentation about resizing images.
FF on DDR3 with a Q9550
Flying Fox wrote:Can we have some of what he was smoking? X48? 2x16 SLI? Want some more e-penis with that? How about just get the Nvidia triple SLI board with a water block on the 3xGPUs+chipset+CPU?
- swiecki
- Gerbil
- Posts: 67
- Joined: Mon Jun 15, 2009 9:15 pm
- Location: Dining in the Reagan room at the restaurant at the end of the universe.
Re: CSS noob questions
posted on Fri Jun 26, 2009 3:30 pm
Thanks swiecki, I'll look at that when I get a moment.
I have a quick question I'll post before I leave work: Why does this happen - a div with an image and text in it, the text sticks to the bottom of the div. How can I get that text up to the top of the div, or, the 'block'? Edit: I'd link to an example but I've messed up the htaccess on my website somehow so....
hopefully you know what I'm talking about.
I have a quick question I'll post before I leave work: Why does this happen - a div with an image and text in it, the text sticks to the bottom of the div. How can I get that text up to the top of the div, or, the 'block'? Edit: I'd link to an example but I've messed up the htaccess on my website somehow so....
hopefully you know what I'm talking about.- flip-mode
- Lord High Gerbil
- Posts: 8733
- Joined: Thu May 08, 2003 11:42 am
- Location: Cincinnati, OH
Re: CSS noob questions
posted on Fri Jun 26, 2009 4:21 pm
hmm... I'd have to see the code. The only thing I can think of just off the top of my head is some css property on the <p> tag most likely that positions it at the bottom. I know thats not very helpful but its the best I can come up with without an example or example code, perhaps another gerbil will be of more help.
Good luck!
Good luck!
FF on DDR3 with a Q9550
Flying Fox wrote:Can we have some of what he was smoking? X48? 2x16 SLI? Want some more e-penis with that? How about just get the Nvidia triple SLI board with a water block on the 3xGPUs+chipset+CPU?
- swiecki
- Gerbil
- Posts: 67
- Joined: Mon Jun 15, 2009 9:15 pm
- Location: Dining in the Reagan room at the restaurant at the end of the universe.
Re: CSS noob questions
posted on Fri Jun 26, 2009 8:36 pm
Well, I ended up getting it to work right while I was preparing the page for you to look at 
You helped without even doing anything sweicki.
You helped without even doing anything sweicki.- flip-mode
- Lord High Gerbil
- Posts: 8733
- Joined: Thu May 08, 2003 11:42 am
- Location: Cincinnati, OH
Re: CSS noob questions
posted on Fri Jun 26, 2009 9:23 pm
flip-mode wrote:Well, I ended up getting it to work right while I was preparing the page for you to look at
Sweet.
FF on DDR3 with a Q9550
Flying Fox wrote:Can we have some of what he was smoking? X48? 2x16 SLI? Want some more e-penis with that? How about just get the Nvidia triple SLI board with a water block on the 3xGPUs+chipset+CPU?
- swiecki
- Gerbil
- Posts: 67
- Joined: Mon Jun 15, 2009 9:15 pm
- Location: Dining in the Reagan room at the restaurant at the end of the universe.
20 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 1 guest
