I am having a problem using fixed positioning with my top navigation bar. I have taken off the code that I have tried and just put it back to normal so maybe someone can see why I am having these problems of formatting when I try to fix the position.
#main-header {
/*background:url(images/house.jpg) no-repeat center top;*/
height:734px;
border-bottom:10px solid #162b4b;
}
.epicFullscreen {max-height:735px !important}
.epicFullscreen img {min-height:735px !important}
#top-bar {background: #162b4b; height:60px; margin-top:-98px; margin-bottom:70px}
#top-bar nav {padding-left:260px; padding-top:10px; color:#9297a2; width:75%; float:left}
#top-bar nav a {color:#9297a2; margin-right:30px; text-decoration:none}
#phone {float:right; color:white; padding-top:5px; position:relative; right:90px; top:-15px}
#phone a span {font-size:30px; font-weight:bold; color:#93da04; !important; cursor: default}
#phone > span {font-size:18px; font-weight:bold; color:#white; !important; cursor: default}
a[href^=tell] {color:inherit}
#logo {
width:233px;
height:98px;
background:white;
position:relative;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
display:block;
cursor:pointer;
}
#logo img {position:absolute; top:10px; left:30px}
When fixing the position, it will take away my top blue bar that sits under the nav text, and fix the nav text to the top and screw up the formatting I have with my phone number (which is a dynamic phone number for split testing purposes with call tracking metrics and analytic's).
I can get it to scroll with the page, but besides the formatting being wrong, while I scroll, it goes underneath some objects and text on the page, not all, while I am scrolling.
Any insight would be greatly appreciated, I have read through some of the questions around this issue others have had and the answers are close, but I have not found a solution that works 100% for my website yet.
This works for me, I have assumed your main header div contains your navigation bar.
#main-header{
height:734px;
top: 0px;
position: fixed;
border-bottom:10px solid #162b4b;
}
Related
I have a small text in the footer. The text is aligned to right but i want the text to move up slightly? how can I do that? my code
#foot tag {
width:1000px;
height:30px;
padding:10px;
border:5px solid white;
margin:0px;
text-align:right;
padding-top: 10px;
}
#foot tag {
width:1000px;
height:30px;
padding:10px 10px 20px 10px;
/* You can adjust the above 4 values to add padding to top, right, bottom and left */
border:5px solid white;
margin:0px;
text-align:right;
}
You can do a couple things, it's tough to say without seeing the live site.
1) decrease the top padding by changing:
padding: 5px 10px 10px 10px;
2) use a negative top margin:
margin: -5px 0 0 0;
You can try this. Top and left css property will move you p in parent div
<div style="position: relative"><p style="position: absolute; top: 1px"></p></div>
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work
So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.
I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).
Below is an example of my issue.
http://dabblet.com/gist/3483670
I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.
Thanks for all the help.
Incase the Link does not work for you. See Below.
CSS
a {font: 19px/26px 'Exo',Arial,sans-serif;
list-style: none outside none;
margin: 0 0 0 -10px;
padding: 0 0 58px;
font-weight:100;
text-transform: uppercase;
width: 100%;
text-decoration:none;}
a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}
.triangle { width: 0;
height: 0;
background:no-repeat right center;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid black;
display:inline-block;}
HTML
<span class="plus">+</span> <span>HOME</span><span class="triangle"></span>
You can add
a[rel="catagory"] {
vertical-align:middle;
display:inline-block;
width:auto;
line-height:25px;
}
.triangle {
vertical-align:middle
}
Explanation:
The part which aligns them is
a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}
But anchor's height is 22px, so we need
a[rel="catagory"] {
display:inline-block;
line-height:25px;
}
in order to make the height 25px.
But you have another rule (I wonder why):
a{width:100%}
Before setting display:inline-block the anchor has display:inline, so that rule does nothing.
But now it works and we want to disable it, so we need
a[rel="catagory"] {
width:auto;
}
Since i won't be able to post an image here's the link to it
http://i.stack.imgur.com/LxO1e.png
I have this website, the PHP and all other stuff are working. The problem is that when I scroll up to see other stuff below, the elements that get scrolled up goes over the header instead of going under. How do I solve this?
I can't seem to post the HTML in here, I tried the indent four spaces thing but it doesn't work with HTML stuff so instead here is the site: pageboost.comze.com
Here's the css for the main that is going over instead of under
.inmain
{
width:95%;
height:100%;
left:20px;
top:42px;
position:relative;
}
and here's the css for the header
.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
}
You have to define z-index with one these positions relative,absolute or fixed.
For example write like his:
.header{
position:fixed;
z-index:1;
}
just define z-index value into your Header class or Id where you have defined the position.
It happens so when you will give the z-index value i hope that will work smoothly.....
UPDATED ANSWER
I have given the z-index value in header class its working fine now please check it.....
HTML
<div class="header"></div>
<div class="inmain">afdadfasf</div>
CSS
.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
z-index:1;
}
.inmain
{
width:95%;
height:100%;
left:20px;
top:35px;
position:relative;
}
for better understanding see the live demo:- http://jsfiddle.net/X8vpg/6/
I'm trying to center the entire link and i'm struggling for a solution. I'm using a simple sliding door style for my link and I'd like it to be center.
Here's a demo you can interact with: http://jsbin.com/ibidu3
<style>
a.btn_blue {
background:url("http://img291.imageshack.us/img291/2600/btnblueleft.gif") no-repeat scroll left top transparent;
float:left;
text-decoration:none;
margin-right:4px;
padding-left:5px;
color:#fff;
}
a.btn_blue span{
background:url("http://img826.imageshack.us/img826/1531/btnblueright.gif") no-repeat scroll right top transparent;
float:left;
padding:6px 10px 10px 4px;
}
</style>
<span>Learn More: <strong>Benefits</strong></span>
If you are talking about text not being centered within the anchor tag then that is due to ppadding in a.btn_blue span being different on the left and right side. padding:6px 10px 10px 6px;