Sat, 2009-11-28 10:55
The code is at the bottom, the idea is to have rounded corners on the top left (tl) bottom left (bl), top right (tr) and bottom right (br). You get the idea. What am I doing wrong. I have copied this almost word for word from the Best Practice XHTML and CSS book:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { color: White; } #testDiv { position:absolute; left: 100px; top: 100px; } p { background: black url("curve_tl.gif") top left no-repeat; } p span { background::url("curve_bl.gif") bottom left no-repeat; } p span span { background::url("curve_tr.gif") top right no-repeat; } p span span span { background::url("curve_br.gif") bottom right no-repeat; </style></head> <body> <div id="testDiv"> <p><span><span><span>Testing testing</span></span></span></p></div> </body> </html>
Sat, 2009-11-28 11:53
#1
It doesn't answer your
It doesn't answer your question, but have you considered using CSS3 for your rounded corners? very simple.
http://www.css3.info/preview/rounded-border/
New browsers get the nice rounded corners, and older ones get acceptable square ones.
Sat, 2009-11-28 12:07
#2
pingu wrote:It doesn't
It doesn't answer your question, but have you considered using CSS3 for your rounded corners? very simple.
If all you want is rounded corners for rounded corners sake then it's fine. There are still some issues with it. You can do much more with Thrashbox or ALA's Custom Corners and borders.
Sat, 2009-11-28 12:04
#3
No
I want to do it this way and I don't want to use CSS3 if the older browsers don't support it. Anyone have any idea why this doesn't work? Surely someone must know, it's amazing to me that the code doesn't work from the book.
Sat, 2009-11-28 12:16
#4
KostaKondra wrote:I want to
I want to do it this way and I don't want to use CSS3 if the older browsers don't support it. Anyone have any idea why this doesn't work? Surely someone must know, it's amazing to me that the code doesn't work from the book.
That book sounds like a real peach. 
... I have copied this almost word for word ...
Quoted for posterity.
Can you show a link please? It may be something as simple as your image paths. Have you been to htmldog.com yet?
I agree with your stance on not wanting to use CSS3 if older browsers don't support it. May as well not bother since 95% of users use an "older browser".
Sat, 2009-11-28 13:10
#5
Enjoy
Here is the URL so you can check out the code as well as confirm that the image paths are indeed correct: (I posted it up on my domain just nwo)
http://www.headstudios.com.au/Test/index.html
Verschwindende?
Sat, 2009-11-28 13:44
#6
First, you didn't validate
First, you didn't validate your styling. This is even more important than validating your markup as a browser will at least try to work with malformed markup. Improper styling syntax is simply skipped.
Second, I think you're missing something very important from the book example (such as "display: block;").
Sat, 2009-11-28 14:08
#7
?
What does validating my styling mean?
What must I change? I know there is something missing. The question is what?
Sat, 2009-11-28 16:48
#8
KostaKondra wrote: What does
Sun, 2009-11-29 03:17
#9
Not Useful
Document Checked
URL: http://www.headstudios.com.au/Test/index.html
Last modified: Sat, 28 Nov 2009 13:09:18 GMT
Character encoding: UTF-8
Level of HTML: XHTML 1.0 Transitional
Congratulations, no errors!
Validation has nothing to do with it. What made you think my style needed to be validated?
Sun, 2009-11-29 03:42
#10
KostaKondra wrote:Validation
Validation has nothing to do with it. What made you think my style needed to be validated?
Well, I don't know how to tell you that your wrong except to just say it. You validated your HTML, not your CSS. To answer your question, I know your styling needs to be validated because it's invalid.
http://jigsaw.w3.org/css-validator/
Yes, I am purposely not handing you the answers because you won't learn anything that way. I have your page working locally but I want you to figure it out.
Sun, 2009-11-29 04:16
#11
Not Fixed
Congratulations! No Error Found.
Nothing fixed. I put the trailing } and deleted the extra :. In other words the code is valid but the page still does not display properly. So what is the problem now?
Regards
Sun, 2009-11-29 04:50
#12
Well, what is different from
Well, what is different from the example in the book? I don't have the book, you're going to have to tell me the answer.
Notice by fixing the styling errors the bottom left image shows up. Now you need it to move to it's correct location. To say that it had no effect is not correct.
Sun, 2009-11-29 10:59
#13
Tutorial?
How would you achieve the effect I am aiming for, or can you point me to a relevant tutorial?
Regards
Sun, 2009-11-29 11:50
#14
I got it working on your
I got it working on your example by adding one simple property declaration, the fix I knew from the first post onwards, your use of the word 'Almost' indicative of the issue. V mentioned this as well, later or in the same comment actually gave you the answer!
We're not being unkind but learning to think for ones self and discover is worth far more than answers handed out.
Persevere, find that solution and then post back and ask why that was required as that may not be apparent and could perhaps do with a brief explanation.
Sun, 2009-11-29 14:03
#15
Yes, seriously. You're
Yes, seriously. You're almost there. So close.
One little item to make it work and maybe another to make it look better.
Mon, 2009-11-30 18:26
#16
KostaKondra wrote: How would
How would you achieve the effect I am aiming for, or can you point me to a relevant tutorial?
What happened to the book mentioned in the first post?
Wed, 2009-12-02 01:49
#17
Well
Well obviously it doesn't work/you guys aren't helping me. If I knew what was wrong I would have fixed it by now. There is another way of doing this however it does not allow you to scale your divs (aka liquid layouts with the :before and :after property but it can only be for fixed width if that makes any sense.
So tell me the one million dollar answer. What did I do wrong?
You might think I'm an expert at CSS but I'm not. I've closed all my brackets, there's only one ':' between the definitions.
Please.
I feel I'm in Alice in Wonderland - "You'll get it... just one more".
Wed, 2009-12-02 02:17
#18
Scribd??
Are you looking at the scribd book online? It is incomplete (I wonder if by design, lolz). The example link does show that adding display: block; to p span is the key.
Well, here comes the little airplane, RRRRRRRRRAAAAAWWWWWERRRRRRRR! Spoon!
Wed, 2009-12-02 03:47
#19
Lol
Excerpt from the book:
Background images aren’t just about the bigger picture—they are used for every
decorative effect. In Figure 4.6 two rounded corners are applied to a content
area. The first is applied to the area’s container and the last is applied to the
bottom paragraph, so there is no need for any extra markup.
As long as you have enough elements to latch CSS onto, you can apply more than
one background to a part of the page. For example, you could add one rounded
corner to a paragraph by applying a background image to the top left of a p
element,
but if you had something like
<p><span><span><span>whatever </span></span</span></p>
span for the bottom left corner, and p span span span for the bottom right
corner) using something like this:
p {
background: white url(images/sifakaptl.gif) top left norepeat;
}
p span {
background: url(images/sifakaptr.gif) top right no-repeat;
}
p span span {
background: url(images/sifakapbr.gif) bottom right no-repeat;
}
p span span span {
background: url(images/sifakapbl.gif) bottom left no-repeat;
}
The p element applies one of the corner images (top left) and also sets the background
color of the box. Each of the nested span elements then applies another
corner.
So as you can see obviously the book is wrong, so where is that airplane going?
(I would show the PDF print page but I can't attach an image to a reply... strange).
Wed, 2009-12-02 04:31
#20
Yeah, I found the same pirate
Yeah, I found the same pirate copy. I was just wondering if they purposely let that out to frustrate people that didn't buy the book. lol
So, did you try what I've twice suggested to fix the issue?
The airplane is strained peas and carrots.
Wed, 2009-12-02 05:11
#21
Lol
1) I am using another method and lol why would you think I have a pirate copy? **hands start sweating**
And yeah maybe so. Still you guys were like acting like I had left out a bracket "Come on you're nearly there you can do it" while I'm completely lost.
Okay so I'm probably breaking a rule here (btw I have found another way to fix the problem but I will keep the p display:block in mind).
Can you tell me why my content text (it's the one with the naughty words) doesn't display to the right?
http://www.headstudios.com.au/faround/index.html
It's ridiculous, especially considering #leftBar (navigation) is position:absolute; so I really don't understand why #content would be coming after it.
You're going to help me make my awesome digital media production company website... and in exchange... well what do you want? Money right. I haven't got any.