I'm having a little trouble here. Designing a website where I wanted two equally-spaced bars on either side with an accent color, and the content in the center is in a 800px wide box with a white background. Basically, three columns with different colors. To do this I created a content div with margin-align:auto for left and right.
#container
{
height:500px;
width:800px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
So the problem I'm having is my content box is flush with the top of the browser window, but if the screen resolution is significantly high there's an empty space leftover from my content blocks not taking up enough space and the accent color shows below my content box. What would I have to do to make the content adjust itself to take up more space so this doesn't show through at the bottom?
Edit: try this http://i.stack.imgur.com/DuNXJ.jpg
Edit 2: Solved! Thanks to Blender, the link provided in comments to cssstickyfooter.com did the trick.
Here's the completed correct code, for anyone who stumbles across this and is interested.
Perhaps you should take a look at this: https://stackoverflow.com/a/8289963/1068386, think it might help you. A screenshot and more code would be helpfull in each case.
Related
My problem seems simple but yet I have tried everything and I cant come up with the answer. I am developing a website and on my main template I have an extra blank space either on both sides or on one side of the page because my HTML is wider than my main container, I would like to decrease the width of it so that the container fits the screen. any suggestions? I have seen the answers posted here before and it didnt help.
You don't really decrease the size of the html, the html is the size of the "viewport" which is the part where the webpage is displayed.
You can try this :
body {
width:100%;
margin:0%;
padding:0%;
}
So your main (body) container is the same size as the html and there will be no white sides.
This is a long shot as there is no code here to work with to see what you are actually talking about.
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
For a lot of you this is easy but it's making me mad:
I have a webpage (black area) where div (red area) contains some content which I don't know how much is.
If the content is less then it needs to reach the logo, the logo should stay positionend in that point of my div, it shouldn't go up.
If the content is more, it shuld go down (keeping a fixed distance from text)
How to achieve this?
The min-height CSS property:
div { min-height:400px; }
http://jsbin.com/oxodak/2/
You want a "sticky footer", but contained inside a div instead of the whole page.
Tweak the method shown here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;