I have 5 divs in two wrapper divs and when I am assigning the float left attribute to the 5 dips they are gaining a 'top-margin' of 5, as in they have a space between the top of the wrapper div and them. Here is My HTML and CSS
HTML:
<div class="headerMenuWrapper">
<div class="menuOuterWrapper">
<div class="menuInnerWrapper" id="menuWrapper">
<div class="menuItem">Home</div>
<div class="menuItem">About Us</div>
<div class="menuItem">Products</div>
<div class="menuItem">FAQ</div>
<div class="menuItem">Contact Us</div>
</div>
</div>
</div>
CSS:
.menuOuterWrapper{
margin: auto;
margin-top: 0;
width: 95%;
height: 100%;
}
.menuInnerWrapper {
margin: auto;
margin-top: 0;
width: 90%;
height: 100%;
background-color: #327CF1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
box-shadow: 1px 1px 5px #000000;
}
.menuItem {
height: 100%;
text-align: center;
border-right: 1px solid #051625;
float: left;
}
.headerMenuWrapper {
margin: auto;
width: 95%;
height: 50%;
}
Is this what you are looking for?
You have a lot going on in your markup that shouldn't be.
I simplified everything for you by using:
nav
ul
li
Instead of floats and margins, I used:
display: table
display: table-cell
text-align: center
HTML
<nav id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
* {
margin: 0;
padding: 0;
border: none;
}
#menu {
margin: 0 auto;
text-align: center;
}
#menu > ul {
display: table;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
box-shadow: 1px 1px 5px #000000;
background: #327CF1;
width: 100%;
}
#menu ul > li {
display: table-cell;
text-align: center;
border-right: 1px solid white;
color: white;
}
#menu > ul > li:last-child {
border: none;
}
use Resetting Browser-Style Defaults for Elements
shorthand for you
{
margin: 0px;
padding: 0px;
}
margin: auto tells to browser automatically calculate margin
example of reset styles here http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/
Related
I am trying to style my menu, but I am having a small problem.
I want the red border on hover to touch the border-bottom of the nav. So it looks like this:
How can I get this effect? I have tried but my code below is doing this:
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 5px 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
margin: 20px;
}
li:hover {
border-bottom: 1px solid red;
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
display: flex;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
Remove padding and margin from hero_nav-list and add padding in li
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 0 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
margin: 0 20px;
padding: 20px 0;
border-bottom: 1px solid transparent;
transition: all 0.4s;
}
li:hover {
border-bottom-color: red;
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
display: flex;
padding: 0;
margin: 0;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
Just use padding rather than margin
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 0px 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
padding: 20px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
li:hover {
border-bottom-color: red;
transition: all .3s
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
display: flex;
margin: 0;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
The problem is that you are using margin instead of padding to create the space underneath the text. Borders apply to the outside including padding, but excluding the margin`.
See the working example at the end, and the changes you need are here:
Change the margin to padding for your li: li { padding: 20px; /* change margin to padding */ }
You also need to remove the margin from the ul as it is adding more space.
.hero_nav-list { margin: 0;}
Remove the padding to the top & bottom of nav: nav { padding: 0px 20px; }
To make the borders overlap, make the li bottom margin -1px: li { margin-bottom: -1px; }
dd an "invisible" border that will be replaced by the red border - this will stop the nav border jumping on hover: li { border-bottom: 1px solid transparent; }
Working Example:
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 0px 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
padding: 20px;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
}
li:hover {
border-bottom: 1px solid red;
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
margin: 0;
display: flex;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
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%;
}
I am semi-new to web development and am currently working on a webpage with a fixed top navbar. I have my logo in the center of a list and my links outside it. I would like the links to be vertically centered. I will include a screenshot and the code. Maybe you can help me? Thanks a lot! I appreciate your time.
Screenshot of Navbar
HTML:
<div class="header">
<div class="table">
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="photos/logo.png"> </li>
<li>Portfolio</li>
<li>Facebook</li>
<li> <script src="js/email.js"></script>
</ul>
</div>
</div>
</div>
CSS:
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209,202,178);
}
.header {
background: rgb(175,166,135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102,102,102);
}
.table {
display: table;
float: left;
left: 50%;
width: 1150px;
height: 100px;
line-height: 100px;
overflow: auto;
position: absolute;
}
.logo img {
z-index: 4;
position: relative;
left: 50%;
}
.navbar {
float: left;
right: 48.5%;
position: relative;
}
.navbar li {
display: inline;
padding: 0px;
margin: 0 auto;
width: 100%;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
overflow: auto;
}
.navbar a {
text-decoration: none;
color: rgb(255,255,255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255,255,255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135,127,99);
}
I would look to use line-height to achieve this. Set the height on the parent container .navbar to 100px then set a line-height of 100px on the .navbar li.
This will mean the link text is always in the centre of the navbar. To ensure the logo was in the centre I would add vertical align middle.
As a bonus I would look to implement box-sizing it greatly helps with layouts that use padding.
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209, 202, 178);
}
.header {
background: rgb(175, 166, 135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102, 102, 102);
}
.navbar {
margin: 0;
padding: 0;
text-align: center;
}
.navbar ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
padding: 0px;
margin-right: 40px;
text-shadow: 1px 1px rgb(115, 109, 88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
line-height: 100px;
vertical-align: middle;
}
.navbar img {
vertical-align: middle;
}
.navbar a {
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255, 255, 255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135, 127, 99);
}
<div class="header">
<div class="navbar">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Before & After
</li>
<li>
<img src="http://placehold.it/50x50">
</li>
<li>Portfolio
</li>
<li>Facebook
</li>
<li>
<script src="js/email.js"></script>
</ul>
</div>
</div>
I edit your base code as you used a lot of needed positioning techniques. Please compare with your code.
try adding this to your css
.navbar ul
{
display:inline;
vertical-align:middle;
}
Let the ul padding:20px 0px; direct the center vertically and text-align:center direct your center horizontally. Also use inline-block so that you can give your entire li focus for menu linking purposes
here is your problem solved FIDDLE
p.s. Your main problem is you are using way too much css. This is not supposed to be such a hard implementation and you definitely do not need absolute positioning, but fixed positioning. The rest is just colors.
If you need to give more padding to the top so they look closer to the bottom, use the padding property to distribute the padding as needed (i.e. padding: 40px 0px 5px) etc.
Here is a common saying we have...Use "absolute" only when "absolutely" necessary ;)
heres how i did it.
core change on css:
.navbar {
display:table;
margin: 15px auto;
}
.navbar li {
line-height:70px;
display: block;
padding: 0px;
float:left;
margin: 0 auto;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
}
simplified html:
<div class="header">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="http://img1.wikia.nocookie.net/__cb20120630091052/farmville2/images/0/0f/Google-Logo.png" height=70px /></li>
<li>Portfolio</li>
<li>Facebook</li>
</ul>
<script src="js/email.js"></script>
</div>
http://jsfiddle.net/4a8dkz3n/
i messed around a bit on jsfiddle so it might be a bit different,
but basically i gave display:table to so that i can give "margin:0 auto;" to it
and used 'line-height' to vertical alignment of the list menu.
also simplified the code a bit.
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
I am having a simple layout with a fixed left navigation and a centered page, now the issue in on low resolutions the fixed navigation is comping on the content area which I want to prevent, but I am not able to do so.
Demo
Any idea how I can keep my page centered and even the fixed with div just adjacent to it without overlapping my elements when screen resolution is low
What I want is like this no matter whatever resolution it is in, the page should be centered but the navigation should sit right besides the page and shouldn't overlap page
CSS
.page_wrapper {
min-width: 750px;
max-width: 750px;
margin: 20px auto;
border: 1px solid #ff0000;
}
.content_wrapper {
margin: auto;
max-width: 700px;
margin-left: 120px;
}
p,
ul {
margin: 0;
padding: 0;
}
p {
margin-bottom: 20px;
}
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.section {
border-bottom: 5px solid #ccc;
padding: 20px;
}
.section p:last-child {
margin-bottom: 0;
}
From what I can tell, your "left" property on #nav is causing it to always position always 300px from the left margin. Removing that keeps the left nav on the left (instead of 300px from the left).
Instead of:
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
try
#nav {
list-style: none;
position: fixed;
top: 20px;
}
See W3 Schools Left Property for more info.
In response to your comment "that will make position navigation to flow on the extreme left of the page" :
Add a margin-left:20px; property
this can be done by
#nav {
padding-left:20px;
padding-top:30px;
list-style: none;
position: fixed;
top: 20px;
}
Live Fiddle
I've made an example fiddle for you, what you just need is a wrapper div and a content div which is floated to right
Demo
I've changed some of the container div layout and basically you can wrap up the contents in your container
HTML
<div class="main_container">
<nav class="content_navigation">
<ul id="nav">
<li class="current">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
</ul>
</nav>
<div class="right_content">
<div class="section" id="section-1">
<strong>Section 1</strong>
</div>
<div class="section" id="section-2">
<strong>Section 2</strong>
</div>
<div class="section" id="section-3">
<strong>Section 3</strong>
</div>
<div class="section" id="section-4">
<strong>Section 4</strong>
</div>
<div class="section" id="section-5">
<strong>Section 5</strong>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
.main_container {
width: 900px;
min-width: 900px;
margin: 0 auto;
background: #ffffff;
}
.content_navigation {
width: 205px;
position: fixed;
margin-top: 120px;
}
.right_content {
float: right;
width: 675px;
border-left: 1px solid #252525;
margin-top: 25px;
}
#nav {
list-style: none;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.section {
border-bottom: 5px solid #ccc;
padding: 20px;
}
.section p:last-child {
margin-bottom: 0;
}
use left: 50% with negative left-margin to position the #nav from the middle
jsfiddle
#nav {
left: 50%;
margin-left:-350px;
...
}
I tried to make something resembling what you have in the diagram, making #nav absolutely positioned wrt .left_navigation. Also removed the margin on .content_wrapper since it didn't seem to serve a purpose.
.content_wrapper {
/*margin-left: 120px;*/
}
#nav {
left:-77px;
width:76px;
list-style: none;
position: absolute;
top: -1px;
}
.left_navigation{
position:relative;
}
DEMO