The cloud looks like it's inside the mountain image's box/outline. I thought the margin should be affected relative to either parent div container or viewport. I am new to CSS and don't understand why this is happening ?
Taken screenshot with pesticide activated for the outlines
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
}
<body>
<div class="top-container">
<img class="cloud1" src="images/cloud.png" alt="cloud-img">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="images/cloud.png" alt="cloud-img">
<img class="mountain" src="images/mountain.png" alt="mountain-img">
</div>
</body>
With position: absolute (and fixed) you always want to provide one or more positioning constraints (i.e. top, left, bottom, right) so that css knows how to position the element relative to the "nearest positioned ancestor".
By positioning an element absolutely, you are telling css that you want to position this element such that it takes up no space on the DOM with regard to the flow layout. Without providing any positioning constraint css only knows the element to which it should position.
You may assume the default is just to place the element in the top left (i.e. top: 0, left: 0) but that's not the case. The absolute element will just be thrown where it would have been positioned as a static element but without taking up any of the block/inline space. So this is why the order of the element relative to its siblings is important when no positioning constraints are used. By the way I have NEVER used this in my career, I've always used positioning constraints to be explicit! See demo below.
So short answer is just use positioning constraints and you're good.
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="top-container">
<img src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<img class="mountain" src="https://www.pngkey.com/png/full/111-1118124_cartoon-clip-art-transprent-png-free-download-mountain.png" alt="mountain-img" width="80%">
</div>
</body>
</html>
There are many gotchas with position: absolute so be aware.
Aside
CSS takes time to know and understand. There are rules to guide you
but a lot of the learning process is trial and error and on top of that the rules are somewhat different between browsers too. I've found many
solutions to extreme edge cases that I have since forgotten, the trick
is to remember just enough to find the solution again. Over time it
will become second nature. Also using the dev tools elements->styles
panel to quickly experiment can help you find a solution or learn
about all the properties and their values.
Related
I'm trying to get an image to go over my posts, so the text and images go behind the image. The z-index isn't working when i try to get it to stack over everything. I'm not an expert at coding and I'm honestly just using tumblr for this, but I can't seem to find an answer anywhere. or one that I can understand, given the fact that I'm still a beginner. Any help would be super appreciated, here's the code:
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
}
I have added a code snippet, it contains just a div. The div overlaps the body. if you provide your source code, I can clarify though. you could also try increasing the z-index to 99 or 999. I think there is many z index'd div's in your code.
<html>
<head>
<title></title>
</head>
<style type="text/css">
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
background-color: red;
}
body{
background-color: #ccc;
}
</style>
<body>
<div id="char">
</div>
</body>
</html>
You could also try adding the image as a background image to an element and then putting your text in another element inside of that one. With a few lines of alignment code you can get your text where you want it.
<style>
.divStyle {
background-image: url('http://38.media.tumblr.com/a10b40131efc719d0bff421226b9c52b/tumblr_inline_mq5b19gEvv1qz4rgp.jpg');
background-size: cover;
height: 90vh; // put this to a 100 to cover the full height of the containing element (less here to avoid scroll bar)
width: 100%;
display: flex;
align-items: center; //change center to 'flex-start' to move text to top or 'flex-end' to move it to the bottom
}
.myText {
width: 100%;
color: white;
font-size: 24px;
text-align: center; //can also be 'left' or 'right'
}
</style>
<div class="divStyle">
<div class="myText">Here is my text</div>
</div>
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
I've create a website and with the viewpoint metatag, I've set the content with to 1200px, <meta name="viewport" content="width=1400, initlia-sclae=1.0, user-scalable=yes">.
Well it's work fine, but now I have to create an iframe (in an external site) with my site in it. But the space available to me is smaller than the content width, so you have to scroll horizontaly to view all.
I've tried do this: <iframe src="http://tlicetlac.tumblr.com" width="800px" height="400px" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9);"></iframe> but didn't work because resized the iframe's display area too.
So, can I for example set multiple viewpoint to resize the content for multiple web sites?
I tried your code and it worked fine .
you can see here Resize external website content to fit iFrame width
i used it to resize a world clock map from another web site to my web site.
here is my code:
<div id="containerworldTime">
<iframe src="http://24timezones.com/" width="992" height="500" scrolling="no" ></iframe>
</div>
#containerworldTime {
height: 395px;
margin:auto;
overflow: hidden;
width: 770px;
border:red solid 5px;
}
#containerworldTime iframe {
border: 0 solid;
height: 1103px;
margin-left: -110px;
margin-top: -385px;
width: 979px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
}
and see this example
<div
style="
overflow: hidden;
display:inline-block;">
<iframe
src='https://en.wikipedia.org/wiki/Punding'
scrolling="no"
frameBorder="0"
style="
width: 660px;
height: 1000px;
margin-top: -180px;
margin-left: -200px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);"
></iframe>
</div>
I'm running into a weird issue on Safari and Chrome (mobile/desktop) that when I apply a global style for webkit-transform:translate3d, div background colors and 100% height set in the style no longer work. Additionally, setting top:0px and bottom:0px fail too. When I remove the global -webkit-transform style, everything works as expected. Any ideas?
*
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
Full sample
<!DOCTYPE HTML>
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
*
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
body {
height:100%;
}
</style>
</head>
<body >
<div id="myDiv" style="position:absolute;top:0px;left:0px;width:320px;height:100%;bottom:0px;display:block;background:black;color:black;border:1px solid black;">
adsfasdf
</div>
</body>
</html>
You should try using the following.
.hwa {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: flat;
}
only on the div.
<div class="hwa"></div>
This way you don't have to worry about descendent selectors which uses a lot of CPU before compositing the layers and creating the GPU. Keep in mind that GPU acceleration uses 4x the memory of standard CPU animation (reflow / recalculate / paint )
Also you should make sure that you help out the Browser as much as possible, this means use width: 100%, height: 100% sparingly since it takes a lot of CPU to figure out how to construct the composite layers prior to GPU taking over.
I'm not sure why you'd want to apply a transformation to everything (perhaps you want the GPU to kick in?) in any case, the transformation on the html is causing this. You can solve it easily:
*:not(html)
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
See http://jsfiddle.net/Wv5Mx/
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.