PDA

View Full Version : Ông spirit và IT_Hai lua khi nào vô forum thì trả lời giùm cái! by trhthong ^^


trhthong
08-03-2008, 20:18
Hôm nay, đang viết thử một trang với CSS thì gặp vấn đề sau:

Trước hết, tui làm code html như sau:
<div id="banner">
<div id="menu">
<a href="index.html">Home</a>
<a href="index.html">Music</a>
</div>
</div>

Còn phần CSS thì như sau:
#banner, #body, #copyright {
position: relative;
width: 778px;
margin: 0 auto;
border-left: 1px #000000; border-right: 1px #000000;
}
#banner {
height: 212px;
background: url(imgs/banner.jpg);
}
#banner #menu {
position: absolute;
bottom: 0; right: 5px;
width: 564px; height: 32px;
background: url(imgs/bgr_topbar1.gif) repeat-x;
}
#menu a {
display: block;
width: 89px; height: 28px;
text-decoration: none; text-transform: capitalize; text-align: center;
line-height: 28px;
letter-spacing: 1px;
}
#menu a:active, #menu a:visited {
background: url(imgs/2.png);
color: #33FF99;
}
#menu a:hover {
color: #33CCFF;
background: url(imgs/menu_hover.png);
}

Tui không hiểu là ở chỗ, tại sao trong thẻ <a>, tui đặt display là Block (Như vậy thì mỗi liên kết sẽ hiển thị trong một khối, nhằm đảm bảo cho cái hình nền hiển thị được), nhưng khi tui cho thêm vài thẻ <a> trong html, thì nó lại nằm trên nhiều dòng chứ không phải trên một dòng như mong muốn?

Mấy ông rành thì chỉ dùm nghen!
Spirit
08-03-2008, 21:42
display: block ko có nghĩa là 1 dòng :| chỉ là 1 khối, muốn trên 1 dòng thì display: inline.
trhthong
08-03-2008, 23:15
Ông spirit có bày cho tui làm banner với cái <ul>. Tui làm thử, và tình cờ phát hiện ra là không dùng <ul> vẫn OK. Tui thêm vào chỗ cái #menu a một dòng float: left; thì được. Ai hỉu cái vai trò của dòng đó không? Chỉ với!
Spirit
09-03-2008, 00:31
Specifies whether a fixed-width box should float, shifting it to the right or left with surrounding content flowing around it.

Tự động tiếng Anh vậy :
- Nhưng chả ai làm menu trong layout div mỗi bằng cái <a> mà ko có ul và li :), thôi thích sao thì cứ làm vậy ^_^ chúc may mắn.
2_lua_IT
10-03-2008, 09:42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Untitled Document</title>
<style type="text/css">
<!--
ul#menu {
margin:0px;
padding:0px;
}
li.menu {
width:100px;
height:25px;
float:left;
padding:0px;
margin:0px;
list-style:none;
border-left:1px solid #FFFFFF;
}
li.menu a:active, li.menu a:link, li.menu a:visited{
width:100px;
height:25px;
font-size:12px;
line-height:25px;
display:block; /* dam bao cho tag a co */
text-indent:20px;
background-color:#000000;
color:#FFFFFF;
text-decoration:none;
}
li.menu a:hover{
width:100px;
height:25px;
font-size:12px;
line-height:25px;
display:block; /* dam bao cho tag a co fix width voi tag li */
text-indent:20px; /* dich vao en trai 20px; */
background-color:#666666;
color:#FFFFFF;
text-decoration:none;
}
-->
</style>
</head>

<body>
<ul id="menu">
<li class="menu"><a href="#">HOME</a></li>
<li class="menu"><a href="#">COMPANY</a></li>
</ul>
</body>
</html>

Tui chi lam den the thoi, ong thu nghien cuu them nha. Con ko chiu nua thi add Yahoo Messenger vay. ^_^ Goodlucks bro.
trhthong
21-03-2008, 01:12
Cảm ơn hai ông nhiều... Bi giờ thì tui làm được cái menu rồi... Khi dùng tag <ul> và <li>, tui thấy có ưu thế hơn đó! Kiểm tra thử vài trang, thấy trang nào cũng làm menu với <ul> <li>, thôi thì mình theo người luôn. Có lẽ người ta ít dùng kiểu float: left là do hiển thị khác nhau trên nhiều trình duyệt chăng?
2_lua_IT
21-03-2008, 10:46
Làm j có chuyện ít dùng float:left; . Bác quay lại đọc bài này thì sẽ hiểu rõ hơn về float:left, right : http://www.ddth.com/showthread.php?t=172621 . Thanks Bro.
Về Đâu
21-03-2008, 11:52
Làm menu bằng thẻ a không thì hoàn toàn có thể. Mỗi cái semantic của HTML sẽ không có. Maintenance cho một menu như vậy cũng khó.
2_lua_IT
22-03-2008, 17:46
"Về Đâu", pác làm menu bằng tag a không hả ? Hay wa, pót code cho pà kon xem với. Chiêu này lạ quá. hihi
Về Đâu
23-03-2008, 13:52
Tất nhiên menu bình thường ko trang trí gì thì khỏe chứ có gì đâu 2 lúa.

