An element won't move to my intended position. I want to have some white space between the right of "Register" and the browser but don't know how to do it. I have tried padding but it seem to be kind of wrong thinking.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: sans-serif;
color: black;
}
.firstpart {
background-color: #eee;
height: 30vh;
}
.navbar li {
list-style: none;
display: inline;
}
.navbar-left {
float: left;
padding: 20px 20px 0 20px;
}
.navbar-right {
float: right;
padding: 20px 20px 0px 20px;
}
.badge {
background-color: black;
color: white;
height: 35px;
width: 80px;
}
<div class="firstpart">
<div class="navbar">
<ul>
<li class="navbar-left">ABOUT</li>
<li class="navbar-left">CONTACT</li>
<li class="navbar-left">FAQS</li>
<div class="navbar-right badge">
<li>REGISTER</li>
</div>
<li class="navbar-right">SIGN IN</li>
<li class="navbar-right">MANAGE BOOKING</li>
</ul>
</div>
</div>
You just need to add:
.navbar {
padding-right: 10px;
}
You can also remove the div inside of your unordered list as this isn't valid HTML. Replace it with:
<li class="navbar-right badge">REGISTER</li>
Code (open in "Full page" view as otherwise "Manage Booking" gets wrapped):
/* Add this */
.navbar {
padding-right: 10px;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body{
font-family: sans-serif;
color: black;
}
.firstpart{
background-color:#eee;
height: 30vh;
}
.navbar li{
list-style: none;
display: inline;
}
.navbar-left{
float: left;
padding: 20px 20px 0 20px;
}
.navbar-right{
float: right;
padding: 20px 20px 0px 20px;
}
.badge{
background-color: black;
color:white;
height: 35px;
width: 80px;
}
<body>
<div class="firstpart">
<div class="navbar">
<ul>
<li class="navbar-left">ABOUT</li>
<li class="navbar-left">CONTACT</li>
<li class="navbar-left">FAQS</li>
<li class="navbar-right badge">REGISTER</li> <!-- Use an li element instead -->
<li class="navbar-right">SIGN IN</li>
<li class="navbar-right">MANAGE BOOKING</li>
</ul>
</div>
</div>
</body>
I think you could simply set a width for .navbar div to say, 98%
.navbar {
width:98%;
}
Related
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.
I did some research with font size and boxes sizes. I created ul li and styling them with some CSS to make them looks like a table and stay inline. after the epic code i realize that each words are different like home, tutorial, contact us, and registration. all font have a different sizes and different paddings to use.
so this is my code...
i tidy this up so it's not looks like in my localhost. what i did was made the percentage like 3.5754% to set the padding to get the exact SAME width of the boxes. so 4 of them should be the same size of boxes.
at home i created padding like 5% or so.
at tutorial i created padding like 3.something%
and etc.
because each words has a different width and number of letters.
sorry for my English, please let me know if i'm confusing u guys..
but please help about this percentage and font thing. i really don't get it. if u guys have some article to read it's also help... because i'm still looking for it. ty guys :)
body {
margin: 0;
padding: 0;
}
.navigation {
top: 0;
width: 90%;
height: 120px;
background: #ccc;
margin: 0 auto;
text-align: center;
}
.nav-head {
padding-top: 5%;
padding-left: 0;
width: 100%;
margin:
/*0 7.2%*/
;
}
.nav a {
color: #e74c3c;
text-decoration: none;
font-size: 1em;
}
.nav {
list-style: none;
display: inline;
border: solid 1px #e74c3c;
margin-left: 0;
}
#nav1 {
padding: 1% 1%;
}
#nav2 {
padding: 1% 5.74%;
}
#nav3 {
padding: 1% 3%;
}
#nav4 {
padding: 1% 3%;
}
.nav:hover {
padding: 2.2% 5%;
border: solid 1px #e74c3c;
}
.nav.currentpage {
padding: 2.2% 5%;
border: solid 1px #e74c3c;
}
<nav class="navigation">
<ul class="nav-head">
<li class="nav" id="nav1">HOME
</li>
<li class="nav" id="nav2">REGISTRATION
</li>
<li class="nav" id="nav3">TUTORIAL
</li>
<li class="nav" id="nav4">CONTACT US
</li>
</ul>
</nav>
2 easy option I believe:
1) display:table + table-layout:fixed;
body {
margin: 0;
padding: 0;
}
.navigation {
width: 90%;
height: 120px;
background: #ccc;
margin: 0 auto;
text-align: center;
}
.nav-head {
display:table;
width:100%;
padding:0;
table-layout:fixed;
}
.nav a {
color: #e74c3c;
text-decoration: none;
font-size: 1em;
}
.nav {
display:table-cell;
border: solid 1px #e74c3c;
}
#nav1 {
}
#nav2 {
}
#nav3 {
}
#nav4 {
}
.nav:hover {
border: solid 1px ;
}
.nav.currentpage {
border: solid 1px ;
}
<nav class="navigation">
<ul class="nav-head">
<li class="nav" id="nav1">HOME
</li>
<li class="nav" id="nav2">REGISTRATION
</li>
<li class="nav" id="nav3">TUTORIAL
</li>
<li class="nav" id="nav4">CONTACT US
</li>
</ul>
</nav>
2) display:flex + flex:1;
body {
margin: 0;
padding: 0;
}
.navigation {
width: 90%;
height: 120px;
background: #ccc;
margin: 0 auto;
text-align: center;
}
.nav-head {
display:flex;
padding:0;
list-style-type:none;
}
.nav a {
color: #e74c3c;
text-decoration: none;
font-size: 1em;
}
.nav {
flex:1;
border: solid 1px #e74c3c;
}
#nav1 {
}
#nav2 {
}
#nav3 {
}
#nav4 {
}
.nav:hover {
border: solid 1px ;
}
.nav.currentpage {
border: solid 1px ;
}
<nav class="navigation">
<ul class="nav-head">
<li class="nav" id="nav1">HOME
</li>
<li class="nav" id="nav2">REGISTRATION
</li>
<li class="nav" id="nav3">TUTORIAL
</li>
<li class="nav" id="nav4">CONTACT US
</li>
</ul>
</nav>
Using percentages is not always the best idea, specially for padding. Instead, use min-width, a normal padding and control the gutter with font-size:0 on the parent and normal padding on the LIs
Here is the code:
.nav-head{
font-size:0;
}
.nav {
padding: 2px 5px !important;
min-width: 116px;
display: inline-block;
margin: 0 !important;
font-size: 15px;
border:1px solid red;
}
And here is the DEMO
Here is the explanation on the font-zero concept link
You can use Flexbox to help you in making all the items with same width.
body {
margin: 0;
padding: 0;
}
.navigation {
top: 0;
width: 90%;
height: 120px;
background: #ccc;
margin: 0 auto;
text-align: center;
}
.nav-head {
display: flex;
padding-top: 5%;
padding-left: 0;
width: 100%;
}
.nav a {
color: #e74c3c;
text-decoration: none;
font-size: 1em;
}
.nav {
list-style: none;
flex: 1;
border: solid 1px #e74c3c;
margin-left: 0;
padding-top: 2.2%;
padding-bottom: 2.2%;
}
.nav:hover {
border: solid 1px #e74c3c;
}
.nav.currentpage {
padding-top: 2.2%;
padding-bottom: 2.2%;
border: solid 1px #e74c3c;
}
<nav class="navigation">
<ul class="nav-head">
<li class="nav" id="nav1">HOME
</li>
<li class="nav" id="nav2">REGISTRATION
</li>
<li class="nav" id="nav3">TUTORIAL
</li>
<li class="nav" id="nav4">CONTACT US
</li>
</ul>
</nav>
I'm really pulling my hair out on this one...I have a dropdown menu which is hidden but displays when the user hovers over a list item. However, the list item gets shifted downward on hover, instead of staying put. Which makes the menu shift further down than I want.
My code: http://codepen.io/anon/pen/PPYKJg
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
html {
overflow-y: scroll;
}
body {
margin: 45px 0px;
text-align: center;
background: #191919;
}
.header {
color: #FE353D;
}
#top-menu {
background-color:rgba(0,0,0,0.85);
height: 34px;
width: 49.1%;
float: right;
position: relative;
margin-top: 15px;
top: 21px;
left: 88px;
font: bold 20px sans-serif;
border-top-left-radius: 10px;
z-index: 10;
}
#top-menu:hover {
}
.more-menu {
background-color: #111111;
display: none;
position: relative;
top: 16px;
right: 25px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
.toplink {
margin-right: 35px;
}
ul {
text-align: left;
display: inline;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
margin-right: 30px;
padding-top: 5px;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
li.option {
margin-left: -30px;
margin-top: -25px;
}
$('#top-menu').hover(
function (){
$('.more-menu').css('display','inline');
},
function (){
$('.more-menu').css('display','none');
}
);
Any idea what's happening here? This is driving me crazy!
well all I could see is the .more-menu not diplaying right below the top menu so to fix that change the top property of the .more-menu class to this so to make the dropdown menu display right below the navigation menu
.more-menu {
background-color: #111111;
display: none;
position: relative;
top: 0px; /*this was 16px but is now 0px*/
right: 25px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
I made my own out of your HTML you can go off of.
JsFiddle: https://jsfiddle.net/469knbfq/
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
#header{ background: #000; padding: 15px 0px; }
#menunav{ }
#top-menu{ }
ul{ display: inline; margin: 0px; padding: 0px 0px 0px 20px; }
li{ display: inline; margin: 0px 10px; }
a{ color: #FFF; font-size: 18px; text-decoration: none; }
.more-menu{ background : grey; margin: 0px 0px 0px 20px; padding: 0px; display: none; }
JS:
$('#top-menu').mouseenter(function(){
$('.more-menu').css('display','inline-block');
});
$('#top-menu').mouseleave(function(){
$('.more-menu').css('display','none');
});
note: I am using JQuery
Thanks for the feedback...I actually wound up fixing my own problem by tweaking the CSS and the jQuery a bit. See below for the updated code:
http://codepen.io/anon/pen/ZbzvGQ
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
html {
overflow-y: scroll;
}
body {
margin: 45px 0px;
text-align: center;
background: #191919;
}
.header {
color: #FE353D;
}
#top-menu {
background-color:rgba(0,0,0,0.85);
height: 34px;
width: 49.1%;
float: right;
position: relative;
margin-top: 15px;
top: 21px;
left: 88px;
font: bold 20px sans-serif;
border-top-left-radius: 10px;
z-index: 10;
}
.more-menu {
background-color: #111111;
display: none;
position: absolute;
float: clear;
top: 35px;
right: -32px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
.toplink {
margin-right: 35px;
}
ul {
text-align: left;
display: inline;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
margin-right: 30px;
padding-top: 5px;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
li.option {
margin-left: -30px;
margin-top: -25px;
}
JQUERY:
$('#topmenu-other, .more-menu').hover(
function (){
$('.more-menu').css('display','inline-block');
},
function (){
$('.more-menu').delay(7500).queue(function(next){
$(this).css('display','none');
next();
});
}
);
This keeps the >> symbol in place when hovered over and also keeps more-menu displayed for a time while the user decides what option to choose.
Thanks again! :)
so basically I've got this code: HTML and CSS below, using bootstrap as well, and for some reason, it's not centred. It used to be, but at some point it wasn't anymore, now it pulls to the left. See image below. Any ideas?
<div class="row" id="nav-bar">
<div class="col-md-9">
<ul>
<li class="col-md-3 nav-btn" id="home">Home</li>
<li class="col-md-3 nav-btn" id="about">About</li>
<li class="col-md-3 nav-btn dropdown-toggle" id="games">
Games & Apps ▼
<div class="dropdown">
<ul>
<li>Games & Apps ▼</li>
<li id="first">Space Rodeo</li>
<li id="spaced">Boodya's Carpet Ride</li>
<li id="spaced">Ultimate Points Counter</li>
</ul>
</div>
</li>
<li class="col-md-3 nav-btn" id="blog">Blog</li>
</ul>
</div>
</div>
#nav-bar {
margin: 0px 0px 10px 0px;
height: 60px;
}
#nav-bar ul {
margin-top: 20px;
}
.col-md-3 a {
padding: 15px 40px 15px 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
color: #B6B6B6;
}
#nav-bar a:hover {
color: #428bca;
}
.col-md-3 {
display: inline;
}
.col-md-9 {
float: none;
margin: auto;
left: 0;
right: 0;
}
.dropdown {
padding: 0;
margin-top: -48px;
position: absolute;
z-index: 10;
background-color: #ffffff;
box-shadow: -5px -5px 20px;
border-radius: 5px;
height: 210px;
width: 275px;
}
.dropdown ul {
padding: 0;
margin-top: 0;
}
.dropdown li {
list-style: none;
padding: 0;
width: 310px;
}
#games2 {
color: #428bca;
}
#spaced {
margin-top: 10px;
}
#first {
padding-top: 20px;
border-top: 1px solid black;
margin-top: 22px;
}
Showing result of code, the navbar is off centre
http://i.stack.imgur.com/smtTP.png
Your list items are display: inline which means they'll follow the alignment rules of text. Since you set no text-align, it defaults to the left. You can fix that by adding text-align: center to your ul so the contents will be centered.
Now the insides of the dropdown will also inherit that, you can reset that by setting text-align: left back on the dropdown ul again.
Also reset the left padding that ul has by default.
#nav-bar ul {
padding-left: 0;
text-align: center;
}
#nav-bar .dropdown ul {
text-align: left;
}
Works in this jsFiddle