I building an iPhone webb app based on iWebKit's framework. I'm currently integrating a CSS div slider to improve the navigation between pages (divs) and everything works fine except one thing.
It appears as if I'm supposed to set a fixed height value to the div containing the sliding objects. These objects will contain quite a lot of content and wary in size, hence the divs/page have to expand vertically by default. For some reason, it appears as if the browser interprets min-height as height and doesn't expand the div to display all content. I realize there's probably a small mistake somewhere, something I have forgotten to add or remove. Please help me by pointing these out for me. Thanks
Wrapper containing the slides:
#contentWrapper {
float: left;
min-height:305px;
position: relative;
margin:0px;
padding-bottom:0px;
display:block !important;
}
Class added on every sliding obj
.additional-block {
height:auto;
position: absolute;
padding-bottom:30px;
display:block !important;
}
Live demo: http://utvecklingspunkten.se/heightIssue.php
Click on "Click" to see the actual issue appearing; the text is cut off below 305 px. The issue appears in all browsers including Safari for iPhone.
It's the overflow: hidden on your "content2" div that's conflicting here. Setting that means that the container can overflow, so it does. (Removing the min-height will show you that it would be 0 pixels high otherwise.)
Removing the overflow setting will have the effect I think you want.
Related
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I am having trouble with a navigation bar in html. I would like it to be able to adapt to size changes, however when the screen gets really small, the navbar simply overflows and sort of tiles up (I don't know if i'm using the right terminology). I would like it so that when the browser gets really small, it simply goes off the screen rather than tiling up.
I would still like it to be somewhat fluid, however just once this nav bar limit has been reached, simply prevent it from getting smaller.
I've tried applying a min-width property, however when I make the screen smaller, the <li> elements flow outside of the coloured background.
Here is the jsfiddler:
http://jsfiddle.net/zP4jm/12/
Added the min-width on your jsfiddle and works fine.
.navmenu{
height: 45px;
width: 92%;
margin: auto;
margin-bottom: 20px;
background-color:#C60;
min-width:700px;
}
You need to add "overflow: hidden;" to the .navmenu class, so that anything that goes out of bounds will be clipped.
Using the min-width attribute would otherwise work if you'd rather have a scrollbar shown when the window gets too small.
I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.
Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.
Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.
Here is a jsfiddle with my code and problem:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
What is currently happening;
The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.
The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)
What I want to have happening;
I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )
Let me be a little bit clearer on this:
The 100% height layout needs to stay and be compatible with IE7+
The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
My example looks and acts correct as long as the viewport is large enough to accomedate the header.
The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
Updated the example to make the change / centring a bit more obvious.
If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.
Thank you for at least trying! (Challenge yourself! :D)
This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+
Example: http://jsfiddle.net/XVraD/3/
Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.
EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/
EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/
It is a hard one, the only real solution I can come up with is this that you use Media queries like this:
#media all and (min-width: 970px) {
body, html {
overflow-x: hidden;
}
}
It is not supported by old browsers, there you would need a Javascript!
As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.
<div class="outer">
<div class="header">
...
</div>
<div class="container">
...
</div>
</div>
CSS:
.outer { ... }
.header {
max-width: 1022px;
min-width: 970px;
margin: 0 auto; }
.container {
width: 970px;
margin: 0 auto; }
Demo: http://jsfiddle.net/Wexcode/tJXHF/
http://jsfiddle.net/QrVJJ/
#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.
#header {
margin: 0 auto;
z-index:5;
min-width: 970px;
max-width: 1022px;
height: 201px;
background: #390419;
overflow:hidden;
background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}
How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.
Having this one in Chrome.
http://jsfiddle.net/A9vzA/10/
Put an inner div inside the #header
The header has position relative and no float and with 970px
The inner div has position fixed and width 1022px and margin 0 -26px
--edit
but doesnot work in IE7
--edit
this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div
The first inner div is position fixed and width 100% and text-align center
The second inner div is margin 0 auto and width 1022px
Can anyone test it in IE6
--edit
nope doesnot work if you got content in your #container. position fixed is no option
Is this what you're after:
http://jsfiddle.net/HbxTQ/8/
Fullscreen:
http://jsfiddle.net/HbxTQ/8/embedded/result/
(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)
sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.
My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.
My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.
http://jsfiddle.net/dylanvalade/ZcejP/
There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}