I have a div that displays a Google map.
How do I make another div float over the map div?
Try this:
<style>
#wrapper { position: relative; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
</style>
<div id="wrapper">
<div id="google_map">
</div>
<div id="over_map">
</div>
</div>
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
Just need to move the map below this box. Work to me.
From Google
Just set the position of the div and you may have to set the z-index.
ex.
div#map-div {
position: absolute;
left: 10px;
top: 10px;
}
div#cover-div {
position:absolute;
left:10px;
top: 10px;
z-index:3;
}
absolute positioning is evil... this solution doesn't take into account window size. If you resize the browser window, your div will be out of place!
Related
I have an image that I want overlapping the banner but I am having a problem when I re-size the window the image does not move with it. Ive provided a screenshot and my css.
CSS:
.coslogo {
display: block;
margin: -150px auto 0;
top: 150%;
/*padding: 20px;*/
width: 100%;
left: 50%;
margin-left: 590px;
z-index: 9;
}
.coslogo img {
overflow: auto;
}
It looks like you have your position set to absolute because of how you are positioning your overlapping banner. You'll want to add position:relative; to the css for .coslogo. I can't be more specific without the html, so include that if this doesn't help!
You can use css relative and absolute positioning with z-index to place the image on one another.
.main {
border: 1px solid #000;
position: relative;
}
.img1 {
border: 1px solid #f00;
position: relative;
z-index: 2;
}
.img2 {
border: 1px solid #0f0;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
}
<div class="main">
<img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
<img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/
I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.
The HTML:
<div id="broadcast">
<div id="broadcast_header">
Neighbourhood Broadcast
</div>
</div>
The CSS:
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: relative;
top: -20px;
font-weight: bold;
}
Firefox: All fine, header appears 20px above the div, its cool.
IE: Refuses to show div(broadcast_header)!
Overflow: visible
doctype definition: Given
My input: Suppose change top to - top: -5px; It shows the div(header) partially.
Thank you :].
Add body { margin:0 } in your CSS.
This works differently. The surrounding element (#broadcast) has to have the position: relative; property. Then you can position (#broadcast_header) relative to this one by using position: absolute;
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: absolute;
top: -20px;
font-weight: bold;
}
#broadcast
{
position: relative;
}