0

我对 css、div 和介于两者之间的一切都很陌生。

所以，我为我的乐队创建了一个基本布局，不想要一堆无用的链接，比如简历、商品商店等等。所以我决定为我们的视频、播放器和 Facebook 窗口安排单独的空间。

我设法为 youtube iframe 创建了一个 div，但是当我调整窗口大小时，我无法让它留在原位。我尝试过多次将定位更改为绝对、固定、相对……等。没运气。

请记住，布局没有什么花哨的，只是快速查看并获取乐队的一些基本信息。

这是链接：http ://silentcellmusic.com/test.html

提前谢谢！

4

4 回答 4

0

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.

于 2012-08-02T20:38:42.613 回答
0

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.

于 2012-08-02T20:39:30.303 回答
0

完全摆脱<center>标签并将 #apDiv1 的 css 更改为：

#apDiv1 {
   position: absolute;
   left: 597px;
   top: 489px;
   width: 400px;
   height: 223px;
   z-index: 1;
}
于 2012-08-02T20:40:45.097 回答
0

这是视频 div 的 CSS：

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

你的意思是两次声明宽度？width:960px 是否会影响您的定位？

于 2012-08-02T20:40:13.460 回答