Hope this image speaks everything...!!! Need to do this in html + css .. Note: I want the border inside the image.
CSS:
#border {
border:3px dashed white;
border-radius:100px;
width:184px;
height:184px;
position:relative;
left:5px;
top:5px;
}
#image {
background-image:url(table.jpg);
width:200px;
height:200px;
border-radius:100px;
}
HTML:
<div id="image">
<div id="border"></div>
</div>
Adjust the widths and heights as needed.
Demo: http://jsfiddle.net/yGcFx/
Related
Hello all CSS newbie here,
I have a special case, where I want to position a text area on the edge of a div. I want the text area to be cropped even when a user types into the text area. I'm deeply confused on why does the textarea grows and pushes the position of the parent div even though I have set the parent div overflow to hidden ? Any ideas so that the textarea position stays as is (cropped)?
My code is as below:
HTML
<div class="wrapper">
<div class='box'>
<textarea class="text"/>
</div
</div>
CSS
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
width:300px;
height:50px;
right:-250px;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
Here is the link to my Codepen
Thank you and deeply appreciate any thoughts and suggestions.
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
max-width:300px;
height:50px;
right: 0;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
<div class="wrapper">
<div class='box'>
<textarea class="text"></textarea>
</div>
</div>
Your html code is not correct. And I used max-width for textarea.
I made this sorta simple circular loader-thingy, whith two half circles covered with another two half circles that are positioned right on top of them. The covers rotate and reveal the bottom circles to make it look like a circular loading bar.
The problem is that the edge of the bottom circles are visible in some browsers, and there are some mobile browser issues with that as well. Is there a solution for this?
CSS
.wrap{
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:50px;
}
.circle{
position:absolute;
top:0;
width:50px;
height:100px;
background:black;
}
.cover{
position:absolute;
left:0;
width:50px;
height:100px;
background:white;
}
.halfcircleleft{
width:50px;
position:absolute;
top:0;
left:0;
}
.halfcircleleft .circle{
z-index:3;
border-radius:50px 0 0 50px;
}
.halfcircleleft .cover{
z-index:4;
border-radius:50px 0 0 50px;
}
HTML
<div class="wrap">
<div class="halfcircleleft">
<div class="circle"></div>
<div class="cover"></div>
</div>
<div class="halfcircleright">
<div class="circle"></div>
<div class="cover"></div>
</div>
</div>
what about using a circle with transparent background and white border bigger than holeto put it over the border you want to remove?like:
.hole, .hole2{
z-index:99;
position:absolute;
width:86px;
height:86px;
top:7px;
left:7px;
background:lightgrey;
border-radius:50%;
text-align:center;
line-height:86px;
font-family:Arial;
font-size:38px;
padding-right:2px;
}
.hole2 {
background:transparent;
border:4px solid white;
width:106px;
height:106px;
top:-3px;
left:-3px;
}
then just remove the overflow:hiddenof wrapwhich it's not doing anything (at least in your example)
JSFIDDLE
I am trying to make two columns separated by or inside a circle page the second column should have an image it like this :
<div class="step second">
<div id="upload-img"></div>
<div id="sperator">
<div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
</div>
<div id="default-img">
<img src=""/>
</div>
</div>
But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here
As you can see the image should be in the same line with the other div but its changing the position of the separator div
You should re-check your html tags. Make sure each tag closed correctly
Here your css :
.step{
position:relative;
width:500px;
height:250px;
border:1px solid black;
}
#upload-img{
position:absolute;
left:0;
top:0;
width:50%;
height:100%
}
#default-img{
position:absolute;
right:0;
top:0;
width:50%;
height:100%
}
#upload-img img, #default-img img{
max-width:100%;
max-height:100%;
}
#sperator .circle{
position:absolute;
height:66px;
width:66px;
background-color:black;
top:50%;
left:50%;
margin:-33px auto auto -33px;
border-radius:50%;
z-index:100;
text-align:center;
}
#sperator .circle p{
font-size:35px;
font-family:futura-book;
color:white;
padding:0 !important;
margin:0;
line-height:60px;
}
.step::after{
content:'';
height:100%;
width:3px;
left:50%;
margin-left:-2px;
z-index:90;
position:absolute;
background-color:black;
}
potition:relative will be an area that will "lock" every potition:absolute inside it.
You can use position:relative as parent div and position:absolute as child div.
Is it possible to design what is shown in image using only html and css?
If yes, how?
If No, what is the alternative?
creating transparent image with 2 colored corners and applying it as background image to div that holds text is in my mind. Is there any better way to do this?
I like to do it using html and css only because then it becomes flexible than using image.
I added the code that i tried. please check. got the desired output. but i would like to know if any improvements can be made ?
<style>
#rules
{
width:200px;
height:100px;
}
#rules .top, #rules .bottom
{
width:200px;
height:10px;
float:left;
}
#rules .top::before
{
content:"";
display:inline-block;
width:40px;
height:10px;
background-color:#000;
}
#rules .left, #rules .right
{
width:200px;
float:left;
height:30px;
}
#rules .left::before
{
content:"";
display:inline-block;
width:10px;
height:30px;
background-color:#000;
}
.center
{
width:200px;
height:20px;
float:left;
text-align:center;
}
#rules .right::after
{
content:"";
display:block;
width:10px;
height:30px;
background-color:#000;
float:right;
}
#rules .bottom::after
{
content:"";
display:inline-block;
width:40px;
height:10px;
background-color:#000;
float:right;
}
</style>
</head>
<body>
<div id="rules">
<div class="top"></div>
<div class="left"></div>
<div class="center">RULES</div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
Personally, I'd achieve this effect using psuedo-elements. Use ::before and ::after for each of the corners, and use their left and top (respectively right and bottom) borders in the colour you want. You can then set their width and height. Be sure to set the "hidden" borders to zero width so that you don't get slanted corners.
If you have a problem implementing this, please feel free to come back with the code you have tried :)
once it's multiple elements a simple
position:absolute;
bottom:0;
won't help since it will overlay the multiple elements
Here is a fiddle of my atempt : http://jsfiddle.net/7uYUP/
(it's the .interaction elements that I want to float right and bottom, right now they only float right)
I was hoping not having to resort to JS..
The problem is the height different between your green and yellow boxes (10pt vs 40pt). You can adjust for that with margin-top:
.interaction{
height:40pt;
width:100pt;
background-color:yellow;
float:right;
border: 1pt solid blue;
margin-top:-32pt;
}
http://jsfiddle.net/7uYUP/2/
<body>
<div id="container"><div>
<div class="interaction leftalign">
</div>
<div class="interaction">
</div>
</div></div>
</body>
body{
background-color:red;
}
#container{
position:absolute;
height:10pt;
width:100%;
background-color:green;
bottom:0;
}
#container > div {
position:relative;
height:100%;
}
.interaction{
height:40pt;
width:100pt;
background-color:yellow;
float:right;
border: 1pt solid blue;
}
.interaction.leftalign {
float:left;
}