溢出文本框在頁面底部添加了空白

我不太確定如何解釋這一點，因爲我仍然對編碼不熟悉，但我正在嘗試爲HEX創建配置文件佈局，並且我一直保持此狀態問題上來就每一個我做：溢出文本框在頁面底部添加了空白

我注意到，當我編輯滾動框，白色的空間相應地改變其大小。滾動框越大，空間越大，反之亦然。下面的代碼到我的最後一個輪廓：

body { 
 
    background-image: url(http://i.imgur.com/X3qmTN2.png); 
 
    background-repeat: no-repeat; 
 
    background-attachment: scroll; 
 
    height: 100px; 
 
    padding-bottom: 0; 
 
    font-family: Arial, sans-serif; 
 
    color: #e80812; 
 
    text-alignment: justify; 
 
} 
 
#nav { 
 
    width: 400px; 
 
    line-height: 80px; 
 
    padding-top: 670px; 
 
} 
 

 

 
#nav a:link, #nav a:visited, #nav a:active { 
 
    display: block; 
 
    font: 14px "arial"; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    letter-spacing: 2px; 
 
    color: #ab4860; 
 

 
    padding: 7px; 
 
    -webkit-transition: all .5s ease-out; 
 
    -moz-transition: all .5s ease-out; 
 
    -o-transition: all .5s ease-out; 
 
    -ms-transition: all .5s ease-out; 
 
    transition: all .5s ease-out; 
 
} 
 

 
#nav a:hover { 
 
    letter-spacing: 5px; 
 
    color: #74194e; 
 
    padding: 7px 2px; 
 
} 
 
    .hex { 
 
    position: relative; 
 
    top: 600px; 
 
    left: 100px; 
 
    background-color: transparent; 
 
    text-align: center; 
 
    } 
 
    .owl { 
 
    position: relative; 
 
    top: 800px; 
 
    left: 100px; 
 
    background-color: transparent; 
 
    text-align: center; 
 
    } 
 
    .club { 
 
    position: relative; 
 
    top: 1000px; 
 
    left: 100px; 
 
    background-color: transparent; 
 
    text-align: center; 
 
    } 
 
    b { color: #ab4860; } 
 
    u { color: #ab4860; } 
 
    i { color: #ab4860; }

<div id="nav"> 
 
<div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div><br> 
 
<div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div><br> 
 
<div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div><br> 
 
</div> 
 

 
<div align="left"> 
 
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;"> 
 
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div> 
 

 
</body>

有什麼我需要補充，或者在我的代碼刪除？我在哪裏搞亂了，我看不到它？

來源

2015-12-14 Nymira Blake

那麼問題是什麼？ –

我的問題是在那裏：我需要添加一些東西，刪除一些東西嗎？還是我做了一件錯事，把它搞砸了？ –

我編輯了代碼段，因爲發生了一場災難，它不起作用。 –

的BR標籤是你的倒臺，我已經換了幾個其他的一些東西。

<div id="nav"> 
    <div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div> 
    <div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div> 
    <div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div> 
</div>

http://jsfiddle.net/link2twenty/xxvkzz28/

來源

2015-12-14 09:54:40

謝謝，這個修好了！ –

我對你的代碼做了一些改變，通過這種模式菜單的文本被放置在他的位置。頂部和左側是0像素。看到的片段在全頁：

body { 
 
    background-image: url(http://i.imgur.com/X3qmTN2.png); 
 
    background-repeat: no-repeat; 
 
    background-attachment: scroll; 
 
    height: 100px; 
 
    padding-bottom: 0; 
 
    font-family: Arial, sans-serif; 
 
    color: #e80812; 
 
    /* text-alignment doesnt exists, it's text align*/ 
 
    text-align: justify; 
 
} 
 
#nav { 
 
    width: 400px; 
 
    line-height: 80px; 
 
    padding-top: 670px; 
 
} 
 

 

 
#nav a:link, #nav a:visited, #nav a:active { 
 
    display: block; 
 
    font: 14px "arial"; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    letter-spacing: 2px; 
 
    color: #ab4860; 
 

 
    padding: 7px; 
 
    -webkit-transition: all .5s ease-out; 
 
    -moz-transition: all .5s ease-out; 
 
    -o-transition: all .5s ease-out; 
 
    -ms-transition: all .5s ease-out; 
 
    transition: all .5s ease-out; 
 
} 
 

 
#nav a:hover { 
 
    letter-spacing: 5px; 
 
    color: #74194e; 
 
    padding: 7px 2px; 
 
} 
 
    .hex { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: transparent; 
 
    text-align: center; 
 
    } 
 
    .owl { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: transparent; 
 
    text-align: center; 
 
    } 
 
    .club { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: transparent; 
 
    text-align: center; 
 
    } 
 
    b { color: #ab4860; } 
 
    u { color: #ab4860; } 
 
    i { color: #ab4860; }

<div id="nav"> 
 
<div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div><br> 
 
<div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div><br> 
 
<div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div><br> 
 
</div> 
 

 
<div align="left"> 
 
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;"> 
 
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>

來源

2015-12-14 09:36:30

問題依然存在。底部還有一個白色空間，它不應該在那裏。 –

我編輯的代碼，並得到一個有效的解決方案：

html, body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body { 
 
    background-image:url(http://i.imgur.com/X3qmTN2.png); 
 
    background-repeat: no-repeat; 
 
    color:#e80812; 
 
    font-family:arial, sans-serif; 
 
    height:1660px; 
 
    text-align: justify; 
 
    width:1300px; 
 
} 
 
#nav { 
 
    line-height:80px; 
 
    position:absolute; 
 
    top:640px; 
 
    width:400px; 
 
} 
 
#nav a:link, 
 
#nav a:visited, 
 
#nav a:active { 
 
    color: #ab4860; 
 
    display: block; 
 
    font-family:arial; 
 
    font-size:14px; 
 
    letter-spacing:2px; 
 
    padding:7px; 
 
    text-align:center; 
 
    text-decoration:none; 
 
    text-transform:uppercase; 
 
    
 
    -webkit-transition:all .5s ease-out; 
 
    -moz-transition:all .5s ease-out; 
 
    -o-transition:all .5s ease-out; 
 
    -ms-transition:all .5s ease-out; 
 
    transition:all .5s ease-out; 
 
} 
 
#nav a:hover { 
 
    color:#74194e; 
 
    letter-spacing:5px; 
 
    padding:7px 2px; 
 
} 
 
.hex { 
 
    position:relative; 
 
    text-align:center; 
 
} 
 
.owl { 
 
    position:relative; 
 
    text-align:center; 
 
    top:15px; 
 
} 
 
.club { 
 
    position: relative; 
 
    text-align: center; 
 
    top:30px; 
 
} 
 
.content { 
 
    height:850px; 
 
    left:390px; 
 
    overflow:auto; 
 
    position:absolute; 
 
    top:640px; 
 
    width:910px; 
 
} 
 
b, u, i { 
 
    color: #ab4860; 
 
}

<div id="nav"> 
 
    <div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div> 
 
    <div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div> 
 
    <div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div> 
 
</div> 
 
<div align="left"> 
 
    <div class="content">Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div> 
 
</div>

有一些錯別字在HTML和CSS代碼。我解決了這個問題，並做了一些改變，把所有元素放在正確的地方。

一個工作撥弄你可以在這裏找到：http://jsfiddle.net/hhf2kpLd/

來源

2015-12-14 09:40:31

背景不應該像這樣被切斷。 –

@sebastianbrosh背景應該是完整的，你做它的方式，其中一部分被切斷。 –

加了一些優化 –

股利

<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;"> 
    Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>

使你的內容是你的HTML內容的分隔區。使用您的瀏覽器檢查器來查看它。我認爲一些瀏覽器會以不同的方式解釋你的代碼，結果將會不同（例如有一些空白空間）。您是否可以先將您的img上傳到另一個網站（如casimage.com），使其鎖定在我的身邊（代理限制）？然後你應該以不同的方式構建你的網站，沒有相對或絕對的位置。

來源

2015-12-14 09:58:24

溢出文本框在頁面底部添加了空白

回答

相關問題