如何中心和修復我搞砸的網頁？

我試圖讓這個網頁，它只是有這麼多問題。我無法將#titlediv居中，導航欄有時會消失。我不會說謊：這可能是一個很大的修復，我真的不確定。但這裏的，如果任何人都不可能挽救它的鏈接：如何中心和修復我搞砸的網頁？

http://jsfiddle.net/glenohumeral13/c604vbrn/

代碼：

<body> 
    <div id="parallaxish"></div> 
    <div id="navbar"> 
     <nav> 
<a href="#item1">Item1</a> 

<a href="#item2">Item2</a> 

<a href="#item3">Item3</a> 

     </nav> 
    </div> 
    <div id="contentdiv"> 
     <div id="welcome"> 
      <div id="titlediv"> 

<h1>Title will go here</h1> 

      </div> 
     </div> 
     <div class="barrier"></div> 
     <div id="item1"> 

<h1>Item1</h1> 

     </div> 
     <div class="barrier"></div> 
     <div id="item2"> 

<h1>Item2</h1> 

     </div> 
    </div> 
</body>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    color: #fff; 
    background-color: #000; 
    font-family: Helvetica, Arial, sans-serif; 
} 
img { 
    max-width: 100%; 
    height: auto; 
} 
#parallaxish { 
    background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg'); 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
    background-position: center; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    height: auto; 
} 
#navbar { 
    float:right; 
    height: 30px; 
    margin-right: 100px; 
} 
nav a { 
    text-decoration: none; 
    display: inline; 
    list-style-type: none; 
    padding-right: 15px; 
    padding-top: 10px; 
    float: left; 
    -webkit-transition: color 1s ease-out; 
    -moz-transition: color 1s ease-out; 
    -o-transition: color 1s ease-out; 
    transition: color 1s ease-out; 
    font-weight: 100; 
    color: #fff; 
    -webkit-font-smoothing: antialiased; 
} 
nav a:hover { 
    color: #16a085; 
} 
#welcome { 
    height: 600px; 
    width: 100%; 
    text-align: center; 
    text-transform: uppercase; 
    background-color: black; 
} 
#welcome h1, #item1 h1, #item2 h1 { 
    font-weight: 100; 
    -webkit-font-smoothing: antialiased; 
} 
#titlediv { 
    border: 2px solid #fff; 
    width: 180px; 
    margin: auto; 
    padding: auto auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
    overflow: auto; 
} 
.barrier { 
    height: 120px; 
    width: 100%; 
    background: transparent; 
} 
#item1 { 
    height: 600px; 
    width: 100%; 
    text-align: center; 
    background-color: white; 
    color: #16a085; 
} 
#item1 h1, #item2 h1 { 
    padding: 5% 0; 
} 
#item2 { 
    height: 600px; 
    width: 100%; 
    text-align: center; 
    background-color: black; 
    color: white; 
}

來源

2014-11-08 glenohumeral13

「_Code所需的計算器：_」：p – 2014-11-08 23:36:27

首先，演示！
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
它看起來像你想要做的是垂直和水平中心，在div中，正確的？
有一個簡單的方法，用css來做到這一點，我覺得非常有用：

<div id="welcome"> 
<div id="titlediv"> 
<h1>Title will go here</h1> 
</div> 
</div>

首先，我們給position:relative;到div id="welcome"：

/*With your current CSS*/ 
#welcome { 
height: 600px; 
width: 100%; 
text-align: center; 
text-transform: uppercase; 
background-color: black; 
position:relative; 
}

然後，神奇！該<div>id="titlediv"給出position:absolute;和其他幾個規則：

#titlediv { 
border: 2px solid #fff; 
width: 180px; 
margin: auto; 
padding: auto auto; 
position: absolute; 
width: 180px; 
height: 76px; 
left: 0; 
right: 0; 
top:0; 
bottom:0; 
overflow: auto; 
}

這個小動作僅在寬度和高度聲明的作品。現在，在導航欄輕鬆修復：

#navbar { 
position:absolute; 
top:0; 
right:100px; 
height: 30px; 
z-index:10; 
}

而包裹這一切，全屏幕演示！
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/

來源

2014-11-09 00:52:26

非常感謝！你真了不起！ – glenohumeral13 2014-11-09 01:11:19

我真的很想感謝你，不僅把這麼多的工作和想法放到你的文章中，而且也是爲了真正有幫助和很好。祝你有美好的一天！ – glenohumeral13 2014-11-09 01:37:13

這是我的榮幸！確保您將其標記爲已接受，所以如果其他人以後需要它，它將位於答案的頂部。 – 2014-11-09 14:08:08

-1

如果我是你，我會盡量讓我的頁面通過使用像引導或基礎的框架，如果你想要一個輕量級的，你總是可以嘗試骨架很容易使用&你可以找到sn ippets很容易在網絡上：

http://getbootstrap.com/ | http://bootsnipp.com/

希望我幫助使用谷歌第一

來源

2014-11-08 23:54:25

我試了幾個小時。我無法找到任何不會增加其他問題的內容。而在其他網站上詢問引起粗魯的人，所以我認爲這將是最有幫助的。我不想使用Bootstrap，只是因爲我從來不太理解框架網站，就像我從底層開始構建的那樣。 – glenohumeral13 2014-11-09 00:10:31

非常高興你找到你的解決方案，並對不起，如果我不abig幫助你！ – 2014-11-11 23:41:35

http://stickyjs.com/會幫助你，你&下一次試試吧！ I

//LOAD THE FILES 
<script src="jquery.js"></script> 
<script src="jquery.sticky.js"></script> 

/RUN THE SCRIPT 
<script> 
$(document).ready(function(){ 
$("#navbar").sticky({topSpacing:0}); 
}); 
</script>

來源

2014-11-09 00:04:02 CESCO

如何中心和修復我搞砸的網頁？

回答

相關問題