I'm kind of new to HTML and CSS. I have a nav bar that I want (the logo and links) aligned to being above the sidebar on my page. It's in different positions on different screens (and when browser is resized) and I don't know how to fix it. I made a fiddle thing and I'll link to the site so that you will know what I mean.
This is the fiddle: The Fiddle
This is the page: The page
#header {
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/menu_bar_zps6212d723.jpg) repeat-x left top;
position: fixed;
}
#menu ul {
margin: 0;
padding: 0px 0 0;
list-style: none;
line-height: normal;
margin-left: 28%;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/cb_logo_zpsd1b14443.png) no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover,
#menu .active a {
background: #1687ef;
color: #FFFFFF;
}
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
Make your link wrapper (which is the ul) the same width as your page container (which is 892px) and set it to margin: auto to center it. You can remove the margin-left: 28% as well. That's not needed. You also have a float issue so your ul is collapsed. You need to clear your floated elements. You can add overflow:hidden.
#menu ul{
overflow: hidden; //clear float issue
width: 892px; // same width as #page
margin: 0 auto; //will center
padding: 0px 30px; //add to keep the same padding as #page-bgtop
}
FIDDLE
Related
I have a strange problem.
Everything on my page went well, I had my navigation bar ready (also for my mobile phone).
Then I put a photo under the navigation bar and the bar was gone ..
I want the bar fixed so that it remains visible, but when I do it is gone.
The picture should remain relative otherwise this will not be correct anymore if you resize to mobile phone.
Someone a solution that keeps the bar back?
Image css
.header{
max-width: 100%;
margin-left: 0;
margin-top: 0;
position: relative;
letter-spacing: 4px;
margin-top: 70px;
box-sizing: inherit;
}
.header-image{
max-width: 100%;
height: auto;
border-style: none;
background-size: cover;
background-position: center center;
display: block;
position: relative;
box-sizing: inherit;
}
.header-image-tekst{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: inherit;
display: block;
text-align: center!important;
margin-top: 16px!important;
}
.header-image-tekst h1{
color: white;
font-size: 38px!important;
margin: 10% 0;
}
.header-image-tekst h1 .border{
padding: 8px 16px!important;
background-color: black;
opacity: 0.75;
}
Navigation bar css
.container{
margin: 0 auto;
width: 100%;
position: fixed;
}
.nav{
border-bottom: 1px solid #EAEAE8;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
}
.menu{
margin: 0 30px 0 0;
}
.menu a{
clear: right;
text-decoration: none;
color: #000;
margin: 0 10px;
line-height: 70px;
padding: 20px;
border-radius: 40px;
}
.menu a:hover{
background-color: #03999e3b;
}
label{
margin: 0 40px 0 0;
float: right;
margin: 0 10px;
line-height: 70px;
font-size: 26px;
display: none;
width: 26px;
float: right;
}
#toggle{
display: none;
}
#media only screen and (max-width: 700px){
label{
display: block;
cursor: pointer;
position: fixed;
}
.menu{
text-align: center;
width: 100%;
display: none;
}
.menu a{
display: block;
border-bottom: 1px solid #03989E;
margin: 0;
}
#toggle:checked + .menu {
display: block;
position: fixed;
}
}
.active{
background-image: linear-gradient(315deg, #ffffff 0%, #03989E 74%);
}
From what I can tell, the image is likely over-lapping the navbar. Use z-index on the navigation bar to make it appear on top of the image. If you don't want them overlapping then you'll have to adjust some of your layout CSS but that should work. I'll usually put my z-index for my navigation at 10, that way it'll always be in front of other elements where I have a z-index set.
Here's a reference article: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I'm trying to center (horizontally) my horizontal menu to the middle of the page but without success. I've put the menu in a container that has margins left and right set to auto, but that doesn't work. Thanks for your help
http://jsfiddle.net/nB6x4/
/***** MENU *******/
.menu-container {
position: absolute;
top: 20px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
margin-right: -4px;
margin-left: 5px;
}
nav ul li {
display: inline-block;
margin-right: -4px;
margin-left: 5px;
vertical align: top;
}
nav a {
padding: 7px 10px;
text-decoration: none;
color: rgba(255,255,255,0.9);
background: rgba(0,0,0,0);
border-radius: 5px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
}
nav a:hover {
background: rgba(0,0,0,0.25)
}
.activeNav {
background: rgba(0,0,0,0.25)
}
nav ul li ul {
position: absolute;
display: block;
margin-top: 5px;
border-radius: 5px;
border-top-left-radius: 0;
background: none;
padding-top: 5px
}
nav ul li ul li {
display: block;
float: none;
margin: 0;
padding: 0
}
nav ul li ul li a {
display: block;
text-align: left;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px rgba(0,0,0,0.33);
padding: 10px
}
nav ul li ul li a:hover {
background: rgba(20,150,220,0.5);
color: white;
text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
display: block;
}
.hover span {
color: rgba(255,255,255,0.9);
background: rgba(20,150,220,0.5);
border-radius: 5px;
position: absolute;
display: block;
margin: 5px 0 0 -57px;
padding: 10px;
font-size: 13px;
font-weight: 300;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
cursor: default;
}
/**** END MENU ****/
Try this
Actually you need to make position relative and give it some width initially
.menu-container {
position: relative;
top: 20px;
margin: o auto;
max-width: 800px;
}
Hope this help, else try putting your html
You will need to specify a width in order for margin: 0 auto; to work.
http://jsfiddle.net/nB6x4/3/
Updated CSS:
nav {
margin: 20px auto;
width: 624px;
}
Alternatively, you could use text-align: center; along with display: inline-block; to accomplish this with content with an unknown width:
http://jsfiddle.net/nB6x4/4/
nav {
margin: 20px 0;
text-align: center;
}
nav ul {
padding: 0;
margin-right: -4px;
margin-left: 5px;
display: inline-block;
}
nav
{
float: right;
margin: 20px auto;
width: 100%;
text-align: center;
}
you can simple add text-align center to nav
Here is the Fiddle
it is not responsive, because you did not provide a responsive code
There are a few things you need to re-evaluate.
First of all, an absolutely positioned container can not be centered with margin, as margin: 0 auto; only effects relatively positioned elements.
So the very first thing you need to do is delete the position: absolute; on .menu_container.
.menu-container {
top: 20px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
Then, with the div relatively positioned, you have the property width set to 100%. This makes the div take up the full amount of width available to it from whatever element is it's parent. Adding margin: 0 auto; doesn't do anything and the left and right sides of the element are already touching the sides of the parent. You can't center something that "fits perfectly" so to speak in it's parent.
So there are a few things you can do. You can shrink the size of the container, say to 80%, and then it will start to center the container element, but not necessarily centering your nav links.
The better option in my opinion is to use text-align: center; to center the LI's since they are using display: inline-block. They retain their block characteristics but are also treated as "normal text" so to speak.
Simply changing the selector to what I have below should be all you need...
nav ul {
text-align: center;
margin-right: -4px;
margin-left: 5px;
}
JS Fiddle Demo
I've built a CSS navbar on the bottom. For some reason, there is this little buffer on the left side, and nothing seems to eliminate it. This prevents my links from centering correctly.
I've tried padding-left: -10px, but it doesn't move left, even when padding-left: 10px DOES move it to the right.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 35px;
width: 100%;
font-size: 12px;
background-color: black;
padding-bottom: 25px;
padding-left: 0;
list-style-type: none;
text-decoration: none;
text-align:center;
letter-spacing:2px;
float: none;
}
ul li {
display: inline;
background:url('images/sep.svg') no-repeat top left;
padding-left: 10px
}
a {
text-decoration: none;
list-style-type: none;
color: #DFC184;
a:visited: blue;
}
http://jsfiddle.net/EHXxS/
http://jsfiddle.net/EHXxS/embedded/result/
#nav {
padding:0;
}
seems to fix it. jsFiddle example
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.
(Apologies in advance if this is answered elsewhere. I looked around and couldn't find anything that seemed to apply.)
I have a layout with absolute and relative positioning for divs to sit in their appropriate positions, which almost works.
http://jsfiddle.net/dex3703/TZzKN/
The #centercontainer (red) is intended to let #mainsection (orange) sit inside all the other content. I have absolute and relative positioning that I thought should work, but I have these problems:
#mainsection's bottom extends beyond #centercontainer by about 20px.
bottom, left, right, top don't have an effect. Using bottom: 20px to lift the bottom up doesn't work.
If I don't have height: 100% on #mainsection--which I sense is wrong--it and the divs inside have no height! Only a little sliver of #contentsection is visible at the top of #mainsection.
I'm only interested in this working in Chrome and IE9 as well. Hope that makes things easier.
I'm sure this is some noob problem so am grateful in advance. Thanks.
When you set width and height for #mainsection to be 100%, you are telling it to be the same width and height as #centercontainer, excluding padding. There are 60px on each side because the padding of #centercontainer is 60px left and right.
The reason #mainsection extends below #centercontainer is that #breadcrumbcontainer is pushing it down by 40px (the height of #breadcrumbcontainer). It only extends down 20px because there is also 20px bottom padding for #mainsection.
If you set the bottom padding of #centercontainer to the height of #breadcrumbcontainer (INCLUDING #breadcrumbcontainer's top and bottom margins), that should fix the problem. It's probably not the most elegant way to fix it. but it should work.
I have made some changes to your CSS. It's still no nice stylesheet, but the design is not broken anymore.
#charset "utf-8";
/*
HTML4 layout
using absolute positioning to get layout to work without HTML5/CSS flexbox
colors:
#1E242D - html frame bg
#F3F3F3 - left nav
#FFFFFF - main content, inner menu
#267EB9 - drawer bg
#DBDBDB - nav and left nav border
#4F9DD7 - selected item blue
#FFFFFF - white text
#4A4A4A - darkest text, dividers
#767676 - middle dark text
#C1C1C1 - light text
*/
html {
font-size: 62.5%;
height: 100%;
background: White;
margin: 0;
}
body
{
font-size: 1.2em;
font-family: "Segoe UI";
height: 100%;
margin: 0;
}
p
{
margin: 0;
}
/* from html5boilerplate */
nav ul, nav ol
{
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
#layoutdiv
{
z-index: 100;
height: 100%;
position: relative;
}
#maindiv
{
margin: 10px 60px;
position: absolute;
top: 60px;
}
header
{
position: absolute; /* change to absolute positioning */
width: 100%;
top: 0;
height: 60px;
}
header p
{
color: #FFFFFF;
}
header span
{
vertical-align: middle;
}
#logodiv
{
width: 300px;
display: inline-block;
}
#notifypanel
{
width: 40px;
position: fixed;
left: 0;
top: 110px;
bottom: 70px;
background-color: LemonChiffon;
}
#notifypanel img
{
width: 24px;
height: 24px;
}
.left
{
float: left;
}
.right
{
float: right;
}
ul
{
list-style-type:none;
list-style: none;
margin: 0;
-webkit-padding-start: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
li
{
display: inline-block; /*need inline-block or height==0! */
cursor: pointer;
vertical-align: middle;
text-align:center;
}
#topnav
{
/* position: absolute;*/
/*width: 100%;*/
/* top: 55px; with absolute positioning, move its top to the header's bottom */
display: inline-block;
vertical-align: top;
}
#topnav ul
{
/*margin-left: 15px;*/
/*height: 100%;*/
}
#topnav li
{
margin-left: 15px;
padding: 5px 10px;
font-weight: bold;
color: #767676;
height: 100%;
/*line-height: 5em; for vertical alignment */
}
#topnav li:hover
{
color: #1E242D;
background-color: #F3F3F3;
}
#topnav .selected
{
background-color: #4F9DD7;
color: White;
}
#centercontainer
{
position: absolute;
overflow:hidden;
top: 60px;
bottom: 60px;
padding: 0 60px 20px 60px;
left: 0;
right: 0;
border: 1px solid red;
}
#breadcrumbcontainer
{
top: 0;
height: 40px;
width: 100%;
margin: 0 0 10px 0;
font-family: Segoe UI Light;
font-size: 3.6em;
line-height: 0.8em;
}
#breadcrumb
{
display: inline-block;
}
#viewcontrols
{
display: inline-block;
width: 320px;
text-align: right;
}
#mainsection
{
width: 100%;
height: auto; /* mainseciton won't display unless 100%, but height is off, doesn't quite sit in containing div */
position: relative;
top:30px;
background-color: Aqua;
border: 2px solid orange;
}
#contentsection
{
position: absolute;
left: 220px;
bottom: 0;
top: 0;
padding: 5px;
box-sizing: border-box; /* makes padding, margins behave like XAML */
overflow-x: auto;
overflow-y: auto;
background-color: AliceBlue; /* remove later */
display: inline-block;
}
#leftnav
{
width: 200px;
/*position: absolute;*/
left: 0;
bottom: 0;
top: 0;
background: #F3F3F3;
overflow-y: auto;
display: inline-block;
}
#leftnav li
{
display: block;
text-align: left;
padding: 7px 0 7px 20px;
border-bottom: 1px solid #DBDBDB;
}
#leftnav img
{
display: inline-block;
vertical-align: middle;
width: 24px;
height: 22px;
}
#leftnav p
{
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
}
#leftnav .selected
{
background-color: #4F9DD7;
}
#leftnav .selected:hover
{
background-color: #4387B7;
}
#leftnav li:hover
{
background-color: #FdFdFd;
}
footer
{
background: #267EB9;
height: 60px;
position: absolute;
bottom: 0;
width: 100%;
line-height: 1em; /* vertically centers header content .. see http://phrogz.net/CSS/vertical-align/index.html */
text-align: center; /* centers the center button div */
}
footer img
{
margin-right: 15px;
height: 24px;
width: 24px;
}
footer p
{
display: inline-block;
margin: 0;
vertical-align: super;
color: #FFFFFF;
font-size: 0.8em;
}
.footerleft
{
margin-left: 20px;
position: relative;
top: 17px;
}
.footerright
{
margin-right: 10px;
position: relative;
top: 17px;
}
.footercenter
{
display: inline-block;
position: relative;
top: 13px;
}
.footercenter div
{
display: inline-block;
margin-right: 20px;
}
.footercenter p
{
display: block;
}
.footercenter img
{
margin: 0;
}