So I have the following page with a navbar: http://michigangurudwara.com/pclass/
and it doesn't look bad, but when you resize the browser, everything overlaps. What I want is for the navbar to fill up the whole width and then when the screen is resized a scroll bar should pop up, but when I do width:100% in the .navbar class, this doesn't happen. The only way to get a scroll bar is with an absolute width. But if I do that, I can't take up the entire screen width for different monitor sizes. How would I do this?
Set a minimum width...
.navbar {
min-width: 1000px; }
Anything less than that will cause the scroll bar to appear.
This is certainly a different style to navigation, to have the nav bar always the same width could make large issues for many users. A better approach is to set the page width to say 1000px; and then have auto sizing margins on either side.
.navbar{
width:1000px;
margin:auto;
}
However if your determined to do it this way then you could always get the browser width with Javascript and then use that to set a dynamic width variable.
I was also going to suggest minimum-width:100%; but I think you'd still come across the same issue.
The problem is when using percent the template will re-size to the browser width where as pixels will always represent an absolute value as you mention.
Related
I'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
At the moment i have a site with many divs set at certain sizes to keep the layout correct.
The only problem is that on some displays the footer is always off the bottom and you have to scroll to it.
I have noticed other sites where no matter the screen resolution, the footer will always auto scale to the bottom of the screen.
Is there a way, other than going through all of my divs and using % for all the heights, to set the footer tag to always be at the bottom of the screen?
My basic site is jj-triggs.com which has a footer that, if on a widescreen monitor or smaller resolutions, pushes the footer off the bottom and you have to scroll to it,
It is possible to fix by changing the size of the divs, but there are so many that would have to be changed. There must be a simpler way of doing this?
Without using % it will not fit in all screens correctly.
You can try bootsrap I use this to fit in all screens.
Then to fix the footer.
Create a empty div before and make it style to clear:both
or you can try
Position:fixed; bottom:0;
But this will always keep the footer on screen no matter what the page size is
Are you searching for making your footer fixed to the bottom ? If so you can do that with CSS :
position: fixed;
bottom: 0;
I know a lot of people ask questions on this, but I have a spacing problem with my divs.
My main div tag of my web page is 1024px. The problem is that on smaller screens part of my
page gets cut off and you have to scroll horizontally. How do I fix that so that the page will
fit in any window? (especially the smaller ones)
I do not want to use the width:100% property cause I already defined the width as 1024px.
Here is my main div tag's properties:
<div id="main" style=" margin: 0 auto; padding-top: 50px; width:1024px;">
my content.....
</div>
A more common width for a Web page is 960px just to avoid the problem you are encountering. Sorry, the only way to fit your page into those smaller screens is to reduce the width for your main div.
If you are using a fixed width, in this case 1024px, you cannot make the page fit in any window.
You should have a read of Responsive Web Design which explains how to incorporate flexibility into your design.
I'm assuming you don't want it wider than 1024px? If so, set the max-width property on it:
#main {
max-width: 1024px;
}
then, it will fit the screen, but not go larger than 1024.
is i t possible to get the body or any other element to fill the whole height of the browser in any resolution with css?
many thanks
You might try using:
html,body{
height:100%;
}
This is often used to force scroll bars in browsers that only show scroll bars once the content on the page forces the height to be below the fold. (keeping the page consistent and stopping it from jumping left and right depending on page height).