absolutely positioned picture covering text - html

I have a picture that i've positioned absolutely to use as a background. But it's covering up the content of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#pic1
{
position:absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1> hi there </h1>
<h1> hi there </h1>
<h1> hi there </h1>
<img id="pic1" src="1.jpg" width="100%" alt="picture">
</body>
</html>

You should change the z-index css property of the image
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order
how ever you can use another property on you body element to set background :
background-image:url('image url');

Why not use background image placement? This way you have less markup and more control over how you want the background to be displayed. If you still want to place background in this way, then try z-index: -1 and see if that works.
Overall, the way you are creating this page is less than optimal. You are setting image width using attribute. Why not get rid of img tag altogether and just roll with image placement using CSS. Lots of stuff on the web that shows how to do it.

Related

How to make website scroll down

I have made an image 100% height and width. But I had some headings and paragraphs underneath. When viewing my website I cannot scroll down further to see the headings and paragraphs? Also, I want a small burger navigation bar over the top of the image, at the top. But since making the image full screen, this has been "pushed away" as well?
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8"/>
<title>XXXXX</title>
<link rel = "stylesheet" href="s.css"/>
</head>
<body>
<nav id = "burger">
</nav>
<section id = "top_image">
<img src="images/bg1.png"/>
</section>
<section id = "description">
<article>
<header>
<h4>DESCRIPTION</h4>
</header>
<p>
XXXXXX<br />
XXXXXXXXXXX<br />
XXXXXXXX
</p>
<p>
XXXXXXX<br />
XXXXXXX<br />
cXXXX<br />
XXXXXXX
</p>
</article>
</section>
CSS
img {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
When you make the image (or in this case, all img tags) position: absolute, you take them out of the page layout flow. That means everything else renders like that image isn't there. Your menu bar and paragraphs are there underneath the image, but you can't see them. If you make the paragraph text long enough it will poke out the bottom. If you want the image to be part of the page layout, get rid of the position: absolute.
Add this temporarily to your CSS to see what's going on:
#description {
position: relative;
z-index: 100;
}
You'll suddenly see your text on top of the image.
The issue isn't that things are being pushed down, the issue is that your image is covering every other element on the page because you've positioned it absolutely. You can't scroll because there's nothing to scroll to.
If you are trying to use the image as a background image, then you should code it as a background image.
body {
background:url('http://placehold.it/1024x768');
background-size:cover;
}
JSFiddle

How to wrap text around floating, fixed image?

I've got an image that floats in the bottom right corner (to put in the button, the position has to be fixed). However, part of the text on my page disappears behind the image. Is it possible to make this text wrap around my image?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
right:50px;
bottom:50px;
width:20%'>
Text is placed here
</body>
</html>
You can see the problem in action on this example page.
No, not in CSS alone.
The fact that the image is floated doesn't help here, because it is also fixed. Therefor it is not part of the flow anymore and the text doesn't respond to it.
This cannot be fixed by CSS alone. You could fix it using Javascript by moving the image around as you scroll, but it will be hard to get right and it will seriously slow down scrolling through your page, since the text will have to be re-aligned after each movement.
I think you'd better look out for a different solution.
when you use a position fixed or absolute (float here is irrelevant for your style, you could remove it) you're removing an element from its natural flow. Thus, given this position, the text is not able to detect the image and to re-arrange itself around it.
Using Z-index property you can do this..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
z-index:-100;
right:50px;
bottom:50px;
width:20%'>
<p style="z-index:12000">
Text is placed here</p>
</body>
</html>

background image failing me with simple css

I'm sure there is a ridiculously simple answer for why this simple example is not showing my the background image but I just don't see it. I'm expecting to see the image twice, once when the image uses the class, and once when it references the image directly.
Thoughts
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.chkCombo {
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
</style>
</head>
<body>
<div class="x">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="chkCombo">
</div>
<hr />
<div class="x">
<img src="http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png" />
</div>
</body>
</html>
By adding height and width to the image and setting it to display: block; the image will appear.
Here is a the fixed fiddle
By the way, I don't see the effect of the base64 image, you use it and also using a class with background image on the same element.
Try using this style
.chkCombo {
height: 56px;
width: 350px;
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
A jsFiddle demo
P.S: A background image is litteraly a "background" image so if an element has no dimentions(height and width) then the background image will have no dimentions. Therefore you need to give it a hight and width

Logical Grouping of content (layout) without using Tables

I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Link using z-index can't be clicked even though it's on top, in both Firefox & IE

I'm trying to get a text link to appear on top of a partly-transparent image, which in turn is on top of a plain coloured background. I want the link-text and image to print when the page is printed, but not the coloured background. (Which is why I'm not using the background-image property)
The problem is that although the link appears on top of the image, and the image appears on top of the background as desired, the link cannot be clicked.
It seems to me that if the link appears on top then it should be susceptible to mouse events...
This happens in at least the following browsers: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) and Internet Explorer 7.
Please would somebody tell me if this is a problem with my HTML/CSS, or with the browsers?
Here is some HTML to demonstrate the problem:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="position: relative;z-index: -2; background-color:#333; height:200px;">
<img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />
<a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>
</div>
</body>
</html>
Cheers!
Alex
The issue is mainly caused using negative z-index values, which seems to be making the parent div capture the mouse events. Use positive indexes, and assign position:relative to the link to get the expected behaviour, because without explicit positioning z-index will not do anything.
In my case I was dealing with some unexplained pointer-events in CSS (specifically the value all), which caused some elements to catch events apparently triggered from a different (non-ancestor!) part of the DOM.
I removed all pointer-events from the CSS.
I know this question already has an accepted answer, but my symptoms match the OP, so maybe my tip might help a future struggler like me.
None of the above solution worked for my specific problem. I would recommend using above solutions first and if that does not work set pointer events to none (does not work for IE<=10).
.some-horizontal-container {
pointer-events: none;
}
You can also use visibility: hidden for the div that overlays the clickable element under it.
Please check out this article for more details:https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/
Two notes:
1) The z-index attribute can only be used on positioned elements (absolute, relative or fixed). Your element is not.
2) [Edited: Not related] Your top element (the with z-index: 0) is located inside your background element (the with z-index: -2).
The following works, you can play with it at: http://jsfiddle.net/5MpFn/
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="position: relative;z-index: -2; background-color:#333; height:200px;">
<img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />
</div>
<div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
Can you click me?
</div>
</body>
</html>