Re: Need CSS Help/Resources
My guide is to think the other way around. Instead of thinking about slicing the image and creating HTML and CSS based on the image, create a HTML page and then start thinking about how to get it styled more in the way you want.
By looking at the image, you'll need to split it into 8 images:- Repeating left side
- Repeating right side
- Repeating header
- Left corner for the header
- Right corner for the header
- Repeating footer
- Left corner for the footer
- Right corner for the footer
This is, if you're going for the minimal filesize. Also, I highly recommend PNG for saving the images :)
Anyways, let us take a look at what we can do with HTML. Here is a basic HTML body that I do to almost every site I build, however, adding in elements so that they'll appear to fit with what you have in mind:
Code:
<body>
<div id="document">
<div id="header">
<h1>Site name</h1>
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">There</a></li>
<li><a href="">And</a></li>
<li><a href="">Back</a></li>
<li><a href="">Again</a></li>
</ul>
</div>
<div id="content">
<h2>Main content</h2>
<p>Add lorem ipsum here.</p>
</div>
<div id="footer">
<p>Site created by You</p>
</div>
</div>
</body>
Now, when we start investigating what we can do with the HTML we have here, we can make up a few conclusions:- body and #document are fit for making the left and right sides, because they both will repeat for the whole page.
- #header is fit for the repeating header background, and it has two child elements that can hold the left and right sides
- #content is otherwise empty, so it can contain the repeating footer background
- #footer and it's only child and hold the left and right images
We now know we can place all the images in the elements so that we end up with the design. Now it is all about mastering the CSS. For a good place for all the possible properties, I recommend getting familiar with CSS 2.1 full property table. All properties are not yet supported by all the browsers (*cough* Internet Explorer *cough*), but there is very well enough support that you can go on and create the design you've made.
I didn't bother this time to go ahead and create it all ready, you might want to go ahead and try it yourself first; I got the image that you want to learn CSS. If you have a lot of trouble, you can always come back and ask for more help and guidance. My last tip for now is that first get things working with Firefox, Opera and Safari, and only then start wondering about Internet Explorer, since you can fix it separately without messing up the other browsers if you end up with problems. IE has some nasty quirks.
Re: Need CSS Help/Resources
Thanks Merri,
I understand what you are saying and I looked over the CSS document but its still a blur to me. Do you have some sort of example that I can look at so that I can get an idea of what i need to do?
Re: Need CSS Help/Resources
Humm, well, I make some of the CSS so you can get started with it.
Code:
html {
/* a shorthand for many background related properties */
background : #008;
/* set base font size */
font-size : 10pt;
}
body {
/* center this block level element */
margin : 0 auto;
/* set maximum and minimum width */
max-width : 965px;
min-width : 715px;
/* set padding; repeating left background image assumed to be 15px */
padding : 0 0 0 15px;
/* align absolutely positioned child elements according to this element's boundaries */
position : relative;
}
#document {
/* set padding, leave the space for repeating right side image */
padding : 0 15px 0 0;
}
#header {
/* the top repeating image is 118 pixels */
height : 118px;
/* negative margin allows element to enlarge it's width */
margin : 0 -15px;
}
/* we move header text to the left side: it can contain the left top corner */
#header h1 {
height : 118px;
left : 0;
/* absolutely positioned elements are positioned according to the relatively positioned parent */
position : absolute;
top : 0;
}
/* move navigation list to the right side */
#navigation {
height : 118px;
/* some elements have default margin and padding that needs to be removed */
margin : 0;
padding : 0;
position : absolute;
right : 0;
top : 0;
}
#navigation li {
/* change from list-item to inline element: now it is like regular text */
display : inline;
/* set line height to 20px, height does not work with inline elements */
line-height : 20px;
/* top 98px, right and left 5px, bottom 0px */
margin : 98px 5px 0 5px;
}
#content {
background : #FFF;
/* padding of 10px around the content, but also leave space for the 57px footer */
padding : 10px 10px 67px 10px;
}
#footer {
bottom : 0;
height : 57px;
left : 0;
line-height : 24px;
position : absolute;
}
#footer p {
margin : 0;
padding : 0;
text-align : center;
}
All the background settings are missing. The property goes like this:
background : #color url('pathtoimage.png') repeat left top;
Now, if you want to position a vertically repeating image to the right side:
background : url('rightside.png') repeat-y 100% 0%;
The 100% tells the image to align to the right within the element. repeat-y make the image only to repeat vertically. I guess the other values are self-explanary. As you can see, you can leave out the color. When you do this the element becomes otherwise transparent and does not draw any background color. Also, if you'd have set elsewhere before the element to have a background color, it'll be removed with this kind of line. For example:
background-color : black;
background : url('pathtoimage.png') repeat-x;
This will end up with a horizontally repeating background image and the element does not have a background color. It also starts from the left top corner, the position values are also reseted to zero.
Then we have a property called display that needs your attention. Mostly elements are either block or inline level elements. Block elements by default reserve all the horizontal space that is available to them. For example, h1 is a block level element, so this is why a header element appears to be in it's own line. If you give a border to the element, you will see how it takes all the horizontal space that is available to it.
Inline elements are regular text and they will be positioned according to the line. Line height is determined by either line-height or by the highest inline element that is on that line. Inline elements wrap from line to another if it is possible to them. Images are inline elements by default, so they're kind of treated like one big character on a line.
Then we have padding and margin. They are shorthands for properties such as padding-left or margin-bottom. What you need to know about them is the order the values repeat.
This one repeats to all sides: padding : 5px;
This one repeats so that top and bottom is 5px, right and left 10px: margin : 5px 10px;
Top 1px, right 2px, bottom 3px, left 4px: padding : 1px 2px 3px 4px;
There is also value auto. This works with margin's left and right values so that the element's left or right margin is adjusted automatically. Basically this means the element will be centered if you give it to both sides. You can also cause an element to be aligned to the right by giving auto value to the left margin. Auto works with block level elements, not with inline level elements.
Then one final note for this post: I didn't test the above CSS, so it may not align perfectly according to what is required in your design. However it gives you pretty much everything you need to eventually make it evolve to the design you've made.
You'll probably have some issues with browsers behaving differently. I recommend using a Strict DOCTYPE, and also remember to place the DOCTYPE to the first line so that Internet Explorer too understands you want to be in the standards mode. I trust that you're interested enough on the subject to find out how to attach a CSS file to the HTML page if you don't already know that, finding that information is very easy (any site you open does it, so you can find it out by looking into the source code of almost any page).
1 Attachment(s)
Re: Need CSS Help/Resources
Merri,
I have taken your code and tried to work my design in around the code, this is how far I got.
Now I have a few questions:
How do I code the corners in the CSS as opposed to hardcoding them as images like I did.
At the top my background is also showing inside my template where it should be white, what do I need to change?
Also at the bottom where I have the footer how do I get the site created by text in the gray area?
In IE the template stretches the entire width of the screen what needs to be done in order to make it keep its form just like in Firefox?
Here is my code, I have attached a zip file with all the images
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
html {
/* a shorthand for many background related properties */
background : url('Background.gif') repeat left top;
/* set base font size */
font-size : 10pt;
}
body {
/* center this block level element */
margin : 0 auto;
/* set maximum and minimum width */
max-width : 965px;
min-width : 715px;
/* set padding; repeating left background image assumed to be 8px */
padding : 0 0 0 8px;
background : url('LeftBorder.gif') repeat-y;
/* align absolutely positioned child elements according to this element's boundaries */
position : relative;
}
#document {
/* set padding, leave the space for repeating right side image */
padding : 0 8px 0 0;
background : url('RightBorder.gif') repeat-y 100% 0%;
}
#header {
background : url('TopBorder.gif') repeat-x;
/* the top repeating image is 118 pixels */
height : 118px;
/* negative margin allows element to enlarge it's width */
margin : 0 -1px;
}
/* we move header text to the left side: it can contain the left top corner */
#header h1 {
height : 118px;
left : 0;
margin: 0;
/* absolutely positioned elements are positioned according to the relatively positioned parent */
position : absolute;
top : 0;
}
/* move navigation list to the right side */
#navigation {
height : 118px;
/* some elements have default margin and padding that needs to be removed */
margin : 0;
padding : 0;
position : absolute;
right : 0;
top : 0;
}
#navigation li {
/* change from list-item to inline element: now it is like regular text */
display : inline;
/* set line height to 20px, height does not work with inline elements */
line-height : 20px;
/* top 98px, right and left 5px, bottom 0px */
margin : 98px 5px 0 5px;
}
#content {
background : #FFF;
/* padding of 10px around the content, but also leave space for the 57px footer */
padding : 10px 10px 46px 10px;
min-height : 215px;
}
#footer {
background : url('FooterBorder.gif') repeat-x;
bottom : 0;
height : 36px;
width: 100%;
left : 0;
line-height : 24px;
position : absolute;
}
#footer p {
margin : 0;
padding : 0;
text-align : center;
}
-->
</style>
</head>
<body>
<div id="document">
<div id="header">
<h1><img src="TopLeft.gif"></h1>
<ul id="navigation">
<img src="TopRight.gif">
</ul>
</div>
<div id="content">
<h2>Main content</h2>
<p>Add lorem ipsum here.</p>
</div>
<div id="footer">
<img src="BottomLeft.gif">
<img src="BottomRight.gif">
<p>Site created by You</p>
</div>
</div>
</body>
</html>
Thanks for your help
