Clickable area with low z-index - html

I have found so many topics for this question, but none of those helps for my case.
I have one div with low z-index. There is a button in that div, that should be clickable. But it is not clickable, because of low z-index. I have tried to change z-index for other divs and containers, but I could not find out the right combination.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
<div id="content_img">
<img src="http://tax.allfaces.lv/templates/tax/images/office.png">
</div>
</div>
<div id="docked_div">
<div class="fb"> <img src="http://tax.allfaces.lv/templates/tax/images/f.png" style="width:27px; height: 28px; padding-left: 20px;">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 10px;
width: 1004px;
position: relative;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 249px;
}
#right {
float: left;
width: 750px;
padding-left: 5px;
}
#logo {
background: url(../images/logo.png) no-repeat;
background-position:center;
width: 250px;
height: 135px;
padding: 5px 0 0 5px;
display:block;
}
#content_img {
width: 750px;
height: 300px;
}
#docked_div {
background: url(http://tax.allfaces.lv/templates/tax/images/mazais_fons.png) no-repeat;
width: 52px;
height: 212px;
background-size: 100% auto;
position: absolute;
right: -37px;
top: 105px;
z-index: -1; **//EDIT HERE!!!!!!!**
}
.fb {
/*z-index: 1000;*/
}
I need to be able to click on FB button. Now when #docked_div z-index is set to -1, then .fb is not clickable. If I set z-index = 1 to #docked_div, then .fb is clickable, but then #docked_div is on top of the image, it should be under.
Example is seen here (FB button is not clickable): http://jsfiddle.net/vAkXh/7/ [edit here]
The full example is here: tax.allfaces.lv (you can see that here FB button is clickable, but it is on top of image, it is not correctly).

Just add to the #right div :
position: relative;
z-index: 2;
I tried on http://tax.allfaces.lv/, it should work.

Related

i cant see the whole html element

i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.

How to position an image to the right of a center aligned title with HTML & CSS

I'm working on a HTML page, and I've run into a little problem. Here's a picture about what I want: https://i.imgsafe.org/2c4d808.png
I've got a header section which contains the title and the picture, but I can't move the picture into the right side (red area) of the header.
I need to meet these conditions:
The title and the picture must be in the same div (header), however I can use nested divs in the header.
The title must be centered.
The picture must be completely on the right side of the header (both have a height of 100px).
The header is 800x100 px and the picture is 160x100 px.
I can modify anything in my HTML or CSS code.
Just to be clear: The header is with the "TITLE TITLE TITLE TITLE" and it is blue.
#container{
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding: 10px;
background-color: #cccccc;
box-shadow: 0px 0px 20px black;
}
#header{
height: 100px;
background-color: #6495ED;
}
#menu{
width: 150px;
height: 400px;
background-color: #FFD700;
float: left;
}
#main{
width: 650px;
height: 400px;
background-color: #00FF00;
float: right;
}
#footer{
height: 80px;
clear: both;
background-color: #6495ED;
}
#footerwords{
float: right;
}
#headerpics{
positioning: absolute;
top: 0px;
}
ul{
font-size: 1.5em;
font-family: arial;
}
<div id="container">
<div id="header">
<h1><center>TITLE TITLE TITLE TITLE</center><h1>
<div id = "headerpics">
<img src="http://placehold.it/160x100/E8117F/ffffff/?text=Books" />
</div>
</div>
<div id = "main">xx t xx </div>
<div id = "menu">
<ul>
<li>1111111</li>
<li>2222222</li>
<li>33333333</li>
<li>4444444</li>
<li>5555555</li>
</ul>
</div>
<div id = "footer">
<div id = "footerwords">
<strong></br>footer........<strong>
</div>
</div>
</div>
give the <div> that holds the text/img a position: relative;
then give the <img> a position: absolute; top: 0; right: 0;
h1 {
text-align: center;
}
.masthead {
position: relative;
height:139px;
background-color: #9cc;
}
.masthead-img {
position: absolute;
right: 0;
top: 0;
}
<div class="masthead">
<h1>This is My Title</h1>
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg" alt="" class="masthead-img" />
</div>

Image with background image not showing

