Re: [問題] 請問在 header做橫向導覽列

作者: leochen0818 (Leo)   2014-03-28 21:22:39
※ 引述《SophiaH (Sophia)》之銘言:
: 學習網設的新手想請教在 header ID 用 table 做一列數欄
: 的表格放導覽按鈕後, 在下方 content ID 裡有報價表的表格也會被上方
: 的 table CSS 影響到, 在滑動瀏覽報價表時出現 hover 滑鼠變換影像
: 看起來似乎上方 header 不應該用 table 做導覽..
: 最近看過一本 CSS 的書也提到用 ol 建橫排導覽, 所以前天有試過
: 可是沒定位在我想放的位置 (我想放左上 logo 圖檔的右邊),
: 我有試在 style CSS 加上 float : right 之後就只
: 是定在 logo 下方的右邊 (不往上移)..想請問用這方法該怎麼調動定位 ?
: 又或者 header 那裡應該用其他方法做導覽嗎 ?
: 謝謝先進指導先..
小的不才,菜得很,但多少知道要如何解決你的問題,
就厚著臉皮寫一下我的做法,
正如我推文所說,如果能PO上你的原始碼給大家看看,
相信一定會有更精確的做法提供給你參考,
至於目前就先照著你字面上的意思來看要怎麼解決好了。
首先,在header裡面的導覽列,個人傾向於使用「清單」的方式來製作,
簡單、清楚、又快速。
所謂「清單」就是使用<ul><li><li></ul>的方式來製作,例如:
<header>
<ul>
<a herf="!@#$@#^"><li>home</li></a>
<a herf="13513"><li>mail</li></a>
<a herf="125135"><li>about</li></a>
</ul>
</header>
如此一來,只要在CSS樣式裡面調整一下就很好用了,例如:
header{text-align:right;float:right;}
header a{color:#FFF;brabrabra...}
(有很多字懶的打,相信你懂我意思@@)
(另外此為個人喜好&HTML5的寫法,勿戰,如果是XHTML1.0請江header改成DIV即可)
至於另外一種做法是,使用「定位」調整,不過大同小異。
此種做法是,你可能在header裡不是使用背景圖片來製版,
又或者已經放了一些東西不好改,
就可以考慮在header後面再加一個導覽列的DIV,
一樣用清單排好,CSS調好之後,
再利用position裡面的relative調整位置,
如此一來比較能夠調整到你要的位置,
大致上就是這樣,
以上。:)
作者: jizz56 (保守你的心)   2014-03-28 23:54:00
good!
作者: SophiaH (Sophia)   2014-03-29 18:45:00
謝謝 leo 大大指導, 我的原始碼沒有做到"用position裡面的relative調整" 等再試過後如還不行再貼原始碼上來. 謝謝
作者: leochen0818 (Leo)   2014-03-29 21:50:00
大大不敢當,一起加油!!:)

Links booklink

Contact Us: admin [ a t ] ucptt.com