I have this site:
link
The problem is is that after a certain resolution, my div is not until the end.
Look at the image below to see more clearly what the problem is.
White space appears on the right who do not know where it comes from and how to remove it
Can you please tell me where you think comes this problem?
Thanks in advance!
You are specifying the width of the header/footer.
You have use absolute positioning for a few elements. Eg: the link "dg-design.ch"
Fix : Don't use absolute positioning(or use it carefully), in your case remove the width you have specified.
But I would suggest use bootstrap and rework on the page, since you may find many more issues in compatibility with different screen sizes.
Why don't you try this:
body{
margin:0;
text-align:center;
}
Related
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
I try to fix the layout, because if you see this link from you mobile you can see that the whole right part goes off canvas for some pixels.
I tried setting a max-width:1280px; attribute but it didnt work. Does anyone an easy fix?
Maybe I should define a body max-width ?
http://www.2kfilms.com/films.html
In your page and films-list styles you are defining fixed with. These will never be 'squeezed'. If you want them to get smaller somahow you need to define them differently. There may be more places in your code where you are doing that. Fix that to fit.
I am trying to use a div to push the contents of a webpage down by 150px (the space will be used for a header image later that I don't yet have).
However because the div is blank or empty, browsers are in effect, ignoring it.
The html:
<body>
<div id="header_block"></div>
.... rest of document....
The CSS:
#header_block{width:100%;height:150px;min-height:150px}
The rest of the document works fine, but, even when I get the header graphic, its going to be applied as a background image.
Is there any way to stop the browser from ignoring this header_block because it thinks its empty?
What you want to do is give the main <div> a margin-top:150px ; that will push it 150px down from it's position in the flow then you should be good to go insofar as making your background image appear.
you can use trans.gif (a blank small image) using width and height according to your need. Then proper space will set.
Regards,
Arun Kumar
Try this:
#header_block{width:100%; border:1px solid;height:150px;min-height:150px}
So that you will get a look for header_block.
Divs don't hide if you've set their height explicitly via CSS. If it is hiding you've got other problems, likely due to a typo or incorrectly linking a stylesheet.
If you need a placeholder image, I use http://placehold.it/ which I find very convenient.
I have no affiliation with placehold.it
Something like https://placehold.it/300x100 gets you:
I created a select box using HTML and styled it using css:
#footer {
padding-bottom:60px;
position:absolute;
}
This disables the select box and makes it unclickable. But if I remove the "position:absolute" the select box works fine but it screws up my positioning. Does anyone have a solution for this?
EDIT: it works find when position:relative is used, but it's unclickable when position is fixed or absolute. I used for the HTML part.
These kind of issues almost always result from another element overlapping the textbox. To resolve the problem I usually use the inspector tool in firebug. When you click the text box it will select the invisible element instead which will give you a much better picture of what is happening.
That being said the usual fix is setting a higher z index as Simon pointed out.
It's difficult without knowing what other code may be effecting it. Try setting the z-index to high, or give us an example of the html aswell.
You've got something else wrong if the select is unclickable.
See this JS Fiddle: http://jsfiddle.net/SFUkR/1/
Absolutely positioning a select (or its parent container) does not make it disabled by default.