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.
Related
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;
}
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'm trying to get emulate this textbox container. But the thing is I am trying to adjust the height of the header, this part:
They provide all the files (html, css, js) of that page here
I've been searching through the documentation.css file for a while now to figure out where it is I can adjust the height of that box but I have been unsuccessful so far. This is what mine looks like:
As you can see mine looks almost exactly the same just the height of that box is too big. I'm fairly new to web programming so i might not be looking for the right thing in the right place so I'm hoping some more experienced eyes can figure it out.
Thanks for any help
The css is minified, what makes it a little more complex for beginers...
But if you search for .main-content>header in the file documentation.css you will notice it's setting up a padding.
The demo in the link you posted has:
padding:15px 30px;
In your code the first number is probably higher than 15, setting up a higher top/bottom padding. Just adjust it as you will.
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:
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/