homepage Welcome to WebmasterWorld Guest from 54.224.179.98
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

This 31 message thread spans 2 pages: 31 ( [1] 2 > >     
CSS equivalet to HTML <td> valign attribute?
ElMongol




msg:1188791
 3:15 pm on Jan 27, 2003 (gmt 0)

Hi, I need to recreate

<td valign="middle">Foo</td>
But using CSS, I've searched but not found exactly what I need... surely this is a very basic thing?

I put:
text-align: middle;

But alas that doesn't seem right... I've never used CSS much before, so I need help :)

M.

 

Birdman




msg:1188792
 3:36 pm on Jan 27, 2003 (gmt 0)

td
{
vertical-align: middle; [w3schools.com]
}

Welcome, ELMongel

Birdman




msg:1188793
 3:41 pm on Jan 27, 2003 (gmt 0)

Actually, this link [w3schools.com] will provide more positioning info.

ElMongol




msg:1188794
 3:51 pm on Jan 27, 2003 (gmt 0)

Ta!

I should have explained though that I'm using DIV instead of TABLE.

M.

Birdman




msg:1188795
 4:00 pm on Jan 27, 2003 (gmt 0)

In your css:

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

ElMongol




msg:1188796
 4:12 pm on Jan 27, 2003 (gmt 0)

Hrm I've tried some of that stuff. Basically I'm loath to use paddings, as that can really screw things up if ppl use custom styles or change font size..?

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.

ElMongol




msg:1188797
 4:32 pm on Jan 27, 2003 (gmt 0)

I mean "vertical-align: middle" not "text-align: middle" ofc :)

M.

Birdman




msg:1188798
 5:19 pm on Jan 27, 2003 (gmt 0)

Not sure, but it could have something to do with the parent element of the .midbar div

What is the containing element's style?

ElMongol




msg:1188799
 9:41 am on Jan 28, 2003 (gmt 0)

Okay, here's my CSS:

/* 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;
}


And here's my HTML:

<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>

Birdman




msg:1188800
 11:08 am on Jan 28, 2003 (gmt 0)

The problem is div.midbar does not take the other two divs into account when it positions itself. This is because they are floated.

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.

Birdman




msg:1188801
 12:17 pm on Jan 28, 2003 (gmt 0)

Actuall it's clear: both; [w3schools.com]

ElMongol




msg:1188802
 1:46 pm on Jan 28, 2003 (gmt 0)

Actually, what I'm trying to do is a simple layout which would be like this in HTML:

<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 ид
диииииииииииидииииииииииид
==========================

I'd rather not use explicit pixel values for the divs, as people often change font face/size in their browser. I'm just wondering if I've missed something in the (very good) info and links provided here? Or maybe doing simple layouts like this is actually complicated in CSS?

My introduction to CSS is proving painful :-(

Thanks!

M.

Birdman




msg:1188803
 2:51 pm on Jan 28, 2003 (gmt 0)

>>>My introduction to CSS is proving painful :-(

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>


ElMongol




msg:1188804
 3:29 pm on Jan 28, 2003 (gmt 0)

Hrm, that's getting there. I'm playing around with it now.

What you suggest looks kinda like:


[T]
[L]
[B]

(Left, Top, Bottom)


I'd post a link to the page, but it'd get deleted ;-)

M.

Birdman




msg:1188805
 3:36 pm on Jan 28, 2003 (gmt 0)

It looked good to me when I tested it. You may need to change your padding or margin settings. Try starting with 0 padding and margin and add a border, then you can see exactly where everyuthing is.

ElMongol




msg:1188806
 3:59 pm on Jan 28, 2003 (gmt 0)

Hrm, but I've not changed anything from what you initially said? I've tried in IE6, Mozilla 1.2 and Opera6.05 - which browser are you using?

M.

Birdman




msg:1188807
 4:03 pm on Jan 28, 2003 (gmt 0)

After testing in IE, it seems you need to adjust or eliminate the width of the right divs.

Chech out Nick's CSS Primer Series [webmasterworld.com].

Part II [webmasterworld.com]

Don't give up ;)

Nick_W




msg:1188808
 4:05 pm on Jan 28, 2003 (gmt 0)

<nick hangs head in shame>
I said the next one would be out the middle of this week :( - Guess I'd better get writing...!

Nick

ElMongol




msg:1188809
 4:28 pm on Jan 28, 2003 (gmt 0)

I've concluded from extensive testing that it's not possible in CSS to use decent percentage values for accurate layouts. Hence I think I'll have to use <table> as opposed to <div> for what I want. Of course I'll use CSS for fonts, colours etc.

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.

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.

Nick_W




msg:1188810
 4:36 pm on Jan 28, 2003 (gmt 0)

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

ElMongol




msg:1188811
 4:45 pm on Jan 28, 2003 (gmt 0)

But ofc, if the "container" doesn't have any contents, it simply "squashes up" to the left, if I remove the "width" part :(

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.

Nick_W




msg:1188812
 4:53 pm on Jan 28, 2003 (gmt 0)

Run this through your browser. I'm joining the fun late on so may not have a good grasp on what you're after but this may take us a step further I hope.

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

ElMongol




msg:1188813
 9:37 am on Jan 29, 2003 (gmt 0)

Okay, so now I look like a spoilt kid who didn't get his own way ;)

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]

Nick_W




msg:1188814
 9:49 am on Jan 29, 2003 (gmt 0)

Unfortunately it's virtually impossible :(

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

ElMongol




msg:1188815
 9:52 am on Jan 29, 2003 (gmt 0)

Achzo :(

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.

WibbleWobble




msg:1188816
 9:55 am on Jan 29, 2003 (gmt 0)

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.

:\
Opera is doing the box model correctly, IE (and NS?!) is not. Its only annoying because microsoft are code cowboys, who don't stick to anything as they should.

Nick_W




msg:1188817
 9:57 am on Jan 29, 2003 (gmt 0)

When you post, check out the Style Codes [webmasterworld.com] link on the left of the textarea ;)

Nick

ElMongol




msg:1188818
 9:59 am on Jan 29, 2003 (gmt 0)

Hehe, "display: table-cell;" varies a lot from browser to browser ;)

M.

Nick_W




msg:1188819
 10:03 am on Jan 29, 2003 (gmt 0)

Pssst... in exceptional circumstances it's no great crime to use a simple table in a div

Who said that? ;)

Nick

ElMongol




msg:1188820
 4:02 pm on Jan 29, 2003 (gmt 0)

I think my problem is that I'm still thinking in terms of tables, and trying to apply that to CSS layers. Also that I can't always do what I want with CSS either.

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.

This 31 message thread spans 2 pages: 31 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved