|
| |
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
 |
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?
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
|
|
|
|
Giomanach
Posts: 6113
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
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!
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
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.
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
Giomanach
Posts: 6113
Joined: 11/19/2003
From: England
Status: offline
|
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...
_____________________________
| |
|
|
|
Giomanach
Posts: 6113
Joined: 11/19/2003
From: England
Status: offline
|
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
_____________________________
| |
|
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
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!
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
Giomanach
Posts: 6113
Joined: 11/19/2003
From: England
Status: offline
|
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
< Message edited by Giomanach -- 6/16/2004 7:28:40 >
_____________________________
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
< Message edited by c1sissy -- 6/16/2004 8:34:05 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
< Message edited by c1sissy -- 6/16/2004 8:10:26 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
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!
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
< Message edited by c1sissy -- 6/16/2004 9:26:18 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
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
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
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.
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
cssjunkie
Posts: 5
Joined: 5/25/2004
Status: offline
|
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.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
