OK - I admit I am a CSS Newb (be gentle please) and not all that much of an HTML guru either - I am much better with business logic than front ends. That said, I am developing a web site for my husband (We cant afford to have it done outside). I am trying to implement a sticky footer on a page that may have variable length. The problem is that ever since I implemented the menus on the left side of the page, the footers jump up to the top of the page. I have no idea why, and can't seem to figure out why. The page contents are pulled from a database. The basic HTML layout is written in HTML with the detail information (the tab strips, menus, content) written out of a database via php. The basic HTML structure is like this:
<body>
<div id='content-container'>
<div id='wrapper'>...</div>
<div id='body-wrapper'>
<div id='floater-wrapper'>
<div id='floating-menu-1'>
</div>
<div id='floating-menu-2'>
</div>
<div>
<div id='content'>
</div>
</div>
<div id='foot-wrapper'>
<div id='foot-content'>
</div>
</div>
</body>
The CSS is as follows (Note: I have tried all variations of the sticky footers solution that I have found here and on line.) Any suggestions are appreciated.
<style>
/*START NAV*/
ul, ul li, li{list-style: none;}
#navigation-wrapper{
background-image: url(images/line.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 100px;
width: 1000px;
margin: 27px 0 0;
}
#logo{
display: block;
float: left;
height: 150px;
width: 200px;
display: block;
text-indent: -999993px;
background-image: url(images/wgclogo2_small.png);
background-repeat: no-repeat;
background-position: center center;
}
#logo a {
margin: 10px 0 0;
display:block;
height:100%;
width:100%;
}
#navigation{
display: block;
float: right;
margin: 10px 0 0 0;
}
#navigation ul {
color: #323131;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: right;
}
#navigation li {
display:inline;
padding: 0 0 0 15px;
font-weight: 600;
}
#navigation a {
color: #323131;
text-decoration: none;
font-size:13px;
}
#navigation a:hover{
color: #78756f;
border-bottom: 5px solid #323131;
border-top: 5px solid #323131;
padding-top: 12px;
padding-bottom: 10px;
}
div#nav{
width: 577px;
height: 44px;
}
div#nav ul {
width: 100%;
height: 100%;
overflow: hidden;
}
div#nav ul li {
float: right;
}
div#nav ul li a {
text-indent: 100px;
overflow: hidden;
display: block;
height: 44px;
}
/*Start First item in Nav 42+0=42 */
div#nav ul li.about a {width: 42px}
div#nav ul li.about a:hover, div#nav ul li.about a.current { }
/*End First item in Nav*/
/*Start Next item in Nav 58+42=100 */
div#nav ul li.food a {width: 58px}
div#nav ul li.food a:hover, div#nav ul li.food a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 54+100=154 */
div#nav ul li.special a {width: 54px}
div#nav ul li.special a:hover, div#nav ul li.special a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 42+154=196 */
div#nav ul li.service a {width: 42px}
div#nav ul li.service a:hover, div#nav ul li.service a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.cost a {width: 52px}
div#nav ul li.cost a:hover, div#nav ul li.cost a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.contact a {width: 57px}
div#nav ul li.contact a:hover, div#nav ul li.contact a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.customers a {width: 50px}
div#nav ul li.customers a:hover, div#nav ul li.customers a.current { }
/*End Next item in Nav*/
/*END NAV*/
/*START CONTENT & HEADERS*/
html, body{
height: 100%;
background-image: url(images/bkg.png);
}
#content-container{
min-height: 100%;
position:relative;
vertical-align: top;
}
#body-wrapper{
/* overflow: auto; */
min-height: 100%;
padding-bottom: 40px;
display: inline-block;
position:absolute;
vertical-align: top;
}
#content{
display:inline-block;
position: absolute;
width:800px;
margin-left: 200px;
}
h1 {
text-align: left;
text-decoration: none;
color: #003366;
font: normal normal 30px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h2 {
text-align: left;
text-decoration: none;
color: #993300;
font: 24px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h3 {
text-align: left;
font: 16px Georgia, "Times New Roman", Times, serif;
color: #666666;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
p.alert{
text-align: left;
font-weight: bold;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #ff5600;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
#content ul, ol {
border-left: 3px solid #dfedcb;
margin-left: 5px;
margin-bottom: 20px;
padding-left: 15px;
color: #323131;
font: 16px Georgia, "Times New Roman", Times, serif;
}
/* START Floating Menu Styles */
#floater-container{
display: inline-block;
position:absolute;
left: 0px;
vertical-align: top;
text-align: start;
}
div.floating-menu {
position:static;
background:rgba(0.25,0.25,0.25,0.25);
border:1px solid #299366;
width:185px;
z-index:300;
}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
/*END Floaters */
/*END CONTENT & HEADERS*/
/*START LOGIN*/
#login-wrapper{ vertical-align: middle; border-style: solid; border-width: thin; height: 125px; width: 500px; margin: 27px 0 0;}
#facebook{text-align: center; vertical-align: middle; background-image: url(images/login_border.png); background-position: right center; background-repeat: no-repeat; display:inline-block ; float: left; width: 200px; height: 125px; margin: 0 0 0 0;}
#local_login{vertical-align: middle; display: inline-block; float: right; width: 300px; height: 125px; margin: 0 0 0 0;}
/*END LOGIN*/
/* START TABSTRIP STYLES */
.tabStrip ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabStrip li {
margin: 0 2px 0 0;
list-style-type: none;
float: right;
}
.tabLink {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e8e8e8;
border: #dadada solid;
border-width: 1px 1px 0 1px;
color: #8a8a8a;
}
.tabLinkActive {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e0e0e0;
border: #c0c0c0 solid;
border-width: 1px 1px 0 1px;
color: #0066ff;
}
.tabContent {
display: none;
}
.tabContentActive {
display: inherit;
clear: both;
background: #f0f0f0;
border: 1px #dedede solid;
padding: 10px;
/* height:inherit; */
width:97.5%;
}
/*END TABSTRIPS */
</style>
<div> before #content should be </div> and you missing one closing </div> before </body>.
<body>
<div id='content-container'>
<div id='wrapper'>...</div>
<div id='body-wrapper'>
<div id='floater-wrapper'>
<div id='floating-menu-1'>
</div>
<div id='floating-menu-2'>
</div>
</div>
<div id='content'>
</div>
</div>
<div id='foot-wrapper'>
<div id='foot-content'>
</div>
</div>
</div>
</body>
But aside from that you are using absolute positioning for #content and #body-wrapper. Absolute positioning is causing those blocks to be rendered, lets say, on a different layer, so anything that goes after absolute positioned will not be rendered below those block but below the previous block that has position set to relative.
The only solution I ever come up with for sticking footer to the bottom of the page is by using javascript. After page is loaded you check whether page main content is big enough to place footer at the bottom. If not, you set the height of the appropriate element to make it so.
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
/* IE 6 and down:
#container {
height:100%;
}
You could use one prepared
http://www.cssstickyfooter.com/
List of supported browsers.
http://www.cssstickyfooter.com/browser-list.html
Related
This question already has answers here:
Bootstrap Navbar. When I press the button nothing happens
(2 answers)
Closed 6 years ago.
I am having problems with the bootstrap nav. I am using this nav for mobile phones, otherwise it is not visible. Logo on the left works but the button on the right does not. I cannot find what is the problem.
HTML:
<nav class="navbar navbar-default navbar-fixed-top mobile" role="navigation" style="visibility:hidden;">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="background-color:white"></span>
<span class="icon-bar" style="background-color:white"></span>
<span class="icon-bar" style="background-color:white"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top" style="color:white"><img class="pull-left" style="max-width:100px; margin-top: -7px;" src="theme/logo.png"></a>
</div>
<!--Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</code>
And CSS:
<pre>#import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic);
html, body {
height: 100%;
overflow: hidden;
}
:link,:visited {text-decoration:none}
h1,h2,h3,h4,h5,h6,pre,code {font-size:48px;font-weight:400; margin-top: 0; margin-bottom: 0.5em;}
h2 { line-height: 1em; margin-bottom: 0.5em; }
ul,dl,dt,dd,ol,li,/*h1,h2,h3,h4,h5,h6,*/pre,form,body,html,p,blockquote,fieldset,input {margin:0; padding:0}
h3, h4 { font-size:30px; line-height: 1em; margin-bottom:0.5em;}
a img,:link img,:visited img {border:none}
p {margin-bottom: 0.5em;}
hr { margin: 25px 0; height: 1px;
background-color: #333333;
border:1px solid #ffffff;
}
.strong { font-weight: bold; }
/** GLOBAL SETS **/
div { display: block; }
.clear {clear:both;}
.hidden {display:none;}
body {margin:0 0 50px 0;font-size:26px;color:#17331f;font-family:'PT Sans',lucida,tahoma, helvetica, verdana;background:#ffffff;text-align:left; }
a:link, a:visited {color: #253066; text-decoration:underline;}
a:hover, a:focus {text-decoration:none;}
#yhteysheader a:link, #yhteysheader a:visited {color: #ffffff; text-decoration:underline;}
#wrapper {position: fixed;top:185px;width:100%;margin:0 auto;display:block;height: 100%; overflow:auto;}
p, h1, h2 {
padding-left: 20px;
padding-right: 20px;
}
p {
font-size: 18px;
}
#header {top: 0px;
left: 0px;
right: 0px;
position: fixed; display:block;
z-index: 100;height:165px; text-align: left; background:#17331f; box-shadow: 2px 2px 2px #253066; margin:0; padding: 0;}
.contain { width: 1080px; margin: 0 auto;}
.sisalto { min-height: 600px; height: auto; margin-bottom: 35px; margin-top: 14px; /*background: url(images/rattitausta.png) top left no-repeat;*/ }
/*div.topfix { padding-top:105px; }
div.topfix_hist { padding-top:75px; }*/
div.left { float: left; height: 100%; margin: 10px; }
div.right { float: right; height: auto; }
.teksti { width: 760px; }
.tekstikapea { width: 500px; }
.tekstikeski { width: 630px; }
.kuvakeski { width: 375px; }
.kuva { width: 100%; }
.kuvalevea { width: 500px; }
.kuva img { width: 100%; }
isokuva
#menu { display: block;position: relative;height: auto; margin-top: 70px; width: 680px; float: right;}
#menu ul#nav {display: block;position:relative;list-style:none; margin-bottom: 0;height:auto;height:0; padding:0; float: right;}
#menu #nav li {float:left;margin:0;font-size:18px;font-weight:normal;}
#menu #nav li a {display:block;line-height:20px;padding:10px 20px;}
#menu #nav li.firstli a { }
#menu #nav li a:link, #menu #nav li a:visited {color:#ffffff;text-decoration:none;}
#menu #nav li a:hover, #menu #nav li a:focus {color:#FFFFFF;text-decoration:none;}
#menu #nav li.current a {border:1px solid #FFC4C4;color:#FFFFFF;text-decoration:none;}
h1#logo { position: relative; margin: 0; padding: 0; margin-top: 0; display: block; width: 400px; height: 132px; background: transparent url(logo.png); visibility: visible; border: 0;overflow: hidden; z-index: 999: text-align: left; float: left; clear: none !important; }
h1#logo a {
display: block;
text-decoration: none;
overflow: hidden;
border: 0;
height: 132px;
height: 0px !important;
padding-top: 132px;
cursor: pointer;
width: 400px;
clear: none;
}
h1#slogan { color: #ffffff; font-size: 26px; float: left; clear: right;padding-top:10px; margin-bottom: 0; display: block; }
#yhteysheader {
margin-top: 10px;
font-size: 14px;
font-weight: normal;
float: left;
clear: both;
color: #ffffff;
}
#page-content {text-align: left; margin-top 35px; }
#media only screen and (max-width: 1199px) {
#header {
height: 160px;
}
#palvelut h2 {
margin-top: 15px;
}
#yhteysheader {
visibility: hidden;
}
.pored {
padding-left: 10px !important;
}
.veliki {
padding: 0px;
}
.veliki i {
}
#menu ul li {
width: 20%;
padding: 0;
}
.naslov{
margin-top: 210px !important;
}
i {
padding-left: 19px;
}
#menu #nav li a{
padding: 0;
}
}
#media only screen and (max-width: 991px) {
.slicica{
padding-left: 0 !important;
}
}
#media only screen and (max-width: 550px) {
#header {
display: none;
}
.mobile {
visibility: visible !important;
display: block !important;
background-color: #17331F;
color: white !important;
}
.mobile a {
text-decoration:none;
}
#palvelut h2 {
margin-top: 2px;
}
#wrapper{
top: 60px !important;
}
#menu ul li {
padding: 1px;
margin: auto;
}
#menu ul li a {
text-align: center;
font-size: 12px;
padding: 5px;
}
#menu ul li a i {
padding-left: 13px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}
.forma {
font-size: 17px;
line-height: 10px;
}
.mapa {
height: 500px !important;
}
.veliki i {
padding-left: 0px !important;
}
.dugme{
}
footer{
bottom: 50px !important;
}
.video{
width: 100% !important;
left: 0% !important;
}
}
.video {
width: 60%;
left: 20%;
}
#content .page-text img {border:none;}
div#palvelut ul { /*list-style: none;*/ padding-left: 1em; }
div#footer { background: url(images/bisnesmuotoilulogo.png) bottom left no-repeat; padding-top:30px;margin-top:30px;border-top:1px dotted #ccc; height: 200px; }
.section {padding:30px 20px 20px 20px;text-align:left;}
.section p, .section ul, .section ol {line-height:20px;margin:0 0 20px 0;}
.section ul, .section ol {margin-left:20px;}
.section ul ul, .section ol ul, .section ul ol, .section ol ol {
/*margin:0 0 0 20px;*/
}
.section h2 {color:#BA0000;font-size:22px;font-family:arial;line-height:22px;letter-spacing:-1px;margin:0 0 15px 0;padding:0;}
.section h3 {color:#BA0000;font-family:arial;font-size:19px;margin:0 0 10px 0;}
.section h4 {color:#BA0000;font-family:arial;font-size:15px;margin:0 0 10px 0;}
.section h5 {color:#BA0000;font-family:arial;font-size:13px;margin:0 0 10px 0;}
.section h6 {color:#BA0000;font-family:arial;font-size:10px;margin:0 0 10px 0;}
.section blockquote {
margin:0 0 20px 20px;
line-height: 19px;
font-size:12px;
color:#666;
font-style:italic;
border-left:2px solid #ccc;
padding:0 0 0 15px;
}
.section code {border:1px solid #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}
.section pre code {line-height:17px;padding:15px;border:1px solid #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}
.credits {font-size:11px;text-transform:uppercase;color:#666;padding-top:15px;margin-top:30px;border-top:1px dotted #ccc;}
.credits p {margin:0 0 0 0;line-height:16px;padding:5px 0 0 0;}
.credits a:link, .credits a:visited {color:#666;}
.credits a:hover {color:#333}
footer {
overflow: hidden;
}</pre>
I would really appreciate the help in making this work. Thanks
Make sure to include the following:
Before closing body tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
In between your head tags, but before your custom styling:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
I have asked everyone I know, and I've searched this site too, but no luck. Now I'm asking all of you for help. I am using HTML5 and CSS3 to make my second website. (First one was 7 years ago, looks terrible now!)
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image and any other content on the page. I have tried using the z-index in every possible place (with a position marking) and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the NavBar HTML Code:
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gigs</li>
<li>Groups
<ul>
<li>SB Trio</li>
<li>NYGT</li>
<li>Qtto Bloomdido</li>
</ul>
</li>
<li>Publications</li>
<li>Repairs</li>
<li>Lessons</li>
<li>Contact</li>
</ul>
</div>
Here's the CSS from the NavBar:
#nav { position: relative;
top: 0;
text-align: center;
background-color: #FF9933;
background-image: url(images/WoodAfromosia.jpg);
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 130%;}
#nav ul { list-style: none;
padding: 1;
margin: 0% 0% 0% 0%;}
#nav ul li { float: center;
display:inline-block;
font-weight: bold;
text-transform: uppercase;}
#nav { overflow: hidden; width: 100%;}
#nav ul li a {display: inline-block;
padding: .5em;
background-color: peachpuff;
background-image: url(images/Paperpapyrus.jpg);
border: 2px solid #000;
border-radius: .5em;
margin: 3% 6% 3% 6%;
white-space:nowrap;}
#nav ul ul {display: none;}
#nav ul ul li {display: block;
float: left;
text-align: left;
margin: -6.5% 0% 0% -40% ;
width: 100px;}
#nav li:hover ul { position:absolute; /* Position under correct tab */
display:block;}
#nav li:hover li { float:none;
overflow: visible;}
#nav ul a:link { color: black; }
#nav ul a:visited { color: black; }
#nav ul a:focus { color: blue;
border-color: #fff; }
#nav ul a:hover { color: darkviolet;
border-color: #fff; }
#nav ul a:active {color: cyan; }
Here's the CSS from the Background Image and Intro Image just below the NavBar:
body { position: relative;
padding: 0;
margin: 0;
background-color: azure;
background-image: url(images/Paperwhitebricks.jpg);}
a {text-decoration: none;}
#intro {text-align: center;
margin: -1% 0% -.5% 0%;}
remove overflow:hidden from the #nav it will fix the issue
#nav {
overflow:hidden /* remove */
width: 100%;
}
here is the fiddle
JS Fiddle
I have a problem with my navigation bar. It is looking great now, but if I add a position:fixed to my css, it messes everything up. Also, if the bar can't fit horizontally on screen, the browser breaks it into two rows, so it fits, but I don't want that!
I added a bg height only so I can scroll and see if the navbar stays.
What I want is a fixed navigation bar on top of the screen, not overlapping with future content, and filling the screen horizontally.
Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700|Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<!-- A roboto font stylesheetje a google fontsban -->
</head>
<body>
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
Here you can see it working: http://jsfiddle.net/DzLvT/
Try this demo
<div id="nav">
<ul>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
#nav{
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
bottom:auto;
background-color: #353539;
height:50px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
vertical-align: middle;
line-height:50px;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body{
background-color:#c5c5c5;
height:1500px;
}
you can also use css rules:
position:fixed; and top:0px;
on your menu tag
Try remove the #nav and iclude it on ul#nav, and add position fixed
http://jsfiddle.net/LZAhC/
#nav ul {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
position: fixed;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
u must give the #nav fixed with and a width with % on the a tags . They will be resized within the width of their parent if the space is too small they will go to a new line so summ them to 97% total and leave 3% for margins and paddings. instead of positioning the text with paddings u can use Line-height for height and text-aling-center
add to ur div somethink like 800/960px width remove the overflow and see the magic :D
just replace this in ur css:
#nav ul li {
list-style-type: none;
text-align: center;
display: inline-block;
width: 19%;
margin: 0px;
/* padding: 0px 10px 0px 10px; REMOVE THE PADDING*/
border-right: 1px solid #DDD;
vertical-align: middle;
line-height: 50px; /*THE SAME AS HEIGHT BUT FOR text elements*/
}
Here is the link: http://jessiskiptoncampbell.com/jessi-wp/
At the moment its aligned right, but i want it to be aligned in the center.
#header {
padding: 15px 0 45px 0;
margin-left: auto;
margin-right: auto;
}
{
margin-left: auto;
margin-right: auto;
}
#logobar1, #logobar2 {
display:block;
width:100%;
position:absolute;
center:0px;
z-index:1;
}
#logobar1 {
border-top:2px solid #231f20;
border-bottom:2px solid #231f20;
background-color:#f49cb1;
height:102px;
margin-top:197px;
}
#logobar2 {
background-color:rgba(255, 255, 255, 0.7);
height:80px;
margin-top:208px;
}
#logodiv, #logodiv a, #logo {
display:block;
margin:0 auto;
position:relative;
z-index:2;
}
.nav {
text-align: center;
width: auto;
margin: -45px auto 15px auto;
z-index:3;
position:relative;
font-family:'Montserrat Alternates', sans-serif;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
list-style:none;
}
.nav ul li {
float: left;
margin-left: 8px;
font-size: 14px;
position: relative;
}
.nav ul li a {
display: block;
padding: 2px 20px;
color: #000;
text-decoration: none;
}
.nav ul li a:hover, .nav li.current_page_item a, .nav ul li.current-menu-item a {
color: #931b20;
}
just Give width:100%; for the .jr_logo class
Set up your header image width to this width: 1240px; and it should be centered
your maincontainer has a margin and its is setting everything off...
take your header out of your maincontainer...
its simple.just give your image an id or class..likeke
#myimg
{
float:left;
margin-left:-116px;
}
now it will perfectly become in center.
How do I center my navigation bar links using CSS while keeping the sides grey?
Blogs and History have a drop a down menu. Here is a screenshot:
(source: gyazo.com)
CSS:
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
width: 100px;
background-color: #444444;
text-align: center;
border-right: 1px solid white;
position: relative;
height: 30px;
line-height: 30px;
}
.navbar li ul li {
float: none;
width: 150px;
text-align: left;
padding-left: 5px;
border-top: 1px solid white;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar li ul {
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}
.navbar li:hover ul {
visibility: visible;
}
.navbar li:hover {
background-color: maroon;
}
Edited my answer.. I've made your Container div clear the float, and set a defined width to navbar.
http://jsfiddle.net/jFdhM/
#container {
border-radius: 10px;
box-shadow: 3px 3px 4px;
padding: 8px;
background-color: #FFFFFF;
width: 748px;
margin: 0 auto;
}
#top {
width: 748px;
}
.navbar {
width: 505px;
margin:0 auto;
}
.navbar ul {list-style:none; padding:0; margin: 0 auto;text-align: center;}
.navbar li {float:left; width:100px; background-color:#444444; text-align:center;
border-right:1px solid white; position:relative;
height:30px; line-height:30px;}
.navbar li ul li {float:none; width:150px; text-align:left; padding-left:5px;
border-top:1px solid white;}
.navbar a {text-decoration:none; color:white;}
.navbar li ul {position:absolute; top:30px; left:0; visibility:hidden;}
.navbar li:hover ul {visibility:visible;}
.navbar li:hover {background-color:maroon;}
#maincontent {
clear: both;
padding: 10px;
font-family: "Microsoft Sans Serif";
font-size: medium;
}