CodingForums
درباره سایت
آخرین مطالب
- QQSLOT LINK DAFTAR WEBSITE DAPET BONUS DI AWAL
- QQSLOT Situs QQ Dijamin WD Besar
- Belajar Pemrograman Komputer dengan Yang Terbaik - Pelajari cara membuat program bersama kami, di sini Anda dapat mempelajari cara membuat halaman web yang indah menggunakan HTML dan CSS.
- RankMonarch - Jasa Full-Stack Digital Marketing Segala Niche
- Copy a Button?
- Centering Text
- ^EQ and selecting multiple items
- Search in a multidimensional array and get the key?
- How do i pass form vaues to javascript window.open.
- Flexbox postioning
امکانات وب
I want a fixed navigation bar that takes up all of the top of the screen with page links center'd in the middle then to the right I would like to include Facebook and Instagram links that always sit top right of the screen inline with the edge of the content. I have tried several methods to achieve this but none that seemed to work.
As you can see in the image, I have been able to add the links in with the rest of the links in the center but unable to move them over to the right with out them been behind the navbar.
The code I have is as follows:
And this what i have in the css:
Researched a lot online but nothing seems to work starting to wonder if I need to do the Nav Bar in a complete different way. Open to any suggestion that will achieve the look I desire.
This is what I want it to look like (mocked up in photoshop):
Cheers
As you can see in the image, I have been able to add the links in with the rest of the links in the center but unable to move them over to the right with out them been behind the navbar.
The code I have is as follows:
Code:
<ol>
<center>
<li><a href="Index.html">Home</a></li>
<li><a href="voyages.html">Voyages</a></li>
<li><a href="tips and tricks.html">Tips & Tricks</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="https://www.facebook.com/">
<img src="images/FB-f-Logo__blue_29.png" alt="Facebook"></a></li>
<li><a href="https://www.instagram.com/">
<img src="images/Instalogo.png" height="29" width="29" alt="Instagram"></a></li>
</center>
</ol>Code:
ol {
list-style-type: none;
overflow: visible;
margin-bottom: 0px;
margin-top: 0px;
margin-left: -10px;
margin-right: -10px;
background-color: #ececec;
position: fixed;
top: 0;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
li a {
color: #696969;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: verdana;
font-size: 20px;
}
li {
display: inline;
}
a:link {
color: #696969;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #696969;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: blueviolet;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: dimgray;
background-color: transparent;
text-decoration: underline;
}This is what I want it to look like (mocked up in photoshop):
Cheers
برچسب:
نویسنده: آیلین رضوانی