<html>
<head>
<style>
body{
background:#222;
}
a{
background:#000;
color:#FFF;
padding: 5px 10px 5px 10px;
margin: 5px;
text-decoration: none;
border-right: 2px solid #FF0000;
}
a:hover{
background:#333;
color:#FFFFCC;
padding: 5px 10px 5px 10px;
text-decoration: none;
border-right: 2px solid #FFFF00;
}
</style>
<head>
<body>
<a href="#"> some text </a>
<a href="#"> some text </a>
<a href="#"> some text </a>
<a href="#"> some text </a>
<a href="#"> some text </a>
<a href="#"> some text </a>
<a href="#"> some text </a>
<body>
</html>
2_lua_IT
23-03-2008, 18:17
Hay lắm pác @Về đâu, những text link sau này cần phải định nghĩa lại. Cũng nói luôn là tag a không hiểu margin-top và margin-bottom.
Về Đâu
24-03-2008, 09:03
hê hê ông thấy tui có xài margin top và bottom đâu. Ở trên cũng nói rồi Maintenance 1 cái menu như vậy thì thật là oải. Được có cái làm cho vui thôi chả được gì hay :(.
duc.ngtuan
24-03-2008, 18:35
Cảm ơn hai ông nhiều... Bi giờ thì tui làm được cái menu rồi... Khi dùng tag <ul> và <li>, tui thấy có ưu thế hơn đó! Kiểm tra thử vài trang, thấy trang nào cũng làm menu với <ul> <li>, thôi thì mình theo người luôn. Có lẽ người ta ít dùng kiểu float: left là do hiển thị khác nhau trên nhiều trình duyệt chăng?

Làm với <ul> va <li> có ưu điểm là khi tắt CSS cấu trúc của trang web vẫn sẽ rõ ràng. Mặc dù không ai cấm dùng mỗi thẻ <a> cho navigation menu nhưng khi không có CSS những link này nói chung sẽ không được rõ ràng về mặt cấu trúc lắm.
Đấy là ý kiến của mình :-)

Hồi trước cũng hay xài float:left; khi làm navbar nhưng dạo này chuyển qua xài display:inline; rồi. Thấy "an toàn" hơn :-D
Về Đâu
25-03-2008, 08:38
Nếu bỏ css đi thì quả là hết hiểu nổi miễn bình luận câu này luôn khi web standard không có css y như chạy xe máy không có xăng. Mình muốn nói đến Semantic chứ không phải skill.
duc.ngtuan
25-03-2008, 09:53
Tất nhiên CSS là một trong số các web standard nhưng thế không có nghĩa khi thiết kế Website không có css không "standard". Một trong những mục tiêu của web standard là để tăng Accessibility của trang web, điều đó nghĩa là trang web phải được thiết kế sao cho khi tắt CSS hoặc tắt Image hoặc cả hai, nội dung và cấu trúc trang web vẫn phải được truyền tải tới người xem ở một mức độ nhất định:
http://www.webstandards.org/learn/faq/#p31
http://www.w3.org/TR/WAI-WEBCONTENT

Chính vì thế đôi khi người thiết kế cũng cần "lột trần" trang web của mình ra để nhìn cho "rõ" ^_^! (lột mấy trang web của người khác ra coi đôi khi cũng đã lắm ;-))
phongjalvn
31-03-2008, 09:57
Thật ra sử dụng như thế nào là ý tưởng của người thiết kế web, và do đòi hỏi kỹ thuật nữa.
Thậm chí trong 1 số menu mình thiết kế, mình sử dụng cả <ul><li><div> và <h2> để làm ;), đừng hỏi tại sao lại phức tạp vậy. Đang viết, hy vọng sớm sẽ có bản thử nghiệm, nếu bạn nào "xăm xoi" và nghĩ ra được cách nào đơn giản hơn thì chỉ mình ;).
@duc.ngtuan: Nếu bạn thiết kế với CSS và (x)HTML một cách semantic, khi bạn tắt CSS và images, cũng chẳng phải gì to tát cả, tất cả sẽ trả về một trang văn bản "trơn", người dùng vẫn có thể xem và hiểu nội dung trang web dễ dàng, nếu bạn thích có thể thử vào http://www.jt-vn.com/blog/ disable java, css, và images xem ;). À mà nếu bạn hỏi tại sao mình lại kêu disable 3 cái, thì mình trả lời luôn: chả có cái trình duyệt nào không hỗ trợ css và images mà hỗ trợ java cả ;) ( mình cũng hay xài Lynx để test các trang mình làm :P, không images, không java, không hình >:) )
2_lua_IT
03-04-2008, 10:07
@Về đầu : margin : 5px; chình ình như thế mà kô nói kô có margin-top, margin-bottom;
Đúng là : web standard không có css y như chạy xe máy không có xăng. Kô có xăng thì vẫn dẫn bộ đi được, mà không có xe thì coi như miễn bàn tới xăng luôn. CSS hay standard ?