CSS noob questions

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

CSS noob questions

Postposted on Tue May 26, 2009 12:32 pm

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?
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Tue May 26, 2009 12:51 pm

Depends, are they both in an outside stylesheet? Outside style sheets are rendered with the least authority, then Inside, then Inline.
X __________________________
khands
Graphmaster Gerbil
Silver subscriber
 
 
Posts: 1219
Joined: Mon Dec 01, 2008 12:32 pm
Location: Chicagoland

Re: CSS noob questions

Postposted on Tue May 26, 2009 12:57 pm

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:
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
emorgoch
Gerbil Elite
 
Posts: 690
Joined: Tue Mar 27, 2007 11:26 am
Location: Toronto, ON

Re: CSS noob questions

Postposted on Tue May 26, 2009 1: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>
This produces a different result then the one above (ignoring the <a> in-line definition).
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
emorgoch
Gerbil Elite
 
Posts: 690
Joined: Tue Mar 27, 2007 11:26 am
Location: Toronto, ON

Re: CSS noob questions

Postposted on Tue May 26, 2009 1: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
Silver subscriber
 
 
Posts: 11924
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

Postposted on Tue May 26, 2009 1: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 1:14 pm, edited 2 times in total.
X __________________________
khands
Graphmaster Gerbil
Silver subscriber
 
 
Posts: 1219
Joined: Mon Dec 01, 2008 12:32 pm
Location: Chicagoland

Re: CSS noob questions

Postposted on Tue May 26, 2009 1:13 pm

Pure awesome responses. Thanks.
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Tue May 26, 2009 1: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
emorgoch
Gerbil Elite
 
Posts: 690
Joined: Tue Mar 27, 2007 11:26 am
Location: Toronto, ON

Re: CSS noob questions

Postposted on Tue May 26, 2009 1: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:

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
Silver subscriber
 
 
Posts: 11924
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

Postposted on Tue May 26, 2009 2: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.
X __________________________
khands
Graphmaster Gerbil
Silver subscriber
 
 
Posts: 1219
Joined: Mon Dec 01, 2008 12:32 pm
Location: Chicagoland

Re: CSS noob questions

Postposted on Mon Jun 08, 2009 11: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.
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Mon Jun 08, 2009 11:17 am

Well I would make your 3 divs, 1 for each row. Give the div a class of "imgHolder".

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
Silver subscriber
 
 
Posts: 11924
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

Postposted on Mon Jun 08, 2009 11: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
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Mon Jun 08, 2009 11: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
Silver subscriber
 
 
Posts: 11924
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

Postposted on Mon Jun 08, 2009 12:10 pm

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.
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Wed Jun 24, 2009 5: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.
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 10:15 pm
Location: Dining in the Reagan room at the restaurant at the end of the universe.

Re: CSS noob questions

Postposted on Fri Jun 26, 2009 4: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.... :oops: hopefully you know what I'm talking about.
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Fri Jun 26, 2009 5: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!
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 10:15 pm
Location: Dining in the Reagan room at the restaurant at the end of the universe.

Re: CSS noob questions

Postposted on Fri Jun 26, 2009 9:36 pm

Well, I ended up getting it to work right while I was preparing the page for you to look at :lol: You helped without even doing anything sweicki.
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9106
Joined: Thu May 08, 2003 12:42 pm
Location: Cincinnati, OH

Re: CSS noob questions

Postposted on Fri Jun 26, 2009 10: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 :lol: You helped without even doing anything sweicki.


Sweet. :D
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 10:15 pm
Location: Dining in the Reagan room at the restaurant at the end of the universe.


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 1 guest