resizable css?

@george71Jan 01.2004

happy new year everyone

I’m trying to build a resizable menu bar.

I have one on my site with gifs, but can this table-like be build in css?

I tried inserting the css buttons in a table and size everything in % but when i check in the browser no show like this.

can this be possible in css design,
if posible do you know a site which has a resizable menubar?

to post a comment

CSS

12 Comments(s) _↴

@pyroJan 01.2004 — #If you post your current example, we'll probably be able to give you better input.

@george71authorJan 01.2004 — #Hi Pyro

this is the html file do you need the style sheet as well?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>

#message div.menuBar,

#message div.menuBar a.menuButton { color: lime; font-size: 9pt; font-family: "Lucida Sans Unicode" }

#message div.menuBar { color: fuchsia; background-color: white: text-align: right; margin-left: 10px; padding: 0px 0px }

#message div.menuBar a.menuButton { color: olive; text-decoration: none; background-color: transparent; margin: 18px; padding: 2px 6px; border-style: solid; border-width: 0px; border-color:white; z-index:0; top: 0px; left: 0px; cursor: pointer; xposition: relative }

#message div.menuBar a.menuButton:hover { color: blue; background-color: transparent; border-color:white }

</style>

</head>

<body>

<table width="85%" align="center">

<tr>

<td width="10%" height="34"> <DIV id="message">

<div class="menuBar"> <a class="menuButton" href="">nieuws</a> <a class="menuButton" href=""></a></div>

</div></td>

<td width="31" height="34"> <DIV id="message">

<div class="menuBar"> <a class="menuButton" href="">galerie</a></div>

</div></td>

<td width="10%" height="34"> <DIV id="message">

<div class="menuBar"> <a class="menuButton" href="">persberichten</a></div>

</div></td>

<td width="10%" height="34"> <DIV id="message">

<div class="menuBar"> <a class="menuButton" href="">c.v.</a></div>

</div></td>

<td width="10%" height="34">

<DIV id="message">

<div class="menuBar"> <a class="menuButton" href="">links</a></div>

</div></td>

<td width="10%" height="34"> <DIV id="message">

<div class="menuBar"> <a class="menuButton" href="">contact</a> <a class="menuButton" href=""></a></div>

</div></td>

<td width="10%" height="34"> <DIV id="message">

<div class="menuBar">

<h5><a class="menuButton" href=""> </a> <a class="menuButton" href=""></a></h5>

</div>

</div></td>

<td width="31" height="34"> <DIV id="message">

<div class="menuBar">

<h5><a class="menuButton" href="">georgelangenberg</a> <a class="menuButton" href=""></a></h5>

</div>

</div></td>

</tr>

</table>

<p> </p>

</body>

</html>

@pyroJan 01.2004 — #Take a look at [URL=http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp]list-o-matic[/URL], and see if that helps get you going.

@george71authorJan 01.2004 — #yeah that might help, thanks, but I l don't know if there is a resizable option there, I'll have to check this in the weekend as I need to catch up some sleep today...

Why are css designed sites never flexible and often centered in the middle. i like this harmonica option that tables offer.

Maybe all the effort in changing the menu as a starter in a css style doesn't pay off in it's ethetica.

later more I need to turn my head disk off...:o

@pyroJan 01.2004 — #[i]Originally posted by george71 [/i]

[B]I'll have to check this in the weekend as I need to catch up some sleep today...[/B][/QUOTE]Ok, let us know if you need more help once you've played around with it a bit.

I hear you on needed to catch up on sleep. I've been up for 33 1/2 hrs, now... :p

@george71authorJan 01.2004 — #Mannnn that's not healthy!

in holland we have little pills and powders for that they make you GO for days,

but i don't like those.

so i do sleep (a natural high)

p.s. later this weekend I will buy zeldmans book

@Sux0rZh_jc0rzJan 02.2004 — #i agree with you on how more sites should scale when you resize them instead of just staying in the middle.

examples of scaling sites:

(tables)http://www.w3schools.com

(css)http://xaxei.2ya.com

@george71authorJan 02.2004 — #yes Sux0rZh@jc0rz!

those examples are getting very close to what I mean.

It's silly not to use the complete screen size, and cropp evertything in the middle. I mean I'have a portfolio online, So I need as much space as possible to display my works.

And I want to use the whole screen to give the site a more spacious feel.

Yet no resizable menubar yet... it must be makeble...anyone more examples, tips???

@Sux0rZh_jc0rzJan 02.2004 — #hey, do you mean a menu bar that you can click and then resize like you can resize your browser window? cause i doubt you can do that with css alone. pretty sure u cant. might be able to do it with JS.. or php.. like set the css in the header and have the width be variables... then have the variables change when u resize it or something.. dunno.

@DaveSWJan 02.2004 — #If you want something to change widths with the screen res then use % widths...

Some of my attempts at menus on www.webdevfaqs.com might be of interest - under CSS.

@chris9902Jan 02.2004 — #[i]Originally posted by george71 [/i]

[B]Mannnn that's not healthy!

in holland we have little pills and powders for that they make you GO for days,

but i don't like those.

so i do sleep (a natural high)

p.s. later this weekend I will buy zeldmans book [/B][/QUOTE]

WTF was that... ?

@spufiJan 05.2004 — #I just want to throw out the idea that you are using the id attribute incorrectly. The id attribute should have a unique, and thus used only once, name. If you want to use a name more than once, use the class attribute.

Also in #CSS _↴

Mobile version bug Auto play video when mouse is over (hover)[RESOLVED] Firefox doesn't read any CSS at all... Weird problem

Success!

Help @george71 spread the word by sharing this article on Twitter...

Tweet This

resizable css?

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

resizable css?

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