I need to create a html box which is not just a simple box, but it has a little tip at the bottom. I created this with HTML and CSS as you can see in the code below. First watch that.
.item{
width: 200px;
height: 130px;
background: gray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
float:left;
}
.title{
position: absolute;
bottom: 0px;
background-color: white;
height: 30px;
line-height: 30px;
width: 160px;
}
.tip{
position: absolute;
bottom: 0px;
right: 0px;
height: 30px;
width: 40px;
border-left: 25px solid transparent;
border-bottom: 30px solid white;
}
*{
box-sizing: border-box;
}
<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
<div class="title">Lorum Ipsum</div>
<div class="tip"></div>
</div>
<div class="item" style="left:230px;">
<div class="title">Lorum Ipsum 2</div>
<div class="tip"></div>
</div>
As you can see the image in the background is also in the tip at the bottom. At the right, you seen the same but without an image and a gray background. But this background actually needs to be white with an gray border in the contour of the gray background. So also the version with the image needs this border. Below an image of what I mean.
Is it possible to create this with only HTML and CSS with support for older browsers (at least IE9). Thanks in advance!
here is one solution that works in old browsers; I made the border red for visibility.
.item{
width: 200px;
height: 130px;
background: gray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
float:left;
border:1px solid red;
}
.title{
position: absolute;
bottom: -1px;
left: -1px;
background-color: white;
height: 30px;
line-height: 30px;
width: 160px;
border:1px solid red;
border-width: 1px 1px 0 0;
}
.tip{
position: absolute;
bottom: -1px;
right: -1px;
height: 30px;
width: 40px;
border-left: 25px solid transparent;
border-bottom: 30px solid white;
}
.tip-border{
border-bottom-color:red;
bottom:0;
}
*{
box-sizing: border-box;
}
<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
<div class="title">Lorum Ipsum</div>
<div class="tip tip-border"></div>
<div class="tip"></div>
</div>
<div class="item" style="left:230px;">
<div class="title">Lorum Ipsum 2</div>
<div class="tip tip-border"></div>
<div class="tip"></div>
</div>
http://fiddle.jshell.net/2bgdjckq/
Related
Im currently trying to make a square with 4 small squares inside, and I have been having troubles with a way I was trying to do.
So this is the code:
#grandbox {
position: absolute;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
I wanted to make the css style of the borders:
border: 2px solid black
But if I do that the boxes just break out of the bigger box and are display vertically.
I'm pretty newbie with this, as I currently started my carreer, but I cannot understand why doesn't it work.
PS: Sorry if bad english, not my first language.
Normally, border widths are added to the given width. With the box-sizing: border-box; rule, you can include the border into the width, so that you have no break anymore. See this snippet:
#grandbox {
position: absolute;
width: 200px;
height: 200px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
box-sizing: border-box;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
See https://developer.mozilla.org/de/docs/Web/CSS/box-sizing for more information about box-sizing.
EDIT: My answer is more of a hack solution. The accepted answer above that incorporates the box-sizing automatically including borders into the width is a better answer.
In your original calculation of height and width (204) I don't think you were accounting for both sides of each square being an additional 4 pixels larger.
Adjusting the width and height to 208px should solve your problem.
#grandbox
{
position: absolute;
width:208px;
height:208px;
border: 2px solid black;
left:40%;
top: 8%;
}
div.smallbox
{
border: 2px solid black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<body>
<div id="grandbox">
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
</div>
</body>
The outer box should be positioned relative and the four inside boxes absolute. Then you just need to position them using left right top bottom properties.
#grandbox {
position: relative;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
position: absolute;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
div.sb1 {
top: 0;
left: 0;
}
div.sb2 {
top: 0;
right: 0;
}
div.sb3 {
left: 0;
bottom: 0;
}
div.sb4 {
right: 0;
bottom: 0;
}
<div id="grandbox">
<div class="smallbox sb1">
</div>
<div class="smallbox sb2">
</div>
<div class="smallbox sb3">
</div>
<div class="smallbox sb4">
</div>
</div>
Here's a jsbin version.
HTML:
<div class="col-lg-4">
<div class="outer-div"></div>
<div id="cropContainerMinimal1"></div>
</div>
CSS:
.outer-div {
padding-top: 75px;
padding-right: 72px;
padding-left: 69px;
padding-bottom: 92px;
background-image: url(../images/student-background.png);
background-repeat: no-repeat;
background-position: center center;
height:590px;
}
#cropContainerMinimal1 {
width:100%;
height:421px;
position: relative;
border:1px solid #ccc;
}
CSS is not working for me. If i play with absolute it destroys all the structure. How to fix this issue?
Move your outer-div inside #cropContainerMinimal1 and apply following css. You can play with top, right, bottom and left properties to make it according to your needs.
.outer-div {
position: absolute;
background: rgba(0, 0, 0, 0.5);
bottom: 10px;
right: 10px;
left: 10px;
top: 10px;
}
#cropContainerMinimal1 {
background: #ccc;
width: 100%;
height: 421px;
position: relative;
border:1px solid #ccc;
}
<div class="col-lg-4">
<div id="cropContainerMinimal1">
<div class="outer-div"></div>
</div>
</div>
How to achieve this layout with CSS?
You can try this: https://jsfiddle.net/dqhx5cf5/
HTML:
<div class="rectangle"><div class="circle"></div></div>
CSS:
.rectangle{
background-color: darkblue;
width: 300px;
height: 500px;
overflow:hidden;
}
.circle{
border-radius: 50%;
width: 600px;
height: 600px;
background-color: #ddd;
position:relative;
left: -150px;
top: 100px;
border: 2px dashed darkblue;
box-shadow: 0 0 0px 5px #ddd;
}
BUT with Firefox the curved line does not appear dashed because is not compatible with mozilla, but if you check it from IE and Chrome it works as well.
You can make shape like following way:
.shape {
background-color: #ccc;
border-radius: 150px 150px 0 0;
bottom: 0;
height: 100px;
position: absolute;
width: 75px;
}
.parent {
background-color: #2e0854;
height: 150px;
position: relative;
width: 75px;
}
<div class="parent">
<div class="shape"></div>
</div>
Learn more about shape from here
I have solved your question. Hope it will be helpful.
Thanks
*{margin:0;}
.container{width:400px;border:2px solid #666; height:400px;}
.main{background:#666; width:100%; height:200px; position:relative;overflow:hidden;}
.oval{background:#fff;width:100%;height:200px;position:absolute;bottom:-100px;border-radius:50%;}
.oval-dashed{background:#fff;width:100%;height:200px;position:absolute;bottom:-110px;border-radius:50%; border:1px dotted #666}
<div class="container">
<div class="main">
<div class="oval"></div>
<div class="oval-dashed"></div>
</div>
</div>
To make it adopt to the container width (in this example the body):
https://jsfiddle.net/ehoo6pLt/9/
HTML
<div class="elliptical-container">
<h1>Content</h1>
</div>
CSS
.elliptical-container {
margin-top: 100px;
box-sizing: border-box;
height: 100%;
background: #EEEDEE;
border-top-left-radius: 50% 75px;
border-top-right-radius: 50% 75px;
box-shadow: 0 0 0 4px #EEEDEE;
border-top: 1px dashed #3B2053;
}
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
Consider following:
<div class="box">
...
</div>
.box{
width:500px;
border-bottom: 1px solid #ccc;
}
It will set the bottom border of full width of the box (500px).
But instead of setting the border bottom to whole width, I'd like to set 300px, in the middle of the box bottom, how should I do that..
You can Use ::after or ::before pseudo-selectors.
Like:
<div> something here </div>
CSS:
div {
width: 500px;
height: 100px;
position: relative;
padding-top: 20px;
margin-top: 50px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50%;
left: 25%;
border-top: 1px solid red;
}
Here is the jsfiddle
Can you throw an <hr> at the bottom of your box?
<div class="box">
...
<hr>
</div>
.box{
width:500px;
}
.box hr{
width: 300px;
border-bottom: 1px solid #ccc;
}
http://jsfiddle.net/MuAKF/
.box {
padding-bottom: 10px;
background-image: linear-gradient(#ccc,#ccc);
background-size: 50% 2px;
background-position: bottom left;
background-repeat: no-repeat;
}
You could use a background-image:
.box{
width:500px;
border-bottom: 1px solid #ccc;
background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
background-position: bottom left;
background-repeat:no-repeat;
}
You could do this:
.box {
position: relative;
width: 500px;
}
.border {
position: aboslute;
background: #ccc;
left: 100px;
bottom: 0;
width: 300px;
height: 1px;
}
<div class="box">
<div class="border">
</div>
</div>
But there are infinite possibilities. Some are more semantically correct than others; this solution is simply a quick fix.
I would suggest doing something like this, works well in Firefox
<style type="text/css">
.box{
width: 500px;
height: 20px;
}
.boxHalfWidth{
width: 250px;
height: 1px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box">
some data
<div class="boxHalfWidth"></div>
</div>
</body>
css:
display: block;
margin: 0 auto;
width: 50%;
padding-top: 20px;
border-bottom: 1px solid #000;