頂部的橫幅圖像需要是屏幕寬度的一半，並打破我的頁面頂部

我在這個網站上工作：http://www.problemio.com，我應該做一個背景圖像爲屏幕的一半寬度頁面頂部有登錄，註冊等鏈接，並使這些鏈接顯示在橫幅邊界的右側底部。頂部的橫幅圖像需要是屏幕寬度的一半，並打破我的頁面頂部

我試圖給它這個CSS：

.banner 
{ 
    position: relative; 
    height: 80px; 

    /* These paddings increase the height padding a little bit */ 
/* padding-top: 10px; 
    padding-bottom: 5px; */ 
    z-index: 1; 

    border-style:solid; 
    border-width:1px; 
    border-color: gray; 
} 

.site_title 
{ 
    float:left; 

    margin-top: 10px; 
    margin-left: 20px; 

    font-weight: bold; 
    color: #ffce2e; 
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8); 
    font-size:2.5em; 
    text-align: left 
    text-color: black; 
    width: 300px; 
} 

.site_login 
{ 
    width: 700px; 
    float:right; 
    height: 80px; 
    position: absolute; 
    right: 0.5em; 
    top: 0.5em; 
    bottom: 0.5em; 

    color: black; 

    text-align: right; 
    text-align: bottom; 

    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png'); 
    background-repeat: no-repeat; 
    background-position: right; 

     margin-top: 10px; 
    margin-left: 20px; 
}

但出於某種原因，我不能讓登錄，創建引人注目的文本得到一致的底部而非頂部。由於某種原因，該圖像並不完全適合橫幅div的邊界。

我怎麼能做到這兩件事？

謝謝！

來源

2011-10-04 GeekedOut

你可以做一個新的div橫幅DIV喜歡裏面：

.bgdiv{ 
    position:absolute; 
    right:0px; 
    left:240px; 
    top:0px; 
    bottom:0px; 
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png'); 
    background-repeat: no-repeat; 

}

...以及網站登錄：

.site_login 
{ 
    width: 700px; 
    float:right; 
    position: absolute; 
    right: 10px; 
    bottom: 10px; 

    color: black; 

    text-align: right; 
    text-align: bottom; 

}

主要生產：

enter image description here

來源

2011-10-04 19:37:58 mowwwalker

我以前就是這樣，但我的要求是在徽標開始之前讓圖像背景結束。你會知道如何去做到這一點嗎？ – GeekedOut

徽標開始前的含義是什麼？你的意思是在logo結束後？ – mowwwalker

我的意思是背景圖像必須在徽標的右側之前結束某處:)它們不應該根據我的線框重疊在這裏：http://www.problemio.com/wireframe.pdf – GeekedOut

頂部的橫幅圖像需要是屏幕寬度的一半，並打破我的頁面頂部

回答

相關問題