With css.
Please don't refer me to another link.
EDIT
Make something always at the bottom of viewport no matter how you scroll the bar.
If you're having problems specifically with IE6 - consider using a resets script. It will make your life much, much easier. There are lots of different flavours of reset script out there, so do a bit of research and to find one that you like. Personally, I find that yahoo produce one that's fit for purpose.
The thinking behind using a resets script is:
Each browser applies a set of
default styles and properties,
before any user style sheet is even
loaded.
A lot of the differences between the
way a page renders are due to the
inconsistencies between these
defaults.
If we could find a way to 'flatten
the ground' before we begin
building, life would be easier
A resets script performs that flattening - and IE6 can be dealt with in a much more logical way.
The obligatory link ;)
http://developer.yahoo.com/yui/reset/
Solution
Bearing in mind the use of this resets script, I offer you the following solution.
As you're probably aware, IE6 doesn't support position:fixed.
To solve the problem you can make use of the following snippet:
<style>
html, body {
height: 100%;
overflow: auto;
}
div#fixed-bottom {
position: fixed;
z-index: 2;
bottom: 0;
height: 20px;
width: 100%;
background-color: #eaeaea;
margin-top: -20px;
}
div#content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
* html div#fixed-bottom {
position: absolute;
}
</style>
Which should be applied to a document containing the following elements within it's <body></body>:
<div id="fixed-bottom">
<p>
I'm at the bottom
</p>
</div>
<div id="content">
<p>
Your content here.....
</p>
</div>
This should work because:
IE6 treats height in the same way that most browsers treat max-height. The overflow auto will allow content to flow (with scrollbars) if the content carries on past the height of the browser viewport.
The '*' hack is used for simplity - it makes sure that IE6 applies 'position:absolute;' rather than 'position:fixed'. You should use conditional comments to provide specific CSS for IE6.
Note that this solution will only work when IE6 is set to use 'strict mode'. This can be set explicitly by choosing an appropriate doctype; for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Related
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
My case
I am trying to put together a website with XHTML, CSS and JavaScript.
The document will use .png-images as their background,
not basic background color,
as that won't give the result I'm looking for.
My issue
Inside the body-tag of my page, I divide sections of my code with the division-tag.
There are two divisions that, with CSS, uses .png-images as their background,
but a 3rd division simply won't use it's specified background-image property.
Here's my code:
#bottomContainer {
position: fixed;
left: 0px;
bottom: 0px;
height: 25px;
width: 100%;
/* This will indeed work. But then again, this is not what I want. */
/* background-color: #89cff0; */
/* This works in other < div>-elements, and it should work here as far as I see it. */
background-image: url("http://placekitten.com/800/25");
}
<div id="bottomContainer">
This
<div> simply won't take a .png-image as background-image...
</div>
Conclusion
I must be overlooking something, either in the url, or another snare that
I can't see by myself.
Other division-elements will take the property,
therefore this must be a result of lack of
knowledge or experience.
In advance; thank you for your time and guidence.
I am trying to make a Asp.net website, The homepage design is a single page portfolio style; by having each or "projects" as 100% height of the view port underneath each other allowing me to use anchor tags. My problem is that when I am using the tag it messes up my css and does not work properly so how can I fix this?
I have tried the following:
/* in CSS*/
html, body{
height:100%;
width:100%;
}
And I have added the height 100% tag to each of the parent divs and or elements of the divs I want to be 100% but still no luck. I am out of options!
I can't post the full code because it is way to long and I am on a different computer to my one with code.
I think I understand what you're asking, but I'm not completely sure, nor am I sure where the DOCTYPE, anchors or ASP.NET come into play.
Here's a demo of a full page document, with a few full screen child divs.
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: auto;
}
div {
width: 100%;
height: 100%;
}
Please keep in mind that percentage heights can become a headache really fast, so you need to understand exactly what you are doing.
Also note, this page is running Normalize.css which fixes browser discrepancies.
I'm worried that the short answer to this question is NO.
But before I accept this fate I'll attempt a last ditch effort.
Usability concerns aside, is there any way I can do a div overflow for webkit mobile where, when scrolling, I do NOT see the scroll indicator?
I'm really hoping to avoid building a custom scroller in plain JS just because apple insisted on forcing the indicator to always be visible.
Any pointers much appreciated. I've looked around a lot but found nothing useful.
Reminder: I'm not asking about scroll bar customization!!! I'm asking about the indicator that shows during touchmove.
I think you can use this code. But this will only work in Chrome and Safari.
#element::-webkit-scrollbar {
display: none;
}
Technically you could do this in Chrome and Safari using the following CSS:
body::-webkit-scrollbar { display: none; }
However, for all other browsers you'll need Javascript. The basic algorithm would be as follows:
HTML
<div id="container">
<div id="content">Hello, here's lots of text...</div>
</div>
CSS
#container {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#content {
position: absolute;
left: 0px;
top: 0px;
}
JAVASCRIPT (pseudo-code)
When clicking on #content, check for drag
If dragging then measure amount and invert amount
Set that amount to top position of #content
Keeping with my tradition of answering my own question after extended research, the indicator can be hidden only by removing -webkit-overflow-scrolling:true CSS attribute.
This, unfortunately, also removes the spiffy scroll-elasticity feature, which is of course whey one would want to use the above CSS.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am a css newbie. I just draw a basic HTML page with following code:
<html>
<head>
<title>Hey</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-menu"></header>
<div class="container">
<div class="left-side"></div>
<div class="main-content"></div>
</div>
<div class="foot"></div>
</body>
</html>
Here is style.css:
.top-menu{
position: fixed;
top: 0;
left: 70px;
right: 70px;
height: 50px;
background-color: #000000;
}
.container{
margin: 70px 70px 20px 70px;
display: inline-block;
width: 91%;
}
.left-side {
width: 30ex;
min-height: 30ex;
float: left;
background-color: blue;
}
.main-content {
width: 80ex;
float: right;
background-color: red;
min-height: 100ex;
}
.foot {
background-color: green;
height: 5ex;
width: 91%;
margin-left: 10ex;
}
The purpose is straightforward.But the css looks crap.even some problems.I want to ask some questions:
1.The left and right margin of container is 70px, and the same to top-menu, but from chrome page view,why does it not aligned?
2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?
3.If I don't set container's display to 'inline-block', why does the foot part flying to the air? (even I set it to 'block')
4.Could you guys give me a better css style code?
I understand that you prefer to use CSS3 and the latest html standard but the <header> tag has not been adopted by that many browser vendors. I would stray away from using it. IE9 is the first IE to adopt it and there is plenty of users still on IE6/7.
Take <header> out and replace with a normal <div class="header">...</div> and then reference using css .header { }.
To answer #2 - you can not state width: 100%; and then add left/right margins and not expect a horizontal scroll bar. In principle, the container will span beyond 100%.
I am not sure why you are adding display: inline-block; to the container div. Only inline elements should ever have this declaration (i.e. text elemnts). Is there a specific reason why so?
Also, when you are first creating an html template and testing it out, make sure that you always add content into the divs and not simply leave them blank. Adding min-height: ... is not a fool-proof system. I always add in fake text - "hello hello" suffices.
Lastly, add an appropriate html doctype. Perhaps you trimmed it for the question part but is this xhtml or html? This relates further with the use of <header>. Not all doctypes support <header.
2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?
Because, you have margin which makes the total width more than 100%.
Apart from what's been already said, have you tried to use the chrome inspector to tackle theses issues? Just point the mouse on the page, right click and choose Inspect Element. There you can enable/disable some CSS properties and quickly find out what's wrong.
For firefox, the equivalent is http://getfirebug.com/
As for your layout problem: don't worry, this has been a real pain for all of us when we've started. If your point is not to actually learn css, if all you want is to make this to work once and for all and in time, my advice is: use a CSS framework with a grid.
CSS frameworks have usually a neat feature we call "the grid". It will allow you to set a layout like yours in 5 minutes, and stop worrying about how this div floats in this or that browser.
Plus: this depends of the website you want to use, but usually when you use a grid, what you do will by sexy magic look less amateur. (if you have a designer background maybe you already know this)
Take a simple Framework to start. Everyone has its favorite but I can recommend BluePrint to start. And here is a small demonstration of its grid system super powers ;)