I have a layout of fixed-pixel width (960px) with a navigation bar that has five items in it. The width of the nav div is set to 100%, but its content ends up taking exactly 960px. The navigation is a bit complicated with a set of drop-downs and links. The problem is that zooming the page out at all causes the navigation bar to get clipped and move on to the next line.
Anyone have tips for how to avoid this?
Thanks a lot.
The only sure way I've found to do it is by defining all padding and widths using 'em'. This means everything will be relative to the font size and expand/contract smoothly as you change font sizes in the browser.
Here's a simple template I put together years ago that does the trick.
Since most browsers now zoom instead of only change font size, it's not as much of a concern, but older ones like IE6 still need a little help.
Related
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
I'm making some chevron style links for my web application, and have followed the tutorial here (breadcrumb links with css) in order to add them to the site. This all works fine. However when I start to shrink the size of the page they rapidly start to pile up on top of each other, and look crap. They remain the same width - whereas I'd like them to gradually shrink in width (and perhaps increase in height to accommodate the contents) as the page size shrinks. Ultimately I'll put in some that point down specifically for the mobile user.
Is it possible to tell bootstrap to shrink a block element or to scale it down as the available page width decreases?
I dont know, but maybe give the block this:
height:auto;
You only need to find the right class in bootstrap.css or bootstrap.min.css.
But if you want to edit somthing please use bootstrap.css and not bootstrap.min.css
If you view this HTML css site in either 1024x768 resolution or on a mobile device, the content that extends vertically beyond the browser is hidden and there is no vert scrollbar to do so. Is there any way to force it?
www.marketbridge.net
thx
On Apple OS, scroll bars are never shown anymore. I often find this a nuisance also, but I guess MacOS/iOS users are used to this. You could make some flyover indication with JavaScript using scroll height and scrollposition, but I guess you're better consistently using a pagefooter. This way the user 'feels' there is still content.
Another way to achieve this is only the upper half of the last displayed line of text is displayed (through JavaScript). The same effect is reached by displaying a rectangle with increasing opacity (0 to 100%) over the bottom of the viewport that makes the bottom of the viewport seem to fade out. If you make sure the page's bottom padding is equal or greater than the gradient, you have a nice indication of continuation, and the good thing is you can do with pure HTML and css.
I see many sites that suffer from this, and I've only been recently been immersed in backgrounds that stretch 100%...
Examples are
http://brassblogs.com/blog/sticky-footer
http://beanstalkapp.com/
if you constrain the width of the browser and scroll right, it looks visually off: the background doesn't carry over. How could you go about fixing this?
Edit: heh, as soon as I figured out the answer myself, I got the answer.... haha.
Your problem happens because the browser doesn't know when to stop scaling the webpage when you resize the window. You'll have to specify the smallest width that your design can tolerate:
html
{
min-width: 1050px;
}
The min-width is kind of large, but if you make it much smaller, your background will bleed through and cause layout issues.
Also, you'll have some issues with layout if you use percentages along with borders, margins, and padding (which is partially why your background images aren't sticking properly).