In short, I'm having trouble getting my content div to align vertically within a page - I was told that in order for it to work, my container would have to have a height value that isn't auto, so I went and fixed that, but it's still not working, could anyone help me out?
HTML
<div class="units-container" style="overflow: hidden;">
<div id="home" class="section">
<div id="home-content">
<section id="intro">
<section>
<h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
</section>
</div>
</div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="blog"></div>
<div id="contact"></div>
</div>
CSS
#home {
background-color: #1a1a1a;
color: #fff;
}
.section {
padding: 0;
margin: 0;
display: block;
overflow: hidden;
}
#home #home-content {
vertical-align: middle;
text-align: center;
}
#intro {
width: 60%;
margin: 0 auto;
}
#home-content h3 {
font-family:'amblelight_condensed', 'Courier';
display: block;
color: #fff;
font-size: 2.17em;
line-height: normal;
}
JQuery (if needed)
jQuery(document).ready(function ($) {
/*--------------------------
Resize Div(s) when Window Resizes
---------------------------*/
$(".section").css("height", $(window).height());
$(".section").css("width", $(window).width());
$(window).resize(function () {
$('.section').css('height', $(window).height());
$(".section").css("width", $(window).width());
});
});
http://jsfiddle.net/sWeLw/
Relatively to your sample. Add the following CSS:
#home, #home-content {position:relative;}
and JS:
$('#home-content').css("top", ($('#home').height() - $('#home-content').height()) / 2);
i would do this, try a class and make it "left:0px"
<head>
<style>
.left
{
position:absolute;
left:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="left">
<p>content</p>
<p>more content</p>
</div>
</body>
You can use table:
HTML:
<div id="home-content">
<table><tr><td>
<section id="intro">
<section>
<h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
</section>
</section>
</td></tr></table>
</div>
and CSS:
#home #home-content {
vertical-align: middle;
text-align: center;
height: 100%;
}
#home-content table, #home-content tr, #home-content td{
height: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
Related
I am trying to place footer to the bottom of a div using bootstrap without applying margin to the div I want to push to the bottom of the div as footer. This is my attempt but the footer aligns to the top
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5>
<hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap">
</div>
</nav>
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<br> For more information visit our website
</footer>
</div>
</div>
Please how can I place the footer to the bottom of .
There are multiple ways to do that, i think the faster way for you is this case is using position: absolute on the footer;
First move out you footer from .col-lg-12 to be a directly children of .container. I also added a class .myFooter
<footer class="myFooter">
copy 2016 All rights reserved
<p>You can visit our website for more info</p>
</footer>
And then the css. Don't use css inline on the markup. I moved the color and text-align to the class.
.myFooter {
color:#fff;
text-align:center;
position: absolute;
bottom: 0;
}
The last step is to add position:relative to the .container. That way the position:absolute on .myFooter works properly.
.container {
position: relative;
}
Here is a working example:
http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview
<html>
<head>
<title>
Lugah Salisu Foundation
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
h3{
font-size: 300%;
margin-bottom: 0px;
clear: both;
margin-left: 7px;
}
h5{
margin-top: 0px;
padding: 0px;
margin-left: 15px;
color: #fff;
margin-bottom: 1px;
clear: both;
}
hr{
margin: 0px;
}
.container {
width: auto;
margin-left: 200px;
margin-right: 200px;
height:500px;
max-height:500px !important;
padding-left: 0px;
}
.nav>li {
position: relative;
display: inline-block!important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color:transparent!important;
color:#d3d3d3;
}
.nav>li>a {
padding: 10px 4px!important;
color:#fff;
}
.golden-base {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
-webkit-margin-before: 0.3em;
-webkit-margin-after: 0.2em;
}
.golden1 {
background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
</head>
<body style="background-color:#1f5060;">
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5> <hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap"></div>
<ul class="nav sf-menu">
<li class="sub-menu"><small>Home</small></li> |
</ul>
</div>
</div>
</nav>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
</div>
</footer>
</body>
</html>
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
I'm having issues with a button not displaying correctly, when the element is floated left or right the button displays fine, however if no float is applied the button doesn't display correctly.
I've prepared the following example to demonstrate:
http://codepen.io/anon/pen/xHvyt
My HTML and CSS are as follows:
<div class="section">
<div class="textbox">
<div class="text">
<h1>Woop, title</h1>
<p>content content content</p>
</div>
<div class="buttons">
<span>Find out more</span>
<div class="clear"></div>
</div>
</div>
</div>
<div class="section">
<div class="textbox">
<div class="text">
<h1>Woop, title</h1>
<p>content content content</p>
</div>
<div class="buttons">
<span>Find out more</span>
<div class="clear"></div>
</div>
</div>
</div>
<div class="section">
<div class="textbox">
<div class="text">
<h1>Woop, title</h1>
<p>content content content</p>
</div>
<div class="buttons">
<span>Find out more</span>
<div class="clear"></div>
</div>
</div>
</div>
CSS:
.section .textbox
{
width:25%;
z-index:2;
padding:2.5%;
text-align: center;
background: #4a8237;
}
.section .textbox h1
{
font-weight: 800;
font-size: 275%;
margin:0;
color:#FFF;
}
.section .textbox .text p
{
margin:10% 0;
color:#FFF;
}
.section .textbox .button
{
width: 45%;
text-align: center;
background: url('http://i.imgur.com/dUYP3sP.png');
border-radius: 5px;
display: block;
color:#FFF;
white-space: nowrap;
}
.section .textbox .button.left
{
float:left;
}
.section .textbox .button.right
{
float:right;
}
.section .textbox .button.middle
{
margin:0 auto;
}
.section .textbox .button span
{
display: block;
min-height: 40px;
padding:10%;
margin-bottom:10%;
background: url('http://i.imgur.com/NvJtuDL.png') no-repeat center bottom;
}
As you can see there are three .section divs. In each the ones where the button is floated left/right it displays properly, however when no float is applied it's almost as is the span is not displaying:block;
Thanks in advance for any help.
Changing from "display:block" to "display:inline-block" seems to fix your problem without concerns about the floats.
.section .textbox .button span
{
display: inline-block;
min-height: 40px;
padding:10%;
margin-bottom:10%;
background: url('http://i.imgur.com/NvJtuDL.png') no-repeat center bottom;
}
I'm using a sticky footer and it keeps being pushed down past the browser height, causing a large amount of whitespace to appear between my main content and the footer. When I use Firefox's inspect element tool however it appears exactly how I want it, removing the white space.
I also have a jQuery slider I'm using called nivoslider but I don't think that's having any affect on it.
Any suggestions?
HTML
<!DOCTYPE>
<html>
<head>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<title>Page Title</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 400, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Last', // Prev directionNav text
nextText: 'Next', // Next directionNav text
});
});
</script>
</head>
<body>
<div id="header">
<div class ="title">
<img src="res/title.png" id="title-img" alt=" ">
</div>
<div class="navbar">
<div class="navbar_inner">
<ul>
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="column-left" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="C-wrapper">
<div id="column-right" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="res/slider/slider-img1.jpg" alt="LAN" title="#caption1" data-transition="" />
<img src="res/slider/slider-img2.jpg" alt="LOL" title="#caption2" data-transition="" />
<img src="res/slider/slider-img3.jpg" alt="Starcraft" title="#caption3" data-transition="" />
</div>
</div>
<div id="caption1" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text</p>
</div>
<div id="caption2" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="caption3" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="column-center">
<p>text text text text text text TEXT</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS
*{
margin:0;
padding:0;
text-decoration:none;
}
html{
height: 100%;
}
body{
height: 100%;
min-height: 100%;
background:#1010bf url(../res/bg/bg-hex.png);
}
#header{
margin: 0 auto;
width: 100%
margin-top: 10px;
}
.title{
margin: 0 auto 0 auto;
position: relative;
width: 50%;
}
.navbar{
margin-top: 20px;
margin-bottom: 35px;
padding-top: 10px;
position: relative;
min-height: 30px;
width: 100%;
background: #525454;
float: left;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
border-bottom-color: #000;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.navbar_inner{
margin: 0 auto;
width: 50%;
}
.navbar .navbar_inner ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 10px 40px;
display: inline;
}
.navbar a:link{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #059695;
}
.navbar a:visited{
color: #059695;
text-decoration: none;
font-weight: bold;
}
.navbar a:active{
text-decoration: none;
font-weight: bold;
}
.navbar a:hover{
text-decoration: none;
font-weight: bold;
color: #00f7ff;
}
.navbar a:focus{
text-decoration: none;
font-weight: bold;
padding: 40px 40px;
color: #00f7ff;
}
#wrapper{
margin: 0 auto -75px auto;
width:1100px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{
margin: 0 auto 0 auto;
clear: both;
}
.column{
background-color: #fff;
width: 250px;
height: 500px;
}
#column-left{
float: left;
}
#column-right{
float: right;
}
#column-center{
margin: 10px 30px;
float: left;
width: 540px;
height: 240px;
background-color: #fff;
}
.C-wrapper{
clear: right;
position: relative;
}
.slider-wrapper{
margin: 0 auto;
width: 540px;
border-style: solid;
border-color: #000;
border-width: 5px;
}
.footer{
background-color: #525454;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
}
.footer, .push{
clear: both;
height: 70px;
}
The #wrapper div is currently set to be a minimum height of 100%; try removing that declaration, as it is likely causing the main content to be a minimum size of the entire browser window, which will naturally push all other content below the window.
I would recommend removing the min-height: 100%; and instead adding background-color: #525454; to the html in css.
Looks like this:
html {
background-color: #525454;
}
This will fill anything under the footer with that color making it fill to the end of the browser.
My portfolio reference
I also found this link if you want your footer to be a set height and stay at the bottom.
Set height footer
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo