Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1381
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย Parichat » 24/05/2018 2:19 pm

อยากให้เมนูอยู่กึ่งกลางของหน้าเว็บดังรูป
sdf.png


ตอนนี้ที่ทำได้เมนูยังอยู่ฝั่งซ้านของหน้าเว็บ ดังรูป
sd.png


โค้ดเมนู

โค้ด: เลือกทั้งหมด

<nav class="navbar navbar-expand-lg navbar-light bg-light">
                                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                                                        <span class="navbar-toggler-icon"></span>
                                                </button>
                                                <div class="collapse navbar-collapse" id="navbarText">
                                                        <ul class="navbar-nav mr-auto">
                                                                <li class="nav-item active">
                                                                        <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16', '', 'picture/menu/menu-home2.gif', 1)">
                                                                                <img src="picture/menu/menu-home1.gif" name="Image16" width="116" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="about us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17', '', 'picture/menu/menu-about2.gif', 1)">
                                                                                <img src="picture/menu/menu-about1.gif" name="Image17" width="112" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18', '', 'picture/menu/menu-products2.gif', 1)">
                                                                                <img src="picture/menu/menu-products1.gif" name="Image18" width="111" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="gallery/demo.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19', '', 'picture/menu/menu-gallery2.gif', 1)">
                                                                                <img src="picture/menu/menu-gallery1.gif" name="Image19" width="111" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="download.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20', '', 'picture/menu/menu-download2.gif', 1)">
                                                                                <img src="picture/menu/menu-download1.gif" name="Image20" width="111" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21', '', 'picture/menu/menu-contact2.gif', 1)">
                                                                                <img src="picture/menu/menu-contact1.gif" name="Image21" width="112" height="35" border="0"></a>
                                                                <li class="nav-item">
                                                                        <a href="how_to_buy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22', '', 'picture/menu/how-to-buy-2.gif', 1)">
                                                                                <img src="picture/menu/how-to-buy-1.gif" name="Image22" width="112" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31', '', 'picture/menu/menu-news2.gif', 1)">
                                                                                <img src="picture/menu/menu-news1.gif" name="Image31" width="112" height="35" border="0"></a>
                                                                </li>
                                                        </ul>
                                                </div>
</nav>


อยากรู้ว่าต้องเพิ่มโค้ดตรงไหนและแก้ไขตรงไหนบ้างค่ะ
ขอบคุณค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8039
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย tsukasaz » 24/05/2018 3:05 pm

โค้ด: เลือกทั้งหมด

<nav class="navbar navbar-expand-lg navbar-light bg-light">


แสดงเต็มจอไหม
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1381
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย Parichat » 24/05/2018 3:13 pm

tsukasaz เขียน:

โค้ด: เลือกทั้งหมด

<nav class="navbar navbar-expand-lg navbar-light bg-light">


แสดงเต็มจอไหม


เต็มจอค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8039
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย tsukasaz » 24/05/2018 3:23 pm

div ตัวไหนที่ไม่เต็มจอครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1381
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย Parichat » 24/05/2018 3:43 pm

tsukasaz เขียน:div ตัวไหนที่ไม่เต็มจอครับ


เต็มจอหมดนะค่ะ :) :)
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8039
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย tsukasaz » 24/05/2018 3:50 pm

ลองใช้ class container ทำให้มันไม่เต็มจอก่อน
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1381
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย Parichat » 24/05/2018 4:03 pm

tsukasaz เขียน:ลองใช้ class container ทำให้มันไม่เต็มจอก่อน


เปลี่ยนแล้วค่ะได้ดังรูปค่ะ
asvbv.png


แต่ไม่อยู่กึ่งกลางค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8039
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - จัดเมนูให้อยู่กึ่งกลางหน้าเว็บ

โพสต์โดย tsukasaz » 24/05/2018 4:05 pm

เหมือนมีช่องว่างด้านหลัง contact us
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 7 และ บุคคลทั่วไป 0 ท่าน