Can you please take a look at this CSS DEMO and let me know how I can center the inner div inside the outter div and also center the text for inner div?
.outer{
width: 100px;
height: 100px;
background: #fc2e5a;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.inner {
width: 80px;
height: 80px;
background: #fff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div class="outer">
<div class="inner">Test</div>
</div>
Without using the table-cell or flex-box or position if you know the exact sizes of your divs then you could do something like this:
.outer{
width: 100px;
height: 100px;
padding: 10px;
border-radius: 50%;
background: #fc2e5a;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.inner {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
text-align: center;
background: #fff;
}
Here is the demo
Notice that I removed the browser specific prefixes for border-radius and also set it to 50% to make it independent from the whole size.
http://jsfiddle.net/2Wkqn/5/
Add the lines
position: relative;
top: 10px;
left: 10px;
to your .inner CSS
Wrap your text "Test" in paragraph tags then add a class ".inner p" to your CSS and enter the lines:
padding-top: 30px;
text-align: center;
Related
I would like to achieve that the boxes inside the container div resize and fit inside it when browser window is resized. At the moment container resizing works fine but I have problems with it's child elements. I've tried different ways but didn't get the desired result.
.container {
position: relative;
width: 21%;
min-width: 262px;
height: 202px;
left: 47px;
top: -164px;
background-color: green;
border-radius: 2px;
box-shadow: 5px 5px 5px #111111;
border-style: solid;
border-color: white;
border-width: 5px;
}
#box_inside_1 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -36px;
left: 29px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
#box_inside_2 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -105px;
left: 260px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
#box_inside_3 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -172px;
left: 515px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
<div class="container">
<div id="box_inside_1"></div>
<div id="box_inside_2"></div>
<div id="box_inside_3"></div>
</div>
The container should probably be the thing that has an id, and the boxes should have a class. For instance, if you want to have 3 inline divs within the container, you could do this:
<style>
#container {
position: relative;
text-align: center;
}
.box-inside {
display: inline-block;
width: 16%;
height: 50px;
}
</style>
<div id='container'>
<div class='box-inside'>
</div>
<div class='box-inside'>
</div>
<div class='box-inside'>
</div>
</div>
Or, alternatively, you could make the inner divs display block and float: left or float: right and then put
<div style="clear:both;"></div>
after them to clear the floating functionality. Or, if you do not want them inline, then just make them display: block, and they will fall one after the other. What you probably do not want though, is absolute positioning, because you appear to have a list of very similar divs. Absolute positioning is more appropriate for niche cases of weird layouts. Also, the top, left, right, and bottom styles only apply when the position is absolute, fixed, or relative, so you don't need those if you use the default static positioning on the inner boxes.
I have code like this:
https://jsfiddle.net/y09dngnj/1/
<div style="border: 1px solid green">
<div class="biddingStat" id="biddingStat0"
style="background-color: #DC0707;opacity: 1;
text-align: center; ">10000
</div>
</div>
.biddingStat {
width: 80px;
position: relative;
bottom: 0px;
background-color: #eeee22;
padding-top: 20px;
/*left: 40px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 30px;
height: 100px;
}
If you change css from padding-top: 20px to padding-top: 5px and rerun fiddle, although there is height 100px of red div, the height changes. I'd expect that text would change its position to be more distant from top edge but height of div would stay 100px no matter what.
How to keep 100px height of div and have text padded from top?
Change padding-top to margin-top in the CSS file.
See: CSS Box Model
<div style="border: 1px solid green"><div class="biddingStat" id="biddingStat0" style="background-color: #DC0707;opacity: 1;text-align: center; ">10000</div></div>
<style>
.biddingStat
{
width: 80px;
position: relative;
bottom: 0px;
background-color: #eeee22;
margin-top: 150px;
padding-top: 20px;
/*left: 40px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 30px;
height: 100px;
}
</style>
If you don't want padding to affect the dimensions of an element you can use box-sizing: border-box; which will allow the div to not be affected by any padding or borders added to it.
I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;
I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>
I wanna place a profile picture that has a width of 200px and an unknown height, inside a div container. The div is 150px x 150px. The img should be centered horizontal with the bleed hidden on each side. I cannot get this to work, the unknown height is messing it up, since the way the img width will appear is depending on the height. - A landscape img will get a higher width to fill out the height difference and keep the img in proportion. If it's a portrait image, the width should be 150px as the div...
Watch image: http://s18.postimage.org/52hfcc5h3/Sk_rmavbild_2012_06_26_kl_19_12_49.png
#profilePicture {
display: block;
float: left;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#profilePicture img {
min-width: 150px;
min-height: 150px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
position:absolute;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Have you considered using background-images? It would make it much easier.
.img {
overflow: hidden;
background-image: url('/xyz.jpg');
background-size: cover;
background-position: center;
}
Here's The fiddle -> http://jsfiddle.net/haNj3/1/
I think what you want to do is this.
.main{
width:150px;
margin: 0 auto;
overflow:visible;
position: relative;
height: 200px;
outline: 1px solid blue;
}
img.absolute{
width: 200px;
left: 50%;
margin-left: -100px;
margin-top: 0;
position:relative;
outline: 1px solid red;
}
I think there is no need to use absolute positioning in this case.