Shaun — Wed, 25 Jan 2006 20:48:06 +0000

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.

JeevesBond — Wed, 25 Jan 2006 20:46:59 +0000

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!

Shaun — Wed, 25 Jan 2006 18:00:16 +0000

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 — Wed, 25 Jan 2006 13:19:06 +0000

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 &amp; 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.

Shaun — Wed, 25 Jan 2006 07:23:05 +0000

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,

demonhale — Wed, 25 Jan 2006 02:48:26 +0000

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 — Tue, 24 Jan 2006 21:09:12 +0000

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.

JeevesBond — Tue, 24 Jan 2006 20:26:38 +0000

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."

Shaun — Tue, 24 Jan 2006 18:39:47 +0000

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,

robbluther — Tue, 24 Jan 2006 18:32:02 +0000

Quote: I was also confused as to wether "Lorem ipsum dolor sit amet consectetur adipisicing elit" is actually relevant.

Nope. That is copy filler. Fake text used so you can see what the layout will look like.