CSS newbie, Curved boxes.
Hey guys,
I know you are all very nice people here, so I thought I'd take advantage and ask you something which is troubling me. After talking about design, a member of this forum told me that learning CSS would help me a great deal. So today I took one hour out of my time to learn CSS. I've learnt tonnes already and I'm really digging this.
So I decided that I'm wanting to now learn how to create curved tables, after googling I found the same tutorial plastered on many sites and I cannot follow the tutorial one bit. I'm trying to follow this:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
I've saved the 4 images supplied so I can quickly get this, but I just keep getting it wrong, I was also confused as to wether "Lorem ipsum dolor sit amet consectetur adipisicing elit" is actually relevant. Anyway, I've made no progress and this is something I really want to learn.
If anybody could provide links, easy tutorial or just general tips I'd be very thankful.
Thanks for now guys, I look forward to hear your advice.
robbluther posted this at 18:32 — 24th January 2006.
He has: 73 posts
Joined: Jan 2006
Nope. That is copy filler. Fake text used so you can see what the layout will look like.
Shaun posted this at 18:39 — 24th January 2006.
He has: 52 posts
Joined: Nov 2005
Right, thought that myself... I'm just used to seeing it as 'sample text' or 'example text', I don't normally follow tutorials.
Thanks for the help man,
JeevesBond posted this at 20:26 — 24th January 2006.
He has: 3,956 posts
Joined: Jun 2002
Well, that looks like a reasonable tutorial. Have you got a link to the code you've already done? Seeing that would help.
Also, you said you were using a table? Not a div tag or list item?
I can't find the precise article that explains it best, but I did find the one that started it all off - at least I think it was: http://www.alistapart.com/articles/slidingdoors by Douglas - The Guru - Bowman.
This is for menus, but has been expanded to cover things like that tutorial you linked to.
Also a couple of hours is never enough to fully understand CSS, it'll be years before you're truly "fluent."
a Padded Cell our articles site!
Shaun posted this at 21:09 — 24th January 2006.
He has: 52 posts
Joined: Nov 2005
I've only had 1hour and 30 minutes of studying CSS, I just pasted the code into the header. I keep deleting my previous attempts.
It would be helpful if I had an example of the script, so I could revise it and manipulate it to my liking, unless that counts as stealing.
Thanks for the link man, I appreciate the help I'm recieving.
demonhale posted this at 02:48 — 25th January 2006.
He has: 3,278 posts
Joined: May 2005
I have an actual div extension for css to make borders curve...
no need for curved images to insert... Although its not fool-proff, setting a background overflows on the curved edge...
Shaun posted this at 07:23 — 25th January 2006.
He has: 52 posts
Joined: Nov 2005
Not sure if I'm that advanced yet Demonhale, thanks for the tip though.
As for that original tutorial, it's where the code goes I'm having trouble with. I prefer hands-on learning really, maybe if someone could tell me where to place the coding I could learn it.
Thanks guys,
JeevesBond posted this at 13:19 — 25th January 2006.
He has: 3,956 posts
Joined: Jun 2002
Finally found it!
http://www.alistapart.com/articles/customcorners/
The article can be summarised as follows.
1. Take this code and save in an HTML document:
<!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>
<title>CSS Design: Creating Custom Corners & Borders: A List Apart: Looks like we're finally there!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
background: #cbdea8;
font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
}
div.Article {
background: url(images/custom_corners_topleft.gif) top left no-repeat;
width:35%;
}
div.Article h3 {
background: url(images/custom_corners_topright.gif) top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background: url(images/custom_corners_rightborder.gif) top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background: url(images/custom_corners_bottomleft.gif) bottom left no-repeat;
}
div.ArticleFooter p {
background: url(images/custom_corners_bottomright.gif) bottom right no-repeat;
padding:15px;
display:block;
margin:-2em 0 0 0;
}
</style>
</head>
<body>
<div class="Article">
<h3>Article header</h3>
<div class="ArticleBody">
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
</div>
<div class="ArticleFooter">
<p>
A paragraph containing author information
</p>
</div>
</div>
</body>
</html>
2. Save that file, then in the directory you saved it in create a sub-directory called "images".
3. Go to: http://www.alistapart.com/d/customcorners/step1.1.html and save all the images on that page, make sure the file names are the same as they are on the web page (so the CSS above will work).
4. Open file in the web browser of your choice.
5. Proceed to learn by example! Remember that the css here is only in the same file for readability, it's far better under most circumstances to hive this off into a seperate file that can be re-used across pages - but that's another tutorial.
Important!
Make sure you save the image on the very bottom of that page, it's very small but definately there. I forgot to save it and was rather confused!
Hope this helps.
a Padded Cell our articles site!
Shaun posted this at 18:00 — 25th January 2006.
He has: 52 posts
Joined: Nov 2005
Thanks, I'll give that a try. Thank you very, very much!
It works, thanks very much <3
I just need to learn how to center that up then I'm good to go.
JeevesBond posted this at 20:46 — 25th January 2006.
He has: 3,956 posts
Joined: Jun 2002
For Internet Explorer (because it's a browser that doesn't support the specifications) put:
body {...[Other CSS]...
text-align: center;
}
#article {
...[Other CSS]...
text-align: left;
}
Then for standards compliant browsers you'll need to do the following:
div.Article {...[Other CSS]...
margin: 0 auto 0 auto;
}
Sorted!
a Padded Cell our articles site!
Shaun posted this at 20:48 — 25th January 2006.
He has: 52 posts
Joined: Nov 2005
JeevesBond, why are you not Pope yet?
This information is fantastic and a great shove in the right direction, I thank you and everyone else who lent a hand.
I'm forever in your debt.
One more thing, how do I fix this?
I've got chunks coming out the right hand side, seems to be whenever I put in an image.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.