Sk8rjwd
08 Sep 2010, 08:54 AM
I have tried a lot of different things and I can't find whether I set the toolbar to stay in the top left, no matter what I do. I am trying to center it on the page and If I put say a picture on top of it, then the toolbar goes under the picture.
Html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS3 bubble_files/style.css" type="text/css" />
</head>
<body>
<ul id="css3menu">
<li class="topitem"><a href="http://www.solutionwdcc.tk">SolutionWDCC</a></li>
<li class="topitem"><a href="http://www.creativedesigntoo.com">CreativeDesignToo</a></li>
<li class="topitem"><a href="#">Coming soon!</a></li>
<li class="topitem"><a href="#">TEST,TEST!</a></li>
</ul>
</body>
</html>
CSS:
#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
#css3menu li:hover>*{
display:block;}
#css3menu li:hover{
position:relative;}
#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
#css3menu ul>li{
margin:6px 0 0;}
#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
#css3menu ul li{
float:none;margin:0;}
#css3menu ul a{
text-align:left;}
#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
#css3menu ul img{
width:16px;height:16px;}
#css3menu img.over{
display:none;}
#css3menu li:hover > a img.def{
display:none;}
#css3menu li:hover > a img.over{
display:inline;}
#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
#css3menu li.topitem:hover>a{
background-color:#7dfa00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
Thanks in advance for all of your help!
:teleport:
Html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS3 bubble_files/style.css" type="text/css" />
</head>
<body>
<ul id="css3menu">
<li class="topitem"><a href="http://www.solutionwdcc.tk">SolutionWDCC</a></li>
<li class="topitem"><a href="http://www.creativedesigntoo.com">CreativeDesignToo</a></li>
<li class="topitem"><a href="#">Coming soon!</a></li>
<li class="topitem"><a href="#">TEST,TEST!</a></li>
</ul>
</body>
</html>
CSS:
#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
#css3menu li:hover>*{
display:block;}
#css3menu li:hover{
position:relative;}
#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
#css3menu ul>li{
margin:6px 0 0;}
#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
#css3menu ul li{
float:none;margin:0;}
#css3menu ul a{
text-align:left;}
#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
#css3menu ul img{
width:16px;height:16px;}
#css3menu img.over{
display:none;}
#css3menu li:hover > a img.def{
display:none;}
#css3menu li:hover > a img.over{
display:inline;}
#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
#css3menu li.topitem:hover>a{
background-color:#7dfa00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
Thanks in advance for all of your help!
:teleport: