Hi i am still an extreme beginner to web development and i am trying to create this navigation bar .The issue i have come across is that the element i have floated to the right side is not on the same level as the other stuff. This is probably due to something i have done with the css and i cant pin it. Also what i actually want to do is to change the back ground of the right floated element to pink and have a padding around it to make it look like a button. I dont know if i have gone about to do so in the right way . I did try to find it out on my own but havent had any luck so far. this is my html.
<html>
<head>
<title>WatchIT -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<div id="navbar" class ="navbar-collapse">
<ul>
<li> <a class="active" href="" title="Home">HOME </a> </li>
<li> <a href="" title="movies">MOVIES </a> </li>
<li> <a href="" title="theaters">THEATERS </a> </li>
<li> <a href="" title="tickets">BUY TICKETS ONLINE </a> </li>
<li style="float:right"><a class="btn btn-scope1 navbar-btn" href="">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
</body>
</html>
and this is my css.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00004d;
font-size:15px
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #000080;
}
a:active {
text-decoration: none;
color: #00abbd;
outline: none;
}
.btn-scope1 {
text-transform:uppercase;
padding:4px 15px;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
.btn-scope:hover {
color: #fff;
opacity: 0.9;
background-color: rgba(238, 12, 110, 0.8); }
Please be kind enough to ignore my ignorance on certain things that i may have put on.What i honestly want is to have a padding in pink like the "Post your question button" on stackoverflow on the buytickets and test your knowledge button. Thank you in advance
Aucun commentaire:
Enregistrer un commentaire