Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Help...

Status
Not open for further replies.
lck092580

lck092580

Programmer
Jun 19, 2002
440
CA
I am so fed up with CSS right now. :-(

I'm trying to avoid frames so I can get w3 to validate the webpage. Here's what I've been trying to do:

---------------------------------------------------
| top_1 |
---------------------------------------------------
| top_2 |
---------------------------------------------------
| | |
| | |
| | |
| | |
| left- | |
| middle | right-middle |
| | |
| | |
| | |
| | |
| | |
| | |
|---------|----------------------------------------
| bottom |
---------------------------------------------------

I want to force top_1 top_2 to be 25 & 32px.. bottom 20px.. and have the left-middle & right-middle expand the rest of the frame. I can get it to work if i use % for top_1 & top_2 and bottom with % but can't seem to get it to work if i specify a pixel # for them. Can anyone tell me how to do it? Here's what I have for my css:

#top_1 {
width: 100%;
height: 25px;
background: white;
color: black;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
}

#top_2 {
width: 100%;
height: 32px;
background: white;
color: black;
overflow: hidden;
position: fixed;
top: 25px;
right: 0;
bottom: 0;
left: 0;
}

#left-middle {
width: 180px;
height: auto;
float: left;
background: black;
color: black;
overflow: hidden;
position: fixed;
top: 57px;
right: auto;
bottom: 20px;
left: 0;
}

#right-middle {
width: auto;
height: auto;
float: right;
background: #333366;
color: black;
overflow: hidden;
position: fixed;
top: 57px;
right: 0;
bottom: 20px;
left: 0;
}

#bottom {
width: 100%;
height: 20px;
position: fixed;
background: red;
color: #FF0000;
overflow: hidden;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
 
Sort by date Sort by votes
you can actually embed tables into cells to work better

here this works

<body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>
<table width=&quot;100%&quot; height=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td height=&quot;25&quot;>&nbsp;</td>
</tr>
<tr>
<td height=&quot;32&quot;>&nbsp;</td>
</tr>
<tr>
<td><table width=&quot;100%&quot; height=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height=&quot;20&quot;>&nbsp;</td>
</tr>
</table>
</body> [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
That was my first approach but w3 won't validate tables with 'height=&quot;100%&quot;' so i had to turn to css (my prof recommended this).

T
 
Upvote 0 Downvote
then use divs

<div id=&quot;top_1&quot;></div>
<div id=&quot;top_2&quot;></div>
<div id=&quot;middle&quot;><div id=&quot;left_middle&quot;></div>
<div id=&quot;right_middle&quot;></div></div>
<div id=&quot;bottom&quot;></div>

i would add a class for middle and then have left_middle and right_middle aligned relative to middle [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
Hi,

w3 won't validate tables with 'height=&quot;100%&quot;'

You have to trick them to get it to validate, and you do it like this:
<table style=&quot;height: 100%;&quot;>

I would stay away from divs at all cost unless you are doing layering. Just use tables they are much more cross-browser compatible and easier to deal with.

Hope this helps!
relax.gif

 
Upvote 0 Downvote
deecee: Thanks.. I'll try it out.

Spyderix: Tricking it will cost me a lot of marks. :) My first approach was tables but unfortunatly the height tag is forbidden.

T
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
753
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
602
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
641
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
206
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top