I got the following problem. I want to display a map on a site. The map is a background image.
This Code makes the image perfectly responsible.
section#map {
max-width: 960px;
}
div#map-image {
background: url(Map.jpg) top left no-repeat;
background-size: 100%;
padding-top: 41.875%; /* 402px/960px = 0.41875 height/width of map */
}
So far so good!
But now I want to have some sort of location pin on that map, that behaves also responsive. Since I want to animate it I didn't include in the map graphics, so that is of the table.
Is that possible to do?
Using position:relative; doesn't work because the parent element do not have a width/height specified. Margin/Padding didn't work either.
style for the location pin:
span#location
{
background-color: red;
width: 12px;
height: 12px;
border-radius: 6px;
/*position: relative;
top: 86.9%;
left: 52.26%;*/
}
html looks like this:
<section id="map">
<span id="location"></span>
<div id="map-image"></div>
</section>
Any ideas how to pull this off?
add position: relativeto #map the width of the map seems to be 100% of its parent. position:relative for the pin should then work.
Unless you set the map to position:relative, any relative or absolute positioned elements within that <section id="map"> will take its relative position from the <body>
Can't test it because I don't have the map-image, but this seems working:
position: absolute;
jsfiddle
Related
I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.
Here is my code:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.
I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.
I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.
position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:
#header .container {
position: relative;
}
Also, the code you posted seems to be missing a </div>.
Is this what you are looking for jsfiddle, this is the code i added
#header .container {
position: relative;
height: 400px;
}
I have a little problem i was hopeing you guys could help with. I have create an empty white box on my frontimage. To do that i have to change the image to absolute. After this, the image is now out of alignment. To make it easier to understand, there are two images i want to show you, so you can see the problem.
Image when it is set to Relative:
Its the water image in top.. here you see that it is perfect align (left and right side) with the aque color boxes under.
Image when it is set to Absolute:
Somehow when i set the image to absolute, it gets bigger in the right side. I have read some earlier post that the parant should be set to relative.. I mean that I already have done that.
Code:
<div class="row">
<div class="col-sm-12 contentpage">
<img id="frontimage" src="~/images/index.jpg" />
<div class="col-lg-4">
<div class="bookingbox">
</div>
</div>
</div>
</div>
Css:
#frontimage{
z-index: 1;
position: absolute;
}
.contentpage {
height: 650px;
background-color: white;
position: absolute;
}
.bookingbox {
background-color: green;
position: absolute;
height: 450px;
width: 300px;
z-index: 2;
position: absolute;
top: 30px;
left: 30px;
}
img {
max-width: 100%;
}
Now it works.. take a look at the picture :D
Of course it's out of alignment!
When you set the image to absolute, it breaks off the flow of the page, and basically creates a new "layer" to be on. You can say it's "absolutely" off the page flow.
When you set the image to absolute, to position it correctly, make the parent of the image relative, then position and resize the image according to the origin of the parent.
Make sure to add another div so it fits inside it! winks
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I have a page that displays a map with some pins placed on places of interest. Markup and style as follows:
HTML:
<div class="map">
<div class="pins">
Pin #1
...
Pin #12
</div>
CSS:
.map {
width: 100%;
height: 100%;
position: relative;
background: transparent url([image]) no-repeat 50% 50%;
background-size: cover;
}
.pins {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
{
.pins > a {
width: 20px;
height: 31px;
position: absolute;
}
My question is: how can I keep my pins, which are absolutely positioned to specific locations on the map, aligned correctly with the map? I've tried using percentage values for the pin positions but because the map is always centered, the alignments go off as soon as the map starts getting cropped at the sides.
I realise I can implement a JS fix, but I'm wondering if there's a pure HTML/CSS solution to this.
Thanks.
I like your question!
So what background-size cover does is keeping the perspective of the image.
This way you don't know how the displayed dimensions of the image are.
Execpt you knew the ratio in the first place.
I did some experimenting, with the fluid-video-padding-bottom "hack".
So imagine a 16/9 map.
All you need is a container that lays exact on top of the image (or it could be the very same container as in my example) and behaves the same as background-size cover. Achieved using padding-bottom trick.
The only thing left to do is resize the pins accordingly. (I used viewport based units)
My example.
padding-bottom: 56.25%; /* 16:9 */
Instead of using the padding bottom trick, you could use object-fit positioning. Which is not well supported yet.