So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
Related
Hi I'm stuck to customize this additional CSS in Wordpress.I use a theme called Poza Child and it's maximum width (100%) as the picture below. I wanted to make a responsive navigation bar that fill the screen.
As you can see here, there's a gap (black and grey). I wanted to make a responsive navigation bar (all black) just like the one below.
However because of the theme used, I have to add additional CSS to make it full-width and responsive to any screen size. This is my code snippet of the wordpress additional CSS.
#primary #content {
margin-top: 50px;
}
#header .nav-main {
background-color: #000000;
}
#header .nav-main .container {
width: 100%;
}
.heading {
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
}
I've tried to change it to negative value, in pixels (eg. -380px) but it's not responsive for tablets and mobile. How can I overcome this? Thank you in advance.
Thank you to everyone. I have found my solution. As you guys stated, it's the container that had been the problem.
It should be like this:
#header .container {
width: 100%;}
I just deleted the nav-main. Thanks all!
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.
I recently got a Ning account. I want to customize the site a bit more using their "Add Custom CSS" option I would like the ning site to look as close to this site as possible. More specifically the green horizontal bar across the top of the page, and the location and spacing of the header group. I'm currently using the following CSS on the ning site but can't figure out how to make the green horizontal bar span the entire width of the page. Any help, advise or direction would be greatly appreciated.
.mainTab-item.active, .mainTab-item.active > a {
color: #00a6ed;
}
.site-header {
height: 0px;
}
.header-container {
margin-bottom: 15%;
}
h2.module-name {
background-color: #88C540;
color: #FFFFFF;
font-size: 16px;
margin-top: -15%;
max-width: 100%;
padding: 30px;
text-align: center;
text-shadow: 2px 2px 0px #609F16;
}
Here is the Commonly used CSS classes and HTML (ning.com/ning3help/commonly-used-css-classes-and-html)
The problem here is that your container has a width of 960px which the green bar is included inside. Therefore when you set max-width or width of 100% it is relative to the container. E.g. 100% of 960px is 960px.
The only way around this would be to change the mark-up and take it out of .container in order for the percentage to be relative to the document.
Or another option is to absolutely position the div to take it out of the document flow. But I strongly do not advise that.
I am having trouble getting the grey box on my page, https://com-bb-dev.com.edu to automatically resize to the width of the borders on the two boxes that are above it on every resolution. On 1440x900 it looks normal, or how I want it to look for every user, however I am using my second monitor here on a different resolution to test for issues such as this.
Here is what I have tried so far:
#loginText {
padding: 12px 80px 18px 80px;
background: #5f6062;
display: inline-block;
width: 912px;
border-top: 6px solid #DADADA;
margin-left: 10.6%;
text-align: center;
}
By default this div is not displaying as an inline box. Its entire container for whatever reason takes up the entire width of the screen(this is by default as far as I know). Thank you.
You need to make the following changes to the #loginText CSS:
Remove padding-right: 80px;
Remove padding-left: 80px;
Change margin-right: auto;
Change margin-left: auto;
Add width: 1072px;
Your issue is that your margins were percentage based, which scales on all resolutions. Your box above is an absolute size (1072px); this should make it match and center it as well.
I think I understand what you're trying to ask. The reason why the width of the gray box doesn't always match that of the two above boxes is because while the upper boxes have a set width, the gray box resizes with the browser window width (since it has a percentage margin on both sides).
Amend your style definition to this:
#loginText {
background: none repeat scroll 0 0 #5F6062;
border-top: 6px solid #DADADA;
margin: 0 auto;
padding: 12px 0;
text-align: center;
width: 1072px;
}
And I believe that gives you the behaviour you're seeking. If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
I've been staging up a site and building the basic layout when I ran into a little problem. I want to create a "notched" navigation, but I don't know the first thing about doing this.
I've tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the "notched" effect. I've yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.
ps. If you need more info just let me know - I'm a bit new to stackoverflow
Make your NAV LI tags & the A tags within them stretch all the way down to the top of your content block.
When an LI is the 'current' tag then place a triangle graphic as the background of the A tag within it.
li.current a {
background:url(triangle.png) no-repeat center bottom;
}
You'll probably want the triangle to be blue the same as the blue bar at the top of the content block.
Cappuccino is using the following css to mark the link tag.
<style>
#navmarker {
width: 1px;
height: 0;
position: relative;
margin-top: -0.7em;
margin-left: auto;
margin-right: auto;
border-bottom: #FFD48E solid 0.8em;
border-top: none;
border-left: transparent solid 0.8em;
border-right: transparent solid 0.8em;
}
div {
display: block;
}
</style>
Try to create a div and use the above css it worked for me.
<div id="navmarker"></div>