I am trying to add some extra padding to the right side of a scrollbar, but when I zoom in the browser window (with ctrl+= and ctrl+-) the actual pixel width of the padding grows and shrinks accordingly (as if I had specified it in ems). I would like the right property for the container to be exactly 8 pixels, not 0.5ems (8/16=0.5).
Is there a way to set the top, bottom, left, and right css properties to a fixed value that doesn't change depending on the font size (I don't mind using JavaScript if I have to)?
Here's my CSS:
#page-bg
{
background-color: #FFFFFF;
padding: 0px;
border-width: 2px;
border-radius: 2em;
position: absolute;
top: 1em;
left: 10%;
right: 10%;
bottom: 0px;
overflow: hidden;
z-index: 0;
}
#page-content
{
overflow: scroll;
position: absolute;
top: 8px; /* these are what I'm talking about */
left: 8px;
right: 8px;
bottom: 8px;
z-index: 1;
}
To keep the "padding width" fixed even when you zoom, you need to find out the zoom level using JavaScript.
It's sort of possible, but it's totally not worth it because it's unreliable, see: How to detect page zoom level in all modern browsers?
Maybe there's a better way to achieve the same thing - you should post a jsFiddle demo of what you have so far.
Most browsers appear to virtually change the resolution of the page; this change is out of the control of javascript and css. The short answer is you can't and if you find one browser that does work you have to decide between standards and consistency and how it looks on one browser. Html, css and javascript arnt made for this type of control
Related
my border is moving when you have the download file ?tab? open on chrome (haven't tested it with any other browser). This completely destroys the look of my website, the text is still in the same position but the border and background moves up a bit.... I have tried every position but it didn't work... I'm really annoyed at this problem, any help would be appreciated.
here is the css code
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 11%;
top: 110px;
right: 5px;
left: 5px;
}
This is simply how Chrome works when you start a download. You can work around this with css, but please provide us with some code or a demo with what you've already tried.
A quick thought:
The first thing that comes to mind is to not use percentage for your height property, since it takes 11% of the current height, which depletes when you get the download bar in your screen, since the download bar takes up space of your screen.
If you give the class a fixed height, for example 100 pixels, you will see the class won't decrease in height.
So the code will be:
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 100px; /* just an example, does not need to be 100px */
top: 110px;
right: 5px;
left: 5px;
}
I'm currently trying to make a new design for my website. I got to this point, but I cannot find out how to remove the blank space to the right of the picture (slide the webpage to the right and you see it, a huge blank space).
Here is the JSFiddle: https://jsfiddle.net/yscu95hb/1/
And here is part of the code that I think I have to change.
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
}
.images {
margin: auto;
position: relative;
width: calc(100vw - 260px);
align-content: center;
}
.images img {
max-height: calc(100vh - 35px);
max-width: 100%;
position: absolute;
z-index: 990;
}
Can anyone help me?
Thank you.
-- edit --
I already posted the code that shows the image but I cannot make it to center. Any suggestions?
the reason you see the "white" space on the right side is the css you are applying to your #conteudo element.
This is your css for the element:
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
width: 100vw;
}
there are multiple ways to fix this. one way would be to remove the margin attribute or change the width to something lower than 100vw.
What you are doing is saying the element should be as wide as the browser window (100% of the window width) and then also saying that outside that width it should have more margin (in your case 15px on the right and 260px on the left), and that is "streching the page", causing the total widht to be larger than window width.
Add Eric Meyers resets to the top of your css file. It removes all styling that the browser automatically includes such as margin and padding. It seems like alot and most of it will go unused, but its nice to have all of it just in case.
Its good practice to have a set of resets at the beginning of every webpage and from my experience this one is the best.
My fixed header is overlapping my content.
Much like here (Position fixed content overlapping problem)
but my header is dynamic so not always 50px in height sometimes 52, 100 ...
Try to position it in your box better.
When you create a fixed element, it requires an exact position:
Example:
#header{
height: 95px;
width: 640px;
position: fixed;
top: 30px;
right: 30px;
}
So, this is how your browser will read this: I will place a fixed element in the top-right corner of the screen: 30 pixels from the top, and 30 pixels from the right of my screen.
THE REASON those fixed elements are one on top of another it's because he didn't define a top/bottom and left/right position correctly. Add more text and you will see if you can scroll on the fixed elements (you can't..).
Put everything in a div and ID'it #bigBody. Give the #bigBody an exact width and height, let's say 1000 width and 600 height.
Now add these:
#header {
height: 50px;
width: 600px;
position: fixed;
top: 30px;
right: 30px;
}
#footer {
background: #fff;
bottom: 0;
right: 0;
height: 30px;
width: 600px;
position: fixed;
}
min-width is irrelevant here... you use this only if you design big websites that require multiple devices access like iPhones, Tablets etc... if your just playing with the code just stick with the basics.
You can do that via JavaScript, updating both the size of the header and the margin of other widgets. See my fiddle for an example (with CoffeeScript, tested on Firefox and Chrome), or this other fiddle that uses jQuery. Basically it's changing the CSS together for more than one element.
header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }
If the size change isn't done by JavaScript/CoffeeScript, you'll have to put a event listener to update the .contents CSS.
I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:
body {
height: 100%;
border-bottom-color: #ad3127;
border-bottom-style: solid;
border-bottom-width: 5px;
}
This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).
The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.
I've tried something like
html {
height: 100%;
}
Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.
There must be a way to solve this (with as little sorcery as possible, please :)).
Instead of height: 100%, use min-height: 100vh:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.
Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/
To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:
HTML:
<div id="bottom"></div>
CSS:
#bottom {
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:
body:after {
content: "";
position: fixed;
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
I have an iframe which I want to fill all of an area on the page specified by the bottom, right, left, and top css styles. However, when I do the method I would expect to work, it does not:
HTML:
<iframe id="example_frame" src="http://example.com"></iframe>
CSS:
#example_frame {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
This results in a little box with the web page about 100x100 pixels
I think because iframes are replaced elements, you can't just set any combination of top, right, bottom, and left. Should you be able to? Absolutely. But you can't. Instead, you can set one vertical property (top or bottom), one horizontal property (left or right), and then set both height and width to 100%.
To achieve the effect you are going for where there's a 1em space around the iframe, simply wrap the iframe in another non-replaced element like a div.
<div class="abs-frame-container">
<iframe id="example_frame" src="http://example.com"></iframe>
</div>
The CSS that produces the effect you're going for is:
.abs-frame-container {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
.abs-frame-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
height: 100%;
width: 100%;
}
Also look out for issues where setting border: 0 in CSS won't work in all browsers.
Absolute positioning works with one x and one y coordinate at a time. I'm guessing the browser is ignoring one set of your coordinates.
Also, since you haven't specified a with or a height for the iframe, it is defaulting to 100 x 100.
Try something like:
#example_frame {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
I don't know for sure, but don't you have to define the iframe as position: absolute to be able to set a size in terms of the browser window;? I'd imagine it's display:block by default?
Edited in response to comment from OP.
What doctype are you using? Does the problem occur in all browsers/platforms you can test on? Are you successfully calling the stylesheet? Are you using inline styles, styles in the head or an external sheet?
If you're not using inline-styles, try using them, just for a moment, to see if they work inline, or not.