PDA

View Full Version : Oh hey, look, I have another problem 83


Linkin-Dreamer
09-29-2011, 11:01 AM
Hey x3

I'm having some problems intergrating a script I found with my template 83

This is the script -

<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Small Chair</a></li>
<li><a href="">Shiny Shelf</a></li>
<li><a href="">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
</body>
</html>

I'm using the Spooky Wood and Simple themes and I'd like to integrate it into both x3

Any help?

Linkin-Dreamer
09-29-2011, 11:07 AM
Oh, if it helps, these are my CSS's

body {
background:url("images/bottom.png") fixed no-repeat bottom right #1e1f2c;
color:#FFFFFF;
font-family:arial, tahoma, sans-serif;
font-size:12px;
}

#linksbar {
background:url("images/linksbar.png");
width:100%;
z-index:2;
height:50px;
position:fixed;
top:0px;
left:0px;
}
#header {
background:url("images/right-bg.png") repeat;
width:100%;
z-index:2;
position:fixed; top:50px; left:0px;
}
#hleft {
position:absolute; top:50px; left:0px;
}

#sidefeed {
background:url("images/sidefeedbg.png") top no-repeat #2C3C55;
position:fixed; top:50px; left:50px;
height:auto;
width:200px;
z-index:2;
color:#eee;
border-top:0px solid #2C3C55;
border-left:0px solid #2C3C55;
border-right:0px solid #2C3C55;
border-bottom:0px solid #2C3C55;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

#sidefeed p {
padding:2px;
margin:5px;
}


#hright {
height:199px;
z-index:2;
position:fixed; top:50px; left:250px;
}

#content {
width:700px;
position:absolute;
top:252px;
z-index:1;
left: 265px;
background:url("images/bg2.png");
border:1px solid #aaa;
-moz-border-radius: 10px;
border-radius:10px;
margin:5px;
}
#content p {
padding:10px;
}

#footer {
}
#footer p{
text-align:center;
background:none;
border:0px solid;
padding:10px;
}

#linksbar ul{
position:inherit;
top:7px;
left:245px;
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-size:12px;
width:100%;
margin: 0 auto;
list-style:none;
}
#linksbar li {
display:inline;
}
#linksbar p{
position:inherit;
left:250px;
margin: 0 auto;
}
#linksbar a{
color:#fff;
text-shadow: 1px 1px 1px #aaa;
padding:0 auto;
float:left;
text-align: center;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
border-bottom:0px solid;
padding:10px;
}
#linksbar a:hover{
color:#eee;
text-decoration:none;
text-shadow: 0px 1px 1px #343434;
border-bottom:0px solid;
}

table {
border:0;
width:100%;
margin:5px;
}
td {
border:0;
}
#sidefeed a {
color:#ADC8F0;
text-decoration:none;
border-bottom:1px dotted;
}
#sidefeed a:hover {
color:#F0ADC0;
text-decoration:underline;
border-bottom:1px dotted;
}
a {
color:#4075CB;
text-decoration:none;
border-bottom:1px dotted;
}
a:hover {
color:#F26CF0;
text-decoration:underline;
border-bottom:1px dotted;
}
#sidefeed strong, b span {
color:#aaa;
}
#sidefeed em, i span{
color:#aeaeae;
}
u {
color:#343434;
}
#content em, i {
color:#207DA4;
}
#content strong, b {
color:#BF2222;
}
#sidefeed input, select {
background:transparent;
border: 1px outset #aaa;
width:auto;
height:20px;
color:#fff;
font-style:italic;
margin:5px;
}

input, select {
background:transparent;
border: 1px outset #aaa;
width:auto;
height:20px;
color:#333;
font-style:italic;
margin:5px;
}
textarea {
background:#CCCCCA;
border-bottom: 1px solid #CCCCCA;
border-top: 1px solid #efefef;
border-left: 1px dotted #efefef;
width:100%;
height:50px;
color:#333;
font-style:italic;
border-right: 1px solid #000;
}


blockquote {
font-family:Consolas, sans-serif;
padding:5px 10px;
color:#333;
border-left:5px solid #fff;
margin:10px;
}

code {
color:#4787ff;
font-family:Courier New;
font-style:italic;
}

img {
border:0px;
}

h1 {
font-size:24px;
border-bottom:1px solid;
text-shadow: 1px 1px 1px #fff;
margin:10px;
}

h2 {
font-size:12px;
border-bottom:1px solid;
margin:10px;
}

#sidefeed ul{
list-style-type:none;
padding:5px;
}
#sidefeed li {
list-style-type:none;
line-height:20px;
}
#sidefeed li a {
color:#efefef;
text-decoration:none;
}
#sidefeed li a:hover {
color:#478792;
text-transform:uppercase;
text-decoration:none;
}

