Positioning and margin's in CSS
Question
I am currently trying to advance my skills in CSS , but it is not going so well at the moment haha. I am trying to add a box next to a logo on a navigation bar but when I try to vertically center the box with margin it just add's extra white space above the navigation bar ?
Basically I just want to learn how to place items next to each other. Also if you could edit anything you see wrong that would be greatly appreciated!
@import url(http://fonts.googleapis.com/css?family=Righteous); * { padding: 0; margin: 0; } body { height: 100%; background-color: #ECF0F1; } #navigation-bar { height: 50px; max-width: 100%; margin: 0 auto; background-color: #2C3E50; border-bottom: 2px #2980B9 solid; position: relative; } .logo { font-size: 28px; font-family: "Righteous"; line-height: 50px; left: 15px; color: #E74C3C; float: left; width: 0px; position: absolute; } .menu { width: 400px; height: 35px; background-color: #ECF0F1; margin: 20px auto; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="navigation-bar"> <div class="logo"> Dewkatii </div> <div class="menu"> </div> </div> </body> </html>
3 answers
solution1
1 2015-08-12 10:17:25
You can add a padding-top in you're #navigation-bar and use margin:0px auto in you're .menu . It is a solution that works, there must be better
solution2
0 2015-08-12 10:21:29
I think this should help. Haven't changed a great deal at all.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav-wrapper">
<div id="navigation-bar">
<div class="logo">
Dewkatii
</div>
<div class="menu">
</div>
</div>
</div>
</body>
</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Righteous);
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
background-color: #ECF0F1;
}
#nav-wrapper {
height: 50px;
width: 100%;
background-color: #2C3E50;
border-bottom: 2px #2980B9 solid;
}
#navigation-bar {
height: 100%;
max-width: 1120px;
width: 100%;
margin: 0 auto;
background-color: #2C3E50;
position: relative;
overflow: none;
}
#navigation-bar div {
float: left;
display: inline-block;
}
.logo {
font-size: 28px;
font-family: "Righteous";
line-height: 50px;
color: #E74C3C;
}
.menu {
width: 400px;
height: 100%;
background-color: #ECF0F1;
margin-left: 25px;
}
solution3
-1 ACCPTED 2015-08-12 10:48:23
I hope it's this that you want:
@import url(http://fonts.googleapis.com/css?family=Righteous); * { padding: 0; margin: 0; } body { height: 100%; background-color: #ECF0F1; } #navigation-bar { height: 50px; max-width: 100%; margin: 0 auto; background-color: #2C3E50; border-bottom: 2px #2980B9 solid; position: fixed; width:100%; } .logo { font-size: 28px; font-family: "Righteous"; line-height: 50px; left: 15px; color: #E74C3C; float: left; width: 20%; padding-left: 20px; background-color:green } .menu { width: 50%; height:100%; background-color: black; float:left; margin-left:20px; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="nav-wrapper"> <div id="navigation-bar"> <div class="logo"> Dewkatii </div> <div class="menu"> </div> </div> </div> </body> </html>
You just need two put the logo and menu with float:left to align them to the left, leave the default position to them, and put in the order that you want. That solve your problem.
I Advise you two see this link http://www.barelyfitz.com/screencast/html-training/css/positioning/ for more understanding of position elements with css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.