I have a menu the have rectangular boxes 90x50. Some have single line text, other have multiline text
question : How to VERTICALLY align it to the bottom with pure css no hack please
Vertical aligninment in CSS isn't that easy as you'd intuitively expect. As far the straightforward property vertical-align: bottom works in table cells only. Here's an excellent resource which explains how (not) to vertical align in CSS: Understanding vertical-align, or "How (Not) To Vertically Center Content".
In a nut: the following works in real webbrowsers:
display: table-cell;
vertical-align: bottom;
But thus not in MSIE. You'd like to make the parent element relative and wrap the text in an absolutely positioned element and then put it to bottom. Here's a copy'n'paste'n'runnable example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
li {
position: relative;
width: 90px;
height: 50px;
border: 1px solid black;
}
li span {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li><span>text</span></li>
<li><span>text<br>multiline</span></li>
<li><span>text</span></li>
</ul>
</body>
</html>
I think the vertical-align property does what you want. Otherwise, perhaps you can clarify your problem further?
Edit: You can force table-cell-like behaviour for any other element by using the display property with the value 'table-cell'. I am not perfectly sure if this works with well with the vertical-align property, but perhaps you can build on it. If I remember correctly, an additional intermediate element was required.
Related
Consider the webpage below. The <img> is positioned absolutely relative to its parent, and when I load this page on Safari or Firefox, the <img> appears in the top-right, as expected (see first image). However, when the border is removed from from the <div>, for example, by setting border-width: 0, the <img> positions itself absolutely relative to the <p> tag, its sibling! See picture #2. Why is this? What difference should the border make?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin: 0;
}
div {
position: relative;
left: 0;
top: 0;
border: 1px solid red;
}
img {
position: absolute;
right: 0;
top: 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div>
<img src="content/en/flag.png" />
<p>This is a test</p>
</div>
</body>
</html>
Your image is always at the top-right. It has to do with collapsing margins.
Try to do it with a background color. You will see that your div is moving away from the top of the body a few pixels. If you delete p's margin everything would be fine, or setting p as an inline element or floating it, or even setting an overflow to auto, hidden or scroll to the parent. Another way to fight the collapsed margin is to add a border to the container element. So you really was solving this with that border.
But image is always where it is supposed to be.
Its really strange indeed but let me try to explain this actually the elements are not float and you are using margin on p tag which the div is taking properly when it has border and failed to implement it when its removed if add float property than the div will also gain its height
add overflow:auto; to div it will fix the problem
I am trying to replace div elements with button elements to improve accessibility, but I need the buttons to layout like the divs used to do. (note this only needs to work in webkit)
The div takes the width of the parent container, while the button only takes the place needed to display its content.
How can I change that?
I would not like to set something like width: 100%, because if you are using more then one button in a container with display: webkit-box the divs nicely layout to use remaining space.
Here is a small example:
<!DOCTYPE html>
<html>
<head>
<title>button test</title>
<style>
.mybutton{
display: block;
border: 1px solid red;
-webkit-appearance: none;
-webkit-border-radius: 6px;
background-color: transparent;
-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee));
text-align: center;
}
</style>
</head>
<body>
<div class="mybutton">Div Button</div>
<button class="mybutton">Button</button>
</body>
</html>
If your button is in a container with "display: -webkit-box" then just add "-webkit-box-flex: 1" to the button (or any elements) within that container. This solves it.
http://jsfiddle.net/y53VT/
I'm not sure why you have backward slashes on your -webkit rules. Remove them and they will behave the same as divs, except for some inherited styles that need to be resetted.
You can see an example of buttons and inputs playing nicely with webkit box here:
http://jsfiddle.net/dt592/
Maybe you should go more specific. Try button.mybutton { in your css...
Is there something that will do what margin does but without the background drawing in that area? For instance, when you give an element margin: 1em you get a 1em border of blank space around the element, but the background draws in that area. Is there something similar to that except where the background doesn't draw?
My problem is I'm trying to put something below three float: lefted divs and right now I can't get any spacing between that and the floated divs above it. They just abut directly against each other.
The div that is going below the float: lefted divs has the property clear: both. If there was something that made that div have space between it and that floated div above it then that would work too.
Maybe this example will help explain (and solve) your problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; }
h1, p { background-color: #eee; margin: 10px 0; }
div { background-color: pink; float: left; width: 100px; height: 100px; margin-right: 1px; }
br { clear: both; display: block; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<div></div>
<div></div>
<div></div>
<br />
<p>Lorem ipsum dolor set amit...</p>
</body>
</html>
Margins are supposed to be transparent. I think what you're seeing here is collapsing margins. Try putting a 1px border around your divs and see what happens.
Check out the CSS 2.1 spec:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Perhaps you're looking for:
border: 4px white; /* replace with your color */
With floated elements the margin around elements next to them is ignored. I think you will have to create an additional element between the floated element and the item you want.
Because the element is floated margin space won't always be properly respected. Use a margin/border hack where you simply set the element's color to the same color as your page background and its thickness to whatever you desire. Such as in the following post:
http://socialstreams.co/41/CSS_MarginBorder_Hack
I have a parent div that has position: relative and his child has position: absolute. Such positions is a must. The problem is the parent does not stretch to the height of the child. The question is how to make it stretch to the height of the child?
The mark-up is similar to this:
<!DOCTYPE HTML>
<html>
<head>
<style>
.parent {
position: relative;
border: solid 1px red;
}
.child {
position: absolute;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Hello World!</div>
</div>
</body>
</html>
Add overflow:hidden to your parent.
Edit: My mistake, this will only work if the children are floating. This cannot be achieved if the child is position absolutely. When you absolutely position an element, you're taking it out of the document flow. As far as positioning is concerned, that element is no longer a "child", even though semantically it still is.
give a height:100% to both the child and the parent.
Unfortunately, I don't think there's a way to do it, without using Javascript.
edit: Perhaps if you show why they need to be position:relative and position:absolute, we can come up with a way to remove that restriction so that what you want is possible.
I have a div that is absolutely positioned so I can place it overlapping an image. the problem is that the empty part of the div is making the image beneath it unclickable. in IE the image is still clickable but in FF or chrome its not/
Add position: relative; to the image. Here's an SSCCE, copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2750416</title>
<style>
#overlap {
position: absolute;
width: 100%;
height: 61px;
background: pink;
}
img {
position: relative; /* Without it, the image disappears "behind" div */
float: right;
}
</style>
</head>
<body>
<div id="overlap">Overlap</div>
<img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
</body>
</html>
You can't fix this through CSS alone. The easiest way is to set the div onclick event to the same function as your image onclick.
You can use the CSS4 experimental feature pointer-events:none on your absolute element. Problem with this feature is that it doesn't work in all browsers, only firefox and chrome as far as i know.
Just sharing a bit of information :)