Forum Moderators: not2easy
<td valign="middle">Foo</td>I put:
text-align: middle;But alas that doesn't seem right... I've never used CSS much before, so I need help :)
M.
I should have explained though that I'm using DIV instead of TABLE.
M.
div.foo
{
vertical-align: middle;
}
In your body:
<div class="foo">Foo</div>
}
If you're trying to figure out how to recreate the whole table, check out this article [glish.com].
Birdman
I have simply:
<div class="midbar">
Nada Nada Limonada
</div>
And in the css:
.midbar
{
margin: 0px 0px 0px 0px;
width: 100%;
height: 50px;
border-bottom: solid 1px #000000;
padding-left: 2px;
padding-right: 2px;
background-color: #A3A3CC;
color: #ffffff;
text-align: middle;
}
But in IE6, Mozilla 1.2 and Opera 6.4, the "Nada Nada Limonada" is resolutely at the top.
Maybe I'm just stupid :p
M.
M.
What is the containing element's style?
/* base tag definitions */
body
{
font-family: verdana, georgia, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
color: #000000;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
}a
{
color: #cc0000;
text-decoration: underline;
}
a:active { color: #FF0000; }
a:visited { color: #aa0000; }
a:hover { color: #ff0000; }
/* DIV Layout/Format defs - Middle Bar ------------------------------ */
div.midbar
{
margin: 0px 0px 0px 0px;
width: 100%;
height: 50px;
border-bottom: solid 1px #000000;
/* background-attachment: fixed; - Doesn't work in NS */
background-image: url(img/bg_top-faded.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 2px;
padding-right: 2px;
background-color: #A3A3CC;
color: #ffffff;
vertical-align: middle;
}
<html>
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="emeli.css" type="text/css">
</head><body bgcolor="#ffffff" text="#000000">
<div class="midbar">
<div style="float: left; width: 50%; text-align: left;">
left
</div>
<div style="float: right; width: 50%; text-align: right;">
right
</div>
Nada Nada Limonada
</div>
</body>
</head>
To fix it, add empty divs that are not floated before and after the two floated divs.
Like this:
<div class="midbar">
<div class="clear"></div>
<div style="float: left; width: 50%; text-align: left;">
left
</div>
<div style="float: right; width: 50%; text-align: right;">
right
</div>
<div class="clear"></div>
Nada Nada Limonada
</div>
In your css:
div.midbar
{
margin: 0px 0px 0px 0px;
width: 100%;
height: 50px;
border-bottom: solid 1px #000000;
/* background-attachment: fixed; - Doesn't work in NS */
background-image: url(img/bg_top-faded.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 2px;
padding-right: 2px;
background-color: #A3A3CC;
color: #ffffff;
vertical-align: middle;
text-align: center;
}
div.clear
{
clear: all;
}
Note: I added the text-align: middle; because that's what I thought you were looking for. Hope that helps explain.
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" align="center" valign="middle">Left</td>
<td align="center" valign="middle">Top</td>
</tr>
<tr>
<td align="center" valign="middle">Bottom</td>
</tr>
</table>
It would look like:
==========================
¦············¦···········¦
¦············¦··· TOP ···¦
¦············¦···········¦
¦··· LEFT ···============¦
¦············¦···········¦
¦············¦·· MIDDLE ·¦
¦············¦···········¦
==========================
My introduction to CSS is proving painful :-(
Thanks!
M.
Hang in there, it's well worth it!
Try this one:
div.left
{
height: 33%;
width: 50%;
vertical-align: middle;
}
div.right_top
{
width: 50%;
height: 33%;
margin-left: 50%;
vertical-align: middle;
}
div.right_bottom
{
width: 50%;
height: 34%;
margin-left: 50%;
vertical-align: middle;
}<body>
<div class="right_top">right top</div>
<div class="left">left</div>
<div class="right_bottom">right bottom</div>
</body>
What you suggest looks kinda like:
[T]
[L]
[B](Left, Top, Bottom)
M.
M.
Chech out Nick's CSS Primer Series [webmasterworld.com].
Part II [webmasterworld.com]
Don't give up ;)
Nick
Annoyingly (for example), Opera 6 seems to include borders in dimensions, so if you had:
border-bottom: solid 1px #000000;
height: 20px;
Also if I make two <div>'s next to each other, and make one 200px wide, and the other "left: 200px; width: 100%", the second actually adds 200px to a 100% width, were logically you'd expect it to use 100% of the remaining space :(
I guess this isn't what you want to hear, but I simply don't see how I can make it do what I want :(
I should clarify: I know HTML pretty much inside out, and generally use CSS for as much as possible. But this is the first time I've tried to use CSS for layout. Just saying; I'm not a "n00b" ;)
Cheers for your help guys, I promise I'll be around from now on with more questions ;)
(Nick_W: You tutorials are excellent btw!)
M.
Also if I make two <div>'s next to each other, and make one 200px wide, and the other "left: 200px; width: 100%", the second actually adds 200px to a 100% width, were logically you'd expect it to use 100% of the remaining space
No, you're thinking in terms of tables ;) - Think in terms of containers. What contains the "left 200px" div? - The <body> right? - If you want this to flow to the right of the page and stop, just don'nt specify the width....
Have a dig through the forum, I'm sure SuzyUK or someone wrote an excellent 2 col layout recently....
Nick
Don't get me wrong - I appreciate the help, and am very keen to learn... I just need to get this design done ASAP so will have to use tables :(
M.
There is no padding or font stuff so you can see what's going on more clearly. Feel free to make it prettier ;)
[pre]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
body {
height: 100%;
}
#right {
float: right;
border-left: thick solid #000000;
width: 200px;
height: 100%;
}
#left {
height: 100%;
}
</style>
</head>
<body>
<h1>2 column layout</h1>
<div id="left">
<div id="right">
<p>this is the right column, it's easily
split into two by either
nesting divs or just using a simple horizontal
rule or similar...</p>
</div>
<p>This is the left column</p>
<p>It contains the right hand panel which is
floated to the right
creating the two column effect. You could do
this with absolute
positioning but positioning on the right makes
links unclickable in
some browsers so this is a safer way to do it.</p>
</div>
</body>
</html>[/pre]
Only tested in Opera but should work across the board I think...
Nick
I did this, and it almost works (thanks Nick!)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css"> body {
height: 100%;
}
#right {
float: right;
border-left: thick solid #000000;
width: 200px;
height: 100%;
}
#top-right {
float: right;
width: 200px;
height: 50%;
background-color: #A3A3CC;
vertical-align: middle;
}
#bottom-right {
float: right;
width: 200px;
height: 50%;
background-color: #A3CCA3;
vertical-align: middle;
}
#left {
height: 90px;
background-color: #CCA3A3;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="left">
<div id="right">
<div id="top-right">
Top Right
</div>
<div id="bottom-right">
Bottom Right
</div>
</div>
<p>This is the left column</p>
</div>
</body>
</html>
The only thing now is that I can't get the text to act like in a table with "valign=middle", e.g.
¦---------¦
¦`````````¦
¦`````````¦
¦Text`````¦
¦`````````¦
¦`````````¦
¦---------¦
But thanks guys! You're an inspiration ;)
M.
[edited by: ElMongol at 9:50 am (utc) on Jan. 29, 2003]
I'll leave it to other members to suggest ideas here as I'm fresh out! - The only thing I can think of is something that will probably only work a few browsers:
display: table-cell; [w3.org]
it's either that or settling for using padding...
Nick
It's vitally important that the top-right is valigned to middle... I was thinking of playing with paddings, but "padding-top: 50%;" didn't do what I expected ;)
Thanks for your help Nick_W
Btw (probably asked many times) how does one use those boxes to format code, and can we "reply with quote" on these boards?
Ta!
M.
Annoyingly (for example), Opera 6 seems to include borders in dimensions, so if you had::\border-bottom: solid 1px #000000;
height: 20px;Opera will make it 21px high, but IE will effectively delete the bottom pixel and replace it with the border pixel. The same in NS.
Nick
M.
Who said that? ;)
Nick
But in about a year, when the browsers are all standards compliant, then maybe we'll finally see widespread adoption of CSS for layout :)
M.
