Re: [問題] css裡的text-indent

看板Web_Design作者 (<(￣ c￣)y▂ξ)時間17年前 (2009/01/05 22:01), 編輯推噓16(16推 0噓 16→)
留言32則, 7人參與, 最新討論串2/2 (看更多)
※ 引述《bizza (呼)》之銘言： : 這一段h1裡只有圖 沒有文字 : 可是為什麼要設text-indent ? : 而且數值要設成 -9999px ?? : @@ 謝謝! 就語意來說, h1 是標題, 標籤裡面"必須"有文字才行。 例如：<h1>我是丁丁大站</h1> 但是從視覺設計的觀點來看, 可能想用一張很有感覺的底圖, 順便放上超明體的大標題 "我是丁丁大站"，然後順便傾斜個15度這樣~ 於是理所當然地, 我們會用在 h1 上套用 background-image:... 可是那該死的字擋到了我們的底圖怎辦? 比較古典的方法有二： (笑) 1) 像飛蛾躲在樹幹上一樣...把 h1 的文字縮到最小, 顏色跟背景一樣~ 所以用這個 → font-size:1px; color: 2) 把文字踢得老遠, 最好是千里之外.... 就是你看到的 → text-indent: -9999px 收工~ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.31.140.245
推
01/05 22:03, , 1F
這兩個都不是較好的方法, 可以用把圖蓋在字上面的方式
01/05 22:03, 1F
※ 編輯: takumi412 來自: 61.31.140.245 (01/05 22:08)
推
01/05 22:27, , 2F
那請問如果不設h1 可以嗎@@
01/05 22:27, 2F
→
01/05 23:36, , 3F
h1 不只人要看, 搜尋引擎也會看, 妥善使用是好事.
01/05 23:36, 3F
推
01/05 23:53, , 4F
最正確的方法是直接用img啦，字放alt裡面。
01/05 23:53, 4F
推
01/06 00:18, , 5F
樓上觀念不正確 照理說h1要最先出來 img一定比較慢
01/06 00:18, 5F
→
01/06 00:19, , 6F
text-indent我個人是覺得最節省時間的方法 沒有CSS或圖片
01/06 00:19, 6F
→
01/06 00:19, , 7F
的情況下依然可以正常辨識h1
01/06 00:19, 7F
推
01/06 00:47, , 8F
用FIR是對「語意xhtml」有偏好的作法
01/06 00:47, 8F
→
01/06 00:48, , 9F
但是fir會在css啟動可是圖讀不進來的情況下變成
01/06 00:48, 9F
→
01/06 00:48, , 10F
最差的閱讀性 所以我不太認同fir
01/06 00:48, 10F
推
01/06 00:56, , 11F
所以我覺得傳統的img+alt比較好
01/06 00:56, 11F
推
01/06 02:50, , 12F
我說的是<h1><img src="圖" alt="字"/></h1>這樣免hack
01/06 02:50, 12F
→
01/06 02:51, , 13F
關CSS/img/js通通都看的到，你還可以設定<h1>裡面字的樣式
01/06 02:51, 13F
推
01/06 09:36, , 14F
不過我剛剛想到用img比background不佳的地方在於
01/06 09:36, 14F
→
01/06 09:37, , 15F
用css換不同h1的background對做不同平台外觀比較方便
01/06 09:37, 15F
→
01/06 12:29, , 16F
偏好語意對於跨client(如spider跟screenreader)相容的幫助
01/06 12:29, 16F
→
01/06 12:31, , 17F
不小。我會用span或P把h1內容物包起來，然後指定h1 *為
01/06 12:31, 17F
→
01/06 12:31, , 18F
display:none;
01/06 12:31, 18F
推
01/06 13:02, , 19F
我推薦GALINE的作法!
01/06 13:02, 19F
推
01/06 13:12, , 20F
基本上使用display:none是不好的...
01/06 13:12, 20F
→
01/06 13:13, , 21F
fotofolio說的那個使用img仍然可以照換呀
01/06 13:13, 21F
推
01/06 13:17, , 22F
display:none文字閱讀器不會念 所以才會用text-indent
01/06 13:17, 22F
→
01/06 13:19, , 23F
請問evenwu img要怎麼換呀？ 比如說我h1用了800x20大小
01/06 13:19, 23F
→
01/06 13:19, , 24F
的圖 這時要移植到寬320的裝置上 img不就要從html換？
01/06 13:19, 24F
推
01/06 13:22, , 25F
就是 h1 img display none 然後設 h1 bg....
01/06 13:22, 25F
→
01/06 13:23, , 26F
media設在print或是其他不會考慮閱讀器的地方就可以這麼做
01/06 13:23, 26F
→
01/06 13:24, , 27F
如此只有主要設備採最嚴謹最安全的方式去設定
01/06 13:24, 27F
推
01/06 13:25, , 28F
wow..好招 可是這時候不就變成你說的不正確了
01/06 13:25, 28F
推
01/06 13:27, , 29F
了解 剛剛推文只有看到第一行
01/06 13:27, 29F
推
01/06 13:34, , 30F
沒有不正確的方式，因為也沒有人定義正確是什麼XD
01/06 13:34, 30F
→
01/06 13:34, , 31F
只有最好怎樣與怎樣不太好而已～～～
01/06 13:34, 31F
推
01/06 13:36, , 32F
嗯 還是希望css能更改進好用 不需要這些小技巧
01/06 13:36, 32F
‣ 更多 takumi412 的文章
文章代碼(AID): #19OXAUmd (Web_Design)
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：
排序： 最新先 | 最舊先 | 留言數
在新視窗開啟完整討論串 (共2篇)
‣ 更多 takumi412 的文章
文章代碼(AID): #19OXAUmd (Web_Design)