css - ウェブサイトの配置幅、うまくいかない

Question

私はほぼ 1 年間、事前に作成された Web テンプレートに取り組んでおり、PSD でゼロから独自のテンプレートを作成することから始めました。Web サイトは次の場所にあります。

http://gamelabs.webege.com/

初めて PSD を HTML/CSS に切り刻みました。それにもかかわらず、私は自分のラップトップで動作するようになり、他の複数のブラウザー (Mac/iPad/Android) などで表示するまで動作しました。解決。ウェブサイトを margin: 0; でラップしようとしましたが、min/max-width などの他の手法を使用し、ポジショニングを使用して整列させ、多くのブラウザー画面で下のスクロールを表示しますが、自分のコンピューターです。スクロールを非表示にできるため、ここではオーバーフローしませんが、ウェブサイトはカットされています。ウェブサイトをゼロから作成するのはこれが初めてで、まだ基礎レベルで立ち往生しています。また、grid.less やブートストラップを使用してレスポンシブ WD を構築するつもりはないことにも言及したいと思います。 私の途切れ途切れの CSS からの抜粋は次のとおりです。

  body {
    margin: 0;
    padding: 0;
    background-color:#000;
}

#wrapper {
    margin: 0 auto;
    position:relative;
width: 100%;
        }

 #bottombar 
{ 
     left: 0px; 
     top: 750px; 
     position: absolute; 
     width: 100%;
     height: 200px;
     z-index:1;
     background:url(images/foot.png) repeat-x;
} 

 #bottombarglow 
{ 
     left: 260px; 
     top: 733px; 
     position: absolute; 
     width: 800px;
     height: 51px;
     z-index:2;
     background:url(images/bottombarglow.png);
} 

 #topbar 
{ 
     left: 0px; 
     top: 0px; 
     position: absolute; 
     width: 100%;
     height: 82px;
     z-index:3;
     background:url(images/tb.png)repeat-x;
} 

 #blueline 
{ 
     left: 80px; 
     top: 648px; 
     position: absolute; 
     width: 1200px;
     height: 2px;
     z-index:4;
     background:url(images/blueline.png);
} 

 #bullets 
{ 
     left: 100px; 
     top: 660px; 
     position: absolute; 
     width: 860px;
     height: 87px;
     z-index:5;
     background:url(images/gallery_left.png);
}  

 #gallerybutton 
{ 
     left: 980px; 
     top: 670px; 
     position: absolute; 
     width: 257px;
     height: 67px;
     z-index:6;
     background:url(images/gallery.png);
} 

 #menu 
{ 
     left: 840px; 
     top: 14px; 
     position: absolute; 
     width: 450px;
     height: 54px;
     z-index:7;
     background:url(images/menu.png);
} 

 #footer 
{ 
     left: 156px; 
     top: 810px; 
     position: absolute;
     z-index:8;
     width: 400px;
     height: 98px;
     background:url(images/footer.png);
} 

 #logo 
{ 
     position: absolute; 
     width: 237px;
     height: 156px;
     z-index:9;
     background:url(images/logo.png);
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
    </head>
    <body>
    <div id="wrapper">
            <div id="logo"><a href="#" target="_self" class="logo"></a></div>
            <div id="topbar"></div>
            <div id="menu"></div>
            <div id="bullets"></div>
            <div id="gallerybutton"><a href="#" target="_self" class="gallery"></a></div>
            <div class="clearfix"></div>
            <div id="blueline"></div>
            <div id="bottombarglow"></div>
            <div id="footer"></div>
            <div id="bottombar"></div>
            <!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->
<div id="slideshow">
    <img src="images/bg1.png" alt="Slideshow Image 1"/>
    <img src="images/bg2.png" alt="Slideshow Image 2" />
    <img src="images/bg3.png" alt="Slideshow Image 3" />
    <img src="images/bg4.png" alt="Slideshow Image 4" />
    <img src="images/bg5.png" alt="Slideshow Image 5" />
    <img src="images/bg6.png" alt="Slideshow Image 6" class="active"  />
</div>
<!-- Java Starts -->

    <script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
        <script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4000 );
});

</script>
<!-- Java Ends -->
</div>
 </body>
 </html>

これは私の神経を少し食べ始めています。ここでの間違いは非常に基本的なものに違いありませんが、私の知識もそうです。誰かが私たちと一緒に私を助けてくれることを願っています. どんな質問にも答えます。前進ありがとう！PS: これをデザインする際に、Kabam.com からインスピレーションを得ました。

css - ウェブサイトの配置幅、うまくいかない

1 に答える 1

Related

Reference