I'm trying to create a div which will have fixed width and flexible height , here is the picture which I want to use for background. The thing is when I have div larger than image height the bottom rounded corners are omitted and also if I have div less than the size of image same thing, how do I make this work with round corners with all sizes? Thank you
Just use a bottom of your image, others with border style.
<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
<div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
Some Content
</div>
</div>
If you need a round borders at the top, simply add style "background" to #myContent with top align and another image.
Using background-position will ensure you always have rounded corners:
CSS:
background-position:bottom;
You'll have to create an image that has a lot of extra height so that if the div does end up being taller than expected, you've always got room to play with.
Another option would be to divide the div into 2 separate divs - 1 as the main content section, the other just adding the curved corners to the bottom. This will allow you to use a 1px high background image for the main div, and a 20px(ish) image for the curved border image, reducing the file size quite a bit. I've attached an example for you: Download Example
Position the background image at the bottom -add some padding to bottom of the div so the corners will fit into that. Make the bg image really tall.
Related
I have been trying to get a slick slider to work for a few hours now, and after trying all the suggestions on relevant SO questions, nothing has worked.
My images are 1080px tall, but slick displays them as 1px tall.
FYI, the images have enough transparent space at the bottom and I am planning to move the dots up on top of the image to keep the page without scroll bars. I am also planning to make the navigation arrows smaller, though they should still be on top of the image.
I have the entire slider having the full height as well as the everything within (.fullheight and .backimg).
<div id="picslider" style="height: 100%">
<img src="https://octolopagon.games/_resources/img/olumian.png" class="backimg">
<img src="https://octolopagon.games/_resources/img/support.png" class="backimg">
</div>
The full code is at https://jsfiddle.net/wrtvq2we/
Any help is appreciated.
You should give the container where the slides are in a height, otherwise the height will always be 1px. So you can give .slick-track a height desired to your needs. Here's an updated JSfiddle.
The images that are inside the slider will grow (in height and width) to the set height of the container.
I have checked other posts but none mentioned about a precise location to overlay.
Consider that I have an image, for eg. a traffic light. I need to overlay (not sure if this is the correct term or not) a div on top of the precise location of, the green lamp, for example. This is so that I can animate the div via jQuery to change the colour of the div in order to have an effect that the image is being animated.
The problem now is how to be precise in this, so that the location of the div completely matches that part of the image? Does it mean having to measure the pixels before setting the top and left of the divs? Or is there a smarter way?
I have considered other options such as using canvas (or svg, or silverlight) to redraw the whole thing instead of embedding the image (i.e. redraw a whole new traffic light picture). However, for this I believe it will be way more complicated than what I asked. Correct me if I am wrong here.
Please advise.
One way is to put the image inside a div which is either positioned relative if you want it to be inline with other elements or positioned absolute if you want to set its position on the page. Then position absolutely the overlapping div inside the same div as the image.
for example
Styles
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
Body
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
You will need to adjust the width, height, left and top of the div with id='over' as necessary.
You could replace the div with id='over' with an image use position absolute on this image and set left and top as needed.
I have an image of 1108px height and 907 px height. I have kept this image in a div tag and its height and width is as shown
<div id="mapframe" style="overflow:hidden;height:200px;width:300px;">
<img id="image" src="img/Groundfloor1.jpg" height="1108px" width="907px">
</div>
Now i do not know how to display only the specified coordinates(eg 500px from top and 100px from right) of my image at the centre of the div container and the image should be a DRAGGING IMAGE like GOOGLE MAPS. I have tried it with offset but the problem with it is that my image stops dragging.
Thank you for trying to help me.
Does it need to be an image element? It might be easier having it as a background-image for the div and using background-position to move it around.
If you insist on having an img element, you could also use margins, but to save you some headaches I would just use absolute positioning.
Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/
I am creating a menu bar where I need to show border on hover. but adding border is disturbed the layout.
How can add border without affecting layout.
You have two choices.
Probably best is to add a border even when it's not on hover, but set the color to transparent (or to the background color). Then in the hover only change the background-color:, but not the size or existence of the border.
Or you can use outline: - but check browser support for it first.
It depends on the border width, if you are using 1 px border then reduce 2 px from width and 2 px from height for each element for which you are adding border.
You can use outline instead of border property.
Instead of adding outline or manipulating height I change the margin of current hovered element.