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 29-Apr-11 09:23:59
Print Post

CSS refresher


[link to this post]
 
Forgotten how to get a child element optimised in CSS.

Lets day I have the headers:

<h1>Welcome</h1>

<h1>Content</h1>

<h1>Summary</h1>

The CSS might be:

.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%;}

I want to change the background for one of the headers, but retain all the other formatting. I figured that:

<h1>Welcome</h1>

<h1 class="different">Content</h1>

<h1>Summary</h1>

with

.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:url(../img/header2.png) no-repeat;}

Unfortunately this changes the image, but the position is lost. However:

.header h1.different {background:url(../img/header2.png) no-repeat;background-position:10px 10px;}

...does the trick. Is there a shorter way to do it? I'm trying to minimise the code.

~~~~~~~~~~


© Camieabz 2002-2011

Live BQM

My Broadband Speed Test
Standard User camieabz
(legend) Mon 02-May-11 06:14:23
Print Post

Re: CSS refresher


[re: camieabz] [link to this post]
 
I'll take the lack of responses as a no. smile

~~~~~~~~~~


© Camieabz 2002-2011

Live BQM

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

Re: CSS refresher


[re: camieabz] [link to this post]
 
What's the '.header' junk for? You just need h1. Also 'background' on its own is a shorthand, you are using it incorrectly (with blank values) which is why it is overwriting the less specific values. Do this;

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


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

Standard User camieabz
(legend) Fri 06-May-11 09:33:53
Print Post

Re: CSS refresher


[re: 12eason] [link to this post]
 
LoL!

Back again, and as polite as ever. Read up on CSS and learn why the .header is there.

~~~~~~~~~~


© Camieabz 2002-2011

Live BQM

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

Re: CSS refresher


[re: camieabz] [link to this post]
 
Well, I assume it's because all of the h1s you're targeting are inside a div with class header, which you haven't showed in your code. Either that or you have no clue why you're even using it and just copy pasted the code from some other site. Judging by the way you're using background, I can make a pretty good guess that you're doing it wrong.
Standard User 12eason
(eat-sleep-adslguide) Fri 06-May-11 10:13:51
Print Post

Re: CSS refresher


[re: camieabz] [link to this post]
 
oh and stop using relative font sizes.
Standard User camieabz
(legend) Fri 06-May-11 10:50:35
Print Post

Re: CSS refresher


[re: 12eason] [link to this post]
 
In reply to a post by 12eason:
Well, I assume it's because all of the h1s you're targeting are inside a div with class header, which you haven't showed in your code.


I took it as read that anyone who can improve the code can assume that much. No it isn't copied and pasted. It's not wrong.

~~~~~~~~~~


© Camieabz 2002-2011

Live BQM

My Broadband Speed Test
Standard User camieabz
(legend) Fri 06-May-11 10:53:17
Print Post

Re: CSS refresher


[re: 12eason] [link to this post]
 
They are relative for a reason. Stop being a plug for a second and think about why they would be relative. What does the word mean? Anyway, I'll take my second post as the answer. No one else is bothering, and your attitude (to most things), as usual, becomes the problem.

End of conversation.

~~~~~~~~~~


© Camieabz 2002-2011

Live BQM

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

Re: CSS refresher


[re: camieabz] [link to this post]
 
The word means more redraws and slower load times. Avoid % and ems and stick to pts and px.

Standard User 12eason
(eat-sleep-adslguide) Fri 06-May-11 11:01:08
Print Post

Re: CSS refresher


[re: camieabz] [link to this post]
 
You're welcome btw. Perhaps you'll use w3schools before asking such inane questions next time?

Pages in this thread: 1 | 2 | (show all)   Print Thread

Jump to