I'm fairly new to web development, but I just realized something when designing some new headers/footers. When you wrap them in a container with a background image/color that stretches across the page, then shrink the window of the webpage to be smaller than the intended width, and then scroll across to view the content that you can't see in your smaller window, the background image container is no longer large enough (as it resizes to the width of the window automatically, even though the content in it overflows), and you see whitespace instead of the background image.
Take the homepage at http://www.stumbleupon.com for example. Shrink the window, then scroll to the right. All of a sudden ALL of their background images are gone. Header, body, everything. Just content on top of the flat, default color.
Is there a solution to this? Is this just ignored in web design as an irrelevant concern? It seems fairly relevant to me, especially when doing things like viewing multiple tabs/windows at one time, or if someone is (god forbid) using a monitor with a resolution width smaller than 1024.
StumbleUpon have just been careless with container divs. They've set a container div with a width of 100% and then the header div inside that is set to 100% of that.
<div id="container" style="width:100%">
<div id="header" style="width:100%">
Header Content
</div>
</div>
The container div stretches to the visible window width. The sub-div then only stretches to that divs width. If you put the header outside of the container div it will stretch to the full width of the page.
<div id="header" style="width:100%">
Header Content
</div>
<div id="container" style="width:100%">
</div>
See my homepage: http://smallhadroncollider.com for an example of full width headers.
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
I have created a html page which simply has a div and an image inside of it.
My problem is when I resize the browser screen, the image is also resized. I would like to make something to whenever the browser screen changes its width, for example, the image keeps the same resolution by showing scroll-x to see the entire image.
I could do it by doing some workaround. Please see the fiddle below:
http://jsfiddle.net/EB2cq/
<div style="width: 1424px; ">
<img src="http://1.bp.blogspot.com/_duWYbLDtB5s/RxD10qnsOZI/AAAAAAAAACc/9nPZhQRAVZ4/S658/google_logo_halloween_d-(mip.jpg"/>
</div>
As you can see I can scroll through the image when the browser screen changes its width. But in my case I don't want to see the width of a div cause I only want to show the scroll bar when it is really necessary.
If you remove width style attribute from div in the fiddle above, the behavior is what I'm expecting. The div gets the scroll x only when the width of the page is less than the width of the image. However, in my web application, the same thing does not happen. The image is also resized according to browser width.
What can I be missing here? I have exactly the same fiddle code in my web application
I took a look at this question but it has not helped so much:
Get image to stay fixed even with window resize
Have you checked the style of the parent element(s). That might be the issue.
I'm wrestling with two unruly elements - a navigation menu and background bar (kept separate to deal with an opacity issue). Their positions are fixed so they stay visible during scroll. Their widths, which should mimic their parent's, is set with a 100%. Unfortunately, when the window is stretched narrow enough their width extends outside of the parent.
This is a diagram of the html:
<html>
<body>
<content>
<nav-bar>
<nav-menu>
...
</content>
</body>
</html>
Showing should be easier than describing, so here's a link to the page:
http://www.seanoneill.us/test/index.html
When the browser is stretched beyond the max-width of the content, everything looks fine. When the browser is made narrow, the right end of the nav-bar and nav-menu breaks out of the content width. In other worts, the right edge of "Contact" should be inset from the right edge of the content div by 20px of padding. The best way to see this is to scroll down a big so the menu covers an image and the semi-opaque nav-bar is visible. Then stretch the browser to the max-width of the content and wiggle it back and forth over that threshold.
Can anyone tell me how to keep the nav-bar and -menu inboard of the content div?
I've held off listing any of the css here since there are a handful of elements involved and I have no idea which is the critical one. I'm hoping it's acceptable to just post a link.
Thanks so much for reading.
You have content { min-width:700px }, and with your nav floated right, it will stay there.
If you can remove the min-width it will fix itself, or you can move .nav-manu outside of the .content container and, if you don't wrap it with something else that has min-width, it will honor the width of the body/window
Ok, so the issue is I have a header, footer and the content div and what I want is for the content div to auto fill the height of the browser between header and footer making the footer stay on the bottom of the page, or below the content length.
when you go to incard.com.au you can see the issue on the index page as the content area is smaller then the browser window so we have added a height to the div to solve the footer floating issue.
I fixed it using jquery
$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
$('#contentbody').css({'height':(($(document).height())-320)+'px'});
Remove the 'min-height: 700px' from #contentbody
So what is supposed to happen when the browser window is smaller than the height of the div?
You can set the height of the central div at 100 percent. For example, make the content div 100%, make the top and bottom fixed heights. That's kind of a hack but it works sometimes I think -- the 100% won't compress the fixed height top and bottom -- it "tries" to be 100%.
What I'm unclear about is what's supposed to happen as you make the browser window smaller. Is the header and footer supposed to stay glued to the top and bottom of your browser, while the content area gets smaller and smaller?
The only issue I see is that the orange borders on each side of your content area stop half-way down the page when the content doesn't reach the footer.
The most common way to fix this issue it to make those orange borders a background image and have it repeat-y inside of .sitewidth
I was able to fix the solution by using Javascript, it seems that to get the height of the content to fit the whole screen correctly I had to do a math thing where I took the height of the footer and header away from the browser screen size and then that gave me the min-size of my content body. as it is different on each users screen size it had to be a javascript set function.