I can’t control the positioning and size of my website, help!

[SamuelCBird]

Hi, I’m quite new to CSS, so I’m sorry if this is really simple stuff but I would really appreciate your help!

I’ve used CSS to try and make my background fit whatever size the browser window is, but if the window is too big, then there is a space at the bottom, and if too small, you can scroll down and there is a space. How di I get rid of this?

Also, my header and footer do stick to the top and bottom, but seem to change size, also the stuff (picture in this case) in the main window of my website doesn’t stay in the same position. Here is the CSS:

@charset "UTF-8";

/* CSS Document */



#header-wrap {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 15%;

background-color:#4d0000; }



#header_logo {

position:relative;

}



#comsoon {

position:relative;

}



a:link {color:#fff1b1;}    /* unvisited link */

a:visited {color:#fff1b1;} /* visited link */

a:hover {color:#fff1b1;}   /* mouse over link */

a:active {color:#fff1b1;}  /* selected link */



a:link {text-decoration:none;}    /* unvisited link */

a:visited {text-decoration:none;} /* visited link */

a:hover {text-decoration:underline;}   /* mouse over link */

a:active {text-decoration:underline;}  /* selected link */



.table, td, tr

{

font-family:"Champagne & Limousines";

color:white;

border:0px solid;

text-align:center;

font-size:25px;

color:#4d0000;

table-layout:auto;

max-width:180px;

}



.center {

margin-bottom:auto;

margin-left:auto;

margin-right:auto;

margin-top:auto;

}





* { margin:0; padding:0; }



html, body, #wrap { height: 100%;

margin-top:5%; }



#wrap {height: auto; min-height: 81.7%;}



#main { padding-bottom: 80px;}  /* must be same height as the footer */



/**Background**/

.bg {

width: 100%;

height: 90%;

position: absolute;

top: 0;

left: 0;

z-index: -5000;

}



#footer {

position:relative;

margin-top: -93px; /* negative value of footer height */

height: 94px;

clear:both;

background-color:#4d0000;

color:fff1b5;

font-family:"Champagne & Limousines";}



/******* CLEAR FIX********/

.clearfix:after {content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac */

* html .clearfix { height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

Thank you :)

[SamuelCBird]

Oh, sorry, I forgot to include the link to my website. It is

http://www.youmightlikethis-music.com

Pleeeease help me. I wish I could fix it myself!

[SamuelCBird]

Hey, thanks guys.

In the end I just started over, and I’ve managed to make it work.

Would be great if you could have another look and let me know if it works okay on your computers/web browswers.

http://www.youmightlikethis-music.com

Thanks again :)

Samuel.

[Codyman]

Always put your height and width of your scaleable content to auto to scale with the browser of the user. Then, go back and resize your components inside of it.

[Anonymous]

I’m on a 2560 x 1440 display and it looks just fine in Firefox 8.0.1.

[SamuelCBird]

@Codyman do you mean stuff like the headers and footers?

@TheDark12 thank you for looking for me. I’m glad it seems to be working okay.

I think I read somewhere there might be problems in IE6…do people still use that browser? I use a Mac so out of touch with Microsoft!

Cheers!

[Marie]

Just curious what you are trying to achieve with #horizon and #horizon1? (I’m no expert too)

[SamuelCBird]

I found this on the web, can’t remember exactly where but have a search on Google.

Basically it is putting a line dead in the vertical center, so then when I adjust the margin it puts my picture or text dead centre. #horizon is for the header and footer and #horizon1 is for the main “Coming Soon” image.

Hope this makes sense! And I expect there is an easier way of doing it. :P Aha

[SamuelCBird]

Oh, I’m working on the main site at the moment, and I’ve had to take the #horizon1 away from the main part because when you scroll down the content goes on top of the header.

You can see that with the page that is live if you adjust the browser window.

Not sure if there is a way to remedy that, or how to do it either!

[SamuelCBird]

If you resize the browser window the objects in my header go all over the place. Could someone tell me how to remedy this?

http://www.youmightlikethis-music.com

Thanks!

[Author]

Posts