您在這裡

首頁 » Forums » 疑難雜症 » 版型/Themes

css來排版面遇到品頸

以css來排版面遇到品頸~想製作一個框以圖片來製作上邊框、中邊框、下邊框…
但是上和下有跑出邊框出來，但中間的邊框一直出不來…想詢問>w<各位~~
謝謝~~>w<

我的css樣式

/* 左區塊 */

#leftCol{
width:193px;
padding: 0px 0px 0px 0px;
background: url(images/little_frame_up.jpg) no-repeat; (上)
font-size: 2em;
margin-left: 4px;
}

.leftColmid {
width: 193px;
padding: 0px 0px 0px 0px;
background: urlimages/little_frame_mid.jpg) repeat-y; (中)
}

.leftColBottom{
width:193px;
height: 4px;
background: url(images/little_frame_down.jpg) no-repeat left bottom; (下)
}

我的page.tpl.php

<?php print $left ?>

附加檔案大小
Image icon little_frame_down.jpg11.41 KB
Image icon little_frame_mid.jpg10.91 KB
Image icon little_frame_up.jpg11.28 KB

hanamizuki:
不好意思打錯!是下面這個
.leftColBottom
(但 >w<這樣的css寫法有寫錯嘛?因為都試不出來)

人人把心中的愛發揮出來，就能凝聚善的福業，形成善的循環。 (靜思語錄)

>w<有指定中間高度但還是填不滿!!

我的css

#leftCol{
width:193px;
padding: 10px 0px 0px 0px;
background: url(images/little_frame_up.jpg) no-repeat; (上)
background-position:top center;
font-size: 2em;
margin-left: 20px;

}

.leftColmid {
width: 193px;
hight: 200px;
background: url(images/little_frame_mid.jpg) repeat (中間)
}

.leftColBottom{
width:193px;
height: 4px;
background: url(images/little_frame_down.jpg) no-repeat bottom; (下)
}

.leftColContent{
padding: 10px 4px 10px 7px;
}

我的page.tpl.php

<?php print $left ?>

人人把心中的愛發揮出來，就能凝聚善的福業，形成善的循環。 (靜思語錄)


#leftCol{
width:193px;
padding: 10px 0px 0px 0px;
background: url(images/little_frame_up.jpg) no-repeat;
background-position:top center;
font-size: 2em;
margin-left: 20px;

}

#leftColmid {
width: 193px;
height: 200px;
background: url(images/little_frame_mid.jpg) repeat-y;
}

.leftColBottom{
width:193px;
height: 4px;
background: url(images/little_frame_down.jpg) no-repeat bottom;
}

.leftColContent{
padding: 10px 4px 10px 7px;
}



<?php print $left ?>


我改了一下你的 css, (本想用粗體標出我改的地方, 不過[code]內不能正常顯示.)
另外在page.tpl.php 那邊, 你的leftcolbottom 事實上overlap 到 leftcol外, 所以我改了一下
以上 code 我有測試過, 會顯示正常. (請看圖片)

Jessie.Wang謝謝 妳 >w<
但是還有一估問題~~我的上邊和中間出現了空隙!
有試過將

#leftCol{
width:193px;
padding: 10px 0px 0px 0px; (移掉這個，想說是不是這估的影響，結果上邊就不見了)
background: url(images/little_frame_up.jpg) no-repeat;
background-position:top center;
font-size: 2em;
margin-left: 20px;

}

人人把心中的愛發揮出來，就能凝聚善的福業，形成善的循環。 (靜思語錄)

我的寫法

<?php print $left ?>


#leftCol {
width:193px;
}

#leftCol .borderTop{
width:193px;
height: 5px;
background: url(images/little_frame_up.jpg) no-repeat bottom;
line-height: 0;
}

#leftCol .borderMiddle{
width:193px;
background: url(images/little_frame_mid.jpg) repeat-y;
padding: 10px 0;
}

#leftCol .borderBottom{
width:193px;
height: 4px;
background: url(images/little_frame_down.jpg) no-repeat;
}

#leftCol .content{
margin: 0 5px;
}

這種結構可以單獨針對上框線設定 line-height 為 0
方便解決 firefox 以及相似引擎的瀏覽器
上框線下面會出現空白的問題

不好意思, 請問line-height的問題在什麼版本的FIREFOX會出現 ??

Jessie.Wang 那個結構的空位是這裏造成的
#leftCol{
width:193px;
padding: 10px 0px 0px 0px;
由於圖片只有5px的高度, 她設了padding top = 10px, 所以多了5px.

而如果設定了height = 5px, background position 好像亦沒必要設定為bottom
還有width:193px; 亦沒必要每個位置都加

我的版本 (如果圖片是透明底的不適用) , 去掉空巢及簡潔一點 :

#leftCol {
width:193px;
background: url(images/little_frame_mid.jpg) repeat-y;
}

#leftCol .borderMiddle{
background: url(images/little_frame_down.jpg) no-repeat bottom;
}

#leftCol .content-wrap{
background: url(images/little_frame_up.jpg) no-repeat top;
padding:10px;
}

<?php print $left ?>