|
CSS - Need Lots Of Help
Hello, I'm trying to help my g/f with some school work (since her teacher is less than helpful) and nothing seems to be working. For starters we're trying to get the links that's on the left side of the page to the middle of the page near the top in a row. and everytime we try to look at it, the wallpaper never shows up which in itself is quite annoying. It has to be an external style page only, and everything we've tried hasn't worked so far. The code we have so far is this:
#heading div id="head" { font-family: fantasy, arial; font-size: 100px; color:#b45f04; } body { background: background-color: #heading { position: relative; top: 20px; left 40px; } } a:link {color:#336600;} /* unvisited link */ a:visited {color:#000000;} /* visited link */ a:hover {color:#120A8F;} /* mouse over link */ a:active {color:#2F4F2F;} /* selected link */ ul id="sitelist" { color: #df7401 font-family: fantasy, arial; font-size:200px } well, I was going to show the site, and so much for the wallpaper too, but I guess thats not going to work. Similar TutorialsI've been working on the page www.hidrostal-india.com/newlook/index.htm using lots of positioned divs... here is the stylesheet i am using: Code:
/* CSS Document */
div#wrapper
{
text-align:left;
margin:0 auto;
width:800px;
position:absolute;
background-color:#FFFFFF;
border-style:solid;
border-width:thin;
border-color:#0099FF;
overflow: visible;
left:50%;
margin-left:-400px;
margin-bottom:50px;
}
div#buttons
{
position:relative;
top:-220px;
margin-left:10px;
height:42px;
}
div#maincontent
{
position:relative;
top:-220px;
margin-left:10px;
border-color:#0066FF;
border-width:1px;
border-style:solid;
width:598px;
}
div#contact
{
position:relative;
top:-220px;
margin-right:10px;
width:160px;
float:right;
border-width:1px;
border-style:solid;
background-color:#BCC8E1;
border-color:#0066FF;
text-align:left;
z-index:2;
}
div#flash
{
}
#translucentbkg {
width: 588px;
background-color: #0099FF;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity: 0.1;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#opaquetext {
width: 588px;
background-color: transparent;
position: absolute;
z-index: 2;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
.iframeclass
{
border-style:none;
}
.buttonclass
{
cursor: pointer;
cursor: hand;
}
.contactclass
{
cursor: pointer;
cursor: hand;
}
Now as you can see there is always 100px or so of whitespace at the bottom of my main container- can anyone think why? I've tried playing round with all kinds of numbers but to no avail! Thanks a lot! Please take a look at a site I'm developing: http;//www.b4itwascool.com The CSS is he http://www.b4itwascool.com/css/main.css I'm also using a Lightbox 2.0, so that CSS is he http://www.b4itwascool.com/css/lightbox.css 1. There is a lot of extra space below the footer. I assume this is where the containers would have been had I not relatively repositioned them? How do I remove this space? 2. I want the right "steel" beam to repeat-y to the bottom of the page. I don't know why that's not working. 3. If you click the top links, you will see that sometimes the footer falls within the left "column", and sometimes it falls within the right column. How do I ensure it always falls to the right, like the way it appears on the homepage? thanks for any advice! |
|||||||