I am trying to make a website navbar using divs instead of the usual lists. The divs are inline-blocks and on hover, the navbar expands. This should cause all the inner divs to expand (height:100%), while retaining centered text. I want to use only html and css.
One way is to set line-height and use vertical-align:middle. But since the div expands vertically in a dynamic manner, I cannot give a static value to line-height. I tried using line-height:100%, but that doesn't seem to help!
The html:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="headContainer">
<div id="logo"></div>
<div id="rightBar">
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
</div>
</div>
</body>
The Css:
* {
margin: 0;
padding: 0;
}
#headContainer {
height: 80px;
width: 100%;
background-color: white;
border: 5px solid red;
}
#headContainer:hover {
height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}
#rightBar {
line-height:100%;
display: inline-block;
width:80%;
height: 100%;
border: 5px solid blue;
vertical-align: middle;
}
.navelement{
display: inline-block;
height: 100%;
border:2px solid cyan;
}
The JSFIDDLE:
http://jsfiddle.net/GBz3s/1/
If you're using a precise height for your nav, then you can use a hack with padding by declaring the height, floating the divs, doing some math, and making adjustments accordingly. You can see an updated fiddle here: http://jsfiddle.net/Perry_/GBz3s/3/
.navelement{
float: left;
width: 24.25%;
border:2px solid cyan;
position: relative;
height: 70px;
padding: 25px 0 0 0;
}
#rightBar:hover .navelement {
height: 90px;
padding: 45px 0 0 0;
}
You can do it like this
you need to give display: inline-table; to .navelement and
display: table-cell; vertical-align: middle; to .navelement a
CSS
.navelement{
display: inline-table;
height: 100%;
border:2px solid cyan;
}
.navelement a {
display: table-cell;
vertical-align: middle;
}
Related
I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
</body>
</html>
Use following css:
.parentbox:before {
vertical-align: bottom;
}
.childbox {
vertical-align: bottom;
}
Currently you have set vertical-align: middle in your css causing your child element to appear in middle of screen.
* {box-sizing: border-box;}
body {margin: 0;}
.parentbox {
width:500px;
height:100vh;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: bottom; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: bottom; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
}
<div class="parentbox">
<div class="childbox">
I shall be in the bottom of parentbox regardless of its size!
</div>
</div>
As per CSS specification, the parent must be set to position: relative and the child can be set to position: absolute or fixed
The modified fiddle for your amusement, know that the answer to this question can be found pretty much anywhere both on this website and the internet. Positioning, that's the word.
JSFiddle
Also, a nice link about an article on positioning, might be helpful.
Positioning
here maybe it help.
html,body{
height:100%;
margin:0;
padding:0;}
.parentbox{
background:#ccc;
height:100%;
display:flex;
align-items:center;
justify-content:center;}
.childbox{
align-self:flex-end;
background:#999;}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
it has many ways to answer.
position absolute, and set bottom to 0.
display flex and set align items or align self
you need to read more about css.
wish it help.
You don't need to add the pseudo element for that just add position styling and there you go.
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
position: relative;
}
.childbox {
display: block;
padding: 5px;
border: 2px solid black;
position: absolute;
left: 0;
right: 0;
bottom:0;
margin: 5px;
}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
Here is your Answer, Through CSS itself you can achieve this.
.parentbox{
height: 300px;
width: 200px;
background-color: #990000;
position: relative;
}
.childbox{
color: #fff;
background-color: #000;
position: absolute;
bottom: 0;
padding: 10px;
}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
Please try it once..
HTML
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
CSS
.parentbox {
width: 500px;
height: 400px;
border-style: solid;
text-align: center;
position: relative;
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle;
padding: 5px;
border: 2px solid black;
position: absolute;
bottom: 5px;
left: 12% !important;
}
I hope its helpful to you
.parentbox {
position:relative;
}
.childbox {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
There are many method to solute your requirement.Hope it can give you some tip
I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.
Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/
I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
display: inline-block;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
<div id="container">
<div id="cover">
<img src="http://placehold.it/160x100"/>
</div>
<div id="list">
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/60x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
</div>
</div>
This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.
In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.
Relevant CSS:
width: calc(100% - 240px);
Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1
It is always better to specify a proper box-sizing. So include this at the top of your CSS:
* { box-sizing: border-box; }
.
Float the #cover left and remove the display: inline-block from #list.
This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.
Fiddle: http://jsfiddle.net/6x66dLdy/4/
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
float: left;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
test this
http://jsfiddle.net/6x66dLdy/3/
#container {
height: 120px;
background: #ccccff;
width:1000px;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
width:200px;
float:left;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
width:600px;
float:left
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
To answer your question you can specify min-width:800px; for the id #container
so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/
How can I get rid of the excess space on the right side of the browser window?
In the picture below, Firebug has highlighted my #menuDiv div and the white portion on the right is not part of the border for that element. So where is it coming from? Perhaps the body?
When I look at the body element the same way, Firebug shows that it does indeed compass the extra space on the right. But it also shows that body has margins and padding of 0! What's going on here? And how can I fix it so that the page is centered?
(Btw, there is some empty space at the top because I've set body's height to 98% of the html for height sizing reasons.)
Demo
http://tuningcode.com/practice/2014-4-24-01.html.
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Math Browser</title>
<style>
html {
font-family: "Cambria", "Arial", "Helvetica", sans-serif;
}
html, body {
height: 100%;
}
body {
height: 98%;
}
* {
padding: 0;
margin: 0;
}
.info-pane .section p {
margin-top: 1em;
margin-bottom: 1em;
}
div {
padding: 5px;
outline: none;
}
#browserDiv, #infoDiv {
overflow: auto;
max-height: 600px;
}
#browserDiv, #infoDiv {
float: left;
margin: 1%;
height: 85%;
}
#browserDiv {
width: 46%;
border: 1px solid black;
}
#infoDiv {
width: 46%;
border: 1px solid #47d;
}
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
#menuDiv h2.innerDiv {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="menuDiv"><h2 class="innerDiv">Math Browser</h2></div>
<div id="browserDiv"></div>
<div id="infoDiv"></div>
</body>
</html>
in css, width by default does not include padding or border, so two divs with width 48% and 1% margin will fit the width of their parent. the moment you add any padding or border, the combined width of your inner divs will be greater than 100%.
You can do two things:
1) set the box-sizing property of css, keeping in mind that there are some compatibility issues
#browserDiv, #infoDiv {
box-sixing: border-box;
}
2) set the width/margin of a wrapper div, and use an inner div to set the padding/border.
<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>
.wrapper {
width: 48%;
margin: 0 1%;
}
#browserDiv, #infoDiv {
padding: 5px;
}
#browserDiv {
border: 1px solid blue;
}
#infoDiv {
border: 1px solid red;
}
I'm a bit of a dinosaur, so I tend to use the latter.
I pasted your sample into JSFiddle. It looks like at least part of the problem is this:
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
The width: 95%; isn't working out quite right. Simply removing this seemed to do the trick.
your culprit:
#menuDiv {
width: 95%;
}
using display:block magic (default for all <div>'s), you don't need to set width to get full width
I have the following HTML/CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test script</title>
<style>
body, div, html {
margin: 0;
padding: 0;
}
.outer {
text-align: center;
}
.inner {
display: inline-block;
margin-top: 20px;
padding-left: 50px;
}
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: inline-block;
height: 200px;
line-height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
}
.inner div:hover {
border: #0F0 solid 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
What's really strange is that when you mouse over a div, the change in the border size causes the text within the div to be pushed down as well as the other divs to be pushed down as well.
However, if you remove the text from the divs (i.e., "1", "2", "3" and "4"), then the problem does not occur.
Why does the text within the divs cause the layout to break?
Thank you.
If you switch out display:inline-block; with display:block; float:left; it works in safari.
body, div, html {
margin: 0;
padding: 0;
}
.outer {
text-align: center;
}
.inner {
display:block;
margin-top: 20px;
padding-left: 50px;
float:left;
}
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: block;
height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
float:left;
line-height: 200px;
}
.inner div:hover {
border: #0F0 solid 50px;
box-sizing: border-box;
}
http://jsfiddle.net/blaird/hFvPT/
I honestly have no idea why.
The problem is your line-height. It is set to 200px which is the same as the height of the box, so when you increase the border to 50px you only have room for 100px. One simple fix is to add the lower line-height number to your hover:
.inner div:hover {
border: #0F0 solid 50px;
line-height: 100px;
}
EDIT
As Barbara Laird has pointed out, this does not actually seem to fix the problem. You could add overflow:hidden to the box and make it work, but it is not pretty. An alternative solution, which also keeps your text vertically centered, would be to add a wrapper and use display:table:
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: block;
height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
float: left;
display: table;
}
.inner div span {
display: table-cell;
vertical-align: middle;
}
Here is a working example: http://jsfiddle.net/7JH55/
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/