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;
}
Related
a client has asked if he can have the header area of his site static so it is always visible?
I am using the Eris template: http://hogash-demos.com/themeforest/?theme=eris_joomla
My site is: http://www.negotiumrecruitment.co.uk/dev
The top area with the logo, contact info and navigation plus the line below all wants to stay where it is and when scrolled, the whole site moves up and the top area always remains visible.
Thank you in advance.
Paul Walker
You can try:
#rt-header {
position: fixed;
top: 0;
width: 100%;
}
An element with a fixed position is positioned relative to the browser
window, and will not move even if the window is scrolled
Source: http://www.w3schools.com/css/css_positioning.asp
Edit: seeing the website you proveided, you will also need to change your #rt-logo CSS rule. It's currently 'absolute' and should be 'fixed' instead:
#rt-logo {
display: block;
position: fixed; /* Instead of 'absolute' */
left: 50%;
top: 0;
margin-left: -470px;
z-index: 9999;
}
This is because your logo stays outside your header in your template. Normally it would be inside the header and you wouldn't need this.
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
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 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
I've been fooling around with z-index all over the place on this site. What I want is to have the sidebar tucked underneath the curved header image. Here's the WP site I'm working on: http://evansvillechamber.org/wordpress/ and here's how it looks in HTML and which I am trying to replicate: http://www.evansvillechamber.org/. I tried setting the sidebar to a - z-index and the header and branding image both to high positive z-index, but nada. Also tried moving the sidebar around in the index template. Any other ideas? Thanks!
Just add a position:relative to line 165 of your style.css file and that should fix the problem.
screenshot
Try adding "position:absolute" to your element. Something like this:
#primary {
float: right;
margin-left: 720px;
position: absolute;
z-index: 1999;
}
Please let me know if that works for you or not. Thanks!
Ok, try adding "position:absolute" to #branding and adding margins to #primary:
#primary {
margin-left: 900px;
margin-top: 25px;
}
#branding {
position: absolute;
z-index: 2000;
}