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;
Related
I am trying to write some HTML that looks like this:
But what I currently have looks like this:
This my code:
<style>
div.relative {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.absolute {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
</style>
<div class='relative'>phone <b> 07010710811</b>
shot code <div class='absolute'> <b>123456 </b></div>
</div>";
What should I do to get my desired output?
I would create another div for your "shot code", and "phone" text. I've used similar properties to what you have been using before so that it should fall in line with the rest of your styling.
I would also consider renaming your div's to something that isn't a CSS property.
div.container {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.shot_code {
position: absolute;
top: 28px;
right: -2px;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
div.shot_text {
position: absolute;
top: 36px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
div.phone_text {
position: absolute;
top: 5px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
<div class='container'>
<div class='phone_text'>phone</div> <b> 07010710811</b>
<div class='shot_text'>shot code</div>
<div class='shot_code'> <b>123456 </b></div>
</div>
Assuming you can modify the HTML I would restructure it somewhat. That will make your life a lot easier when it comes to getting this styled right, and also styling it in the future.
.wrapper {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
}
.phone-num{
font-weight:bold;
margin-left: 45px;
}
.shot-code-num {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
.shot-code{
margin-top:20px;
margin-left:20px;
}
<div class="wrapper">
<div class='phone'>phone
<span class="phone-num">07010710811</span>
</div>
<div class="shot-code">
shot code
<div class='shot-code-num'> <b>123456 </b></div>
</div>
</div>
You can quite possibly also remove the absolute positioning as well, and replace it all with inline-blocks. It looks like you are going for something more like this:
.wrapper {
position: relative;
width: 300px;
border: 2px solid #73AD21;
text-align:right;
}
.field{
display:inline-block;
position:relative;
width:300px;
}
.field-label{
display:inline-block;
width:70px;
text-align:left;
padding:10px;
}
.field-value {
display:inline-block;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
<div class="wrapper">
<div class="phone field">
<span class="phone-label field-label">phone</span>
<span class="phone-value field-value">07010710811</span>
</div>
<div class="shot-code field">
<span class="shot-code-label field-label">shot code</span>
<span class="shot-code-value field-value">123456</span>
</div>
</div>
But I'm not sure what other requirements you have, so can't say for sure. You have a few options here. Hope some of it is helpful.
You could use float and with properties, like that :
.box{
float :left;
text-align: center;
width: 300px;
}
.top{
width: 100%;
}
.cut{
width: 50%;
float:left;
box-sizing: border-box;
}
.border{
width: 50%;
float:left;
}
<div class="box">
<div class="top">
Phone 07010710811
</div>
<div class="cut">
shot code
</div>
<div class="cut border">
123456
</div>
</div>
Of course, you have to adapt this code to your case.
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.
The title isn't very descriptive, but basically I want to create something like this with HTML and CSS:
I can do the horizontal line by wrapping the first row of boxes in a div and setting the background image for that to the line, but I'm not sure how I can group the column of boxes and add a vertical line behind them.
Any help is appreciated!
Here you go DEMO
<div id="container">
<div id ="horizontal">
<div id="border2"></div>
</div>
<div id="vertical">
<div id="border"></div>
</div>
</div>
#container {background: black;
width: 300px;
height: 300px;
margin: 0 auto;
position:relative
}
#vertical {background: white;
position: absolute;
width: 70px;
left: 40% ;
height: 300px;
top:0;
}
#horizontal {background: white;
position: absolute;
height: 60px;
top:40%;
left:0;
width: 100%;
}
#border {
width: 100%;
height: 150px;
margin-top: 60px;
border-top: 2px dashed black;
border-bottom: 2px dashed black;
}
#border2 {
width: 80%;
height: 60px;
border-right: 2px dashed black;
}
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}