Div on Div with img element - html

I want my Div id="b" to be on the other Div id="a", but instead I get the Div id="b" under Div id="a", What need I change in the Css?
Html:
<div class="picad30">
<div class="pic_sin30" id="a">
<img width="110" border="0" class="pic_sin30" src="SMALLAD.png"/>
</div>
<div class="picgar30 p" id="b"></div>
<div >
<div >upload</div>
<div ></div>
</div>
</div>
Css:
.picad30{
width:130px;
float:right;
display:table;
margin: 20px 0 0 0px;
position: relative;
}
.pic_sin30{
border: 1px solid #ccc;
height: 87px;
overflow: hidden;
width: 130px;
position: relative;
z-index:1;
}
.picgar30{
background-position:-5px -244px;
cursor:pointer;
height: 20px;
width: 20px;
float:left;
z-index:20;
position:absolute;
}
.p {
background-image: url("PIC/icon.png");
background-repeat: no-repeat;
}

Try this
.p {
background-image: url("PIC/icon.png");
background-repeat: no-repeat;
z-index:2;
position:absolute !important;
top:0;
left:0;
}
It can be helpful to you Read this
Edit
Working Fiddle

So I've made a few updates to your code and I hope I've interpreted your question correctly. Am I right by saying you want to stack .pic_gar30 or id=b on top of .pic_sin30 or id=a? And then on top of .pic_gar30 you want to add an icon?
If this is correct I've done the following, I've wrapped your 2 image divs in a parent div called pic-container which has the height you wish to use on your images and position relative so you can absolutely position your images inside without the upload text hiding in behind also.
You want to use the same css on both your image holders so I've given both of them the class img-holder and applied styles that position absolute, since .pic-gar30 comes after .pic_sin30 it will automatically be positioned on top. But if you like you can add a z-index to .pic_gar30. I've then used the ::after psuedo class selector http://css-tricks.com/pseudo-class-selectors/ on .pic_gar30 in order to position your icon above the image.
Please see my example which I hope helps http://jsfiddle.net/LXaCT/

Related

Use image as container for text instead of div

