Personal computing discussed

Moderators: renee, SecretSquirrel, just brew it!

 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

CSS noob questions

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?
 
khands
Graphmaster Gerbil
Posts: 1220
Joined: Mon Dec 01, 2008 12:32 pm
Location: Chicagoland

Re: CSS noob questions

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

Re: CSS noob questions

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:
<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 4790k @ stock, Asus Z97-PRO(Wi-Fi ac), 2x8GB Crucial DDR3 1600MHz, EVGA GTX 1080Ti FTW3
Samsung 950 Pro 512GB + 2TB Western Digital Black
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
Windows 10 64-bit
 
emorgoch
Gerbil Elite
Posts: 719
Joined: Tue Mar 27, 2007 11:26 am
Location: Toronto, ON

Re: CSS noob questions

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.
<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 4790k @ stock, Asus Z97-PRO(Wi-Fi ac), 2x8GB Crucial DDR3 1600MHz, EVGA GTX 1080Ti FTW3
Samsung 950 Pro 512GB + 2TB Western Digital Black
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
Windows 10 64-bit
 
steelcity_ballin
Gerbilus Supremus
Posts: 12072
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

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.
 
khands
Graphmaster Gerbil
Posts: 1220
Joined: Mon Dec 01, 2008 12:32 pm
Location: Chicagoland

Re: CSS noob questions

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 __________________________
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: CSS noob questions

Tue May 26, 2009 1:13 pm

Pure awesome responses. Thanks.
 
emorgoch
Gerbil Elite
Posts: 719
Joined: Tue Mar 27, 2007 11:26 am
Location: Toronto, ON

Re: CSS noob questions

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 4790k @ stock, Asus Z97-PRO(Wi-Fi ac), 2x8GB Crucial DDR3 1600MHz, EVGA GTX 1080Ti FTW3
Samsung 950 Pro 512GB + 2TB Western Digital Black
Dell 2408WFP and Dell 2407WFP-HC for dual-24" goodness
Windows 10 64-bit
 
steelcity_ballin
Gerbilus Supremus
Posts: 12072
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

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:

<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.
 
khands
Graphmaster Gerbil
Posts: 1220
Joined: Mon Dec 01, 2008 12:32 pm
Location: Chicagoland

Re: CSS noob questions

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 __________________________
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: CSS noob questions

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.
 
steelcity_ballin
Gerbilus Supremus
Posts: 12072
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

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".

.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.
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: CSS noob questions

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?
 
steelcity_ballin
Gerbilus Supremus
Posts: 12072
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: CSS noob questions

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
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: CSS noob questions

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.
 
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

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?
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: CSS noob questions

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.
 
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

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?
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: CSS noob questions

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.
 
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

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?

Who is online

Users browsing this forum: No registered users and 1 guest
GZIP: On