I've got this issue with a site design.
When resizing the site (in height) the text of div #output go's over the footer, over the edge. I want to keep it inside the white part of #output's container div.
In ie7, #output doesn't stretch 100%, can't seem to fix that.
I've made a copy of this site, you can check it out at following url: http://test21.c-tz.nl/index.php?id=main
This is being caused by the margin on top of #output, the DIV that is getting that fancy scrollbar stuff applied to it. The JavaScript is setting the height correctly, but when you add the margin, the container is too large.
You could try adding another DIV inside of the #output DIV and calling the JavaScript on that instead. That would allow you to keep the margin you have and hopefully allow the JavaScript to calculate the width appropriately.
Related
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
I have a fixed size layout where I center the content container.
I want the menu (home, about, contact, login), to span 100% of the screen.
Take a look at this jsfiddle: http://jsfiddle.net/Hxhc5/1/
The result I want is this:
I have tried a to make a 100% width container with the menus, where I would have a container inside to center the menu, but it did not work well, because then the layout is relative, changed with the window size.
Wrap an extra div arround the menu, give it the grey background, remove the extra padding, make the menu bg white:
http://jsfiddle.net/sg3s/Hxhc5/3/
This is problematic when we want to keep the space between the menu and the right col 'open' though.
The easiest way and probably the best is to have a mock image of which the middle is left 'open' and use it as a background. Since a png image of this type is insanely small it is better than more markup, css or a js solution, plus it has no quirks if used correctly:
http://jsfiddle.net/sg3s/Hxhc5/10/
You also showed your actual developement site; if you want to implement this for the menu you will have to make the menu fixed height (everthing else and its width can still be fluid) due to the type of opacity you use in the layer. The same background trick can be made to work with it.
Why not use a background image that spans the entire page instead?
Just add the content of the menu into another div, with width: 500px, margin: auto; and set the menu width to 100%. Here is updated jsFiddle : http://jsfiddle.net/Hxhc5/2/
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.