Could sombody check this?

**guitartripp** · 08-28-2008, 01:12 AM

Could somebody check this and tell me if I did this the right way, and if there's a better way to get this done.

It would be nice if you could just take a moment to copy/paste this and see what it does.. I'm experimenting with layouts, and I'm trying everything possible.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Test</title>
<style type="text/css">
@import url(janow.css);
</style>
</head>

<body>
<div id="header">
<h2>Test</h2>
</div>
<div id="content">

<div id="topleft">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis pede tempor eros semper molestie. Curabitur leo mauris, blandit hendrerit, tincidunt et, fringilla et, justo. Quisque venenatis, velit at consequat placerat, ligula ante pretium nunc, eu ultrices enim felis at libero. Phasellus porttitor sem consequat est. Nunc non dolor rutrum. </p>
</div>

<div id="topright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis pede tempor eros semper molestie. Curabitur leo mauris, blandit hendrerit, tincidunt et, fringilla et, justo. Quisque venenatis, velit at consequat placerat, ligula ante pretium nunc, eu ultrices enim felis at libero. Phasellus porttitor sem consequat est. Nunc non dolor rutrum. </p>
</div>

<div id="bottomleft">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis pede tempor eros semper molestie. Curabitur leo mauris, blandit hendrerit, tincidunt et, fringilla et, justo. Quisque venenatis, velit at consequat placerat, ligula ante pretium nunc, eu ultrices enim felis at libero. Phasellus porttitor sem consequat est. Nunc non dolor rutrum. </p>
</div>

<div id="bottomright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis pede tempor eros semper molestie. Curabitur leo mauris, blandit hendrerit, tincidunt et, fringilla et, justo. Quisque venenatis, velit at consequat placerat, ligula ante pretium nunc, eu ultrices enim felis at libero. Phasellus porttitor sem consequat est. Nunc non dolor rutrum. </p>
</div>

</div>

</body>
</html>

CSS file..

Code:

body {
    background-color: yellow;
    color: black;
    }
#content div:hover {
    border-style: inset;
    }    
#content {
    width: 70%;
    height: 700px;
    margin: auto auto;
    border: 1px black inset;
    }
#header {
    width: auto;
    text-align: center;
    margin: auto auto;
    border: 1px black inset;
    }
#topleft {
    position: relative;
    width: 40%;
    height: 400px;
    top: 5%;
    text-align: center;
    left: 5%;
    border: 1px black outset;
    }
#topright {
    position: relative;
    text-align: center;
    width: 40%;
    height: 200px;
    left: 50%;
    bottom: 45%;
    border: 1px black outset;
    }
#bottomleft{
    position: relative;
    text-align: center;
    width: 40%;
    height: 200px;
    border: 1px black outset;
    bottom: 20%;
    left: 8%;
    }
#bottomright {
    position: relative;
    text-align: center;
    width: 40%;
    height: 300px;
    border: 1px black outset;
    left: 55%;
    bottom: 65%;
    }

Thanks for your time.

Just so you know, it is suppose to look out of order, but still be within the content block.

**N4EMP** · 08-28-2008, 01:49 AM

Basic HTML looks plain and simple. Nothing fancy/flashy to look at or read. Latin?
Haven't seen what ALL the CSS does just yet.

**N4EMP** · 08-28-2008, 02:03 AM

Not sure how you are placing the css file into your HTML... Can you paste it as you see it from your end if it looks RIGHT to you?
I use NOTEPAD to copy/paste and saved it as test.html
Then, tried to add the css where I thought it went. Yuck!! Bunch of extra stuff on the page without helping coloring, etc. etc. Show ME??

**N4EMP** · 08-28-2008, 02:07 AM

PS...
I am still somewhat of a NOVICE in this web page stuff here. So don't take anything I say WRONGLY! Somebody else will see this and straighten me/us out. I ain't too ashamed to admit it! :~>

**N4EMP** · 08-28-2008, 03:03 AM

After going offline and looking at some stuff I have saved on pc for web pages I've made...

I saw this HTML <body bgcolor="yellow" text="Black" bgproperties="fixed"> which made your web page (without any css) have a colored background and will "stay in place" as the page scrolls if you had more content to read/view.
Still, don't see what the rest of the css file is trying to show. Can you show ME?
Here's your css...
body {background color:yellow; font color:black;} #content div:hover { border-style: inset; } #content { width: 70%; height: 700px; margin: auto auto; border: 1px black inset; } #header { width: auto; text-align: center; margin: auto auto; border: 1px black inset; } #topleft { position: relative; width: 40%; height: 400px; top: 5%; text-align: center; left: 5%; border: 1px black outset; } #topright { position: relative; text-align: center; width: 40%; height: 200px; left: 50%; bottom: 45%; border: 1px black outset; } #bottomleft{ position: relative; text-align: center; width: 40%; height: 200px; border: 1px black outset; bottom: 20%; left: 8%; } #bottomright { position: relative; text-align: center; width: 40%; height: 300px; border: 1px black outset; left: 55%; bottom: 65%; }
Sounds/Looks like it contains a table of some sorts. Am I CLOSE??

**guitartripp** · 08-28-2008, 10:38 AM

Just have both files saved in the same folder, and have the css file named Janow.css.

that will get it to import the css into the page, so you can see what it's doing.

**LadynRed** · 08-28-2008, 03:00 PM

1 - you do NOT need all that positioning, it's unnecessary. Learn to use the normal document flow and floats and then use positioning only when absolutely necessary.

2 - IE does not support a "fixed"

3 - You have div:hover - IE6 doesn't support hover on anything except the <a> tag. You'll need scripting to force it if you want to keep this.

4 - You don't need width:auto - the width will be 'automatic' by default, filling the full width of it's parent container.

5 - margin: auto auto; - can be just margin: auto;

**guitartripp** · 08-30-2008, 02:16 AM

1 - Your talking about the position: style, right? I can take that out, but I still need to use all those margin and left/right or whatever to position properly.

2 -

3 - that div:hover is just for fun. I don't plan on using it.

4 - That was pretty dumb, huh? :P

5 - I saw that margin: auto auto in a book, and thought it was correct. I will fix that.

Thank you for the response. I'm just playing around with layout. I know this is no special design or anything, but I learn by experimenting, not by copying from somewhere.

**LadynRed** · 08-30-2008, 11:08 AM

1 - Right. Using floats, you would use margins and padding to put your elements where you want them.

**guitartripp** · 08-30-2008, 02:51 PM

So, how do I know what order the Divs should be in on my index.html page? Or does that not matter?

**LadynRed** · 08-30-2008, 04:48 PM

Normal document flow - top to bottom, left to right