Look at the following JSFiddle
.container {
width: 100%;
background-color: yellow;
}
.classic {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.classic-img {
display: block;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
.classic-img img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.top-menu {
width: 100%;
height: 50px;
position: relative;
background-color: red;
}
.top-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 50%;
text-align: center;
}
.top-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.top-menu-buttons span {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.bottom-menu {
width: 100%;
height: 50px;
position: relative;
background-color: green;
}
.bottom-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 80%;
text-align: center;
}
.bottom-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 35px;
color: white;
padding-left: 10px;
padding-right: 10px;
}
<div class="list">
<a class="item">
<div id="container" class="container">
<div class="top-menu">
<div class="top-menu-buttons">
<button>-</button>
<span>20</span>
<button>+</button>
</div>
</div>
<div id="classic" class="classic">
<div id="classic-img" class="classic-img">
<img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" />
</div>
</div>
<div class="bottom-menu">
<div class="bottom-menu-buttons">
<button class="button button-icon ion-eye">1</button>
<button class="button button-icon ion-refresh">2</button>
<button class="button button-icon ion-crop">3</button>
<button class="button button-icon ion-android-options">4</button>
<button class="button button-icon ion-social-tumblr">5</button>
</div>
</div>
</a>
</div>
CSS:
What i want to achieve is something like the following:
The red area should be a top menu. It should not be a fixed top position it should just always be on top of the image.
As you can see the image has a white background and a black forground. It should look like a polaroid.
The green area should be a menu at the bottom but also not fixed to the bottom it should just always be underneath the image. If there is not enough space it should simply scroll not clinch or esize any of the divs. I guess the main problem is the div in the middle where the image with the background image is.
I try for ages now to get the correct css but unfortunately im very unexperienced and all i can do at the moment is try and error but i cant get it working.
remove position: absolute from .classic-img and .classic-img img
add margin: 100px auto; adjust 100px as per your need, also you have set background-size: contain and the aspect ratio of bg image is almost equal to the image, therefore you would see only small portion of bg image here in the fiddle - jsfiddle.net/18vg13dt/3
additionally if you want gap from left and right also the use - margin: 100px 50px; similarly according to your needs.
jsfiddle
I guess this is what you want?
.classic {
background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center;
background-repeat: no-repeat;
background-size: cover;
}
.classic-img {
padding: 10px;
box-sizing: border-box;
}
.classic-img img {
display:block;
width:100%;
height:100%;
}
You need to set the height for the class .classic-img
Try this :
.classic-img {
display: block;
position: relative; /*---absolute to relative*/
overflow: hidden;
width: 100%;
height: 100px; /*----Adjust the height---*/
top: 0%;
left: 0%;
}
If you still face the issue, do come back and let us know.

CSS Issue Overlapping Image

Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}

Multiple background colors and images in full-width div

I'm trying to make a header for a site that has multiple background colors and images. On the left is a tan-ish gradient and a logo image, on the right is a sunburst/cloud image that fades to teal, as shown below.
The left (logo) portion should be 230px wide, and the right (sunburst) portion should be 770px wide, for a total of 1000px, and this should be centered. The left side tan gradient should extend to the left edge of the browser, and the teal should extend to the right edge.
I attempted to do it with percentages:
CSS:
#header {
height: 105px;
min-width: 1000px;
}
#header .left {
width: 31%;
background: url(../images/header_left_gradient.png) bottom left repeat-x;
height: 105px;
float: left;
}
#header .left #logo {
float: right;
width: 230px;
}
#header .right {
width: 69%;
background: url(../images/header-right.png) bottom left no-repeat #009eb0;
height: 105px;
float: left;
}
HTML:
<div id="header">
<div class="left">
<div id="logo">
<img src="./media/images/logo.png" alt="">
</div>
</div>
<div class="right">
Text
</div>
</div>
This almost worked, but the header didn't stay centered with wide browsers.
Fiddle
set header margin & width:
#header {
height: 105px;
margin: 0 auto;
min-width: 1000px;
width: 100%;
}
#header .left {
background: none repeat scroll 0 0 #FF00FF;
float: right;
height: 105px;
width: 31%;
}
#header .right {
background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
float: left;
height: 105px;
width: 69%;
}
this is worked for me.
A bit hacky, but this should do the trick:
body {
text-align: center;
}
#header {
display: inline-block;
height: 105px;
margin-left: auto;
margin-right: auto;
min-width: 1000px;
text-align: left;
}
you could use a wrapper div to apply the text-align to instead of the body, but I posted this in case you don't want to change the structure.
I ended up solving this in a bit of a hacky way. First, I added a container around the header like #Raad suggested, then added two more divs inside to hold my colors:
<div id="header-wrap">
<div id="filler-left">
</div>
<div id="filler-right">
</div>
<div id="header">
<div class="left">
<div id="logo">
<img src="./media/images/logo.png" alt="">
</div>
</div>
<div class="right">
Text
</div>
</div>
</div>
Then the CSS:
#header-wrap {
width: 100%;
position: relative;
}
#header-wrap #filler-left {
left: 0;
width: 50%;
position: absolute;
height: 105px;
background: url(../images/header_left_gradient.png) bottom left repeat-x;
}
#header-wrap #filler-right {
left: 50%;
width: 50%;
position: absolute;
height: 105px;
background: #009eb0;
}
#header {
height: 105px;
width: 1000px;
margin: 0 auto;
position: relative;
}
and set my .left and .right divs to fixed width. Worked out pretty well. Not my ideal solution, but it worked.