zoey 1 Report post Posted March 21, 2013 salam sume..ada sape2 blh tlg tak..nak tanya mcm mana menubar (homepage,introduction,our service...n etc) biar jd center ye..klau tgk kt sini dia duk sblh kiri..lg satu mcm mana nak lebarkan yg hitam tu ke bawah jd macam web ni (http://www.creativointerior.com) dan nak letak logo yg kiri tu skali...ni html sy copy bwh ni ye..hrp dapat bantuan..tq <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0;padding:0; font-family: ubuntu,segoe ui,calibri,lucida grande,sans-serif; } html{height:100%;} body{ background:url("wallpaper.jpg"); background-size:100% 100%; height:100%; } nav{margin-top:0;} nav ul { list-style:none; background-image:-webkit-linear-gradient(top,#ebebeb,#D7D7D7); background-color:#000000; box-shadow:0 1px 3px rgba(0,0,0,.5); } nav ul:after{ content:" "; display:block; clear:both; } nav ul li{ float:left; position:relative; } nav ul li a{ color:#ffffff; display:block; padding:3px 20px; text-decoration:none; font-size: 12px; } nav ul ul{ position:absolute; display:none; top:100%; background:black; border-bottom-left-radius:3px; border-bottom-right-radius:3px; } nav ul ul li{ float:none; } nav ul li:hover > a, nav ul ul li:hover > a { color :white; background-image:-webkit-linear-gradient(top, #506def,#2041DE); background-color:#506def; } nav ul li:hover > ul{ display:block; } nav ul ul ul{ position:absolute; left:100%; top:0; border-top-right-radius:3px; } </style> <script src="IE9.js"></script> </head> <body> <nav> <ul> <li><a href="#">Homepage</a></li> <li><a href="#">Introduction</a></li> <li><a href="#">Our Service</a></li> <li><a href="#">Project Experience</a> <ul> <li><a href="#">i) Completed & On Going Projects</a></li> <li><a href="#">ii) Architectural Works, Interior Styling And Consultation</a></li> <li><a href="#">iii) Outdoor Landscape and Water Feature</a> </li> </ul> </li> <li><a href="#">Design Gallery</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Enquiries</a></li> </ul> </nav> </body> </html> Share this post Link to post Share on other sites
ahaksz! 44 Report post Posted March 21, 2013 Tambah sikit CSS dkat <nav> and <ul> tag nav { text-align: center; } ul { display: inline-block; } Share this post Link to post Share on other sites
TonikCapGajah2013 175 Report post Posted March 21, 2013 Try study fail nie; Download Share this post Link to post Share on other sites
ahaksz! 44 Report post Posted March 22, 2013 Tambah dekat <nav> tag sedia ade. Yg ade margin top 0. Yg 1 lg tu dekat nav ul. Share this post Link to post Share on other sites
TonikCapGajah2013 175 Report post Posted March 22, 2013 tambah yang warna merah tu; nav{margin-top:0; text-align:center;} nav ul { list-style:none; background-image:-webkit-linear-gradient(top,#ebebeb,#D7D7D7); background-color:#000000; box-shadow:0 1px 3px rgba(0,0,0,.5); display: inline-block; } Share this post Link to post Share on other sites
ahaksz! 44 Report post Posted March 22, 2013 tambah yang warna merah tu; nav{margin-top:0; text-align:center;} nav ul { list-style:none; background-image:-webkit-linear-gradient(top,#ebebeb,#D7D7D7); background-color:#000000; box-shadow:0 1px 3px rgba(0,0,0,.5); display: inline-block; } Yep macam ni. Terima kasih KopiKawKaw tolong. :D Share this post Link to post Share on other sites
ahaksz! 44 Report post Posted March 22, 2013 owh tmbah situ rpenya...dh nak dekat jadi dah..kt atas dia aku ada tmbah table utk ltak gmbar logo..tapi untuk menubar yg bawah, dia punya width mcm mana nak bagi yg wrna hitam tu lebar spenuhnya mcm table atas ye..sbab lebar dia sparuh je, mcm ni.. https://plus.google.com/photos/111084871988278179845/albums/5858071150244168497/5858071148284281650?banner=pwa&authkey=CLObvMXrwtK3vgE Letak dalam <div> tag menubar tu and specify background color hitam untuk <div> tag. Then make sure <div> tag tu ada width dan juga height and specify kan jugak berapa width and height yang dikehendaki. Share this post Link to post Share on other sites
ahaksz! 44 Report post Posted March 22, 2013 Bro try refer sini http://jsbin.com/awisuw/2 Aku buat guna <div> tag tak gune <table>. So maybe susah sikit kot pasal lain dari ko punye. Tapi try belajar guna <div> untuk layout. Avoid guna <table>. Susah nak style kan dengan CSS. Plus <table> memang bukan untuk layout. Untuk footer tu aku guna method dari mamat ni http://ryanfait.com/sticky-footer/ Share this post Link to post Share on other sites
ahaksz! 44 Report post Posted March 23, 2013 tq bg ni..tu la, aku plk guna style kuno, susah nak stylekan..haha..aku try jgk tgk n try2 kod2 tu..dlm kod tu aku hnya perlu ambik kod css & html je kan..so skrg aku kne jadikan 2 file guna kod css & html tu atau combine jadi 1 file utk jd mcm yg kau buat tu..klau 1 file..yg css nak paste mana, html plk paste bhagian mana ye..aku buat jadi lain.. No need combine bro. Asingkan senang nak cek. Tapi kalo nak combine jugak try link nie http://www.w3schools.com/css/css_howto.asp Share this post Link to post Share on other sites
