Cafe Sports
Setanta
Asda
Next
GAME
Next
Sponsored Links
  #1 (permalink)  
Old 30th April 2008, 04:20 PM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Are there any CSS nerds on here?
Can any of you spare me 20 minutes or so to help me with a problem I'm having related to laying out a table using CSS? It's not actually a table though, each cell is a DIV like so...

| - 20px - | - Fluid width - | - 150px - | - 150px - | - 150px - |

I will explain it better if anyone has time to help a brother out.
Reply With Quote
  #2 (permalink)  
Old 30th April 2008, 04:43 PM
wiiksie's Avatar
Hermano
  
Join Date: Feb 2006
Location: Seasider
Posts: 8,701
vCash: 25
wiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimerswiiksie rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
DC, post up your question mate, there are enough web monkeys on here to help out.
Reply With Quote
  #3 (permalink)  
Old 30th April 2008, 05:27 PM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Ok here goes a rubbish attempt to explain:



There is one containing div which resizes when the window resizes (the grey one). This only resizes horizontally.

Inside this DIV, there are lots of rows, denoted by the blue divs. These are supposed to resize vertically to fit their content. There is an indeterminate number of these rows as they are populated from a database and they resize horizontally with the window.

Inside these blue DIVs are five DIV columns, denoted here as the red boxes. The left hand column is fixed to 20px wide and the three right hand columns are fixed to 150px wide each. The second column resizes horizontally with the window.

At the moment, the problem that I'm having is that the height and width of these DIVS is not being influenced by their contents as you will see from the source code. I know it's something simple, but I've been staring at it for so long that I've gone code blind.

I'm going to try and post my source code in my next post. It may ruin the whole message board.
Reply With Quote
  #4 (permalink)  
Old 30th April 2008, 05:30 PM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title>
<style>
.hometab1, .hometab2, .hometab3, .hometab4, .hometab5{background-color: red; padding: 5px; height: auto; position: absolute;}
.hometab1 {left: 1px; width:20px;}
.hometab2 {left: 32px; right: 484px;}
.hometab3 {right: 323px; width:150px;}
.hometab4 {right: 162px; width:150px;}
.hometab5 {right: 1px; width:150px;}
.showhidelow{position: relative; display: block; background-color: #F6F6F6; padding: 5px; display: block;}
.tabrow {position: relative; display: block; clear: both; background-color: #0000FF; padding: 1px;}
</style>

</head>
<div class="showhidelow">
<!-- These two rows "tabrow" would be generated by PHP, but have been done as text for illustration.-->
<div class="tabrow"><div class="hometab1">id</div><div class="hometab2">info</div><div class="hometab3">contact</div><div class="hometab4">opened</div><div class="hometab5">status</div></div>
<div class="tabrow"><div class="hometab1">id</div><div class="hometab2">info</div><div class="hometab3">contact</div><div class="hometab4">opened</div><div class="hometab5">status</div></div>

</div>
<body>
</body>
</html>
Reply With Quote
  #5 (permalink)  
Old 30th April 2008, 05:39 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Erm, the example you just pasted. Everything is in the head and there's an opening div missing. Your body is empty?
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #6 (permalink)  
Old 30th April 2008, 05:41 PM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Whoops! I C+P'd it from another page.

Once corrected, it still outputs incorrectly though.
Reply With Quote
  #7 (permalink)  
Old 30th April 2008, 05:41 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
actually I just found the first div but it was still all output to the head!
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #8 (permalink)  
Old 30th April 2008, 05:43 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
I'll post errors as I find them, just looking now.

Double style declaration for display:block in .showhidelow
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #9 (permalink)  
Old 30th April 2008, 05:45 PM
greenoak's Avatar
Forumite
  
Join Date: May 2004
Posts: 545
vCash: 500
greenoak has much to be proud ofgreenoak has much to be proud ofgreenoak has much to be proud ofgreenoak has much to be proud ofgreenoak has much to be proud ofgreenoak has much to be proud ofgreenoak has much to be proud ofgreenoak has much to be proud of
Re: Are there any CSS nerds on here?
DS Why are you trying to control a table with CSS?

Is the table for data or content?

Are you just trying to get a pretty table?
Reply With Quote
  #10 (permalink)  
Old 30th April 2008, 05:48 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
It's not a table it's a non-table based layout.
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #11 (permalink)  
Old 30th April 2008, 05:49 PM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Originally Posted by greenoak View Post
DS Why are you trying to control a table with CSS?

Is the table for data or content?

Are you just trying to get a pretty table?
I'm trying to use CSS instead of tables because it's easier to repeat the dataset layout on several pages and also to hide columns and change their colour using javascript if I so wish to in the future.

This CSS problem is causing me so many issues that I'm seriously considering reverting to good old HTML tables though.

It's for data. It's for pulling a list of our IT helpdesk tickets from a MySQL database and making them viewable in a more simplistic form. The technical side of the page all works fine, it's just the layout.
Reply With Quote
  #12 (permalink)  
Old 30th April 2008, 05:57 PM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Reading some articles about this, I think the problem here is that the "red DIVs" are positioned absolutely, and are of an indiscriminate height. As the two containing DIVs are relative, they won't resize to the content. I might have to "bodge" this by calculating the height of the red DIVs after they have been rendered on the screen and then resize the "grey" and "blue" divs with some javascript.

Which is a bit of a shit.
Reply With Quote
  #13 (permalink)  
Old 30th April 2008, 06:30 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Yeah I'm still looking at it and I've almost got it there but you're right it is to do with the positioning of the internal elements. i.e. the red boxes.
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #14 (permalink)  
Old 30th April 2008, 07:31 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Think this is what you're after. Was a head scratcher though.
THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES

I uploaded it so vb didn't clear all the indentation.
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #15 (permalink)  
Old 30th April 2008, 08:42 PM
Nick Leeson's Avatar
Chainy's mentor
  
Join Date: Feb 2005
Location: Liverpool
Posts: 5,686
vCash: 625
Nick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the ProclaimersNick Leeson rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Might wanna ignore that actually, forgot to check it in i.e. It's err, not as it should be. I'll fix it after the match though.
__________________
Vote Chainy, you know it makes sense.

http://www.liverpoolway.co.uk/forum/...ng-rabbit.html
Reply With Quote
  #16 (permalink)  
Old 1st May 2008, 11:09 AM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
I've sort of made this work if the fixed width columns are all on the left hand side and the resizable one is on the right, but it's not ideal.
Reply With Quote
  #17 (permalink)  
Old 1st May 2008, 11:33 AM
dirty_sanchez's Avatar
Forumite
  
Join Date: Jan 2006
Posts: 5,318
vCash: 500
dirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimersdirty_sanchez rules harder than the Proclaimers
Re: Are there any CSS nerds on here?
Ok, I've gone at it from a different angle and ended up with this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title>