Hopefully a simple CSS Problem! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

markhawker -> Hopefully a simple CSS Problem! (6/15/2004 15:43:11)

Hi, I would like to know how to achieve a 'two column' style effect using DIVs and CSS. If you take a look at my site, at the minute I'm using tables but am going to change that ASAP. The problem I'm having is, if you see below the navigation links, I have two columns. How do I achieve this using CSS?



Giomanach -> RE: Hopefully a simple CSS Problem! (6/15/2004 15:59:41)

Two columns as in one fixed and one fluid or two fluid?

Dan



markhawker -> RE: Hopefully a simple CSS Problem! (6/15/2004 16:06:30)

Both will need to be fluid, by fluid you mean the height is variable? Something that needs to cope with how I've laid out my portfolio page would be great. I'm so nearly there!



Giomanach -> RE: Hopefully a simple CSS Problem! (6/15/2004 16:40:27)

OK, using DIV layers, you will need something like this:

#leftdiv{
position: absolute;
top:125px;
width: 50%;
}

#rightdiv{
position: absolute
top: 125px;
left: 50%;
width: 50%;
}

Obviously alter to suit, but that will give you the basic layout for your two columsn, and the HTML for those wants to be:

<div id="leftdiv">
This is the left div, I wonder what makes me say that
</div>
<div id="rightdiv">
And this be the right div, isn't it just great?
</div>

HTH

Dan

<edit>
No need to set height, the more content you put in, the longer it gets[:D]
</edit>



markhawker -> RE: Hopefully a simple CSS Problem! (6/15/2004 16:56:22)

