Can't get my div to stay fixed with layout

Question

I'm quite new to css, divs and everything in between.

So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.

I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.

Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.

Here's the link: http://silentcellmusic.com/test.html

Thx in advance!

Answer 1

First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.

Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.

Third, create four divs:

• social
• listen
• video

Float them to the left, set their widths and margins, accordingly.

Finally add a div for your footer (social links and mailto).

Best of luck.

Answer 2

Here is your CSS for the video div:

#apDiv1 {
    position:absolute;
    left:747px;
    top:535px;
    width:400px;
    height:223px;
    z-index:1;
    #wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Did you mean to declare width twice? Is the width:960px throwing off your positioning?

Answer 3

Get rid of the <center> tag altogether and change the css for #apDiv1 to:

#apDiv1 {
   position: absolute;
   left: 597px;
   top: 489px;
   width: 400px;
   height: 223px;
   z-index: 1;
}

Answer 4

What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.

First you need a relative container. Your image is already centered, so you could do something like:

<div id="container">...</div>

#container {width:960px; margin:0 auto; position:relative;}

Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:

<div id="container">
 <div id="videoDiv">
   your video here
 </div>
</div>

And your css for the videoDiv:

#videoDIv {position:absolute; top:200px; left:200px; }

Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.

Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.