I have coded this just in html and works perfect,
http://akaleez.co.uk/Templates/3/
I then try to make it a wordpress theme and now my footer will not go full across the screen
http://lisas-nails.co.uk/?theme=twentytwelve1
only the bottom black part does.
I believe the root of the problem you're facing is actually a matter of certain elements expanding the page scroll horizontally to be wider than the visible content. First, to identify the offending elements:
One of them is #sidebar. I'm not actually sure where this came from in your WordPress variant, because it's not present in the original HTML you coded. Anyways, the problem is that this element contains a <ul> which is styled to be 600px wide, resulting in the additional horizontal scroll. If you have no need for this element, just delete it, because it doesn't look like you're using it for anything. Or, just remove the width:600px on the <ul> element, because that's the root of the problem.
The other problem element is the .left element, which adds together its width:100% and padding-left:190px to extend 190px off the viewport. I can't say for sure why this behaviour doesn't occur in your original HTML/CSS - it's possible that there's CSS other than what you originally wrote at play here, since the two pages aren't identical.
To fix this, you can instead rely on the default behaviour of a <div>, which extends to cover the entire width of its parent, rather than using width:100%:
.left {
background-color: #000000;
color: #FFFFFF;
height: 30px;
padding-left: 190px;
padding-top: 10px;
text-align: left;
width: auto;
}
(Above, I essentially just removed the float and changed width to auto.)
The reason why most your footer isn't expanding into the additional space on the right is because it takes a width of 100% - that is, 100% of its parent, which in this case is only as wide as the viewport. But this isn't a new problem, if you make your screen smaller in the original page, you'll see that the footer similarly will not extend into space off of the viewport.
Anyways, I hope this is what you were looking for! If it isn't, or you find parts unclear, let me know and I'll be happy to help further. Good luck!
Related
I have these TWO websites which I just realised both have this issue, and it lies with the navbar. When on mobile device size they get these annoying scrollable white borders on just the right side.... changing padding and margin of anything doesn't help at all. But changing position: fixed; to relative fixes it but obviously makes the navbar not stick. So for some reason the z axis layer of the document is getting a bigger overall width than the body or normal y and x axis divs.....?
Site 1: http://myleisure.com.au
Site 2: http://danceforovariancancer.com.au
I'm not sure about your navbar being the problem. I can't reproduce it on my phone to know for sure, but I did test it on OSX Chrome at 320px wide.
I went into the dev tools and either deleted elements or manually added overflow: hidden; to find out where it made a difference. From what I saw, various minor problems are hidden throughout the sites that are causing overflow (and thus, scrollbars).
On the first site, this particular rule seems to be the actual culprit...
In "css.css":
.col-centered {
...
margin-right: -4px;
}
On the second site, you have nested .rows. A .container has 15px of padding to offset child .row's -15px margins. But .rows do not have the same padding, so they cannot be nested.
Your nesting problem appears at the "BONUS EVENT" heading within the
Acts section.
Also, add the img-responsive class to the image of Jane Hill's
signature in the About section.
Finally, at 320px width, the email provided in the footer is too long
to fit. I would recommend that you change the paragraph wording and swap it out for a mailto link like:
Emma Robinson
Try this:
html, body {width:100%; overflow-x:hidden;}
I am trying to create a div that will fill any empty space at the bottom of a page if there is any, or disappear if the content of the page extends to/past the bottom. I know this can be done using java, but I would like to stick to CSS as much as possible with as few wrappers as possible.
I have experimented with a few different methods but nothing has worked out so far and most of what I have come across is sticky footers, tables, and filling the excess on specific div elements (which this isn't since I want it to work on the whole page at the body/html level).
The furthest I have gotten (which still doesn't work) is to try absolute positioning with alternated top & bottom values, but setting top: inherit and then bottom: 0px just doesn't play well... Example: http://jsfiddle.net/V4RnC/6/
The basic problem comes down to: 1. Keep the top of the div where it would usually be just after the previous div 2. Extend the bottom of the div to the bottom of the page 3. Vary with content and page size changes 4. Disappear if there is no excess space.
Any help would be greatly appreciated!
Update: So far everyone seems to think it's a job for Javascript, so I came up with this quick jQuery solution: http://jsfiddle.net/V4RnC/7/ Feel free to rip me a new one on the code as I always appreciate the learning opportunity :)
If you want something for background purpose here, I would use a div, that stretches over the complete visible area (if the visible area is as large as the content, it's just hidden behind the content).
Then it would be something like that here: http://jsfiddle.net/V4RnC/4/ http://jsfiddle.net/V4RnC/5/
Here's the css code I used:
#content {
background-color: #F00;
/* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
overflow: hidden;
}
#fill {
background-color: #00F;
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
Here's a bit more info on that: http://codecamel.com/fullheight
I can imagine, that I sometimes had to use min-height instead of height for the body or html ... but can't remember when or why ...
I've got a CSS rule:
#map td {
border: medium none;
height: 32px;
margin: 0;
padding: 0;
width: 32px;
}
And I have a table inside an element called map. Each cell of the table is supposed to contain an image that's 32x32 pixels in size. But when I render it, either in Firefox or in Chrome, the map grid ends up severely squished under certain circumstances.
Examining it in Firebug, I find that the styles are all applied correctly, with the #map td style as the dominant rule for the cells in question, but when I look at the Computed tab, it gives the width property (under "Box Model") as 14.6167px. If I expand the width node, the only thing under it is: #map td 32 px, so I'm a bit at a loss as to what's causing all of my columns to be so much narrower than 32 px.
I'm sorry that this isn't much to go by, but I'm still fairly new to CSS so I don't know a lot of the right questions to ask. Does anyone know what can cause something like this to happen, and how I can deal with it?
UPDATE: After a bit of experimenting, trying to narrow it down to a simple, reproducible test case, it seems to be that the sidebar div is "squeezing" the main div and there's not enough room, so the browser is making the main one narrower, because when I remove the sidebar, everything goes back to the correct width. So now the question is, how do I set this up so that the width of the table is enforced as described and can't be squeezed by other elements to the side of it?
Keep your td/th with a defined width like you've already done.
For your table, set the layout to fixed, and you'll also have to define a fixed width as well.
table{
table-layout: fixed;
width: 64px;
}
I'm having a great deal of trouble in getting all items inside a specific Div to resize within that Div, depending on the Div's width (Which is currently width:100%).
I've tried using the display:inline-block but that doesn't seem to work. There has to be something that will work? Basically I have a Div Wrapper that is width:100% and then a Div Container inside that which is a specific width.
The background of a Div inside all of those, has a background image, which I need to automatically resize according to the width. The site resizes down so it is Mobile friendly, which is where I'm getting the issue with the background image being huge still.
The link to the page in question, is here - Link to Page
The below code, is the bunch of Divs mentioned above:
#content-home {
float: left;
min-width: 100%;
padding: 40px 0px;
}
.home_container {
margin: 0 auto;
width: 320px;
}
Hope you guys can help out at all! Just as a warning, it's a WordPress site too but this is specifically a CSS issue. I'm not too sure if there is a Javascript or jQuery function, able to handle this idea?
Thanks!
Mark
It seems like the problem is that you're mixing % and px units for calculating the widths. Try using only % for both widths.
If that isn't the problem, then try using just "width" instead of "min-width". It seems like the "min-width" property might be the issue.
Question
I'd like the CSS background texture for my content area to begin immediately after a variable-height header. The texture has a natural height of 900px and is graduated to a flat color, so if it fits in the available space between content-start and body-end, the whole texture should be displayed. The texture shouldn't artificially expand the content area or cause unnecessary scroll, but scroll should still appear when content is longer than fits in the page.
JSFiddle
On request, here's a JSFiddle of my issue. Since there's really only one DOM element in the question, I think the fiddle doesn't clarify much. http://jsfiddle.net/AbEUe/5/
What doesn't work
#contentAndBackground {
padding-bottom: 900px;
margin-bottom: -900px;
background: url('my900pxHighImage.png') repeat-x;
}
The above ensures the whole image is shown, but the negative margin doesn't keep the unnecessary scrollbars away as I'd hoped.
#contentAndBackground {
min-height: 900px;
background: url('my900pxHighImage.png') repeat-x;
}
Same problem. The whole image is shown, but scrollbars are always showing.
I'd like to avoid using JavaScript that needs to handle screen resizing.
I think I did it: http://jsfiddle.net/AbEUe/7/
I have created 2 container divs, both have a height of 100%.
The first contains header and background, and has overflow:hidden so the background is stopped at the bottom.
The second contains header and content, and because of use of positioning this one is on top of the first container, and it can stretch to more than 100% (if the amount of text requires that).
You can see you have to render the header twice, but that won't matter because the first isnt visible.
Edit:
Solved the last problem (see comment) by also setting the background to the content div. See http://jsfiddle.net/AbEUe/8/
Your question is not very clear, but this prevents your kitties from being chopped up.
#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}