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.
Related
I want to add an increasing amount of text using Javascript into a div.
When I change the the text inside the div in the html, it is responsive, but it responds by increasing the width in both directions rather than only pushing the text to the left, which is the desired behavior.
I have thought about using float, but as there are no elements to the left or right of this div, I'm not sure it would make sense in this situation.
Here is the link to my codepen: http://codepen.io/sentedelviento/pen/bZzPrO?editors=1100
html:
<body>
<div id='parent'>
<div id='test'>Will remain centered no matter</div>
</div>
</body>
css:
#parent {
width: auto; height: 10%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 2px solid blue;
}
#test {
width: auto; height: auto;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
position: relative;
border: 2px solid black;
}
Check this:
http://codepen.io/anon/pen/bZzXPw?editors=1100
#test {
max-width: 80%; height: 80%;
margin-top: 1%;
float: right;
border: 2px solid black;
margin-right: 10%;
}
You could also use absolute position but must remember to align to right:
#test {
max-width: 80%; height: 80%;
margin-top: 1%;
border: 2px solid black;
margin-right: 10%;
position:absolute;
right: 0%;
}
I can't make one circle center inside another.
I can't understand whats wrong.
I have also tried doing it with a square, and that wont work too.
Heres my jsfiddle.
.circle {
width: 170px;
height: 170px;
border-radius: 85px 85px 85px 85px;
background: lime;
}
.circle-inner {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border-radius: 75px 75px 75px 75px;
background: red;
You could give same size to both containers and add a padding to the wrapper like padding:10px;. DEMO. It is the most simple way i think of.
.circle {
width: 150px;
height: 150px;
padding:10px;
border-radius: 85px 85px 85px 85px;
background: lime;
}
Change your CSS to this:
Make your circles same size and add padding to containing circle
/*My css*/
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: lime;
padding:20px;
}
Add this to your code for your inner circle:
position:relative;
top:10px;
Note that you can also make your code a lot cleaner by using shorthand:
Change border-radius: 75px 75px 75px 75px; into border-radius: 75px;
The same goes for .circle
Here's another option using:
.circle-inner {
margin: auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
http://jsfiddle.net/John_C/x683mtbh/
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;
I'm building a MDI WEB application, and have a window created made by a article element, with a header and a section for content. Since it's an MDI app, the article is set to absolute, so it can overlap other windows. I need a scrollbar to appear in the content section, but not in the header.
<article id="win3">
<header> … </header>
<section> … </section>
</article>
CSS:
article {
position: absolute;
min-width: 500px;
width: 918px;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
border-style: ridge;
border-color: #ddd;
border-width: 4px;
}
article>section {
/* reduce diameter of rounded corner to match the inside curve of the border */
border-radius: 10px;
-moz-border-radius: 10px;
display: block;
overflow: auto;
border: none;
width: 100%;
background-color: white;
padding: 10px 10px 10px 20px;
min-height: 50px;
height: 100%;
}
It looks like the overflow: auto is ignored in Firefox (v 22), but the scrollbar does appear in Chrome.
Any ideas on how I make the scrollbar reliably when needed in the content section?
Your key problem is with padding value, so you need to set width decreasing some percentage in your article>section
article>section {
/* reduce diameter of rounded corner to match the inside curve of the border */
border-radius: 10px;
-moz-border-radius: 10px;
display: block;
overflow: auto;
border: none;
/*width: 100%;*/
width: calc(100% - 30px) /* or set fixed width percentage like 90% */
background-color: white;
padding: 10px 10px 10px 20px;
min-height: 50px;
height: 100%;
}
article {
position: absolute;
min-width: 500px;
width: 918px;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
border-style: ridge;
border-color: #ddd;
border-width: 4px;
height:100px;
}
article>section {
/* reduce diameter of rounded corner to match the inside curve of the border */
overflow:auto;
height:100%;
border:none;
display: block;
padding: 10px 10px 10px 20px;
min-height:50px;
}
Does anyone in here knows how to make a div go to the center of the page (vertically) no matter the screen resolution or window size of the user? As an example, the login page of Instagram. If you make your window smaller, the div will keep floating at the center until it gets to the top. I made that, but the problem was that when the user kept making the window smaller, the div was actually going out of the user window (to the top).
Here is the Instagram login page for the example:
https://instagram.com/accounts/login/
And here is my page for the other example:
http://www.farespr.com
Would appreciate an answer =)
EDIT: This is my main div code:
#wrapper2{
width: 960px;
height: 530px;
top: 50%;
margin-top: -280px;
margin-right: auto;
margin-left: auto;
position: fixed;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #dcdcdc;
box-shadow: 0px 0px 5px 3px #f0f0f0;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
background: -moz-linear-gradient(top, #fafafa, #efefef);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef');
}
This will work for any size div.
demo: http://jsfiddle.net/BxLhz/
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: #cc333;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
UPDATE:
demo: http://jsfiddle.net/Ha4PU/
CSS:
#wrapper {
width: 200px;
height: 200px;
background-color: #ccc333;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#media only screen and (max-height : 200px) {
#wrapper {
position: relative;
}
}
where max-height = height of .wrapper