1. 首頁
  2. 問答
  3. css /位置主要內容div到登錄和註冊權利

css /位置主要內容div到登錄和註冊權利

2013-06-23 26 views
0

我正在嘗試創建一個頁面，其中包含標題，粘性頁腳和三個div之間的頁面。現在它看起來是這樣的：css /位置主要內容div到登錄和註冊權利

enter image description here

這是我的HTML和CSS：

的index.php

<!DOCTYPE html> 
<html> 
<head> 
<title>ONE DAY ONLY</title> 
    <script src="reqscripts/jquery.js" type="text/javascript"></script> 
    <script src="js/application.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="css/application.css"> 
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <div class="wrapper"> 
     <header> 
      <h1>ONE DAY ONLY</h1> 
      <p>THE BIZZ()</p> 
     </header> 
     <div id="login"></div> 
     <div id="register"></div> 
     <div id="main"><p>Content</p></div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</body> 
</html>

CSS/application.css

* { 
    margin: 0; 
} 

html, body { 
    background: rgba(179,180,255,1); 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 

.footer, .push { 
    height: 4em; 
} 

.footer { 
    background: rgba(22,138,43,1); 
} 

#loginform { 
    width: 240px; 
    height: 165px; 
    background: rgba(207,207,255, 1); 
    margin-left: 10px; 
    margin-bottom: 10px; 
    padding: 10px; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-family: 'Londrina Solid', cursive; 
} 

#registerform { 
    width: 240px; 
    height: 200px; 
    background: rgba(207,207,255, 1); 
    margin-left: 10px; 
    margin-bottom: 10px; 
    padding: 10px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    font-family: 'Londrina Solid', cursive; 
} 

#loginuser, #loginpass, #reguser, #regpass, #regemail { 
    float: right; 
} 

#submitbutton, #registerbutton { 
    text-align: center; 
} 

.textaligncenter { 
    text-align: center; 
} 

header { 
    font-family: 'Londrina Solid', cursive; 
    background: rgba(179,180,255,1); 
    height: 90px; 
} 

#main { 
    background: rgba(207,207,255, 1); 
}

我已嘗試將float: right添加到主div，並由於某種原因將其浮動正確，但進入頁腳div。我希望主要div（與「內容」）很好地位於登錄和註冊div的右側。

我用這對我粘頁腳：

http://ryanfait.com/sticky-footer/

UPDATE

每下面的建議，頁面現在看起來是這樣的：

enter image description here

更新

我的div來定位，我想，但是當我添加了一堆換行符延長主DIV ...它延伸的stickyfooter ......這不應該發生......

以下是我變了：

#main { 
    background: rgba(207,207,255, 1); 
    float: left; 

} 

#loginregcss { 
    float: left; 
} 

#content { 
    float: left; 
}

這裏是我的html：

<!DOCTYPE html> 
<html> 
<head> 
<title>ONE DAY ONLY</title> 
    <script src="reqscripts/jquery.js" type="text/javascript"></script> 
    <script src="js/application.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="css/application.css"> 
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <div class="wrapper"> 
     <header> 
      <h1>ONE DAY ONLY</h1> 
      <p>THE BIZZ()</p> 
     </header> 
     <div id="loginregcss"> 
      <div id="login"></div> 
      <div id="register"></div> 
     </div> 
     <div id="content"> 
      <div id="main"><p>Content</p></div> 
     </div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</body> 
</html>

這裏是什麼樣子：

enter image description here

來源

2013-06-23 ewizard

回答

0

試試這個：

<body> 
    <div class="wrapper">  
     <div id="left"> 
      <div id="login"></div> 
      <div id="register"></div> 
     </div> 
     <div id="main"><p>Content</p></div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</body> 


#left{ 
width: 250px; 
float: left; 
} 

#main{ 
    width: 700px; 
    margin-left: 50px; 
    float: left; 
}

要始終獲得頁腳底部：

.push{ 
clear: both; 
}

來源

2013-06-23 13:31:44 Jab

+0

感謝您的迴應...它現在被定位在頁腳中...我將採取屏幕s熱和張貼以上給你看。 – ewizard

+0

我想你忘了關閉一個div，因爲它應該工作 – Jab

+0

我做了一些使它工作的其他東西 - 但現在主要的div覆蓋了頁腳...生病發布另一張圖片和我改變了。 – ewizard

0

試試這個步驟： 移動登錄和註冊到這樣一個div：

 <div class="leftBar"> 
      <div id="login"></div> 
      <div id="register"></div> 
     </div>

並將左浮動添加到cla ss leftBar和main。爲此左邊欄添加一點餘量。一個完整的代碼是在這裏：

<title>ONE DAY ONLY</title> 
<body> 
    <div class="wrapper"> 
     <header> 
      <h1>ONE DAY ONLY</h1> 
      <p>THE BIZZ()</p> 
     </header> 
    <div class="row"> 
     <div class="leftBar"> 
      <div id="login"></div> 
      <div id="register"></div> 
     </div> 
     <div id="main"><p>Content</p></div> 
     <div class="push"></div> 
     </div> 
    </div> 
    <div class="footer"></div>

，這裏的CSS：

* { 
    margin: 0; 
} 

html, body { 
    background: rgba(179,180,255,1); 
    height: 100%; 
} 

.wrapper { 
    min-height: 600px; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 

.footer, .push { 
    height: 4em; 
} 

.footer { 
    background: rgba(22,138,43,1); 
    width:100%; 
} 
.leftBar{ 
    float:left ; 
    width:28%; 
    margin-right:10px; 
} 
#login { 
    width: 240px; 
    height: 165px; 
    background: rgba(207,207,255, 1); 
    margin-left: 10px; 
    margin-bottom: 10px; 
    padding: 10px; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-family: 'Londrina Solid', cursive; 
} 
#register { 
    width: 240px; 
    height: 200px; 
    background: rgba(207,207,255, 1); 
    margin-left: 10px; 
    margin-bottom: 10px; 
    padding: 10px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    font-family: 'Londrina Solid', cursive; 
} 

#loginuser, #loginpass, #reguser, #regpass, #regemail { 
    float: right; 
} 

#submitbutton, #registerbutton { 
    text-align: center; 
} 

.textaligncenter { 
    text-align: center; 
} 

header { 
    font-family: 'Londrina Solid', cursive; 
    background: rgba(179,180,255,1); 
    height: 90px; 
} 
.row{ 
    width:100%; 
} 
#main { 
    background: rgba(207,207,255, 1); 
    float:left; 
    width:60%; 
    min-height:300px; 
}

看到這個LINK

來源

2013-06-23 13:56:00 osyan

+0

擴展結果視圖以查看它。我想我應該多做一點改變，所以我會在做完之後做出評論。 – osyan

+0

這不是我想要做的......我不希望頁腳始終可見......我只是希望它始終處於底部即不「位置：固定」 – ewizard

+0

再次更新。現在檢查 – osyan

相關問題

 相關問題