0

私のウェブサイトには、スクロール バーがかなり右に移動し、スクロール バーが下に移動します。これらの領域には何も表示されないため、スクロール バーは不要です。どちらかといえば、1ページにすべて収まる可能性があります。これらは私のページの周りに多くの空白を作成します.

どうすればこれが起こらないようにできますか?

   <!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future  </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->

</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color:  #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>


<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1> 
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<a href="http://twitter.com/louismoore18"><img src="twitter.png" class="image2" border="0" alt="."></a>
</div>
<div class="box1">

</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>

編集：これはどのように見えるべきかです

4

1 に答える 1

0

relativeこれは、値の配置と設定のアーティファクトleftです。

それを削除すると、余分なスペースがなくなります。

デモ

編集

相対的な配置は必要ありません。達成しようとしている設計は、 を使用するとはるかに簡単に作成できますtext-align: center。

HTML 
<div>
  <img src="//placehold.it/200x200">
  <h1>Welcome to my page</h1>
  <h2>Coming Soon...</h2>
  <h3>But for now follow me on Twitter</h3>
</div>​
CSS 
@import url(http://fonts.googleapis.com/css?family=Paytone+One);

div {
    text-align: center;
    background: #ddd;
    border-bottom: 3px solid red;
    margin: 5px;
    padding: 10px;
    font-family: 'Paytone One', sans-serif;
    font-size: 24px;
}

h1 { 
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
    color: red;
}

img {
    width: 200px;
    height: 200px;
    }​

デモ

于 2012-12-23T17:02:59.893 に答える