CSS refresher :: Web Design / HTML / Web hosting Forum

Technical Discussion
>> Web Design / HTML / Web hosting Forum

Pages in this thread: 1 | [2] | (show all)

Print Thread

camieabz
(legend) Fri 06-May-11 11:14:06

Re: CSS refresher

[re: deleted] [link to this post]

Been a w3c schools member for years. Fix your sig, if you're such a coding guru.

~~~~~~~~~~

© Camieabz 2002-2011

Live BQM

deleted
(deleted) Fri 06-May-11 11:15:39

Re: CSS refresher

[re: camieabz] [link to this post]

The feature is not implemented yet.

deleted
(deleted) Mon 09-May-11 13:11:22

Re: CSS refresher

[re: camieabz] [link to this post]

I must be missing something here because using background-image instead of background for your alternative h1 would surely fix the problem?

.header h1.different {background-image:url(../img/header2.png)}

as far as our css gods here say, using more than one h1 on a page is a bit naughty but it doesn't influence what you're having trouble with

camieabz
(legend) Mon 09-May-11 14:30:12

Re: CSS refresher

[re: deleted] [link to this post]

FWIW the header.h1 was a hypothetical example, and not what I'm doing.

As far as I know you can use as many h1 tags, but they don't improve SEO results. Not sure if a validator will pop up and moan of multiple ones, but apparently HTML5 is happy with them (whatever that means). smile

Regarding the background:url and background-image:url

http://www.w3.org/TR/css3-background/#background

Example XVI

~~~~~~~~~~

© Camieabz 2002-2011

Live BQM

deleted
(deleted) Mon 09-May-11 18:55:03

Re: CSS refresher

[re: camieabz] [link to this post]

In reply to a post by camieabz:
As far as I know you can use as many h1 tags, but they don't improve SEO results. Not sure if a validator will pop up and moan of multiple ones, but apparently HTML5 is happy with them (whatever that means).

I imagine it's perfectly valid markup, it's just frowned upon design.

As to your intial problem I think the link you provided rather suggests that the correct solution would be to set

Text

1
2

.header h1 {margin:0; padding:10px 10px 10px 10px; background:url(../img/header.png) no-repeat; background-position:10px 10px; font-weight:bold; font-size:120%;}
.header h1.different {background-image:url(../img/header2.png) no-repeat;}

would be correct as "background" sets all values associated with the background (those not defined being set to defaults) and all you want to set in your second h1 is the image attributes.
As has already been explained by jonathanHodd

deleted
(deleted) Tue 10-May-11 08:28:49

Re: CSS refresher

[re: camieabz] [link to this post]

I just tested the problem with some code, using 'background' to set the image for the alternative tag re-set all the other background options, using background-image did not.

1: re-sets the background position

Text

<html>
<head><style type="text/css">
div {        background: url("1.gif") repeat-x red 10px 10px;
        margin:20px;        padding:20px;
}div.alt {
        background:url("2.gif");}
</style></head>
<body><div>div</div>
<div class="alt">alt div</div></body>
</html>

2: keeps the position settings, uses different image

Text

<html>
<head><style type="text/css">
div {        background: url("1.gif") repeat-x red 10px 10px;
        margin:20px;        padding:20px;
}div.alt {
        background-image:url("2.gif");}
</style></head>
<body><div>div</div>
<div class="alt">alt div</div></body>
</html>

screenshot here : http://shunt.hodd.org/css-test.jpg (damned forum not letting me post img tags!)

camieabz
(legend) Tue 10-May-11 10:04:02

Re: CSS refresher

[re: deleted] [link to this post]

That's what comes of splicing old code for new jobs, rather than writing from a fresh perspective.

The original purpose was for a breadcrumb arrow image and the links. The image was transparent and both the link's background in original and visited state was to remain the same colour. The code was something like:

.div ul ul a.link, .div ul ul a.link:visited

What I tried to do was take the two, seperate them and apply them to another webpage, but instead of visited it was with the > hover aspect and have the image change (the image being a rounded corner edge). Basically it's not the best way, and I should have written the code from the ground up. Trying to save time. I was messing with:

{ -khtml-border-radius: 0em 0em 1em 1em; -webkit-border-radius: 0em 0em 0em 0em;
border-radius: 0em 0em 0em 0em; -moz-border-radius: 0em 0em 0em 0em;}

...and finding it far less than satisfying unless one uses FF. I got rounded corners, but the colour formats got lost on hover. Was looking at ways of avoiding the above code (also for validation reasons - I don't like the webkit aspect). Strangely, now the flipping thing works fine across all browsers. No colour loss.

Tis a funny old thing sometimes, CSS.

Pages in this thread: 1 | [2] | (show all)

Print Thread

Jump to