Stacking Multiple Divs From Bottom to Top - html

I am trying to align multiple divs (buttonNav) to the bottom of a container div (lowerNav). I have read every question on here regarding this and tried the CSS and it does not seem to work. I tried this one: Stacking Divs from Bottom to Top amoung others, hoping someone can help.
Here is my html, I have 5 of the lowerNav containers each with multiple buttonNavs that I want to align to the bottom of the lowerNav here is the code from one, they are all set up the same way:
<div class="lowerNav">
<img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
<div class="buttonNav">
<p>Order Literature</p>
</div>
<div class="buttonNav">
<p>Downloads</p>
</div>
<div class="buttonNav">
<p>Email Sign-Up</p>
</div>
<div class="buttonNav">
<p>Meet Your Rep</p>
</div>
<div class="buttonNav">
<p>Ask a Question</p>
</div>
</div>
Here is my CSS:
.lowerNav {
width: 160px;
height: 325px;
background-color: #e3dfd7;
border: 3px solid #383431;
float: left;
margin: 15px 8px 0px 8px;
text-align: left;
display: table-cell;
vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
}
.lowerNav img {
padding-top: 12px;
}
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
}
.buttonNav p {
text-align:center;
padding-top: 14px;
}
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
}
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
}

Since the container (.lowerNav) has a fixed height and you know the size of its content this is quite easy to do with absolute positioning.
HTML:
<div class="outer">
Hello up here!
<ul class="inner">
<li>Hello</li>
<li>down</li>
<li>there!</li>
</ul>
</div>
CSS:
.outer {
position: relative;
height: 200px;
}
.inner {
position: absolute;
bottom: 0;
}
Check this CodePen for a live example of this code: http://codepen.io/EvilOatmeal/pen/fCzIv

Related

CSS position relative vs absolute

