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?If you post your current example, we'll probably be able to give you better input.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=http://www.webdeveloper.com/forum/archive/index.php/"">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=http://www.webdeveloper.com/forum/archive/index.php/"">galerie</a></div>
</div></td>
<td width="10%" height="34"> <DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">persberichten</a></div>
</div></td>
<td width="10%" height="34"> <DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">c.v.</a></div>
</div></td>
<td width="10%" height="34">
<DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">links</a></div>
</div></td>
<td width="10%" height="34"> <DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">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=http://www.webdeveloper.com/forum/archive/index.php/""> </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=http://www.webdeveloper.com/forum/archive/index.php/"">georgelangenberg</a> <a class="menuButton" href=""></a></h5>
</div>
</div></td>
</tr>
</table>
<p> </p>
</body>
</html>Take a look at list-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->), and see if that helps get you going.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...
Originally posted by george71
I'll have to check this in the weekend as I need to catch up some sleep today...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...
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 booki 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.comyes 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???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.If you want something to change widths with the screen res then use % widths...
Some of my attempts at menus on <!-- w --><a class="postlink" href="http://www.webdevfaqs.com">www.webdevfaqs.com</a><!-- w --> might be of interest - under CSS.Originally posted by george71
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
WTF was that...
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.
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?If you post your current example, we'll probably be able to give you better input.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=http://www.webdeveloper.com/forum/archive/index.php/"">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=http://www.webdeveloper.com/forum/archive/index.php/"">galerie</a></div>
</div></td>
<td width="10%" height="34"> <DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">persberichten</a></div>
</div></td>
<td width="10%" height="34"> <DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">c.v.</a></div>
</div></td>
<td width="10%" height="34">
<DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">links</a></div>
</div></td>
<td width="10%" height="34"> <DIV id="message">
<div class="menuBar"> <a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"">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=http://www.webdeveloper.com/forum/archive/index.php/""> </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=http://www.webdeveloper.com/forum/archive/index.php/"">georgelangenberg</a> <a class="menuButton" href=""></a></h5>
</div>
</div></td>
</tr>
</table>
<p> </p>
</body>
</html>Take a look at list-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->), and see if that helps get you going.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...
Originally posted by george71 I'll have to check this in the weekend as I need to catch up some sleep today...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...
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 booki 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.comyes 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???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.If you want something to change widths with the screen res then use % widths...
Some of my attempts at menus on <!-- w --><a class="postlink" href="http://www.webdevfaqs.com">www.webdevfaqs.com</a><!-- w --> might be of interest - under CSS.Originally posted by george71
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
WTF was that...
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.