I'm trying to display a short image description at the bottom of an image, right now it looks like this: https://www.bootply.com/render/Gwde8WHtot
But i want the green background to align with the image (not the red border), meaning the width and height attribute of the text should respond to the image, not the container it is in.
This is my current code:
// CSS
.textoverimage {
position: absolute;
background: green;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
word-wrap: break-word;
text-align: center;
width: 100%;
height: auto;
bottom: 0;
left:0;
padding: 5px;
z-index: 5;
border-radius: 0px 0px 3px 3px;
}
// HTML
<div class="container">
<div class="row">
<div id="0" class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-12">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg">
<div class="textoverimage">Random</div>
</a>
</div>
</div>
</div>
Full example: https://www.bootply.com/Gwde8WHtot
Is there any way to achieve this? If the column/image resizes when you resize the browser, the text should be responsive as well. Any help is greatly appreciated! Thanks in advance.
You're almost there, you just need to add:
.d-block {
position: relative;
}
Since the anchor is wrapping around the image, you set a relative boundary there, meaning that a position: absolute inside that will be relative to those bounds.
You could set the ('.d-block mb-12') div as a position:relative and then make the text position:absolute (hoping that the div covers the entire image.
Once this is done you could use:
.textoverimage{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: 0 auto;
}
then the parent div will be:
.d-block {
postion:relative;
width:100%;
height:100%;
}
That should work, hoping that the .d-block div has a parent div with a width/height set in PX if not drop the height and width attr and then you should be perfect.
Don't forget the Margin: 0 auto;
If it doesn't center absolute then maybe try adding
display:block; or display:inline-block;
Hope this helps

How do I design a div with a top right corner icon? [duplicate]

This question already has an answer here:
Getting the button into the top right corner inside the div box
(1 answer)
Closed 5 years ago.
Can anyone help me to design a div with a top right corner icon?
I need the coding for this.
I herewith attached sample image for your reference.
I see you already have answers that explain how to use relative and absolute positioning, but I created a JS fiddle in the meantime :)
Link to JS fiddle with example
HTML:
<div id="box">
<div id="icon">
|>
</div>
Contents of the box
</div>
CSS:
#box {
position: relative;
width: 200px;
height: 200px;
padding: 10px;
margin: 100px;
background-color: white;
}
#icon {
background-color: green;
color: white;
padding: 10px;
width: 20px;
height: 20px;
position: absolute;
right: -20px;
top: -20px;
}
It will work with css position attribute. With refrence to the example I have made follow the below steps.
Step 1 Give your parent box positon relative
Step 2 Give your child element rightCircle position absolute with right and top to adjust.
Basically position :absolute work in reference to
position:relative and with top, right we are adjusting the position of the element
.
Here is a snippet :
.box{ width:200px; height:300px; border:1px solid #999; position:relative; margin-top:30px; }
.rightCircle{ position:absolute; width:40px; height:40px; border-radius:50%; background:red; right:-20px; top:-20px;}
<div class="box">
<div class="rightCircle"></div>
</div>
use
position:absolute;
right:0;
top:0;
width:{youriconimgwidth}px;
height:{youriconimgheight}px;
Keep in mind, before you use absolute position, the parent div should be position relative

How can I align center this div?

I have this page:
http://fetr.zonedesign.ro/contact/
I have a map and a map over blue div I would like to display at center
This is code HTML:
<div style="float:left;width:100%;padding:0 10%;text-
align:center;margin:10px auto;display:block;">
<div class="date-contact">proba</div>
<?php echo do_shortcode( '[huge_it_maps id="1"]' ); ?>
</div>
This is code CSS:
#media (min-width: 800px) {
.date-contact
{
width:300px;
height:150px;
background:blue;
position:absolute;
z-index:10;
}
}
I tried to use margin: 0 auto but unfortunately not working.
Can you please help me solve this problem?
Thanks in advance!
if you want to keep its position absolute you can use calc for top/left but you need to know the height/width of your div.
Further, the parent of this blue box needs to be position relative/absolute/or fixed:
here's a demo
<div></div>
div {
background: blue;
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
My suggestion is :
wrap the two div's div#huge_it_google_map1_container and div.date-contact with a parent div. The parent div's width will be same as that of div#huge_it_google_map1_container.
So, the html will be:
<div class="map_parent_wrapper">
<div id="huge_it_google_map1_container"></div>
<div class="date-contact"></div>
</div>
The css will be as follows:
.map_parent_wrapper {
position:relative
}
.date-contact {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.date-contact {
background: none repeat scroll 0 0 blue;
clear: both;
height: 150px;
margin: 0 auto -208px;
position: relative;
width: 300px;
z-index: 10;
}
Your Blue div is absolutely positioned so its hard to get a center aliment,
Make it relatively positioned and align center using margin 0px auto;
Now give a negative margin bottom of -208 px so that the blue div overlaps the map.
Set the required z-index so that the blue box is above the map.
-Cheers...!!
EDIT: I didn't realize you site until your edit. You should go for a position: absolute in your .date-contact style. So, my recommended code won't apply here. But you can benefit the explanations I hope.
First of all, you cannot use margin: 0 auto with position: absolute. And using classes in a seperated css file, instead of using inline styles, always help you to see your code clearly. With this seperation of concerns, you'll also be applying the DRY principle in your code.
I tidied up your code to provide your desired effect. Please see and if you'll have questions, fire away. Will try my best to help.
HTML
<div class="outer-div">
<div class="date-contact">proba</div>
</div>
CSS
.date-contact {
width:300px;
height:150px;
background:blue;
margin: 0 auto;
}
.outer-div {
text-align:center;
margin:100px auto;
padding:0 10%;
}
NEW ANSWER FOR EDITTED QUESTION
The other answers say that you should absolutely position your blue div. I say if you do that you'll never make it show in the center. The easy way of doing this, is to place your blue div in another div which is positioned absolute. Your blue div will show in center just like you wanted with margin: 0 auto; Also, I placed your blue div inside the div#huge_it_google_map1 because I believe it's where it belongs.
HTML
<div class="yourMapDiv">
<div class="outer-div" id="huge_it_google_map1">
<div class="date-contact">proba</div>
<!-- Your other divs and map contents inside the div#huge_it_google_map1 -->
</div>
</div>
CSS
.yourMapDiv {
position: relative;
background-color: yellow;
padding: 10px;
}
.outer-div {
position: absolute;
top:0;
left:0;
width:100%;
text-align:center;
background-color:red; /* Remove this attribute to see your map div (yellow) */
}
.date-contact {
background-color:blue;
width:300px;
/*height:150px;*/
margin: 0 auto;
/* or "margin: 50px auto 0" if you like to give a little margin-top for 50px */
}}
For your convenience, this is the working fiddle.
I hope you achieve what you wanted.
Blue div has position : absolute. For centered displaying you need to use left and top:
left: 50% - width block( example 40%)
top:50% - height block( example 40%)

Semi-Transparent div background on top of img tag

How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/

How to Center div AND place at bottom of another div

In all the posts I've been able to find a deal with either centering a div inside another div or putting a div at the bottom of another div, and the advice has been great but I haven't been able to find anything to do both.
My code is:
<body style="text-align:center; margin:0; padding:0;">
<div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
<div>
<div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
<div style="float:left; position:relative; left:30px; top:15px">
<img src="logo.png" width="88" height="38">
</div>
<div style="margin-top:15px">
<h1>Product Form</h1>
</div>
</div>
</div>
</div>
</body>
All I want to do is to put the formtop.png div at the bottom and center of the containing div. I can do one or the other but I can't do both. If I change position:absolute to position:relative then the image centers itself but its too high. When I change it back to absolute then it sits nicely at the bottom of its containing div but in IE it's way off the right and in firefox it's at the left side of the page.
Any advice?
You can do it by setting the formtop.png <div> to 100% width and centering the background image using CSS:
<!-- div with the formtop.png background -->
<div style="
height:75px;
width:100%;
background:url(formtop.png) no-repeat 50% 0;
bottom:0;
position: absolute;">
As an aside, if you move all your inline styles into a .css file, your code will be a lot easier to work with and maintain:
<div class="formTop">
.formTop {
position: absolute;
bottom: 0;
left: 0;
height: 75px;
width: 100%;
/* Set the background image to centered in this element */
background: url(formtop.png) no-repeat 50% 0;
}
Have you tried left:0; right:0; trick for absolutely positioned elements? It does not work for IE7 nor IE6, but it does for the rest of the browsers and later versions.
This is an example http://jsfiddle.net/6w6VR/
Try to avoid html elements that are only used for style, because you might wish to change your style later.
See this example, which uses the :after pseudoclass:
div {
width:100%;
position: relative;
background-image: url(header.png);
}
div:after {
display: block;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 20px;
background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
background-repeat: no-repeat;
background-position: center 0px;
}
You can set your header.png as background for div.