0

私は小さなプロジェクトに取り組んでいて、問題に遭遇しました。ブラウザで自分の Web サイトを表示すると、すべてのコンテンツの下部に非常に大きな空白があります。問題が何であるかを特定するのを手伝ってくれる人はいますか? 私は何時間もそれを見つけようとしてきました。

コードは次のとおりです。

<html>
<head>
<title>Media Mash - Home</title>
<style type="text/css">
* {
font-family:neuropol;
color:rgb(255,255,255);
}
body {
background-color:rgb(52,126,153);
}
.text1 {
font-size:20;
color:rgb(0,0,0);
}
.text2 {
font-size:35;
text-decoration:none;
margin-left:4%;
margin-right:4%;
}
.parent {
min-width:1255px;
}
.topBar {
background-color:rgb(161,35,35);
display:inline-block;
width:1247px;
text-align:center;
height:40px;
}
.leftBar {
top:8px;
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
width:250px;
text-align:center;
height:581px
}
.main {
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
left:258px;
bottom:573px;
width:989px;
height:581px;
}
.imageLeft {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.imageRight {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.textLeft {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.textRight {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.copyright {
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
height:32px;
bottom:565px;
width:1247px;
text-align:center;
}
</style>
</head>
<body>
<div class="parent">
    <div class="topBar">
        <a class="text2" href="placeholder.html">Media Mash</a>
        <a class="text2" href="placeholder.html">Film</a>
        <a class="text2" href="placeholder.html">Music</a>
        <a class="text2" href="placeholder.html">Games</a>
        <a class="text2" href="placeholder.html">Books</a>
    </div>
    <br/>
    <div class="leftBar">
        <a class="text1">
            Media Mash is a website dedicated to helping you realise what favourite films, songs, games and books are.
            <br/>
            <br/>
            We do so in a fun image versus image format, which allows you to pick out your favourites.
            <br/>
            <br/>
            Have a go and create your top 10 lists today!
        </a>
    </div>
    <br/>
    <div class="main">
        <div class="imageLeft">
            <img src="images\The Avengers MM.jpg"/>
        </div>
        <div class="imageRight">
            <img src="images\Star Wars V The Empire Strikes Back MM.jpg"/>
        </div>
        <br/>
        <div class="textLeft">
            <a class="text1">The Avengers</a>
        </div>
        <div class="textRight">
            <a class="text1">Star Wars V: The Empire Strikes Back</a>
        </div>
    </div>
    <br/>
    <div class="copyright">
        <a class="text1">Copyrighted intellectual property of Thomas Crowther ©</a>
    </div>
</div>
</body>
</html>
4

1 に答える 1

2

コードがそのままの状態で、ブラウザは最初にボックスを下に並べてページをレンダリングし、次にボックスを移動して他のボックスの右側に表示します。それが相対位置付けの意味です。

あなたがしたいことは、相対位置を使用する代わりに、float:left(on .leftBar) とfloat:right(on `.rightBar) を使用することです。ブラウザは、最初に要素を所定の位置にレンダリングします。

CSS の「ボックス モデル」について読んで、Firefox の Firebug をチェックすることをお勧めします。

于 2012-05-20T21:26:09.687 に答える