Div Alignment

escaflowne11 · #1 Aug 28th, 2006, 04:24

Hey, Im working with CSS to code all my div layers, and I am wondering how I can specifically position my divlayers through CSS. I cant figure it out, nor can I find it on any of my "educational" websites for webdesign. Can someone help me out?

Ryan Fait · #2 Aug 28th, 2006, 05:24

These examples will help you out:

float: left;

float: right;

position: absolute
top: 200px;

position: absolute:
left: 90px
bottom: 0;

position: absolute;
right: 50%;

escaflowne11 · #3 Aug 28th, 2006, 13:06

Wow! Thanks a lot! Thats exactly what I needed!

Ryan Fait · #4 Aug 28th, 2006, 16:14

No problem. Here's a full reference of all the CSS properties:
http://www.w3schools.com/css/css_reference.asp

moojoo · #5 Aug 28th, 2006, 16:59

Don't forget position:relative; etc..

escaflowne11 · #6 Aug 29th, 2006, 04:40

I just needed to know that float is the command, and a few examples. Thanks for all the help guys! Ill be back later for more help I'm sure :P

escaflowne11 · #7 Sep 3rd, 2006, 21:19

Let me bring the thread back to life for a second. Let me make sure what I am doing wrong here, and hopefully Ill understand! This is the Index file right here...

Quote:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css" />
<title>Scoff Skateboarding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div class:main>Content Goes here</div>
</body>
</html>

And this is the CSS file Im working with. This is what I am compleatly new to, so let me know what I am doing wrong if I am anywhere!

Quote:

/* CSS Document */

h1
{
color: #0099FF
}

h2
{
}

body
{
background-color:#005fa4;
background-image:url(Backing copy.gif);
background-position:top;
background-repeat:repeat-x;
}

div.main
{
border:2px;
border-color:#000000;
width: 600px;
height: 400px;
position: absolute;
right: 50%;
}

Now, I dont know much about it, but the background propertys are working great in firefox. I dont know if all the propertys will work in other browsers, but so far so good for me...

Its the Div command Im using thats not working. It dosnt look like I am having any control over my Div propertys at all. How can I pull this stuff off?

ukgeoff · #8 Sep 3rd, 2006, 21:59

Your mistake is in this syntax here:

Code: Select all

 <div class:main>Content Goes here</div>

The correct syntax is:

Code: Select all

class='main'

Remember, class definitions, ie., those defined '.def' can be used many times on a page whereas id definitions, defined '#def' must be unique on a page.

escaflowne11 · #9 Sep 4th, 2006, 00:54

Heh. Thanks! I shoulda known better.

escaflowne11 · #10 Sep 4th, 2006, 01:01

Alright I have a new problem. The code that positioned the layer didnt work entirely. I could swap out the colors and stuff, but its not allowing a border to show at all, and its not positioning to the center properly. Wouldnt that right 50% command do that for me?

ukgeoff · #11 Sep 4th, 2006, 14:54

No. What that is saying is position the element (its right side) 50% of the window width from the right-hand side of the window.

To position something in the centre, you nedd to use the margin: auto; instruction.

You can set various combinations such as margin: auto auto; which will centre top to bottom as well. You can also use fixed measurements for say top to bottom and auto for side to side.

Have a play.

WARNING: IE 6 doesn't do this properly but it is fixed in IE7 we are told!

To get round this, you need to give the div containing the one you wish to centre the attribute definition; text-align: center;

As this has a ripple down effect, you will need to compansate for this by using text-align: left; at the next level in.

escaflowne11 · #12 Sep 6th, 2006, 00:56

Alright now, I hate to keep coming back to you, but its helping, so if you would still hang in here with me it would be MUCH appreciated.

Your margin:auto worked great, but now I need to pull it down from the top a bit. What should I do about this. I have an idea that I should probably just use the .main div to hold many other divs inside, and use that as a template, but is there a better way?

I also noticed that the way I have my background set up...

Quote:

body
{
background-color:#005fa4;
background-image:url(Backing copy.gif);
background-position:top;
background-repeat:repeat-x;
}

Wont work in firefox properly. It dosnt display the image at all, but the color is everywhere. What can I do about that to?

Ryan Fait · #13 Sep 6th, 2006, 02:31

This is CSS shorthand:

Code: Select all

body {
    background: #005fa4 url("backing_copy.gif") repeat-x 0 20px;
}

Never uses spaces in file names.
Always put quotes around the filename in CSS.
The 0 20px translates to: the background image starts zero pixels from the left and 20 pixels from the top.

escaflowne11 · #14 Sep 6th, 2006, 03:55

That works great! I can now write freehand. Didnt know about it. Dreamweaver also supports it in its auto writing stuff, so that helps a lot!

How does that "0 20px" thing work? Does it have a special order to it, or am I not seeing it?

Ah! Im also answering a few of my own questions myself. I think I am getting the hang of this! So far so good

Ryan Fait · #15 Sep 6th, 2006, 09:46

The order is left top. If you used 20px 50%, it would put the background image 20 pixels from the left and vertically centered.

Ryan Fait · #16 Sep 6th, 2006, 09:50

Oh, most sites use top left as a designation (top, right, bottom and left are also valid positons), but this is wrong it should be left top. I've always found it easier to use pixels and percentages though, plus it reminds the coder of the proper order. Right bottom would be 100% 100%, whereas left top would be 0 0, 0px 0px or 0% 0%.

masonbarge · #17 Sep 6th, 2006, 10:12

first number is horizontal, second is vertical. Usually you will designate it, because you can push it from the other direction, e.g. position: relative; bottom: 10px; right 9px;

escaflowne11 · #18 Sep 8th, 2006, 00:33

Here is the code I have right now, and now for the problems I ran acrossed yet again. Thanks for getting me so far in this, I hope I can repay the favor later on!

Quote:

/* CSS Document */

h1
{
color: #0099FF
}

h2
{
}

body
{
background: #005fa4 url("backing.gif") repeat-x;
}

div.container
{
margin: auto;
height: 600px;
width: 600px;
}

div.header
{
margin: auto;
height: 120px;
width: 590px;
}

div.nav
{
border-width: 2px;
border-color: #000000;
border-style: solid;
margin: auto;
heigth: 40px;
width: 590px;
background-color: #FFFFFF;
}

div.body
{
border-width: 2px;
border-color: #000000;
border-style: solid;
margin: auto;
heigth: 400px;
width: 590px;
background-color: #FFFFFF;
}

Quote:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css" />
<title>Scoff Skateboarding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div class='container'>
<div class='header'></div>

<div class='nav'></div>
<div class='body'></div>
<div class='nav'></div>

</div>
</body>
</html>

Now the problems I ran acrossed was that now that I have multiple div layers in play, they dont want to conform to the dimensions I am giving them. I cant get the height to work for the 'nav's, and the 'body'. I also cant get the borders to work properly, along with the background color... I had them at one time, but now they wont show at all. And thats in firefox. Explorer includes the border, with the background color, but wont use the dimensions. Any thoughts on this problem?

If you want to see the style I am aiming for check out the old, trashy site. http://www.scoffshop.com

Thanks!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
DIV alignment help

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Div Alignment