I have the following page (see code snippet below). I would like to position each of the items, so that when it is a full web page, the elements are i their desired positions, but as soon as it is viewed on narrow aspect ratio (e.g. mobile phone), then the items need to fold under each other.
I can get a full web page working, using position: absolute;. I can position the items where I want. But the problem is then on a mobile devise, the items overlap each other. So I figure I need to use position: relative;.
position: relative; allows the items to fold beneath each other on a narrow browser. However, I cannot seem to position the items where I want.
In the below example, I would like to position the items as follows:
logo
title
text screen-print-one
google apple web screen-print-two
Terms of Service some#email.com
body {
font-family: "proxima-nova" ,"Helvetica", sans-serif;
}
/* logo */
.wz-logo {
text-align: center;
padding: 20px 20px 0px 20px;
}
/* title */
.wz-title {
font-size: 120%;
color: #B2D137;
text-align: center;
padding: 0 20px 40px 30px;
}
/* text */
.text-description {
padding-left: 10%;
padding-bottom: 20px;
padding-top: 20px;
width: 500px;
}
/* screen-prints */
.screen-prints {
position: relative;
float: right;
padding-right: 10%;
}
.screen-print1 {
position: relative;
top: 100px;
left: 0;
z-index: 2;
}
.screen-print2 {
position: relative;
top: -430px;
left: -120px;
z-index: 1;
}
/* store */
.store-container {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10%;
}
.store-container .apple, .img-container .google, .img-container .web {
padding: 10px;
padding-left: 20px;
}
.store-container .google {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 10px;
}
.store-container .apple {
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
.store-container .web {
padding-top: 15px;
}
/* footer */
footer .terms, footer .contact {
display:inline-block;
padding-bottom: 30px;
padding-right: 10px;
padding-left: 10px;
}
footer .contact {
padding-right: 40px !important;
}
footer a {
color: white;
text-decoration: none;
font-size: 14px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
footer {
position:absolute;
bottom:0;
right: 0;
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="text-description">
text
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
If anyone can assist with how I can position the items, I would appreciate the help. (As you can see my main problem is trying to position the screen-print-one & screen-print-two).
Thanks
hmm there are a bunch of problems with your html logic. too many divs and not wrapped logically . but i made what i could with it
see below. or jsFiddle
.wz-logo,.wz-title {
width:100%;
float:left;
text-align:center;
}
.left_text {
float:left;width:50%;
}
.left_text .store-container div{
display:inline
}
.screen-prints {
float:right;
width:50%;
text-align:right;
}
footer {
float:left;
width:100%;
text-align:right
}
footer div {
display:inline
}
#media only screen and (max-width: 460px) {
.left_text,.screen-prints,footer {
width:100%;
text-align:center;
}
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="left_text">
<div class="text-description">
text
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
i suggest you use bootstrap for responsiveness . it's much easier to use

Reduce clickable area for an image

I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>

How to stop div from pushing other divs down?

I have some divs.
I am using a Grid system and I cannot for the life of me figure out how to stop divs from pushing others down.
When I try to set the margin top to say 50px for the border div it pushes everything else down.
I do not want to use position absolute due to being responsive grid system.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
margin-top: 100px;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top:;
}
<div class="cover">
<div class="grid">
</div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
</div>
On the border div, you can remove the margin and add:
position: relative;
top: 50px;
Seems to me that the problematic margin is here:
ul {
margin-top: 100px;
}
Remove or shrink that and add your margin to .border as intended.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top: 50px;
;
}
<div class="cover">
<div class="grid"></div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
Try using:
position: relative;
top: 50px;
Here is a pen: http://codepen.io/anon/pen/GpyMKp
For your border div. This is a way to move an element from it's usual position without affecting the other divs.
Although I feel like you would be better off just reducing the margin-top on your ul element, and you could achieve the same layout without it being a sort of "hacky" solution.

Add empty space between div's content and bottom border

I am attempting to add a bottom border to a div for the purpose of a navigation bar. The effect I am trying to achieve:
Currently, I have the following code:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item a.current {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
I cannot find a way to add the empty space in between the content of the div and the bottom border without it being the same colour as the div background.
As it currently stands you can't do this. You can't add a gap between an element and its own border. You can, however, add the border to its parent element (the div.item element in this case), then add padding-bottom to that same element to separate it from the a element:
$("a").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item.current {
border-bottom: 2px solid red;
padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item current">
Page 1
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
Note that I've also modified your JavaScript to add this .current class to the li element and not the clicked a element.
demo
new css:
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
border-bottom: 8px solid red;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
border-bottom: 4px solid white;
}
.container .item a.current {
}
One more version using :after pseudo element. Unlike other answers this will put white border inside of element, not push the green further outside.
The interesting parts I added/changed:
.container .item a {
...
position: relative;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
And here is a demo:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
position: relative;
}
.container .item a.current {
border-bottom: 2px solid red;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
</div>
Demo: http://jsfiddle.net/osajfgLc/
Not sure whether this is what you want. Try this. I added a div with class box. This also can be done using css after method.
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.box {
margin-top:2px;
height: 2px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
<div class="box"></div>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>

Absolute & Relative

I've been playing with both and I still can't seem to grasp the idea of them.
When I'm trying to make everything stay centered no matter what screen resolution you are looking at, I usually put in width with 0 auto. BUT - If I have the same property with absolute, it completely ignores this value and does not work.
So how exactly am I supposed to position an image on TOP of another image while making sure to keep it all centered for all screen resolutions as WELL as not using absolute?
EDIT: I'm trying to get the little news widget and the teamspeak widget to stay in the middle of the body.
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div id="mainbody">
<img src="images/mainbody.png" /></div>
<div class="news1">
<img src="images/news1.png" /></div>
<div class="teamspeak"> <!--Teamspeak IMG-->
<img src="images/teamspeak.png" /></div>
<div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget -->
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1037062, 100);
-->
</script>
<div id="footer">
<p>©2014 Rythmn Designs<p>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 0.1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news1
{
position: absolute;
top: 435px;
right: 815px
}
.teamspeak
{
position: absolute;
top: 435px;
right: 470px
}
#ts3viewer_1037062
{
position:absolute;
top: 465px;
right: 478px;
width: 290px;
height:190px;
overflow:auto;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
You could go about it a different way and use nested <DIV> tags, such as:
<div id="outer">
<div id="inner">
</div>
</div>
And then add your images to the CSS. See e.g. jsFiddle.
For an absolutely positioned element, assuming a fixed width
left: 50%;
margin-left: -[width/2];
left puts its left border in the middle of the screen; negative margin pulls it back to the left by half its width, centering it.
absolute positioning allows top, right, bottom, left properties to be defined relative to the window or to a containing element.
relative allows the same properties to be defined relative to where the element would normally appear in the document flow.