CSS positioning help

07-01-2007, 1:48 PM

In post <3efda4d2@nntphost.cis.strath.ac.uk>
Lorne Cameron said...

> I've been trying to change my site's layout to CSS, but I've run into
> some trouble. The layout is a header image, 760x115, then a menu image
> on the left below that, 160x439, and then the main content in the
> remaining space.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>blah</title>
<style type="text/css">
body{margin:0;padding:0;}
h1{height:115px;margin:0;border:2px solid red;}
#menu{width:160px;height:439px;float:left;border:2 px solid green;}
#content{margin-left:165px;border:2px solid blue;}
</style>
<h1>header</h1>
<div id="menu">menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br></div>
<div id="content">content<br>content<br>content<br>cont ent<br>content<br></div>

--
brucie a. blackford. 29/June/2003 07:02:51 am kilo.
http://loser.brucies.com/

07-01-2007, 1:48 PM

brucie wrote:
>>with one exception: is it possible to have the content DIV fill all
>>remaining space vertically as well as hortizontally?>
>
> http://usenet.alt-html.org/layout-on...us-thingy.html

I'm not sure what you're trying to illustrate here, or if you understand
my question. What I'm looking for is the layout equivalent to the
following table:

<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD COLSPAN="2">Header image, 760x115</TD>
</TR>
<TR>
<TD WIDTH="160">Menu image, 160x439</TD>
<TD ALIGN="center" VALIGN="middle">Content</TD>
</TR>
</TABLE>

Thanks again.
LC.

07-01-2007, 1:48 PM

In post <3efe3f81@nntphost.cis.strath.ac.uk>
Lorne Cameron said...

>>>with one exception: is it possible to have the content DIV fill all
>>>remaining space vertically as well as hortizontally?>

>> http://usenet.alt-html.org/layout-on...us-thingy.html

> I'm not sure what you're trying to illustrate here, or if you understand
> my question. What I'm looking for is the layout equivalent to the
> following table:

the above centers an image (or anything else) horizontally and
vertically within the content area (the orange bit). it is only
supported by opera7+ (win platform).

--
brucie a. blackford. 29/June/2003 11:25:08 am kilo.
http://loser.brucies.com/

07-01-2007, 1:48 PM

brucie wrote:

>> It's working pretty much as I want tit now,
> ^^^
> you said a rude word
>
Which word is rude? I too want a tit now.

--
Duende
-----
What is the difference between genius and stupidity?
Genius has limits. - Albert Einstein.

07-01-2007, 1:48 PM

brucie wrote:
>
>>>>http://usenet.alt-html.org/layout-on...us-thingy.html
>
>>the above centers an image (or anything else) horizontally and
>>vertically within the content area (the orange bit). it is only
>>supported by opera7+ (win platform).
>
>
> a screencap:
> http://usenet.alt-html.org/screencap-opera7.png [5.3k]
>

Ok, cool, that's what I'm looking to do: have the content DIV fill all
available space both hortizontally and vertically. Is there a way to do
this in IE/NS/Mozilla?

07-01-2007, 1:48 PM

brucie wrote:
> In post <3efe4557$1@nntphost.cis.strath.ac.uk>
> Lorne Cameron said...
>
>
>>>http://usenet.alt-html.org/layout-on...us-thingy.html
>>>the above centers an image (or anything else) horizontally and vertically
>>>within the content area (the orange bit). it is only supported by opera7+
>>>(win platform). a screencap:
>>>http://usenet.alt-html.org/screencap-opera7.png [5.3k]
>
>
>>Ok, cool, that's what I'm looking to do: have the content DIV fill all
>>available space both hortizontally and vertically. Is there a way to do
>>this in IE/NS/Mozilla?
>
>
> only if you change your absolute units (115px header and 160px menu)
> to percentages or for years authors have been telling people to
> upgrade to IE (when they really mean downgrade) so why not tell
> everyone to upgrade to opera? it really is an upgrade.
>

If I change to percentages I'd have to assume a certain resolution,
wouldn't I? I think it's more effort than it's worth if I want to get
everything just the way I want. I think I'll keep it as simple as I can
and compromise a little there.

As for browsers, I've used Opera at university occasionally, but I
prefer the feel of Mozilla to anything else. And I can pretty much
guarantee than about 95% of peple who view my site will be using IE,
maybe a few on Netscape, so that's what I have to design for.

Thanks for all your help. That's the layout pretty much sorted. I'll
have a few SSI questions no doubt once I'm finished with the layout.

LC.

07-01-2007, 1:48 PM

In post <3efe5523$1@nntphost.cis.strath.ac.uk>
Lorne Cameron said...

>>>Ok, cool, that's what I'm looking to do: have the content DIV fill all
>>>available space both hortizontally and vertically. Is there a way to do
>>>this in IE/NS/Mozilla?

>> only if you change your absolute units (115px header and 160px menu)
>> to percentages or for years authors have been telling people to
>> upgrade to IE (when they really mean downgrade) so why not tell
>> everyone to upgrade to opera? it really is an upgrade.

> If I change to percentages I'd have to assume a certain resolution,
> wouldn't I?

no. percentages will allow the design to adjust to the window size.
with a fixed height for the head and width for the menu you're unable
to set a size for the content area to fill the remaining space because
it could be anything. the width is easy because a block level element
will fill the space remaining but you cant do the height.

you can make all the sizes percentages so you know if the height of
the header is 10% and width of the menu is 20% then the content area
will be 90% high and 80% wide.

i don't know why you place such great importance on having the stuff
in the content area vertically centered when you don't even know the
height of the visitors window to know if it will have any effect or
not anyway. just let the content of that area work itself out. simple

--
brucie a. blackford. 29/June/2003 01:08:57 pm kilo.
http://loser.brucies.com/

07-01-2007, 1:49 PM

When Wipkip was making a web page, a :-? appears and wrote:
> brucie wrote:
>
>>> It's working pretty much as I want tit now,
>> ^^^
>> you said a rude word
>>
> Which word is rude? I too want a tit now.
---------------------------------------^^^^
We aren't in the army.
--
Edwin van der Vaart (Geen familie van....)
http://www.semi-conductors.nl/ Links to Semiconductors sites
(will expire at 01 Sept '03)
http://www.semi-conductor.nl/ (under construction)
http://members.chello.nl/e.vandervaart/ Experimental site
http://host.deluxnetwork.com/~evdvaart/ Test site

07-01-2007, 1:50 PM

William Tasso wrote:
> Wipkip wrote:
>> brucie wrote:
>>>> It's working pretty much as I want tit now,
>>> ^^^
>>> you said a rude word
>>>
>> Which word is rude? I too want a tit now.
>
> just the one?

You have to start somewhere.

--
Duende
------------
If a turtle doesn't have a shell, is he/she homeless or naked?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS positioning help - Mozilla	David Graham	HTML	1	07-01-2007 1:47 PM
css positioning vs. tables	PeterMcC	HTML	0	07-01-2007 1:22 PM
The Death of Positioning?	Advanced Web Technologies	Building An Internet Business	0	05-29-2007 1:44 AM
banning this browser: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)	no.reply7@comcast.net	Website Reviews And Website Questions	13	05-28-2007 12:42 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)