Art Pai » CSS http://blog.minipai.idv.tw Web Design = HTML + CSS + IE bug Sun, 18 Jul 2010 14:34:57 +0000 en hourly 1 IE6不支援.class.class http://blog.minipai.idv.tw/iesucks/ie6-dont-support-multi-class/ http://blog.minipai.idv.tw/iesucks/ie6-dont-support-multi-class/#comments Thu, 23 Jul 2009 06:18:21 +0000 minipai http://blog.minipai.idv.tw/?p=380 如題。

簡單說就是，你可以用.class_a.class_b（重點：中間不能有空白）這個寫法來讓樣式只套用在同時有class_a、class_b兩個類別的html元件上，例如<div class=”class_a class_b”>。

但是IE6看不懂.class.class這個寫法，所以IE6會把.class_a.class_b 的樣式套用到<div class=”class_b”>這個html元件上。

這個IE6的問題讓我苦惱了一陣子，因為之前沒有用過.class_a.class_b這樣比較進階的寫法，不知道IE6有這個「bug」，結果找出問題的地方找了好幾天。知道原因後，只好去改php，讓html裡面再製造一個「class_a-class_b」這樣的class。

其實這個IE6不支援的css選擇器還算是影響比較小的一個，不過實在是有整到我，所以在這邊記錄一下。

]]> http://blog.minipai.idv.tw/iesucks/ie6-dont-support-multi-class/feed/ 0 CSS設計推薦：SlickMap CSS http://blog.minipai.idv.tw/css/slickmap-css/ http://blog.minipai.idv.tw/css/slickmap-css/#comments Tue, 14 Jul 2009 15:02:35 +0000 minipai http://blog.minipai.idv.tw/?p=343 CSS是一種語法簡單，但是發揮空間卻很大的工具，有創意的設計師能在利用CSS簡單的語法創造出令人讚嘆的效果。現在CSS設計師的挑戰在於要把符合語意的HTML標籤用CSS加上視覺設計。不過這往往只有同為CSS設計師，了解html/css設計上的限制才能了解其中的奧妙之處。

SlickMap CSS

下面經過CSS美化後的畫面，非常的優美。

slickmap

畫面底下的HTML也是非常漂亮的多層次清單，完全沒有為了排版添加多餘的標籤：

<div>

<ul id="utilityNav">
<li><a href="/register">Register</a></li>
<li><a href="/login">Log In</a></li>
<li><a href="/smap">Site Map</a></li>
</ul>
<ul id="primaryNav">
<li id="home"><a href="http://astuteo.com">Home</a></li>
<li><a href="/about">About Us</a>
	<ul>
	<li><a href="/history">Our History</a></li>
	<li><a href="/mission">Mission Statement</a></li>
	<li><a href="/principals">Principals</a></li>
	</ul>
</li>
<li><a href="/services">Services</a>
	<ul>
	<li><a href="/services/design">Graphic Design</a></li>
	<li><a href="/services/development">Web Development</a></li>
	<li><a href="/services/marketing">Internet Marketing</a>
		<ul>
		<li><a href="/social-media">Social Media</a></li>
		<li><a href="/optimization">Search Optimization</a></li>
		<li><a href="/adwords">Google AdWords</a></li>
		</ul>
	</li>
	<li><a href="/services/copywriting">Copywriting</a></li>
	<li><a href="/services/photography">Photography</a></li>
	</ul>
</li>
<li><a href="/projects">Projects</a>
	<ul>
	<li><a href="/projects/finance">Finance</a></li>
	<li><a href="/projects/medical">Medical</a></li>
	<li><a href="/projects/education">Education</a></li>
	<li><a href="/projects/professional">Professional</a></li>
	<li><a href="/projects/industrial">Industrial</a></li>
	<li><a href="/projects/commercial">Commercial</a></li>
	<li><a href="/projects/energy">Energy</a></li>
	</ul>
</li>
<li><a href="/contact">Contact</a>
	<ul>
	<li><a href="/contact/offices">Offices</a>
		<ul>
		<li><a href="contact/map">Map</a></li>
		<li><a href="contact/form">Contact Form</a></li>
		</ul>
	</li>
</ul>
</li>
</ul>

</div>

原本的多層次HTML清單經過CSS的美化之後，完全看不出來是「清單」，而變成「樹狀圖」了，真是傑出的巧思。

有興趣的話可以到SlickMap CSS官方網站或是直接看DEMO。

]]> http://blog.minipai.idv.tw/css/slickmap-css/feed/ 2 Styling a Poem http://blog.minipai.idv.tw/css/styling-a-poem/ http://blog.minipai.idv.tw/css/styling-a-poem/#comments Mon, 22 Jun 2009 16:30:22 +0000 minipai http://blog.minipai.idv.tw/?p=306 Styling a Poem with Advanced CSS Selectors 教你如何用CSS3來設計一首詩的排版。有時侯會覺得CSS3那麼多種虛擬選擇器，用處似乎很少，但是:before、:after、:first-letter、:first-line、:last-child在這首詩的CSS裡卻全用上了。

就像一首詩文字雖然不多，卻總是蘊含了無限的意境一樣，這篇CSS教學在設計一首詩的呈現時濃縮了CSS3的精華。難以想像只有<h1>、<h2>、<p>、<br />的一段文字可以設計得這麼漂亮吧。

Styling a Poem

教學網址：Styling a Poem with Advanced CSS Selectors。

]]> http://blog.minipai.idv.tw/css/styling-a-poem/feed/ 0 LESS – Leaner CSS http://blog.minipai.idv.tw/css/less-leaner-css/ http://blog.minipai.idv.tw/css/less-leaner-css/#comments Mon, 22 Jun 2009 01:00:46 +0000 minipai http://blog.minipai.idv.tw/?p=299 在我寫CSS的時候，總是覺得很多時候要不斷的重寫一樣的code實在很煩。比如說在設計一個ID為main的區塊的樣式時，必須寫成這樣：

#main p {

}
#main ul {

}
#main a {

}

這個#main不就要重複好幾次嗎？

另外，雖然CSS可以用#ID1, #ID2 { } 來對兩個以上的id/class/tag設計css，但是常常樣式要重疊部分並不是全部，有時也會變動，所以相當難設計，到頭來變成還是個別寫比較方便。

所以我有時常常想，要是css也有簡單的函數能力多好啊。這個想法肯定也很多人有同感，因此出現了LESS – Leaner CSS.。這個RoR的gem實現了我的夢想，例如上面的例子，用了LESS以後，可以寫成：

#main {
p {

};
ul {

};
a {

};
}

我一看到官網上的sample就忍不住大喊：「這就是我要的css啊！」可惜我平常工作是在PHP的環境，真希望能有哪個css編輯器能引進這個概念，這樣寫css就輕鬆多了。

]]> http://blog.minipai.idv.tw/css/less-leaner-css/feed/ 0