5 replies [Last post]
chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 37 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

http://chadian22.no-ip.com , i have no clue what im doing. I just started understanding how to place things in dev's, im slowly getting away from the table layout. But im sooo confused, i dont know how to get a basic header, and 2 columns layout the way I want it, and all these websites dont clear up anything when i do the tutorials, then there's the padding and margins that seperate things from each other, and im just like Shock :? ... soooo I was hoping some actual communication with real people would help explain it to me

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Sooo Confused, fixed, absolute, relative

Hi Chadian

Don't worry where here! Wink (Albeit intermittently).

What type of layout are you trying to achieve with that link?

The next sentence is true. The previous sentence is false. Discuss...

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 37 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

LOL

Is it me, or is co2 the only person that ever responds to my cries of help. Well, what im trying to do is have a So its a banner on the top, and then a 2 column system, with the right column being smaller. I also wanna use sub things within it. For example, i wanted to put a highlighted box for the title and have it with dotted lines and then the stuff underneath it, w/ tables it was a very long and dragged out process..
<table class="normaltext">
<tr>
<td>
<table class="highlighttitle">
<tr><td>TITLE</td></tr>
</table>
</td>
</tr>
<tr>
<td>
Recent Posts<br />
News<br />
Blog<br />
Pictures<br />
</td>
</tr>
</table>

That was soooo hard for me to keep along, because when i had <table> and </table> tags running around all over the place, so then i started using <div class="highlight"><table><tr><td>hello world</td></tr></table></div> and that worked a bit better for certain parts but still i had like <table> tags running around like nuts. And i was determined to find an easier way, but im making NO PROGRESS with this solution, ive got overlapping boxes and things going everywhere and when i change things from absolute to relative i dont see how it gets better, i usually learn from messing around and tweaking the codes and see what results i get, but it seems i get a random result everytime, and have nothing to compare it to. So ???? Can you help =) Thanks.

Basic Look:

[ Banner ]
-------------
          |    |
          |    |
          |    |
          |    |
          |    |
[/code]

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 37 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Sooo Confused, fixed, absolute, relative

I've been working really hard. I think you'll be proud of me Tongue. http://chadian22.no-ip.com/ , i just dont like how the box on the right crosses over the pre-existing text. I ultimatly want it similar to this website > http://www.snapturtle.com/

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Sooo Confused, fixed, absolute, relative

I don't know how much you've researched, but, ideally, you should look to make your design work first and foremost without the use of absolute positioning (and relative too). This is simply because it upsets the 'flow' of the code. Which, with today's push for standards in code and accessibility is not a good thing (for the likes of alternative browsers (PDAs, smartphones, text-browsers etc.)). But, from a more real-world view (a one where perhaps you're not too upset about PDAs etc. Wink ) standard browsers (IE, Mozilla etc.) prefer nice code as well. If your just starting out with CSS, you can get in a right tangle using absolute positioning and relative positioning (this from experience). I say start from the basics, until you've got a good grasp of them, then start introducing such things when you've got a better handle on the concepts.

Your design, I don't think needs much, if any absolute positioning. It's more desirable to use margins and padding to position elements off each other.

Also, look at the case-sensitivity of your CSS naming. You've got a class called .Header but in the HTML it's called with div class="header". CSS is case-sensitive so you'll run into trouble. Check them out.

I find a great way to test a layout (either from scratch or if you get stuck on a particular page) is to not work on the page itself, but do a basic 'mock-up' with as simple code as possible (open up your code editor) and make the basic layout with div's (or whatever your going to use) using a simple background colour. Here' one I was working on in order to sort out a layout yesterday (it cleared my head whereby if I was working directly on the proper page, it would've been confusing... images everywhere etc.): http://pub.c-o2.net/layoutExample.htm

The next sentence is true. The previous sentence is false. Discuss...

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Sooo Confused, fixed, absolute, relative

As a basic 'starter' layout ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Layout </title>
<style type="text/css">
div {margin:10px; padding:5px;}
#container {position:relative; display:block; width:700px; border:1px dotted #000;}
#header {display:block; border:1px solid #000; height:100px;}
#left {display:block; width:60%; float:left; border:1px solid #000;}
#right {display:block; width:25%; float:right; border:1px solid #000;}
#footer {display:block; border:1px solid #000; height:50px;}
.clear {clear:both;}
</style>
</head>

<body>
<div id="container">
<div id="header">
Chadian
</div>
<div id="left">
The newest standards of standards - Chadian 2.0. Definitely Coming Very Soon to an Internet Near you! in the mean time lay a friggin' smack down like some friggin' sea lions.
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
In the mean Time Scotty Doesn't Know <br />
</div>
<div id="right">
blog <br />
articles<br />
gallery<br />
downloads <br />
files<br />
<br />
<br />
<br />
<br />
</div>
<div class="clear"></div>
<div id="footer">
Copyright Chadian22 Under the <a href="http://creativecommons.org/licenses/by-sa/1.0/">creative commons deed</a>
</div>
</div>
</body>
</html>

Modify dimensions as required Smile

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk