Jump to content
Sign in to follow this  
Guest Patrokles

CSS Help

Recommended Posts

Guest Patrokles

I'm very much a beginner with this, so I hope that I'm about to explain myself properly:

 

I have a CSS design with header, footer, single column, elastic. Basically, I have an image in the main header box, but I want the background of the header box to be entirely transparent. I assume this is very simple to do, I just don't know how. Any help, please?

Share this post


Link to post
Share on other sites
Guest Patrokles

Also, how to make the footer the absolute bottom of the page, so that even if the default background stretches down below it, the page won't display anything below the footer?

Share this post


Link to post
Share on other sites

 div.header {
background: url("images/header.jpg") repeat-x 100% 0% transparent;
}

 

 

 

? or maybe

 

#left-sidebar {
background:url(translucentgrey50.png) repeat;
filter: alpha(opacity=50);
}

Edited by @yourservice

Share this post


Link to post
Share on other sites
Guest Patrokles

 div.header {
background: url("images/header.jpg") repeat-x 100% 0% transparent;
}

 

 

 

?

 

I'll give that a go once I get back from the pub. Thanks!

Share this post


Link to post
Share on other sites

   #footer {
  width: 100%;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px;
  height: whatever;
  }

 

Make sure though that in your container element (ie the parent element containing #footer) you have the following:

 

padding-bottom: whatever;

 

Where in both cases whatever = the height of your footer.

 

 

Oh and the reason theres two bottom: lines in the #footer its there to fix an irritating bug in IE6 which causes there to be a 1 pixel gap at the bottom.

Share this post


Link to post
Share on other sites
Guest Patrokles

   #footer {
  width: 100%;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px;
  height: whatever;
  }

 

Make sure though that in your container element (ie the parent element containing #footer) you have the following:

 

padding-bottom: whatever;

 

Where in both cases whatever = the height of your footer.

 

 

Oh and the reason theres two bottom: lines in the #footer its there to fix an irritating bug in IE6 which causes there to be a 1 pixel gap at the bottom.

 

Ta very much.

Share this post


Link to post
Share on other sites

Thought I'd seen this. I need to get into CSS fairly rapidly. I have no idea how it works or owt else really but I need to know. Any books people have used? A guide for the clueless, slow and easy is what is needed here. Ta.

 

Also need one for whatever that web based VB is.

 

Ta again.

Share this post


Link to post
Share on other sites

Ta for that Khay. Very useful. Whats the difference between HTML and XHTML in a nutshell? Forget that. Bloody marvellous that website. Cheers!

Edited by gram

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

Recent tweets

Toontastic Facebook

Donate to Toontastic

Keeping the lights on since... well ages ago
TT-Staff


×