I have created a page using several sized divs to create blocks of color on a page, eg.
HTML
<div class="big brown box">
contents of big brown box
</div>
CSS
.bigbrownbox {width:500; height:500; background-color:brown; margin:20px}
Then everything that i want in the box goes inside the div tags.
This shows a big brown box in IE, but nothing in firefox, is this a known error or am i doing something wrong?
Thanks for any help,
pete.You need to specify units, e.g. 500px, 500em, etc... and <div class="big brown box"> should probably be <div class="bigbrownbox">Each element can have multiple classes, delimited by spaces. So, "big brown box" would be three separate classes: .big, .brown, and .box. You should, as J. Karlsson said, put them all together if you want to use .bigbrownbox.Ok, thanks for picking up on that, but that was just my bad typing.
In my actual code i have used values and have no spaces in my class name.
However, since i posted they have started showing, eg. a coloured bar at the top of page, didn't show before, does now!! i don't know why.
Anyway i have another question someone maybe able to help with.
I'm creating a menu, with tabs and a little sub-menu for each tab, not when hovered over, just when clicked on.
here is a naffy preliminary idea. See how the sub-link(egg) is enclosed within the link(chips)? Well, it don't work in firefox (fine in opera though)
The problem is that in IE and Opera the div "chips" surrounding the sublink (egg) is expanded in height to make room for the contents. In firefox, the div is not automatically resized, and i must change it in the style, eg. .tabon{height:30px;}
Is there a way to get firefox to automatically resize the container div when it's contents get too big to fit?
<html>
<head>
<style>
.main {width: 800; height: 500; background-color: brown;}
.topbar {width: 800; height:20; background-color: blue;}
.floattext {width:110; height:20; position:absolute; top:200px; left:200px; background-color:red;border-width:10px; border-color: black;}
.bigpinkbox {height:200;width:200;background-color
ink;border:black 10px; margin:10px;}
.orangebox {height:150;width:150;background-color
range; margin:10px;}
.bluebox {height:100;width:100;background-color:blue; margin:10px;padding-top:10px;}
.tab {height:15px; width:100px;background-color:green;}
.tab a{display:block;}
.tab a:link{background-color:green; color:yellow; font-family:arial; font-size:14px;text-decoration:none;}
.tabon {height:15px; width:100px;background-colorink; size:relative; }
.tabon a{display:block;}
.tabon a:link{color:blue; font-family:arial; font-size:14px;text-decoration:none;}
.subtab {height:15px; width:90px;margin-left:10px;background-color:#999999;}
.subtab a{display:block;}
.subtab a:link{color:white; font-family:arial; font-size:14px;text-decoration:none;}
</style>
</head>
<body style="background-color: yellow;">
<div class="main">
<div class="topbar">
</div>
<div class="floattext">
hello
</div>
<div class="bigpinkbox">
<div class="orangebox">
<div class="bluebox">
<div class="tab">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"spam.htm">spam</a>
</div>
<div class="tabon">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"poo">chips</a>
<div class="subtab">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"egg">egg</a>
</div>
</div>
<div class="tab">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"****">beans</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Don't specify the height in tabonYou're a genius fang,
it's always something that simple as well.
Thank you very much, you saved my bacon, and me from going bonkers.
Pete.A little knowledge goes a long way!
HTML
<div class="big brown box">
contents of big brown box
</div>
CSS
.bigbrownbox {width:500; height:500; background-color:brown; margin:20px}
Then everything that i want in the box goes inside the div tags.
This shows a big brown box in IE, but nothing in firefox, is this a known error or am i doing something wrong?
Thanks for any help,
pete.You need to specify units, e.g. 500px, 500em, etc... and <div class="big brown box"> should probably be <div class="bigbrownbox">Each element can have multiple classes, delimited by spaces. So, "big brown box" would be three separate classes: .big, .brown, and .box. You should, as J. Karlsson said, put them all together if you want to use .bigbrownbox.Ok, thanks for picking up on that, but that was just my bad typing.
In my actual code i have used values and have no spaces in my class name.
However, since i posted they have started showing, eg. a coloured bar at the top of page, didn't show before, does now!! i don't know why.
Anyway i have another question someone maybe able to help with.
I'm creating a menu, with tabs and a little sub-menu for each tab, not when hovered over, just when clicked on.
here is a naffy preliminary idea. See how the sub-link(egg) is enclosed within the link(chips)? Well, it don't work in firefox (fine in opera though)
The problem is that in IE and Opera the div "chips" surrounding the sublink (egg) is expanded in height to make room for the contents. In firefox, the div is not automatically resized, and i must change it in the style, eg. .tabon{height:30px;}
Is there a way to get firefox to automatically resize the container div when it's contents get too big to fit?
<html>
<head>
<style>
.main {width: 800; height: 500; background-color: brown;}
.topbar {width: 800; height:20; background-color: blue;}
.floattext {width:110; height:20; position:absolute; top:200px; left:200px; background-color:red;border-width:10px; border-color: black;}
.bigpinkbox {height:200;width:200;background-color
ink;border:black 10px; margin:10px;}.orangebox {height:150;width:150;background-color
range; margin:10px;}.bluebox {height:100;width:100;background-color:blue; margin:10px;padding-top:10px;}
.tab {height:15px; width:100px;background-color:green;}
.tab a{display:block;}
.tab a:link{background-color:green; color:yellow; font-family:arial; font-size:14px;text-decoration:none;}
.tabon {height:15px; width:100px;background-color
ink; size:relative; }.tabon a{display:block;}
.tabon a:link{color:blue; font-family:arial; font-size:14px;text-decoration:none;}
.subtab {height:15px; width:90px;margin-left:10px;background-color:#999999;}
.subtab a{display:block;}
.subtab a:link{color:white; font-family:arial; font-size:14px;text-decoration:none;}
</style>
</head>
<body style="background-color: yellow;">
<div class="main">
<div class="topbar">
</div>
<div class="floattext">
hello
</div>
<div class="bigpinkbox">
<div class="orangebox">
<div class="bluebox">
<div class="tab">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"spam.htm">spam</a>
</div>
<div class="tabon">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"poo">chips</a>
<div class="subtab">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"egg">egg</a>
</div>
</div>
<div class="tab">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"****">beans</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Don't specify the height in tabonYou're a genius fang,
it's always something that simple as well.
Thank you very much, you saved my bacon, and me from going bonkers.
Pete.A little knowledge goes a long way!