Is it possible to set the default zoom level on a site? For instance, could I code my site in such as a way that it is zoomed to 125% when a user opens it?
My website body has this code
<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
How to put this zoom code inside?
Add zoom: 125%; to body style
body {
color: #536482;
background-color: white;
zoom: 125%;
}
This does not directly answer your question, but is an alternative that I recommend considering.
If you use relative sizing for your page (such as em), then you can set the base size of the site in one place, and the whole page will scale up and down accordingly.
For instance, if I want 125% of default size:
body { font-size: 1.25em }
Then, suppose I want a reasonable amount of margin around a header <div>:
#header { margin: 1em }
If I then go back and change that base size on the body to something else, the margin on my header will scale with it. If you do your entire page in relative units, this becomes very easy to do.
You might want to check the zoom CSS attribute. Bear in mind however that it is part of CSS3 and that, therefore, you might find it to behave oddly on old IEs. This is also completely separate from the interface zoom.
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp));
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,htmlContent,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
Related
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
Please have look at this page & its source code.
http://www.chemfluence.org.in/monetarist/index_copy.php
Web page is not showing from top of the web page. There is a gap of around 10px from top of the browser.
I have higlighted the gap in above image.
Could you please anyone tell me how to display the page from top 0px ?
Chrome has a default margin of 8px built into the browser, in your CSS use:
body{ margin: 0 }
It's always handy to use some sort of CSS reset, to prevent inconsistencies like the above between browsers.
Something like this: http://meyerweb.com/eric/tools/css/reset/
This is because you haven't explicitly set a margin for the body of your document and some browsers then use a default one.
To fix that, add something like this to your CSS stylesheet:
body {
margin-top: 0px;
}
The default browser style sheets add a margin to the body Tag, so you have to set the margin of the body to 0:
html,body {margin:0;}
By the way, you should not use a table as a layout grid.
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
Here's an image:
The HTML is in a php which is as follows:
print "<p class = 'Back'>Epic Fail</p>";
print "<p>You forgot to put in your Username or Password.</p>";
The CSS for the Back class and p is as follows:
p.Back
{
font-size: 200px;
display: block;
text-align: left;
font-style: oblique;
}
p
{
font-size: 20px;
color: #292421;
font-family: Times;
}
This is all wrapped in a div tag that has around 25px padding, why is there so much white space? It's a problem because it creates a scroll bar which I don't want and it doesn't look very good.
EDIT:
Here's the div:
#login
{
background: #E0DFDB;
width: 1200px;
margin: auto;
}
I'm using the latest version of Google Chrome (Sorry for not specifying)
The scroll bar is successfully removed by taking away the padding from the login div and the line-height. However, there is still the white space and I have thoroughly ran through all of my code to see if I've added anything to the p tag but I couldn't find anything. Is there a site where I can upload all of my code to show you guys?
RESULT:
Thanks guys, I decided to use the web dev tool that came with google chrome and IT TURNS OUT: THE MARGIN BY DEFAULT SOMEHOW GOT SET TO 200PX??!! so all I had to do was just set the margin for p to auto
This happens because, by default, Chrome applies a style of -webkit-margin-before: 1em; -webkit-margin-after: 1em to p elements. In your example, this would create a 200px margin above and below the element. Setting margin: auto or any other margin value overrides this default.
Other browsers apply a default margin to p elements in different ways: e.g. Firefox applies margin: 1em 0 which results in the same effect.
The margin does not appear on jsfiddle because they employ a reset stylesheet which gives p elements margin: 0.
I've created a JSFiddle version of the code you've posted -- see http://jsfiddle.net/RukbS/
In my JSFiddle, I can't see the massive empty space beneath the "Epic Fail" which is in your screenshot, so I guess there's something in the code you're running which you haven't shown us.
Without seeing your code actually in action, it's hard to know what the difference is between it and the version I've created, but looking at the screenshot, it looks very much as if the "Epic Fail" paragraph has run over two lines.
The only way I could get my test to replicate this was by putting <br><br> immediately after the word "Fail". I'm assuming you're not doing that.
You might want to consider dropping the line-height attribute from the stylesheet. It isn't really achieving much (as it will pick up that size anyway due to the font size), and is the sort of thing that might be causing what you're seeing. If you really do want a bit of extra space around the text, use padding or margin instead; it's easier to control than line-height.
You didn't state which browser you're using that shows this effect. It is possible that you're seeing something that only shows up in certain browsers. Most browsers these days come with a good debugging tool which can help isolate issues like this. In Firefox, you'll need to install the Firebug plugin; in most other modern browsers, the Developer Tools feature is built in.
Open the Firebug/Dev Tools window, and use it to find the "Epic Fail" element. It will allows you to examine the size and shape of the element, and what styles are being applied to it. This will almost certainly give you the information you need to work out what the problem is.
I know I haven't given you an answer that directly solves the problem, but I hope some of the things I've pointed out here will lead you in the right direction to finding the problem.
Not sure what you are trying to accomplish, but the combination of
padding on the div and
extra line-height
might be causing the excess.
Right now, your adding
50px from padding (25px on top and bottom)
50px from line-height (which is 50px more than the font-size)
I tried your current code in a fiddle and it seems to work fine (drag the bar to the left to see the entire screen)
http://jsfiddle.net/jasongennaro/aNRhN/
Perhaps there is other code being inserted with the PHP?
Or you have other styles applied to the p.
I am going to start on a website whose requirement is to change the color scheme after every 2 weeks.
I am looking for a dynamic solution to change colours and somewhat structure of a website using css & php.
One solution which i can see is using dynamic css method for example
<?php
header("content-type: text/css");
$mencolour = "#ff0000";
echo 'h1 {color:$menucolor}
?>
Other solution is using some php classes to do the same task.
such as one is available on phpclasses website.
http://www.phpclasses.org/package/6482-PHP-Parse-and-process-Leaner-CSS-files.html
Is there any other better way of doing this? if any one has used above two methods, what could be drawbacks of using them.
Need some expert opinions :)
Sass is a popular CSS pre-processor that, among other things, lets you use variables in CSS, for things like your color scheme. You'd compile the CSS when you change it, so no need for the overhead of running a PHP script each time it loads. (Yeah, you could write your own cache system for that in PHP, but no need to redo others' hard work ;D)
$menu-color: #123456;
#menu { color: $menu-color; }
You can use a body class to change the theme:
/* Base style */
h1 { color: grey; }
.spring h1 { color: green; }
.summer h1 { color: yellow; }
.fall h1 { color: orange; }
.winter h1 { color: blue; }
To change the theme, just add the class on the body:
<body class="fall">
<h1>The leaves are falling!</h1>
</body>
Given that this is on a 2-week schedule, firing off a dynamically generated css file is overkill. It would be far easier to serve up a static .css file, which can be generated by PHP. That way you don't have to mess with outputtting cache headers and whatnot - the file will be cached the way any other static file would.
Use cron a similar timed-job tool to rebuild the .css file whenever you need those color changes to occur.
The PHP method, by default, would cause the clients to re-query the server for changes on every hit. That's a waste of bandwidth and cpu time just to change a few values once every 14 days.