如何在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的話就會緊緊靠著。

以上謹此記錄。

相關文章

Leave a comment

(必填)
(必填)

最新文章

Link

[B]南茜互助會
[黨]阿良的音樂網誌
[強]大黃金的瘋狂世界
[科]堯@部落格
[師]電影評論神人
[茶]leetea
[學]AhLaBasCa
[程]JC talk
[科]堯@部落格
[科]Maxray
[科]巧林和昌哲的結婚記事
[科]登七星而小台北
[長]阿祥的筆記本
[學]C*COOL拌料格
[學]有沒有都無所謂
[MT]JUST平生一笑
[人妻]P.S.上班可以寫
[雜學]資源回收筒電子志

histats

Recent Entries

  • 20121017脫離現實Macau之旅part2 澳門文華東方酒店 Mandarin Oriental Macau

    話說從巴士離開機場,我們立馬就到位於澳門新口岸新填海區B區B2街區B地段的文華東方酒店Mandarin Oriental Macau(人稱新文華東方,舊有的澳門文華東方酒店位於澳門市中心的友誼大馬路,鄰近外港碼頭,曾是澳門第一間外資酒店,現已更名為金麗華酒店。)這次特別找沒有賭場的飯店,不過價錢直逼威尼斯人的新文華東方,建議大家一起要買機+酒,才有早餐+湖景房的優惠,後來求證當地澳門人,也是牛仔包學弟Macau,是真的滿划算的~不過面臨旅遊塔的view就是不一樣~ 不囉嗦,馬上看!...

  • 20121017脫離現實Macau之旅part1 Macau airways初體驗

    前言 因為之前沒有跟到公司員旅的澳門之行怨念,所以10/17~10/19和牛仔包去澳門一趟,利用澳門航空的機+酒三天二夜專案去的,本來找雄獅和東南查,但是說團滿了,所以另外請登七小北提供的鄭菊英(聚仁旅行社)江湖救急代訂,真的訂到了~TAT接下來就是打掃一下充滿蜘蛛絲的網站啦!!! 不囉嗦,馬上看~...

  • 2012 Olympics 在 Youtube上作什麼?

    2012你可以開始嗅到電視台在影音上的作法慢慢在改變,除了Olympics官網外,NBC、ESPN,以及加拿大的CTV在yt上都有官網,而且呈現的方式有很大的不同,我先簡單作個分別標準 1.影音地區限定Locations(我認為是最重要的) 2.是否有客製頁面 3.是否有HD影音(台灣目前都沒有看到) 台灣區要看請參考硬是要學的2012倫敦奧運線上轉播/直播方式報你知 [更新] 話說回來,其實種花不用很委屈啦,拿到轉播權還有拿廣告,不然公視真的比較有立場作奧運電視及網路轉播...

  • Youtube補件通知:影片獲利申請的審查作業需要您提供額外資料

    為了實驗Youtube即將全面開放的partner program,我利用我拍食玩的影音來進行申請,結果4天後收到Youtube的來信,全信轉載如下: 感謝您向我們提出影片獲利申請。 目前,我們針對您的商業使用權所掌握到的資訊不足,因此無法核准您的影片獲利申請。您必須證明自己有權將內容的所有元素 (包括影片、圖片、音樂、電玩遊戲畫面及任何其他影音元素) 用於商業用途,我們才可能對影片展開審查。進一步瞭解 YouTube 開放使用者針對哪些類型的內容提出獲利申請。如果您的影片中含有第三方內容,而想瞭解如何聲明商業使用權,請參閱這篇文章中的建議。 如果您能提供相關文件,證明您具備影片的商業使用權,請在下方提交這些資訊: "xxxxxxxxxxx" (http://www.youtube.com/watch?v=ssssssss) 提交這部影片的相關資訊 請注意,我們只會在適合廣告客戶使用的內容中刊登廣告。YouTube 保留是否核准影片獲利申請最終決定權,而如果使用者重複提交不符資格的影片,YouTube 可能會撤銷這類使用者的獲利資格。所有影片都必須遵守《YouTube 服務條款》和《YouTube 社群指南》。如果影片違反這些標準,可能會從網站中移除。 感謝您! YouTube 小組敬上 提交資訊後的頁面會轉到YouTube Partner Support - Revenue...

  • 台灣Youtube正式開放影音partner申請教學_靠自己的影片獲利!

    上週和YT的窗口聊天,他說大概8/9月就會開放台灣區的一般使用者可以申請youtube partner program,也就是神祕的YPP計劃,沒想到今天就收到youtube的邀請,看來是提早開放了~不過一般者Partner和之前的Partner還是有很大的不同(一般者不能自訂截圖,沒有頻道首頁banner,沒有直播服務等功能) 這次先就一般者的頻道來教學(力拚全台第一)...

Close