I am making a web app and I am needing the 4x links that are located in the middle column to be evenly spaced vertically and for the text inside the links to be horizontally and vertically centerd as-well.
The below picture is what I am after, please note that the website is going to be responsive. I want to avoid using flexbox at this stage as I have been running into some browser compatibility problems.
CodePen Demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<img src="imgs/logo-blue.png" />
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
<section class="control-container">
<div class="column left">
</div>
<div class="column middle">
<nav>
<ul>
<li>
<i class="fa fa-chevron-down"></i>
START
STOP
PAUSE
</li>
</ul>
</nav>
</div>
<div class="column right">
</div>
</section>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font: 100% arial;
overflow: hidden;
}
#media all and (max-width: 150em) {
header {
width: 100%;
height: 5vh;
background: black;
}
header img {
height: 100%;
}
iframe {
width: 100%;
height: 65vh;
display: block;
}
.control-container {
width: 100%;
height: 30vh;
background: black;
display: table;
}
.column {
display: table-cell;
color: white;
width: 100%;
text-align: center;
}
.row {
display: block;
width: 100%;
}
.left {
background: yellow;
width: 33.3%;
height: 100%;
}
.middle {
background: black;
width: 33.3%;
height: 100%;
}
.right {
background: red;
width: 33.3%;
height: 100%;
}
nav ul {
height: 100%;
margin: 0;
padding: 0;
}
nav li {
display: block;
}
nav a {
color: white;
text-decoration: none;
text-align: center;
width: 100%;
padding: 30px;
}
nav a:hover {
background: green;
}
}
Try using display: table and display: table-row
.column.middle ul,.column.middle nav,.column.middle li {
height: 100%;
}
.column.middle li {
display: table;
width: 100%;
}
.column.middle li a {
display: table-row;
width: 100%;
}
Working Fiddle
The above solution will work but as you can see the menu items are not vertically centered. To make them centered, I wrapped the menu items contents with a div element. and added the following css:
.column.middle li a div {
display: table-cell;
vertical-align: middle;
}
Updated Fiddle
Related
In our ecommerce project all photos are squares. So some products have a lot of whitespace on top and bottom. I wan't to 'cut' that space without editing the photos (thousands). I almost achieved my goal. But parent DIV stretches to basic 100% of the IMG.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
height: 60%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
You could remove height: 60% from your image (which doesn't affect your image, but the .media's div height, since that div has no height set to it.). Now the container div resizes depending on the image's size (or the content of the other '.purchase' div in the flex-container, if that has more height).
Hope it helps, since I am really just guessing what you are trying to do here.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Try removing the height:60%; from .landscape and instead set a fixed height for both .media and .landscape in pixels.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
height: 600px;
width: 100%;
}
.landscape {
object-fit: cover;
width: 100%;
height: 600px;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Ok,I've found a solution by using the Javascript. Hope I will find some day pure CSS/HTML solution.
window.onload = resizer;
window.onresize = resizer;
function resizer() {
var div = document.getElementById('media');
div.style.height = (div.offsetWidth / 1.5) + 'px';
};
div {
box-sizing: border-box;
}
.container {
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
#media {
flex: 1;
overflow: hidden;
margin-right: 20px;
background-color: grey;
}
#media > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.purchase {
width: 360px;
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello world!</title>
</head>
<body>
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div id="media">
<img src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
</body>
</html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
i want the "slideshow" and "destination" divs to have the colored backgrounds on top f the "mainheader" "maincontent" and "content" divs. but the background is not visible. here is my code. The text in the slideshow and destination divs is visible but the background is not.
HTML
<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="content">
<header class="mainheader">
<a href="#">
<img src="#" alt=""/><h1>HEADER</h1>
</a>
<nav>
<ul>
<li>blank</li>
<li>blank</li>
<li>blank</li>
<li>blank</li>
</ul>
</nav>
</header><!--mainheader-->
<div class="maincontent">
<div name="slideshow">
<img sr ="#" alt=""/><h2>Slideshow</h2>
</div><!--slideshow-->
<div name="destinations">
<h2>Destinations</h2>
<div><!--destination-->
</div><!--maincontent-->
</div> <!--CONTENT-->
</body>
</html>
CSS
body {
align-content: center;
margin: 0px;
}
.content {
margin: 0px;
width: 100%;
height: 1000px;
background-color: brown;
}
.mainheader {
width: 100%;
height: 30%;
color: white;
background-color: #4949bf;
align-self: center;
}
.mainheader nav ul li {
list-style: none;
display: inline;
}
.maincontent {
background-image: url(img/transparent.png);
width: 80%;
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: -10%;
}
.slideshow {
box-shadow: green;
width: 70px;
height: auto;
position: absolute;
}
.destinations {
background-color: orange;
width: 30px;
height: auto;
position: absolute;
}
Your html is incorrect. Instead of class you have used name. Change these lines <div name="slideshow"> <div name="destinations"> like this <div class="slideshow"> <div class="destinations">.
And change box-shadow to background-color
.slideshow {
box-shadow: green;
like this
.slideshow {
background-color: green;
Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.
So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>FunPic - Share your pictures</title>
</head>
<body>
<div class="container">
<div id="header">
<div id="navtext">
<p>FunPic - Share your pictures</p>
</div>
<div id="menu">
<ul id="navbar">
<li>Inicio</li>
<li>Subir Foto</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
</div>
</div>
<div id="footer">©Fun Pic 2015 - Costa Rica</div>
</body>
</html>
Here's the CSS:
{
max-width: 1024px;
color: red;
margin: auto;
}
html, body {
width: 100%;
margin: 0 auto;
height: 100%;
}
.container {
margin: 0 auto;
width: 100%;
background-color: #E8E8E8;
height: 100%;
}
#header {
margin-bottom: 30;
width: 100%;
height: 50px;
float: left;
background: #8AE6B8;
}
#navtext {
padding: 14;
width: 40%;
float: left;
}
#navtext p {
margin-left: 40%;
}
#menu {
padding: 14;
width: 40%;
float: left;
}
#navbar {
margin-left: 65px;
width: 100%;
float: left;
}
#navbar li {
list-style: none;
margin-right: 10;
display: inline-block;
}
#wrapper {
margin: 30;
width: 100%;
float: left;
}
#content {
margin: 0 auto;
width: 40%;
height: 600px;
display: block;
}
#image {
width: 100%;
margin: 0 auto;
}
#image img {
width: 100%;
}
#footer {
margin: auto;
width: 100%;
height: 50px;
text-align: center;
background-color: #202020;
clear: both;
}
Do it like this
#wrapper {
background-color: #E8E8E8;
}
change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.
I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...
Ok so here is my question i have a website and in the middle i have a section and a aside. every thing else on the page is 100% but the section and aside i want to equal 80% and me aligned next to each other in the middle. but instead i get this.
IMAGE: https://twitter.com/iamalecgrogan/status/392454057345810432/photo/1
before you start saying stuff i have tried every thing doing table-cell and table verticaly align and in-line block elemets creating a div for them to go into. but nothing is working please help. here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Home | ProvideWebDesign
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<div id="header_right">
</div>
<div id="header_left">
</div>
</header>
<nav id="nav">
</nav>
<section id="section">
<article id="section_article">
</article>
<article id="section_article2">
</article>
</section>
<aside id="aside">
<article id="aside_article">
</article>
<article id="aside_article2">
</article>
<article id="aside_article3">
</article>
</aside>
<footer id="footer">
<div id="footer_right">
</div>
<div id="footer_left">
</div>
</footer>
</div>
</body>
</html>
CSS--------------------
*
{
margin: 0px;
padding: 0px;
}
#wrapper
{
width: 100%;
height: 875px;
display: table;
}
#header
{
width: 100%;
height: 75px;
display: block;
}
#header_right
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#header_left
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#nav
{
width: 100%;
height: 50px;
display: block;
}
#section
{
width: 60%;
height: 600px;
float: left;
display: table-cell;
}
#aside
{
width: 20%;
height: 600px;
float: left;
display: table-cell;
}
#footer
{
width: 100%;
height: 150px;
display: block;
clear: both;
}
#footer_right
{
width: 50%;
height: 150px;
float: left;
display; block;
}
#footer_left
{
width: 50%;
height: 150px;
float: left;
display: block;
}
Create a containing element such as a div around the section and aside, give that container a width of 80%, block display, and margin auto. Lose the table-cell display on the section and aside. Give the container a clear fix: https://gist.github.com/jelmerdemaat/3804403