I have been trying to center a Navigation bar on my Vbulletin website for a few days now. I've tried changing the parent class, the child class, manually inserting CSS in the html element, but it seems that something is overriding the style somewhere. Firebug does not seem to identify the problem for me.
Link to the forum: http://www.mobileassaultgroup.co.uk/forum/
The navbar is just underneath the banner image.
I have tried
display: block-inline
margin-left: 50%;
margin-right: 50%;
horizontal-position: middle;
On both the <ul> and <div> to no avail; it just sticks there slightly off to the left.
It is not the search bar on the right hand side either as I deleted that from the page and it still stays on that position.
Any ideas?
Thanks
Something like this will work if you remove the search box.
CSS:
#navtabs_container {
display: block;
width: 600px;
margin: auto;
}
#vbtab_forum ul {
left: 50%;
margin-left: -260px;
}
This css of yours won't work. This this instead.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Related
So I'm trying to customize a slider that came in my wordpress theme with CSS. Right now, it displays three post thumbnails side by side. Unfortunately my featured images all have different aspect ratios, so I'm trying to create a kind of letterbox effect by giving the div that contains the image a fixed size (202px by 138 px) and a black background, and then centering the image within the div.
This is what I want it to look like:
Right now, all my images are aligned with the top of their container, so it looks like the shortest/fattest image just has a black bar at the bottom.
This is what it looks like right now:
I'm SO close. I've read up on vertical-align (I've already seen that "How Not to Vertically center Content" blog post [which I can't link to because of my awful reputation], which was useful and informative but didn't solve my problem), but at this point I'm just stuck.
My html looks something like this:
<ul class="slider">
<li>
<figure class="slide-image">
<a href="blogposturl">
<img src="blogimage" />
</a>
</figure>
//and then some other stuff//
</li>
</ul>
And then there's the CSS! My CSS looks like this right now:
.slider {
position: relative;
}
.slider li {
position: absolute;
}
figure.slide-image {
border-radius: 0px;
width: 202px;
height: 138px;
position: absolute;
background-color: #000;
}
.slide-image img {
border-radius: 0px;
position: absolute;
left: 0;
max-width: 202px;
top: 50%;
margin-top: -69px;
}
I basically followed phrogz's instructions. And yet, my image is still sitting there happily at the top of its container. I think the problem is that the image is inside a link tag? Or maybe it has to do with the container? I don't know. Can anyone help me?
I removed some of the absolute positioning on the img. Try this approach instead:
It uses display:table-cell, and vertical-align:middle for vertical centering.
Working example here - as you can see, it works for varying heights. I didn't change any HTML either.
figure.slide-image a {
display: table-cell;
vertical-align: middle;
height: 138px;
}
.slide-image img {
border-radius: 0px;
max-width: 202px;
vertical-align: middle;
}
so i have this fiddle http://jsfiddle.net/speeedracer/CGucm/ and as you can see when you mouse over any of the links across the top row, the popup div is under the list elements of the bottom row. anyone know how to get it to cover over the other page content? i changed the z-index to be really high so it appears on top, but it didn't work.
here's the drop-down box code:
enter code here.drop-box {
display: none;
position: static;
width: 400px;
height: 100px;
z-index: 9999;
background: #e8dfc2;
}
*i know i have some visual spacing issues, but i just need a working mockup without it having to be perfect...yet.
thanks!
z-index does not work with position: static. This is as if you had no position.
So changing your position: absolute will solve your problem and z-index will come into play.
I've been asked to change the layout of this charity website:
http://antidotemarketing.com/youthlife/
I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.
This must be done using CSS only.
So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)
One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.
Thanks everyone :)
OK, I think I finally understand what you are after. Try adding the following styles:
#logo {
position: absolute;
top: 80px;
z-index: 100;
}
#login #logo {
position: relative;
}
#page {
margin-top: 45px;
}
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
I created a wordpress blog (http://raptor.hk), but i am unable to set the right sidebar into correct position. i think i have missed something in CSS. the DIV is named "rightbar". I would like the DIV to be positioned right next to the content, within the white wrapper. Also, support of fluid layout (not moving on browser resize) is needed.
the problem is solved (see my answer), but anybody can give better solutions?
You can try putting the following styles for the div id "rightbar".
position: absolute;
top: 200px;
right: 300px;
That will put the "rightbar" div at the top of the page, just under the header and to the right.
I found a solution.
I put the DIV just inside the #main DIV, and set the following:
position: relative;
margin-top: 0px;
margin-right: 5px;
float: right;
width: 200px;
border: none;
border-collapse: collapse;