Cheers Dan. Just as you were finding that I had a bash at creating the table code, the only problem now is it doesn't lok right in Firefox! I'm having problems because I have a footer and as the two colums are absolute, they hide the footer (as it's not underneath it.) Any ideas? I've updated my home page so you can see what I mean.



Giomanach -> RE: Hopefully a simple CSS Problem! (6/15/2004 17:02:41)

I need to see your stylesheet, you host gives me page not found...



markhawker -> RE: Hopefully a simple CSS Problem! (6/15/2004 17:05:34)

Oh right, ok, no probs...



Giomanach -> RE: Hopefully a simple CSS Problem! (6/15/2004 23:42:07)

quote:

div.footer {
bottom: 0px;
background-color: #666666;
width: 650px;
height: 20px;
border: 2px solid #FFFFFF;
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
vertical-align: middle;
padding: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}

Here's your problem. And I shall explain

You main two divs have absolute positioning, the footer has no positioning set. When using Absolute positioning, is automatlically takes a z-index of 1, and everything else stays at 0. Therefore, the absolute positioned divs sit on top, all the time.

Give the footer either relative or absolute positioning, and alter to suit your web, I would say relative is better.

Dan



c1sissy -> RE: Hopefully a simple CSS Problem! (6/16/2004 3:58:39)

quote:

When using Absolute positioning, is automatlically takes a z-index of 1, and everything else stays at 0


Dan, I'm not so sure you are correct on this. With all the positioning tutorials I have read, I have not come across anything saying that you have to use the z-index on absolute positioning.

markhawker
Hi, welcome to outfront!
I'm going to add a few links here for you on absolute positioning.
http://www.depiction.net/?id=cssabsolutepositioning
http://www.juicystudio.com/tutorial/css/fixed.asp
http://www.htmlite.com/CSS010.php
http://www.hypergurl.com/csstutorial10.html
(the next link, I suggest that you try to visit all of their tutorials they are pretty good ones. I have several of them printed out)
http://www.webreference.com/html/tutorial18/
http://www.mako4css.com/TPos.htm

And then there is the position is everything site, which is pretty good and has some great links in there.
http://www.positioniseverything.net/index.php

And here is a link to a brief tutorial on the z-index
http://codepunk.hardwar.org.uk/acss07.htm
I suggest that you take a walk through this site as well. Their tutuorials are pretty good to view and do.

I hope that this information is helpful to you!



markhawker -> RE: Hopefully a simple CSS Problem! (6/16/2004 4:03:52)

Thanks Deb, I'll have a look at them now. Still having problems with the layout but hopefully these tutorials will help! Surely using absolute/relative references for the footer will change if the height is variable? Unless there is an easy work-around that I'm not sure about!

quote:

ORIGINAL: c1sissy

markhawker
Hi, welcome to outfront!

Thanks, glad to be here!



Giomanach -> RE: Hopefully a simple CSS Problem! (6/16/2004 7:26:28)

Deb

I say it takes the z-index of 1, b'cos, whenever you use absolute positioning, unless you tell it otherwise, it's always on top. It also depends on what order they are in the HTML/CSS doc.

If you use relative, it just falls where ever you place it, and as for fixed, well, that stays put (Good Dog).

If I get the time, I'll give a live example of what I mean.

quote:

Surely using absolute/relative references for the footer will change if the height is variable?

If you use absolute positioning for it, it will stay at the same position. E.G top: 100px; If you have that, it will be 100px from the top of the page, nowhere else.

If you use relative, it will be relative to the content above it. So top: 100px; is 100px from the bottom of the content above it.

Dan



c1sissy -> RE: Hopefully a simple CSS Problem! (6/16/2004 7:59:38)

quote:

I say it takes the z-index of 1, b'cos, whenever you use absolute positioning, unless you tell it otherwise, it's always on top.


Dan, you are wrong on this one. I have been through so many tutorials on this right now, and I have never come across any of them saying that you have to use a z-index on any of the absolute positioning.

Both relative and absolute need to have position values given to them. There for you are giving them the position to be in. top right etc...
Take a read through the links that I provided above.



c1sissy -> RE: Hopefully a simple CSS Problem! (6/16/2004 8:02:17)

quote:

ORIGINAL: markhawker

Thanks Deb, I'll have a look at them now. Still having problems with the layout but hopefully these tutorials will help! Surely using absolute/relative references for the footer will change if the height is variable? Unless there is an easy work-around that I'm not sure about!

quote:

ORIGINAL: c1sissy

markhawker
Hi, welcome to outfront!

Thanks, glad to be here!


Hi Mark:
I have a page that I am working on right now. All columns are set so that they expand with the content. At present the far right column is given a pixel size right now as there is now content in there.

What I had to do on my footer to get it to behave was to put clear: both; this pushed it down and kept it where I wanted it to be.
<edit> another good thing to do is to use a container div sometimes to get things to cooperate with you. If you use a percentage for height then you have to use this in you html,body. as well.
html, body {
margin: whatever your margin;
height: 100%;
}

IE sees the root element as being html, rest of the browsers see it as body. Then when you give the divs inside of the container a height percentage it works better.



markhawker -> RE: Hopefully a simple CSS Problem! (6/16/2004 9:17:59)

Thanks for all this advice! At the minute I've reverted back to tables because I'm still having trouble with these DIV columns! If you look at my site, should one column be absolute (the white one) that spans the full 650px, with a relative DIV (the green one) inside? When the height of the white container is increased I can't get the green one to increase as well!!

Then I got annoyed because Firefox completely messes up when I view the page! Is it best to start from scratch and get a basic layout before messing about with CSS?

Plus, when viewed in Dreamweaver normal view, are the DIV layers meant to be all over the place? I can hand code so it looks like this is going to be the easiest method!

ps. I PROMISE I will get there soon, if even with little baby steps at first!



c1sissy -> RE: Hopefully a simple CSS Problem! (6/16/2004 9:24:38)

Mark,
I think hand coding is the best way to go,this is how I do it.

Here in the css section are some links for you to look at. Follow all of them, there are some tutorials in there that would be great.

If you are just learning css this is how I suggest that you go for it. Read the tutorials and then the links to special things. One of the links I gave you above is a tutorial
http://www.webreference.com/html/tutorial18/

Go to their site map and start from the begining. Also, there are some online courses that are really cheap, if you are interested in them, send me a pm and I'll give you the links to them.

The best way is to start at the begining, Oh, and don't forget to validate as you go along, sometimes it is just one small thing missing that will take it out of balance for you.

Let me know if there is anythign I can do to help you out, feel free to email or pm me anytime.



markhawker -> RE: Hopefully a simple CSS Problem! (6/16/2004 9:35:06)

Thanks, much appreciated! I have started to realise how powerful CSS actually is, I only recently found out you can assign a and a:hover attributes to other style tags, such as .main a or .main a:hover. I thought that was pretty cool! I do validate, just at the minute, on Wanadoo hosting, they add some JS at the bottom of the page that don't have type attributes, so my pages will never validate fully! [:(]

I'll keep learning and keep posting,

Thanks,

Mark



c1sissy -> RE: Hopefully a simple CSS Problem! (6/16/2004 10:11:17)

quote:

ORIGINAL: markhawker

on Wanadoo hosting, they add some JS at the bottom of the page that don't have type attributes, so my pages will never validate fully! [:(]

I'll keep learning and keep posting,

Thanks,

Mark

This could be causing some of your problems. I have pages on tripod, and their js throws my pages out of wack totally.

Are you viewing your work on your pc before you load it up, or are you working online from your site?



markhawker -> RE: Hopefully a simple CSS Problem! (6/16/2004 10:26:47)

I'm viewing them on Abyss Web Server at home before uploading! I have IE and Firefox and am finding it hard to please them both at the same time. Hopefully soon I'll be able to pay for real hosting, then I can start experimenting with PHP/MySQL and everything.



c1sissy -> RE: Hopefully a simple CSS Problem! (6/16/2004 10:34:06)

Ok, I was just curious as to if you were just workign on tripod. If that was the case, then I thought that might be your problem. However, if it is doing it on your server then the thought that I had doesn't count[;)]

Good luck, and try to go through the links that i provided for you. I'm sure that you w ill find a good bit of information to help you out!



cssjunkie -> RE: Hopefully a simple CSS Problem! (6/16/2004 14:09:36)

I want to make a point about having a footer along with absolute
columns. The fact is that each AP element (or "layer") is on a unique
z-index level of its own and cannot interact with any other layer,
period. BTW, z-index is not required for positioned elements, as
they receive default z-index values based on source order that may
be alterd manually via the z-index property.

If you have columns that are all AP'd as layers, then there is no way
a footer (AP or anything else) can know the spot where the longest
col ends, and start there. It can't happen. It IS possible to use JS to
aquire the screen height of the cols and feed that value to the footer
as a "top" value, but only scripting makes this possible.

In short, when a footer is needed in a pure CSS page, at least one of
the cols must NOT be absolute, and that col must also be the longest one
if the others ARE absolute, or the footer will overrun the taller AP cols.

If the height of the cols can be pre-set with assurance that the height
will not change, then yes, the footer may be set to an exact "top" value,
but that rarely is possible since text resizing will always lengthen a page.

True tableless design requires using "static" normally flowed cols and
floated cols, which a footer can easily be made to stay below. Layers
are great in certain circumstances but not generally for cols unless a
footer is omitted. My main page does have two AP cols, but I have the
footer within one of the cols.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125