Can I achieve this with css only?
50% does not work on rectangle
1 more thing: no fixed height.
One option is to set a fixed value for horizontal border-radius as follows:
div {
display: inline-block;
border-radius: 50px / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Setting a fixed value of horizontal border-radius does the trick!
</div>
You may also want to use a different percentage value instead:
div {
display: inline-block;
border-radius: 12% / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Or set a different percentage value for horizontal border-radius
</div>
Try this
div{
width:200px;
height:100px;
background:lightblue;
border-radius:50px;
border:2px solid black
}
<div></div>
Edit: use 50vw for making it responsive any height will be okay
div{
width:500px;
height:300px;
background:orange;
border-radius:50vw;
}
<div></div>
There is a trick for that
Just us a very large border-radius value!
e.g. {border-radius:10000px;}
Here is link to demo (Try changing width/height to see working) : http://jsfiddle.net/890z699p/
.rect {
width: 300px;
height: 200px;
background: #000;
border-radius: 10000px;
}
<div class="rect"></div>
It works on me, below is my code snippet
div {
display: block;
border-radius: 50%;
width: 200px;
height: 100px;
border: 2px solid #000;
background-color: #009EE0;
}
<div>
</div>
Related
This question already has answers here:
Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)
(4 answers)
Closed 7 years ago.
I have multiple boxes (items) with an item number and a description. I want to vertical align my item number regardless of the description height (using only HTML and CSS).
See this image for more info:
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder</div>
</div>
As you can see I have multiple boxes and the description text can have different lengths, so I can't absolute position my item number relative to the top.
Any one got any suggestions on how to achieve this?
you should position your number absolutely in order to achieve this. You could also minimalize markup by using a pseudo element, allowing you to do this with a single element.
I have also used a data-attr in order to allow you to dynamically alter the number within the div if you so wish.
Something like:
div {
width: 200px;
border: 5px solid lightgray;
box-shadow: 5px 5px 10px dimgray;
margin: 20px;
padding: 20px;
padding-left: 30px;
position: relative;
}
div:before {
content: attr(data-pointNum);
position: absolute;
top: 50%;
left: -5px;
box-sizing: border-box;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 30px;
border-radius: 50%;
border: 5px solid tomato;
background: white;
box-shadow: 5px 5px 10px dimgray;
}
<div data-pointNum="1">some text</div>
<div data-pointNum="2">some moretext
<br/>spanning multiple
<br/>lines</div>
Demo: http://jsfiddle.net/UI_Designer/xzmzpL4g/1/
.item{
border:1px solid #000;
padding:20px;
margin-left:20px;
position:relative;
margin-bottom:20px;
}
.item-number{
position: absolute;
left:-10px;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:50%;
text-align:center;
background:#FFF;
top: 40%;
transform: translate(-20%,0);
}
you can try this
$(document).ready(function() {
$('.item-number').css('top', ($('.item').height() / 2) + 'px');
});
.item-description {} .item {
border: 1px solid #000;
width: 150px;
padding-left: 20px;
}
.item-number {
position: absolute;
left: 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder Text placeholder Text placeholder Text placeholder</div>
</div>
and this is demo
https://jsfiddle.net/0xf5hvej/
of course you will need more styling to achieve what you need but this is the basic
I want my 'header' div to sit within the 'container' div. At the moment the 'header' div is sitting above the 'container' div and I cannot seem to put it in it. Below is the coding. Thanks for the help.
HTML:
<body>
<div id="container">
<div id="header">
<h1>Title Goes Here</h1>
</div>
</div>
</body>
CSS:
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
It is inside it. Remove the background color on your header and you'll see the container's background behind.
It is inside the container, just the looks like it's on top because of the colors. Open up w/e browser tools you prefer and take a look at the container div.
It is inside your container. Adding padding or remove the background will make it more visable
jsfiddle
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
padding:20px;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
set background color to transparent or just remove it temporarily, you'll see that the header is inside there
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
In a big div I have search box which basically is a div having text box glass image and button. Requirement is to positioned this search wizard vertically in middle and on right side in div. This box is coming on top left inside div. I have tried different things but not getting how to set it. Please guide me.
Thanks
<div class="Right">
<div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
margin: auto 0 auto auto;">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
padding:auto 0 auto 200px;
}
div.header-search
{
overflow:auto;
display:inline;
text-align:right !important;
border:3px dashed blue;
padding:20px 0 auto 50px;
}
div.header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:2px solid #316200;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
background:white url(../images/SearchImage.png) 0 50% no-repeat;
}
div.header-search input.searchbutton
{
border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-top-right-radius:5px;
-webkit-top-right-radius:5px;
-moz-right-radius:5px;
background:#458A00;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
background: -moz-linear-gradient(top, #A5D376, #326400); /* for firefox 3.6+ */
width:50px;
height:28px;
color:White;
font-size:16px;
font-weight:bold ;
border:2px solid #316200;
border-left:none;
}
The first step in understanding how positioned elements is reading an article like this one:
CSS-Tricks.com - absolute positioning inside relative positioning
you are using position: relative on the wrong div as it should be assigned to .Right- while header-search should have instead 'position: absolute;' and values for left/right and top/bottom
the article above explains it much better than I could ever do!
Perhaps this would be a good starting point:
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right {
position: relative;
width: 50%;
float: right;
border: 1px dashed green;
height: 95px !important;
padding: auto 0 auto 200px;
}
div.header-search {
position: absolute;
right: 0;
top: 0;
overflow: auto;
display: inline;
text-align: right !important;
border: 3px dashed blue;
padding: 20px 0 auto 50px;
}
remove all styling from your div's as this is bad practice. Next, convert your two styles for .Right and .header-search like this:
div.Right {
border: 1px dashed green;
height:95px;
position: relative;
}
div.header-search {
border:1px dashed blue;
position: absolute;
top: 30px;
right: 0;
}
This should accomplish what you are attempting. There isn't a clean, easy way to center vertically, but since you have a fixed height on the outter .Right div and a fixed height on the search elements, it's best just to use a fixed top position on the inner .header-search.
You can see it in action on this jsfiddle:
http://jsfiddle.net/L4sgc/