What I wanted to achieve was centering a string meanwhile forcing it to the bottom of the container div, but the following produces 3 different outcomes in different browsers.
<style>
#outer {
position: relative;
background-color:blue;
height: 50px;
text-align: center;
}
#inner {
bottom: 0px;
position: absolute;
background-color:red;
}
</style>
</head>
<body>
<div id="outer">
<span id="inner">
aaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
</body>
Chrome centers the #inner perfectly.
Firefox start outputting the string from the perfect center to the right, so somehow it looks a little shifted, the longer the string, the more obvious to the eye.
IE starts outputting the text from the left.
Is there any workaround for this? Which behaviour complies with the standard?
Hey i think you should give left and right :0 in your css as like this
#inner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
Put the text-align: center; on the div#inner, and remove it from the div#outer.
Your inner should have a negative margin that is 1/2 your element's width.
#inner{
position:absolute;
left:50%;
width:500px;
margin-left:-250px;
}
Positioning your inner element vertically centered in combination with absolute positioning is only possible, if you declare a width on it, which only has effect, if it is a non inline-element.
so you need this additional rules:
#inner{
display:inline-block;
width:<yourWidth>px;
margin-left:-<yourWidth/2>px;
left:50%;
}
alternatively, you could do the following:
#inner{
display:block;
left:0;
text-align:center;
}
side note: according to spec 0 may never have a unit, so always write top:0; instead of top:0px;
Well, you could use jQuery if CSS is going wacky. First hide the content using CSS, then have jQuery center it and unhide it when the content is loaded. Something like this should work:
$(document).ready(function() {
var newWidth = ($('#outer').width() - $('#inner').width()) / 2;
$('#inner').css({'visibility': 'visible', 'margin-left': newWidth});
});
This is untested but should work for any condition.
Related
I know I can make an element as high as it is wide using padding-top/bottom
#element {
width: 40%;
padding-top: 40%;
}
The reason the above works is because, when giving padding-top/bottom a percentage value, it is relative to the width of the parent, not the height.
how can i do the same thing, just making it as wide as it is high instead of the other way around?
It needs to be responsive, and the solution should work in all major browser including IE8+
Well, I found a unique hack, though it's only a half-answer (it might answer certain cases). Maybe someone with a few more wits can extend it and find a full solution. :-)
Based on the fact that <img> tags retain their proportion when scaling only one dimension, I put together a test that embeds a 1x1 spacer, and scales it to fit the height.
It does work well. Sadly, the downside is the image needs to be contained in an element which is a sibling to the content generating the height, and the width of the actual element with the content does not change.
Thus, if you're able to duplicate your content, it might actually work.
Here's a JSFiddle to demonstrate it. And, here's the commented code:
<style type="text/css">
#outer {
position:relative; /* limit the absolutely positioned #box */
}
#box {
background-color:red;
position:absolute;
height:100%; /* make this box fill the height of #outer */
display:block;
z-index:-1; /* put it behind the content box generating height (maybe not if you want to hide / copy it) */
}
img {
height:100%; /* generate the proportional square */
}
#inner {
position:absolute;
top:0; bottom:0; left:0; right:0; /* make the inner box just fill the box generated by the image */
}
.centered {
text-align:center;
margin-top:50%;
transform:translateY(-50%); /* quick vertical-centering css */
}
#box-text {
color:white;
}
#height-box {
display:inline-block; /* make the box width fit to the content - not vital either way */
}
</style>
<div id="outer">
<div id="box">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div id="inner">
<p id="box-text" class="centered">Box</p>
</div>
</div>
<div id="height-box" contenteditable="true">is<br>this<br>actually<br>possible?</div>
</div>
You might need javascript
using jquery it should be something like:
$('#element').css({
width: + $('#element').height()
})
but the above is very rough I didn't even test it
Update it works- see my fiddle:
fiddle for above
or I think I might been a bit sloppy if you prefer:
var el=$('#element');
el.css({
width: + el.height()
});
this
From here:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
I'm trying to align a html-page with the bottom of the browser-window. This is my apporach:
<body>
<div class="outer-wrapper">
</div>
</body>
.outer-wrapper{
min-height: 950px;
width: 100%;
position: absolute;
bottom: 0;
}
The problem with this solution is that when the screen is smaller than 950px high, the top of the outer-wrapper disapears above the screen and no scroll is added. Both the body and the outer-wrapper has a background-image.
Here is a sample, as you can see, the top of the red box is above the body.
http://jsfiddle.net/C5Nce/1/
The following demo should work, if I understand what you want correctly:
http://jsfiddle.net/C5Nce/10/show/
I just used a media query to detect when the page is less than 550px and set the element to be pinned to the top instead:
#media screen and (max-height: 550px) {
.outer_wrapper {
top: 0;
}
}
I've coloured it green so you can tell when the query fires.
.outer {
position:absolute;
height:100%;
width:100%;
background-color:#aaaaaa;
margin:0;
padding:0;
}
.content {
position:relative;
width:90%;
height:90%;
background-color:#444444;
margin:5%;
}
.inner {
position:absolute;
height:20%;
width:100%;
background-color:#eeeeee;
bottom:0;
margin-bottom:10%;
}
<div class="outer">
<div class="content">
<div class="inner"></div>
</div>
</div>
http://jsfiddle.net/L8H9J/
1) Remove the margin-bottom style from the inner class
2) All the content you add inside the inner class will be aligned with the bottom
3) Because of the flow of the document in HTML, you cannot explicitly align them with the
bottom
4) You can use this trick to do so, but again all elements inside the inner class will be
with flow of position:static
5) There comes the use of JavaScript to determine suitable margins for each element inside
the inner class
Tip: Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:
I would just give your outer-wrapper a height of 100% (along with html, body):
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.outer-wrapper {
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
overflow-y: auto;
background-position:bottom; //Edit
}
Then the outer-wrapper will always keep the body's height. There’s no need for the 950px height min because in the case that the viewport is too small you wanted for this to scroll and in the other case the viewport is bigger than 950px - well, it's bigger than 950px - that's a good thing.
Edit section from your code here
.outer_wrapper
{
background-color:red;
/*min-height: 550px;*/
margin-left: -75px;
top:auto;
bottom: 0;
position: absolute;
left:50%;
}
and you are specifying your red box is above the body, if you put it inside body it supposed to be placed like it as you also have specify min-height of container.
So I am making a little site just for fun - and to learn HTML a little better.
I have four divs. I want the to be arranged kind of like a collage. I have three of them in the perfect positions, but the fourth one does not show up at all unless I make the other three invisible with display:none in the CSS...
Anyone know why this would happen? Im using Chromium on Ubuntu.
<body>
<center>
<div id="content1">
</div>
<div id="content2">
</div>
<div id="content3">
</div>
<div id="cont4">
THIS ONE DOESN'T SHOW UP.
</div>
</center>
</body>
Here is the CSS:
#content1{
width:230px;
height: 160px;
background-color:blue;
border-radius:10px;
position: relative;
left: -240px;
}
#content2{
width:230px;
height: 350px;
background-color:red;
margin-top: 10px;
border-radius:10px;
position: relative;
left: -240px;
}
#content3{
width:230px;
height: 520px;
background-color:red;
border-radius:10px;
position: relative;
top: -520px;
}
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
}
From what I saw in Chrome and Firefox, cont4 is showing up, but it's way down on the page (you have to scroll to see it). I don't know exactly where you want it, but adding top: -1040px aligns it at the top of the page with the rest of the divs.
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
top: -1040px;
}
Give #cont4 a top: -1040px;. This means, for the previous div, you applied a -520px top to make it align top. So this lengh + height of that div (520+520=1040) is required for your purple div to appear. Here is the demo.
But this is not my solution. Use margin-top: -520px; instead of top: -520px; to your third div. This will shift the fourth div along with the third div. But top wont do this. top is for tweak an element with use of position property. margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.
Here is the corrected demo
The tag center is deprecated as Jared Farrish said. Actually, you should use CSS more carefully to get this types of layouts. There are lots of example is available. Trying to search with "Multi Column Layout with CSS". You can check THIS tutorial.
Also, THIS is very useful resource. THIS tool is interesting one. You can check this as well.
I''m looking to move an image of a saw in between two borders so it is looks likes this.
I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.
JsFiddle
Are you looking for something like this:
See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/
Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.
CSS
#logo-container .saw {
left: 50%;
margin: 0 auto;
position: relative;
top: 46px;
}
#tag-container {
border: 2px solid #00AC9D;
height: 150px;
margin-bottom: 5px;
position: relative;
width: 1140px;
}
see the demo:- http://jsfiddle.net/RJVXE/16/
You need to utilize both z-index and positioning.
.line
{
height:1px;
width:100%;
background:#000;
position:absolute;
left:0px;
}
.item1
{
top:5px;
z-index:5;
}
.item3
{
top:25px;
z-index:15;
}
<div style="width:100%; position:relative">
<div class="line item1"></div>
<div style="position:absolute; top:0px;left:50px;z-index:10">
<img src="saw.png" />
</div>
<div class="line item3"></div>
</div>
(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).
You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically
Before your image include a 'span' tag. Then add this properties to 'saw' class:
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
The !important is to override margin: 0 auto that actually has.
http://jsfiddle.net/2EKWS/1/
I'm trying to resize a div with an id of "homeLink". I'll start by stating that I'm a n00b to CSS and I'm looking to be thrown a bone, only because I know this is so simple. I'm also sure that it would explain something fundamental to usage of CSS that I don't understand, so any pointers to links that will help would be appreciated.
I saw this post, but I'm not sure that I understand why I can't do what I'm trying to.
I did RTFM (the one I could find), and I still don't get it. I would like to avoid invoking js for this, but maybe I wouldn't need to regardless.
Thanks for any help; code below.
<html>
<head>
<style>
#homeLink {
/*this doesn't work */
// width: 50%;
position:absolute;
left:10px;
top: 770px;
}
/* nor does this */
#homeLink a {
width: 10%;
}
</style>
</head>
<body>
<div id="homeLink"><img src="homebutton.png"/></div>
</body>
</html>
As #Mr D stated, You need to resize the image itself not the div.
This part:
#homeLink a {
width: 10%;
}
is actually wrong in terms of CSS as a has no width property. You can preformat certain behaviors or links using CSS, such as underline whilie hovering mouse over link and changing the color of visited links:
a.hover {text-decoration: underline}
a.visited {color: #999999}
<img class="image" src="homebutton.png"/>
then in your css style it:
.image {
height: 200px;
width: 300px;
}
this is not resizing because of image in container div that may be larger than the container widht and height
you can achive this by adding overflow hidden to container div.
or using following css
#homeLink,#homeLink a img {
width: 50%;
position:absolute;
left:10px;
top: 770px;
}
or
#homeLink{
width:50%;
position:absolute;
left:10px;
top:770px;
overflow:hidden;
}