Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have an image like this
I want to put small clickable boxes on it, like this
Does anybody have any idea how to do this using HTML/CSS?
Edit: Thanks to #BCollingwood, his answer with boxes property as absolute worked like a charm.
You can add all images to a container div then position them relative to each other using CSS:
HTML
<div class="container">
<img class="image_1" /> // the background
<img class="image_2" /> // the clickable square
</div>
CSS
.container {
position: relative;
}
.image_2 {
position: absolute;
left: 50px;
top: 50px;
}
you have to use svg. it is not wise to use anything other than svg to make certain part of image clickable.
[https://www.w3schools.com/graphics/svg_intro.asp]
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am attempting to center in image in jQuery mobile using CSS. No matter what styles I apply to the image it will not center. Please not the extremes in the css were to see if the image is even being manipulated but it is not. It remains in the same position. I have tried adding a class to the image itself and aligning it center but that did not work either.
HTML:
<div class="me">
<h2 class="name">John Doe</h2>
<img src="MyPic1.jpg" alt="My Photo" height="200px"/>
</div>
CSS:
.me{text-align:center;
padding-left: 50px;
margin-left: 100px;}
Did you try change your css to
.me img{text-align:center;
padding-left: 50px;
margin-left: 100px;}
Maybe its just something what rewriting your css. You can try position relative and then give it left: 0; right: 0; and text-align: center;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'd like to create a static home page (hence, no scrolls) that will take all the width and height available on the screen. Like this https://getuikit.com/ or http://underco.fr/
Basically I've tried to set height: 100% to both htmland bodybut as I have a navigation bar, it creates a scroller.
How could I do that?
There are several ways to achive this. I recomend you setting paddings and margins to 0 and using vh for height
or you can do this to:
body {
position: absolute;
margin: 0px;
overflow: hidden;
top: 0px;
bottom: 0px;
width: 100%;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on Wordpress template, and got this little problem which is:
I can't position the date label above the image thumbnail, as you can see here:
http://cl.ly/image/3X1j3h3j0E0X
If I make it position: absolute its position would be changed while the windows is changing.
How could I implement the right CSS for that.
This is the CodePen example, try to resize the window:
`http://codepen.io/msabdullah/pen/rplgC`
You need to use a combination of position: relative and left right top bottom to position it correctly. It should be positioned relative to the parent element.
<div class="parent">
<div class="child">
</div>
<div>
If you had the above html structure then you would need to make sure both had positioning, and then position the child relative to the parent:
.parent {
position: relative;
}
.child {
position: relative:
top: 0;
right: 0;
}
This is just an example, but it should be something similar.
Try to give position relative to parent element to maintain the uniformity.
check the DEMO.
CSS like this: Where div is parent element have position:relative.
img, p{display:inline-block;}
div{position:relative;}
p{position:absolute; right:0; top:0;}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to create a web page that looks like like in this site:
I tried creating an image with that design(the one in the middle with a white background and pointy edges on the top and bottom) but the result is that the image is static and does not dynamically change when the content of the page changes.
I do not know if I can implement the design by customizing the <div> borders or upload the design as a background image then dynamically create it.
Thanks for all the help.
If you don't want to use CSS3 (for more browser support) use the following structure:
<div class="conatiner">
<div class="pointyHeader"></div>
<div class="content">
your dynamic content here
</div>
<div class="pointyFooter"></div>
</div>
where pointyHeader and pointyFooter have a fixed height and background image.
Working jsFiddle
I thought of a .box { position: relative; }
and a .top { position: absolute; top: 0; } and same with bottom .bottom { position: absolute; bottom: 0;}
check it here: http://jsfiddle.net/DyG8F/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I need to be able to center text in the caption with a link added on the far-right of the caption. Please indicate if/how this can be done.
The caption would be formatted as follows:
Centered Text Right-justified link
CSS:
.caption {
text-align: center;
}
.caption a {
float: right;
}
Markup:
<div class="caption">
[Centered Caption]
[Right-justified Link]
</div>
DEMO
Another DEMO, with caption centered on parent width, as opposed to available space