I want to put my text into a box and then make some transparent white background to it. But first I would like to have it in a box. Now it's in 4 boxes. How could I do that?
p {
font-family: Kartika;
width: 450px;
height: 75px;
position: relative;
top: 250px;
left: 400px;
margin: 1px;
padding: 15px;
color: white;
border: 1px solid white;
}
First set an id
Here is my new code:
<div id="border">
<p>lorem ipsidsodf</p>
<p>shdiohdshd</p>
<p>lshdohgsd</p>
</p>kgdawkad</p>
</div>
p {
width: 450px;
height: 75px;
position: relative;
top: 250px;
left: 400px;
margin: 1px;
padding: 15px;
display:block;
border: 1px solid white;
}
#border{
border:1px solid blue;}
jsfiddle:http://jsfiddle.net/e3na9291/
Related
I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.
expected design
I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?
achieved
.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
You want to hide the part of the circle that overflows the rectangle
You can do this by setting overflow: hidden; on the rectangle.
.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}
<div class="rectangle">
<div class="circle">
</div>
</div>
.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">
<div class="circle">
</div>
</div>
</div>
This is margin range from chrome:
body {
margin: 0px;
padding: 20px;
}
.article {
background-color: #eee;
padding: 20px;
border: 2px solid #999;
overflow: hidden;
}
.left {
position: absolute;
top: 40px;
left: 40px;
width: 160px;
padding: 20px;
border: 2px solid #999;
background-color: #fff;
}
.right {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
width: 80px;
background-color: #fff;
border: 2px solid #999;
}
.middle {
position: absolute;
margin-left: 220px;
margin-right: 180px;
background-color: #fff;
border: 2px solid #999;
padding: 20px;
word-break: break-all;
}
img {
width: 80px;
}
<div class="article">
<div class="left">sldkfjlsj</div>
<div class="middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
<div class="right"><img src="glm.jpg"></div>
</div>
Begin I think the reason is the width of father tag is not solid. I try it, but no effect. And then I try set relative to father tag and the margin-right is begin from body, also not symmetry.
You are mixing and matching.
for absolute positioning what matters is left, top, right, bottom, width and height.
But my guess is that you don't need it.
What you are trying to achieve is a column of text in the middle of .article with some sides.
You will almost achieve it if you drop the absolute positioning of .middle.
then the margins on it will start where you want. And you'll be left with figuring out the offsets.
body {margin: 0px; padding:20px; position:relative;}
.article { background-color: #eee; padding:20px; border:2px solid #999; overflow: hidden;}
.left {position: absolute; top:40px; left:40px; width:160px; padding:20px; border: 2px solid #999; background-color: #fff;}
.right {position: absolute; top: 40px; right: 40px; padding: 20px; width: 80px; background-color: #fff; border: 2px solid #999;}
.middle { margin-left: 220px; margin-right: 180px; background-color: #fff; border: 2px solid #999; padding:20px; word-break: break-all;}
img {width:80px;}
<div class = "article">
<div class = "left">sldkfjlsj</div>
<div class = "middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
<div class="right"><img src="http://lorempixel.com/output/people-h-c-80-120-10.jpg"></div>
</div>
A good article about css positioning
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I'm having trouble making the below layout look the same across all browsers:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
}
<fieldset class="wrapper">
<legend>Legendary!</legend>
<div class="icon">icon</div>
</fieldset>
The problem is that when the legend element is present, the div.icon is pulled few pixels down on firefox, and a few pixels up on chrome. When I remove the legend element, it's working fine, but I can't do that. Any ideas on how to make it look the same everywhere?
here you have a working UPDATED :jsfiddle tested in chrome and firefox.
You don't need to work with position:absolute; you can just float:right; your div and give margin-top:-40px; or whatever value you want.
#wrapper{
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
#icon{
float:right;
background-color:#fff;
width:40px;
height:40px;
border:1px solid black;
margin-top:-20px;
margin-right:20px
}
legend#title {
margin-left: 20px;
float: left;
padding-left: 10px;
margin-top: -10px;
background: #f3f5f6;
width: 74px;
}
.icon {
float: right;
margin-top: -30px;
width: 40px;
height: 40px;
border: 1px solid black;
background-color: white;
}
tested on chrome as well as mozilla.
Try giving top value in percentage %.
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -2.5%;
right: 10px;
}
Fiddle here: https://jsfiddle.net/37y8023g/
Use line-height for .icon
CSS:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
line-height: 40px;
}
Working example: https://jsfiddle.net/qjqv43y4/1/
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}