body {
color:#FFF;
background:#eee url(http://i1114.photobucket.com/albums/k533/CaLinMu/Background-1.png) fixed;
font-size:12px;
font-family:Arial, Verdana, sans-serif;
}

#container {
margin:0 auto;
background:url(http://i1114.photobucket.com/albums/k533/CaLinMu/Wrapper.png);
width:800px;
}

#menu {
width:800px;
border-bottom:#000 solid 5px;
font-size:12px;
margin:0 auto;
}
#menu ul{
margin-top:-35px;
list-style:none;
}
#menu li {
display:inline;
}
#menu a{
color:#aaa;
text-transform:uppercase;
display: block;
border-left:0px dotted #000;
float:left;
text-align: center;
text-decoration:none;
font-weight:bold;
padding:10px;
}
#menu a:hover{
color:#333;
text-decoration:none;
}

#user {
width:25%;
margin:2px;
border-right:#eee solid 5px;
}
#user p {
display:block;
letter-spacing:1px;
padding:1px;
text-align:justify;
}
#user ul{
list-style:none;
width:100%;
padding:0px;
margin:0px;
}
#user li {
padding: 2px 2px 0px 0px;
margin: 0px;
}
#user li a{
color:#aaa;
text-transform:uppercase;
display: block;
border-left:5px solid;
padding-left:2px;
text-decoration:none;
font-weight:bold;
}
#user li a:hover{
background:#efefef;
color:#333;
text-decoration:none;
padding-left:4px;
}
#user li img {
vertical-align:middle;
padding:2px;
}
#content {
margin:0 auto;
background:url(http://i1114.photobucket.com/albums/k533/CaLinMu/Wrapper.png);
width:75%;
}
#content p {
display:block;
letter-spacing:1px;
padding:2px;
text-align:justify;
}

#footer {
margin:0 auto;
background:url(http://i1114.photobucket.com/albums/k533/CaLinMu/Wrapper.png);
text-align:center;
border-top:1px dotted #aaa;
border-bottom:1px inset #aaa;
position:inherit;
font-family: Arial, Tahoma, Verdana, sans-serif;
}
#footer a{
color:#343434;
padding:4px;
text-align: center;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
}
#footer a:hover{
color:#aaa;
text-decoration:none;
}
#footer p{
font-size:09px;
text-transform:uppercase;
text-align:center;
color:#4C3A7A;
font-weight:bold;
}

a {
color:#C9C9C9;
text-decoration:none;
font-weight:bold;
letter-spacing:1px;
}
a:hover {
color:#A87174;
}

#content img {
border:0px;
vertical-align:middle;
padding:2px;
}
#user img.left {
border:0px;
vertical-align:middle;
float:left;
padding:5px;
}
#user img.av{
text-align:center;
border:4px solid #eee;
backgroun:#eee;
float:left;
border-radius: 5px;
margin:5px;
}

input, select {
background:#000;
border: 1px solid #A5BDD1;
width:auto;
height:20px;
color:#22AAAA;
font-style:italic;
margin:5px;
}
textarea {
background:#000;
border-bottom: 1px solid #A5BDD1;
border-top: 1px solid #000;
border-left: 1px dotted #000;
width:100%;
height:50px;
color:#22AAAA;
font-style:italic;
border-right: 1px solid #000;
}
h1 {
line-height: normal;
padding:5px;
font-size:26px;
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-weight: bold;
color:#FFFFFF;
}
h1 span {
display:block;
font-size:10px;
text-transform:lowercase;
margin-left:10PX;
color:#000;
font-family: Arial, Tahoma, Verdana, sans-serif;
margin-top:-5px;
letter-spacing:2px;
}

td {
width:auto;
padding:10px;
}

strong, b {
color:#2A886E;
}
em, i {
font-weight:bold;
color:#A35B82;
}
u {
color:#4C3A7A;
font-weight:bold;
}

blockquote {
border-left:#22AAAA 5px solid;
padding-left:10px;
color:#22AAAA;
}

code {
color:#22AAAA;
font-style:italic;
}

a.onlinelist:hover
{
background:#09f;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.onlinelistt
{
color: red;
width: 20%;
display: inline-block;
margin-bottom: 5px;
text-align: center;
}
.onlinelistj
{
color: green;
display: inline-block;
width: 20%;
text-align: center;
}
.onlinelistp
{
color: blue;
display: inline-block;
width: 20%;
text-align: center;

}

Tequila
09-29-2011, 06:52 PM
Try giving the UL for the menu a name like #dropdown and then continue it through the li's as well.

If that doesn't work please let me know. It may be a cross css problem.

Linkin-Dreamer
09-30-2011, 04:24 AM
I think it is a cross CSS problem. You know how the spookywood has a fixed header, menu and sidebar? The drop-down menu scrolls down instead of stays fixed :catfish:

Tequila
09-30-2011, 06:39 PM
Try adding position:fixed; to the css for the menu in the spookywood css. :3