如何在blog上方切二張圖並排

這幾天開始為了ldope開始進行網站區塊的改造,首先是網站上方要將Blog title區塊修改成有logo與banner並排的layout。
對於非科班出身的我來說,花了三天晚上的時間,望著css和html發呆後,在同事sharron和老臉的幫忙之下,總算完成。
先給大家看完成品:http://nagoo.info/4mt/
趕快在完成的愉悅還沒有結束的時候記錄一下心得:
1.先找到css,進行二張圖片的css設定。
設定內容:

background:transparent url(你要放的圖位置.jpg) no-repeat scroll 0 0;
float:left; /這個是指靠右對齊/
height:95px;
margin:0 0 25px 0;
overflow:hidden;
width:200px;

2.找到對應的div容器:
例子中是放在header-content這個div下面。注意這裡要算好兩張圖的寬度,會不會超過div容器設定的寬度。像我原本的寬度太窄,結果banner太寬就被擠到下面,和老臉討論後才發現header-content的寬度也要加寬。
3.float屬性的使用:
div的特性是如果你不設定屬性,預設下的子div都是斷行。(驚)所以這個時候就要使用float這個CSS 浮動屬性,才能讓兩個div是並排的狀態。在上面的例子我是一個left一個right,如果是兩個left的話就會緊緊靠著。
以上謹此記錄。

發表迴響