Hey all, i am trying to get my bottom bar to center on the screen but i am unable to do so.
<style type="text/css">
body {
background: #fffff;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
#bottomBar {
position: fixed;
bottom: 0px;
left: 0px;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 500px;
min-width: 500px;
margin: 0px auto;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}
*html #bottomBar {margin-top: -1px; position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}
#bottomBar ul {padding: 0; margin: 0;float: left;width: 100%;list-style: none;border-top: 1px solid #fff;}
#bottomBar ul li{padding: 0; margin: 0;float: left;position: relative;}
#bottomBar ul li a{padding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;}
html #bottomBar ul li a:hover{ background-color: #fff; }
a.PDF{background: url(http://www.xxx.com/img/pdficon.png) no-repeat center center; }
</style>
<div id="bottomBar">
<ul id="mainpanel">
<li style="padding-top:5px; font-family:Arial, Helvetica, sans-serif; padding-left: 5px;">First time here? Be sure to check out the "this" button above or download the PDF here -></li>
<li>Download PDF <small>Download PDF</small></li>
</ul>
</div>
Thanks!
David
Ok i got it by adding this to my CSS:
left:0;
right:0;
I think the only thing you need to change is to remove the left: 0px; line. This line forces the div to be at the very leftmost pixel of its containing element. Since you just want it to be centered, the margin: 0 auto; should do that for you with that one line removed.
Try this:
#bottomBar {
position: fixed;
bottom: 0px;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 500px;
min-width: 500px;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
margin-left:auto;
margin-right:auto;
left:25%;
right:25%;
}
Related
I was tasked with a challenge by a developer to receate this comp with one :before pseudo element and found it outside of my relm of experience, I didn't end up solving the problem but as stated I did manage to recreate the comp with two pseudo element on one selector. Here is a jsfiddle example. http://jsfiddle.net/rt9nbg8j/
body{
width:100%;
margin: 0 auto;
}
h1:before{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:left;
margin-right:20px;
background:#fff;
}
h1{
height:60px;
display: block;
float:left;
text-align:center;
background:#ccc;
/* border:1px solid red; */
width:100%;
font-size:16px;
font-family:arial;
line-height:4em;
}
h1:after{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:right;
background:#fff;
}
Here you go.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
height: 60px;
display: block;
width: 50%;
margin: 0 auto;
text-align: center;
background: #ccc;
font-size: 16px;
font-family: arial;
line-height: 4em;
padding: 0 2em;
position: relative;
}
h1:before {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
content: "";
height: 100%;
width: 100vw;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
<h1>Lorem ipsum dolor sit.</h1>
A perfect replica
The solution is to set the title using the :before pseudo-element's content property.
Caveat: This is a poor solution for use in the real world. If this challenge (with its seemingly arbitrary restriction) represents a real-world use case, I suggest refactoring your HTML or CSS to allow for the use of additional markup and/or pseudo-elements or settling for an imperfect (but good enough) replication of the comp.
html,
body {
margin: 0;
padding: 0;
}
h1 {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
h1:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
<h1></h1>
Update: (just for funsies)
If I were to be literal and true to the challenge to "receate this comp with one :before pseudo element", I would not use any html element other than the de facto body tag.
html {
margin: 0;
padding: 0;
}
body {
display: block;
position: relative;
box-sizing: border-box;
margin: 1em 0;
padding: 0;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
body:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
I'm learning how to code Wordpress themes currently, and I'm having trouble centering my navigation menu. It moves too far to the right. I have included an image to illustrate the problem with the code that I have presented.
Here is a link to a screenshot of the problem: http://i59.tinypic.com/8z1m2o.png
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
p {
line-height: 14px;
}
/* General Layout */
div.container{
max-width: 960px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
article.post {
border-bottom: 1px solid #bbbbbb;
}
article.post:last-of-type{
border-bottom: none;
}
/* Header */
.site-header {
border-bottom: 2px solid #999;
padding-top: 10px;
}
/* Footer */
.site-footer {
margin-top: 0px;
border-top: 2px solid #999;
margin-left: auto;
margin-right: auto;
}
/* Navigation */
.site-nav {
position: fixed;
left:50%;
}
.site-nav ul{
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px;
}
.site-nav ul li{
text-align: center;
display: inline-block;
overflow:hidden;
text-decoration: none;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid #DDD;
}
.site-nav ul li:last-of-type {
border-right: none;
}
.site-nav has position: fixed, left: 50% so the left side of the element will be positioned in the middle of the screen. Remove this rule or give the element margin-left: -X where X is equal to half of .site-nav's width if you must use fixed positioning.
.site-nav {
width: 100%
position: fixed;
margin: 0;
}
.site-nav ul{
position: relative;
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px auto;
}
I am trying to place a image above my menu background.
I have tried list-style-image and background image (on li and a tag). How do I do this?
Image with the menu: image from menu
orange background: this is the background of the menu (the a tag)
gray box: This is the image I want above my menu backround. (the 'A' is where the menu background is.
#nav ul li{
font-weight: bold;
float: left;
margin-top: -5px;
position: relative;
padding: 6px 5px 0 15px;
z-index: 99;
height: 50px;
background-position:left center;
background-image: url(../images/bussel/menu-blad1.png) !important;
background-repeat: no-repeat;
}
#nav ul li a{
background-color: #feb24e;
display: block;
width: 153px;
height: 35px;
color: #fff;
text-align: center;
text-decoration: none;
margin: 10px 0px 0px 0px;
position: relative;
z-index: 98;
}
I've done this (the div way):
The link:
<li><span class="blad"></span>Groepen</li>
The css:
#nav ul li{
font-weight: bold;
float: left;
margin-top: -5px;
margin-right: 5px;
position: relative;
padding: 6px 5px 0 15px;
z-index: 99;
height: 50px;
}
#nav ul li a{
background-color: #feb24e;
display: block;
width: 153px;
height: 35px;
color: #fff;
text-decoration: none;
margin: 10px 0px 0px 0px;
}
#nav ul li span.blad{
width: 35px;
height: 43px;
background-position:left center;
background-image: url(../images/bussel/menu-blad.png);
background-repeat: no-repeat;
float: left;
margin: 4px 5px 0px -15px;
}
So it works, thanks!
Can you go with something like this ? (roughly) : jsFiddle demo
Just create another div with float:left and give it correct margin. Then you can place your image inside this floated div.
Use z-index
Example:
<div style="position: relative;">
<div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> ONE </div>
<div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> TWO </div>
<div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> THREE </div>
</div>
The second div would be in the front, and the first div on the background.
u can try this
a{
position:absolute;
background:red;
width:10px;
height:10px;
}
li{
position:relative;
bacground:url(../);
padding:20px;
}
I am currently trying to get a horizontal navigation menu to stretch from across the whole of my container.
The div that it is in stretches across fine, but the actual list items don't and I am unsure why.
The CSS for the right hand bar, the container holding the nav bar, and the nav items is:
#rhs{
position: relative;
float: right;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
nav{
display: block;
position: relative;
width: 1010px;
height: 50px;
margin-left: 7px;
background-color: #F0F0F0;
border-top: 1px solid #616161;
border-bottom: 1px solid #616161;
z-index: 99999;
}
nav li{
list-style: none;
display: inline;
margin-left: 10px;
z-index: 99999;
}
The full jsfiddle: http://jsfiddle.net/zDzLs/
Any ideas?
Change css of rhs div to:
#rhs{
position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
your code was making my OCD go crazy.
I've revised it a bit for you here. Hope you like it.
http://jsfiddle.net/zDzLs/3/
<header>
<img class="logo" src="images/header.png"/>
<nav>
<ul>
<li class="active">Home</li>
<li>What is Counselling?</li>
<li>Personal Counselling</li>
<li>Relationship Counselling</li>
<li>Supervision of Counsellors</li>
<li>Life Coaching</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="container">
<div class="content-left"><div class="inner">LEFT</div></div>
<div class="content-right"><div class="inner">RIGHT</div></div>
</div>
* {
padding: 0;
margin: 0;
}
body{
background-color: #F0F0F0;
font: 14px Century Gothic;
}
header {
width: 960px;
margin: 30px auto;
}
header .logo {
width: 300px;
}
nav {
background: #F0F0F0;
margin-top: 30px;
overflow: hidden;
}
nav ul li {
list-style-type: none;
float: left;
margin-right: 2px;
font-size: 12px;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #333;
color: #fff;
text-align: center;
}
nav ul li a:hover,
nav ul li.active a {
background: #666;
}
.container {
margin: 30px auto 0;
width: 960px; /* 958px */
border:2px solid #616161;
overflow: hidden;
background: #fff;
}
.content-left {
float: left;
width:628px;
margin-right: 30px;
}
.content-right {
float:left;
width: 300px;
background: #f9f9f9
}
.inner {
padding: 20px;
}
Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.
Code
body {
background: #ffffff url(bgfin.jpg) repeat;
font-family: Tahoma,arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: url(body-line.png) center repeat-y;
padding-top: 65px;
padding-bottom: 65px;
}
#wrappertop{
background: url(header.png) top center no-repeat;
}
#wrappertbtm{
background: url(footer-new.png) bottom center no-repeat;
padding-bottom: 65px;
}
#container{
width: 959px;
margin: 0 auto;
}
.title{
width: 959px;
height: 56px;
padding: 15px 0px 10px 0px;
font-size: 30px;
color: #bd7821;
}
#navigation{
position: relative;
width: 959px;
height: 40px;
z-index: 2;
}
#navigation li{
float: left;
z-index: 2;
padding: 0px 34px 0px 0px;
}
#navigation li a{
display: inline-block;
position: relative;
outline: none;
height: 28px;
color: #e3e3e3;
z-index: 2;
font-size: 12px;
padding: 15px 0px 0px 0px;
text-decoration: none;
}
#navigation li a:hover, #navigation li#active a{
color: #bd7821;
text-decoration: none;
}
#header{
position: relative;
width: 959px;
height: 196px;
z-index: 1;
margin: 20px 0px 0px 0px;
}
Try:
body { padding:20px 0; }
Or:
#wrapper { margin:20px 0; }
That is shorthand for:
#wrapper {
margin-top:20px;
margin-right:0;
margin-bottom:20px;
margin-left:0;
}
Remember:
Padding is rendered inside of the element
Margin is on the outside
This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside