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


Register (or login) on our website and you will not see this ad.


Pages in this thread: 1 | [2] | (show all)   Print Thread
Standard User camieabz
(legend) Fri 06-May-11 11:14:06
Print Post

Re: CSS refresher


[re: 12eason] [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

My Broadband Speed Test
Standard User 12eason
(eat-sleep-adslguide) Fri 06-May-11 11:15:39
Print Post

Re: CSS refresher


[re: camieabz] [link to this post]
 
The feature is not implemented yet.

Standard User jonathanHodd
(knowledge is power) Mon 09-May-11 13:11:22
Print Post

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

-------------------------------------------------------
flickr
There is nothing in life that cannot be improved with either monkeys, pirates or ninjas


Register (or login) on our website and you will not see this ad.

Standard User camieabz
(legend) Mon 09-May-11 14:30:12
Print Post

Re: CSS refresher


[re: jonathanHodd] [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

My Broadband Speed Test
Standard User pmb00cs
(eat-sleep-adslguide) Mon 09-May-11 18:55:03
Print Post

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

happily chugging along on plusnet and Virginmedia (yes I am greedy)
My web server
Standard User jonathanHodd
(knowledge is power) Tue 10-May-11 08:28:49
Print Post

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
1
23
45
67
89
1011
1213
1415
1617
18
<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
1
23
45
67
89
1011
1213
1415
1617
18
<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!)

-------------------------------------------------------
flickr
There is nothing in life that cannot be improved with either monkeys, pirates or ninjas
Standard User camieabz
(legend) Tue 10-May-11 10:04:02
Print Post

Re: CSS refresher


[re: jonathanHodd] [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.

~~~~~~~~~~


© Camieabz 2002-2011

Live BQM

My Broadband Speed Test
Pages in this thread: 1 | [2] | (show all)   Print Thread

Jump to