I'm sorry if the title doesn't explain it well enough, but it's the best title i could think of to represent my question.
So I've got two divs:
.div-arrow
{
position: absolute;
float: left;
cursor: pointer;
display:block;
width: 136px;
height: 54px;
vertical-align: middle;
border-radius: 4px;
background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
zoom: 50%;
}
.div-diamond
{
position: absolute;
float: left;
cursor: pointer;
display: block;
width: 83px;
height: 54px;
vertical-align: middle;
border-radius: 4px;
background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
zoom: 50%;
}
And I use them to make a layout like this: http://i.stack.imgur.com/htFRd.png
Clicking where the red mark is will activate the green diamond, instead of the diamond it looks like you're clicking. I was wondering how I go about trimming those unseen sections of the image/div, so that you actually click the divs it looks like you're clicking.
All elements on a web page are essentially blocks - so although you may create the look of a circle or a diamond etc it's still really a four sided block element.
For your problem you could consider either using an image map:
http://www.w3.org/TR/html401/struct/objects.html
Or possibly using the HTML5 CANVAS method:
https://developer.mozilla.org/en-US/docs/HTML/Canvas
Related
I have an old project JSP page with the following CSS block which formats the main form div
.container {
background-color: #f2f2f2;
padding: 20px;
position:absolute;
width: 400px;
min-height: 300px;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -250px);
}
requirement is such that I need to get a border around this form and in between some text so I used Pseudo-element after with following css block
.container:after {
position: fixed;
content : '\00a0 \00a0 \00a0 Login to external function';
font-size: 1.3em;
font-weight: bold;
border-radius: 25px;
padding-top:15px;
top: -40px;
left: -25px;
right: -25px;
bottom: -25px;
border: black 2px solid;
border-spacing: 10px
}
I got the required output, but the form is freezing now, and I cannot click anything. Can you please help me know what I did wrong?
Pseudo-elements are treated as descendants of their associated element. That means by default they sit above their parent in the stacking order. Even though in this case the pseudo-element is transparent, it is still blocking the .container below, preventing you from clicking it.
To fix it, you can place the pseudo-element behind its parent (.container) by giving it a negative z-index value.
I have a situation here where i have a radio button which i customized for the styling, then when by accident i zoom out to 90% i saw that the radio button and it inner circle style look odd. look at below example(i created similar situation) on 90% on chrome the inner circle looks a little bit on bottom left (not exactly in the middle)
.radiobutton {
width: 20px;
height: 20px;
margin-right: 5px;
border: 2px solid #40a9c7;
border-radius: 12px;
background-color: white;
position: relative;
vertical-align: middle;
}
.checked{
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 12px;
margin: 4px;
border-width: 0;
border-radius: 6px;
background-color: #40a9c7;
}
<div class="radiobutton">
<div class="checked"></div>
</div>
I don't have any idea what might be the cause here, does it lost precision or something? any help or direction or workaround would be appreciated
I have this code of my div. I want to alight some text inside. The text has to be aligned to the left curv of the div. How can this be possible?
Thank you!
Here is the code of the div:
#cv {
position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
I believe you want the text to follow the semi circle, and not just have an ordinary align left along a straight edge. This is not (yet) possible with a simple css property. There are some hacky techniques like this however:
http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
There are even a tools to help you, like this one:
http://www.csstextwrap.com/
Adobe is pushing a new css property to wrap text:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
It should be already available in Chrome Canary, but I suppose that is of little use for you today. I think you will have to do with a hack today...
Working example: http://jsfiddle.net/mQFK6/4/
You want to add a <p> to hold the text, and then move it down 50% to the middle of the circle, and float it left
#cv {
position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
p{
top: 50%;
position: relative;
float: left;
margin-left: 5px;
}
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
HTML:
<a class="button green"> Click me </a>
CSS:
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
You can check this fiddle to see what I mean exactly.
Thanks for any tips.
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.
This is very odd to me, and although I've searched, everyone seems to have the opposite problem to me (a floated div shrinking)!
I have this page: http://www.tameside.gov.uk/test/news, which uses PHP to generate the divs at the top for various news stories, and it works fine. However the items (which are floated divs) are in a div which is floated left, which for some reason isn't shrinking to those items (which are it's only contents).
As far as I was aware, a floated div always shrunk to it's contents, but this particular one is expanding to 100% of the page it seems. I've coloured the background of the containing div in grey to show you what I mean.
I want it to shrink to the contents so that I could use a centering trick, and it would then center the div no matter how many divs are in the top news items. But because it's not shrinking, the trick obviously isn't working.
The CSS for each of the news item divs is below:
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
float: left;
width: 19%;
text-align: center;
margin-right: 0.5%;
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
They've also got a span inside that has a little CSS attached to it to make the whole thing a link:
.news-top-item span {
display: inline;
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 2;
background-image: url('/tmbc_images/include/1pixel.gif');
cursor: pointer;
}
I doubt that's interfering, but have put it in just in case.
The outer div has only 'float: left' and the background colour applied to it.
Any help would be much appreciated.
Thanks,
James
You shall remove float:left and use display:inline-block instead
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
display:inline-block;
width: 19%;
text-align: center;
margin-right: 0.5%;
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
And add text-align:center in your containing div
width:100%;
height:100%;
is 100% of windows size ...
Try
width:auto;
height:auto;
use absolute units instead of percentages to define measurements for the inner elements:
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
float: left;
width: 200px; /* <--- */
text-align: center;
margin-right: 2px; /* <--- */
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}