I've got a single header with 70% height, and 5 divs each representing a different section in the page. The <header> element is getting the height property and working as expected, the div elements however won't when setting the height to any percentage value.
I've looked around and apparently I need to setup the root elements height, I did height: 100% on html and body and everything worked as expected; however the header which was responsive now isn't. Whatever is in the header is getting overflowed and out of the container.
/* === GLOBAL === */
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
height: 100%; /* EXPERIMENTAL */
}
/* === HEADER === */
header {
height: 70%;
background-color: #bdc3c7;
}
header h1 { /* The Heading "Saad Al-Sabbagh" */
margin: 0;
font-family: "PT Sans Narrow";
text-align: center;
padding-top: 2em;
}
header p a { /* The Link Inside The Description Paragraph */
text-decoration: none;
color: #3498db;
}
header p a:hover { /* The Link Inside The Description Paragraphs Hover Effect */
color: #d35400;
border-bottom: 3px solid #d35400;
}
header p { /* The Description Paragraph */
text-align: center;
font-size: 3rem;
padding-top: .3em;
font-weight: 700;
}
header ul { /* The Social Links List */
list-style: none;
text-align: center;
}
header ul li { /* The Social Links List Items */
display: inline-block;
font-size: 5em;
padding: 1em .5em;
}
header ul li a { /* The Social Links */
text-decoration: none;
color: black;
}
header ul li a:hover { /* The Social Links On Hover */
color: #d35400;
}
/* === ABOUT === */
#about {
height: 100;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Saad Al-Sabbagh</h1>
<p>Front End Web Developer, <br>Educator and Author <br># SitePoint</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</header>
<!-- About -->
<div id="about">
</div>
<!-- Expertise -->
<div id="expertise">
</div>
<!-- Recent Works -->
<div id="recent-works">
</div>
<!-- Latest Blog Post -->
<div id="latest-blog-post">
</div>
<!-- Contact -->
<div id="contact">
</div>
<!-- Footer -->
<footer>
</footer>
</body>
</html>
You have a few issues in the example:
A div will have 0 height when it is empty.
A div will wrap its contents and not 'inflate' to fit its parent's height.
Height has to have units, so your #about { height: 100; } won't work
I've corrected #1 and #3, but don't understand what exactly is the desired look you want to achieve.
/* === GLOBAL === */
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
height: 100%;
/* EXPERIMENTAL */
}
/* === HEADER === */
header {
height: 70%;
background-color: #bdc3c7;
}
header h1 {
/* The Heading "Saad Al-Sabbagh" */
margin: 0;
font-family: "PT Sans Narrow";
text-align: center;
padding-top: 2em;
}
header p a {
/* The Link Inside The Description Paragraph */
text-decoration: none;
color: #3498db;
}
header p a:hover {
/* The Link Inside The Description Paragraphs Hover Effect */
color: #d35400;
border-bottom: 3px solid #d35400;
}
header p {
/* The Description Paragraph */
text-align: center;
font-size: 3rem;
padding-top: .3em;
font-weight: 700;
}
header ul {
/* The Social Links List */
list-style: none;
text-align: center;
}
header ul li {
/* The Social Links List Items */
display: inline-block;
font-size: 5em;
padding: 1em .5em;
}
header ul li a {
/* The Social Links */
text-decoration: none;
color: black;
}
header ul li a:hover {
/* The Social Links On Hover */
color: #d35400;
}
/* === ABOUT === */
#about {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Saad Al-Sabbagh</h1>
<p>Front End Web Developer,
<br>Educator and Author
<br># SitePoint
</p>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</header>
<!-- About -->
<div id="about">
About
</div>
<!-- Expertise -->
<div id="expertise">
Expertise
</div>
<!-- Recent Works -->
<div id="recent-works">
Recent Works
</div>
<!-- Latest Blog Post -->
<div id="latest-blog-post">
Latest Blog Post
</div>
<!-- Contact -->
<div id="contact">
Contact
</div>
<!-- Footer -->
<footer>
Footer
</footer>
</body>
</html>
Related
I am unsure on how to place the image in correct location. I am using a bootstrap custom blog template, and I am trying to slightly modify it to make it look the way I want.
I want to place a image in the location of the blue rectangle on the left side as shown in picture bellow. Here I have tried couple of different things, but my images keeps rendering right under the blog title "The Bootstrap Blog", which is not what I want. I have tried using
class="col-sm-offset-1"
But the more I increase the offset, this just moves the image to the right of the screen. I can't get it to go far left. How can i accomplish this, without losing the bootstrap auto scaling for different screen sizes?
Here is my base.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
{% load staticfiles %}
<title>Blog Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Global blog css for custom defined parameters -->
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="{% url 'blog:index' %}">Home</a>
<a class="blog-nav-item" href="{% url 'about:index' %}">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Code'N Cofee Blog</h1>
<p class="lead blog-description">Live and write code. </p>
</div>
<!-- place image on page -->
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<img src="{% static 'media/Pic3.jpg' %}" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<!-- blog post goes here -->
{% block content %}
{% endblock %}
<nav>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for Bootstrap by #mdo.</p>
<p>
Back to top
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And here is my blog.css file:
/*
* Globals
*/
body {
font-family: 'Source Sans Pro', Georgia, "Times New Roman", Times, sans-serif;
color: #555;
background-color: ghostwhite;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
#media (min-width: 1200px) {
.container {
width: 970px;
}
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*
float image to left
*/
.pull-left {
float: left !important;
}
#swoosh {
padding-left: 0;
}
Thank you for your help,
Nermin
The class="col-sm-offset-1" moves the image to the right not to the left. If you increase the no like class="col-sm-offset-2" it will move to the right by 1 column. So, this is not the solution.
You have two option
NO.1
Wrap it inside class="container-fluid" and don't give class="col-sm-offset-1" see the snippet below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
No.2
Wrap it inside class="container" and add some margin-left according to your wish.
See the example below--
.image {
margin-left:-60px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 image">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I am trying to build a custom navigation bar. Currently, it looks like this:
How do I bring each of my anchor element to get in the center of each box (both vertically, and horizontally)? Also, the brand element has a bigger font, but I want a solution which will center all the elements nicely.
In short, I want it to look something like this:
The borders on the first pic is for testing obviously. I made the second pic with a photoshop edit. My code for this page looks is this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-top: 13px;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 20px;
font-weight: bold;
margin-top: 7px;
margin-right: 25px;
}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<nav class="navbar">
<div class="container">
<ul class="navbar-list navbar-list-left navbar-brand-list">
<li class="navbar-item navbar-brand-item">
BRAND
</li>
</ul>
<ul class="navbar-list navbar-list-left">
<li class="navbar-item">
Product
</li>
<li class="navbar-item">
Pricing
</li>
<li class="navbar-item">
Company
</li>
<li class="navbar-item">
Blog
</li>
</ul>
<ul class="navbar-list navbar-list-right">
<li class="navbar-item">
Log in
</li>
<li class="navbar-item">
Sign up
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="twelve column">
<h4>Basic Page</h4>
<p>
Lorem ipsum ....
</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Note: I am using Skeleton for this.
So how do I fix my navbar? These are the things I want:
The text of each anchor element needs to be centered vertically and horizontally.
I want the element containing the element to take up 100% of the height of the navbar.
Any help is appreciated!
Replace this css and check, it may help you..
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 18px;
font-weight: bold;
margin-right: 25px;
}
</style>
I'm trying to make a navbar for a new project I'm working on.
I want the navbar to have the website title in it, that is the h1 and the menu items, but when I try to do that it doesn't make both the h1 and the ul on the same line.
I want the navbar items and the navbar "header" aligned at the same height and on the same line not as diffrent blocks that can't fit together.
html, body {
width: 100 % ;
padding: 0;
margin: 0;
font - family: 'Roboto',
sans - serif;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
.main - title {
text - align: center;
margin - top: 20 px;
margin - bottom: 2 px;
}
header {
border - bottom: 2 px solid grey;
}
ul {
padding: 0;
margin: 0;
}
.nav - ul {
list - style - type: none;
float: right;
margin - right: 50 px;
display: inline - block;
}
.navbar - title > h1 {
text - align: center;
margin - top: 20 px;
}
.nav - ul > a: visited, a: link {
text - decoration: none;
color: black;
font - size: 1.5e m
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>
h1 tags are display:block by default, meaning they take up 100% width. You can change this by adding display:inline-block to .nav-brand and .nav-list:
html, body {
width: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5 {
margin: 0;
padding: 0;
}
.main-title {
text-align: center;
margin-top: 20px;
margin-bottom: 2px;
}
header {
border-bottom: 2px solid grey;
}
ul {
padding: 0;
margin:0;
}
.nav-brand, .nav-list {
display:inline-block;
}
.nav-ul {
list-style-type: none;
float:right;
margin-right: 50px;
display: inline-block;
}
.navbar-title > h1 {
text-align: center;
margin-top: 20px;
}
.nav-ul > a:visited, a:link {
text-decoration: none;
color: black;
font-size: 1.5em
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>
This is the HTML code for my BootStrap website:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Yanni Pang</title><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"><!-- Custom styles for this template -->
<link href="/css/main.css" rel="stylesheet" type="text/css"><!-- Animate CSS -->
<link href="/css/animate.css" rel="stylesheet" type="text/css">
<link href="css/minimalpace.css" type="text/css">
<script src="plugins/pace.min.js" type="text/javascript">
</script>
<link href="css/minimalpace.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript">
</script><!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript">
</script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17399906-5', 'auto');
ga('send', 'pageview');
</script><!-- End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse animated fadeIn">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span></button> <a class="navbar-brand animated slideInLeft" href="/index.html">Yanni Pang</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>Contact Me</li>
<li>test2</li>
</ul>
</div>
</div><!-- <ul class="nav nav-pills pull-right">
<li class="navbarpills">Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>test1</li>
<li>test2</li>
</ul> -->
</nav>
<div class="container">
<div class="jumbotron jumbotronothercolor animated fadeIn">
<h1>Welcome to my website!</h1>
<p class="lead">On this site, I will post random stuff!</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Education</h4>
<p>I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.</p>
</div>
<div class="col-lg-6">
<h4>Missions Trips</h4><!-- <ul class="missionslist"> -->
<ul class="missionslist">
<li style="list-style: none; display: inline">
<h5>Grace Chapel</h5>
</li>
<li>Trinidad 2014</li>
<li><a class="animated bounceIn" href="/navajonation">Navajo Nation 2015</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>Sports</h4>
<p>I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:</p><br>
<p>50 Free: 26.75</p>
<p>100 Breast: 1:17.93</p>
<p>100 Free: 1:01:01</p>
<p>Breath Holding Personal Best: 1:30:57</p>
</div>
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
<div class="col-lg-6">
<h4>Photography Gear</h4>
<p>Canon EOS Rebel t6s</p>
<p>Video Ball Mount Tripod</p>
<p>Canon EF-S 18-135 Lens with Lens Hood</p>
<p>Canon EF 50mm STM</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 social animated fadeIn">
<span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span>
</div>
</div>
<footer class="footer">
<p>© Yanni Pang 2014</p><img src="http://iplogger.org/1sF94.jpg">
</footer>
</div><!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript">
</script>
</div>
</body>
</html>
Here is my CSS:
/* Space out content a bit */
body {
background-color: #fff;
color: #000;
}
.jumbotronothercolor {
background: rgba(120, 163,rgba(210, 210, 210, 1)92, 0.79);
}
: : selection {
background: #74ff7d;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer,.singlepage {
padding-right: 15px;
padding-left: 15px;
}
/* MoreSpace for text */
.morespace {
padding-left: 80px;
}
.lessspace {
padding-left: 149px;
}
/* Nav Pills */
.nav-pills>li>a {
color: #76a25b;
}
/* End Nav Pills */
/* Text Centered */
.col-lg-12 > a {
text-decoration: none;
}
.col-lg-12 {
text-align: center;
}
.col-lg-12 a:hover {
text-decoration: none;
color: #ff9a00;
transition: .5s;
}
.col-lg-12 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
/* Main Body Links */
.col-lg-6 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
.col-lg-6 a:hover {
text-decoration: none;
color: #ff9a00;
}
.col-lg-6 {
text-align: center;
}
/* Main Body Links End */
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Customize container */
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #000;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,.marketing,.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
.tempspace {
margin-top: 50px;
}
.missionslist {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
}
.missionslist h4 {
margin: 0;
padding: 0;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
font-size: 180%;
}
.navbar-inverse .navbar-nav > li > a {
color: #74ff7d;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ff9a00;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*End*/
/*NavajoNation*/
.singlepage {
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.navajonation {
font-family: Helvetica;
font-size: 1.2em;
text-align: auto;
line-height: 2em;
}
.navajonationdonate {
padding-top: 20px;
}
.navajocenter {
text-align: center;
}
/*NavajoNation End*/
/*Col Center*/
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/*Col Center End*/
.tab {
margin-left: 40px;
}
/* Classes */
.pull-left {
float: left!important;
}
.pull-right {
float: right!important;
}
// Usage as mixins
.element {
}
.another-element {
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
z-index: 1100;
}
This is how it appears:
Website
How do I align 'Photography Gear' and 'Coding Experience' horizontally so they are parallel like the others? Also why is there a big space between the bottom of 'Sports' and 'Photography Gear'?This has been bugging me for a while now. Thanks for all your help!
You forgot close the div - second row (with sports and hobbies).
The second row div is not closed before starting the next row which causes them to be nested.
...
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
</div> <!-- This row closing tag is missing -->
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
...
Then you also have a stray closing div tag at the bottom before the closing body tag. You probably threw it down there by accident to fix a tag warning.
I'm designing a website, and I'm currently trying to do the part regarding the footer. So far I haven't had any troubles, till I decided to do the footer layout.
To be precise: I want to divide the footer into three separate columns as shown on the image below:
Yet the outcome is this:
As you can see, the footer column does not hold it's width and just stretches to the content. For different settings other things happened, but it never appeared proper to me.
My current, non working approach:
HTML
<html>
<!-- BEGIN HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN WRAPPER FOR FOOTER PUSHING -->
<div class="wrapper">
<!-- BEGIN .PAGE -->
<div class="page">
<!-- BEGIN .LOGO -->
<div class="logo">
<img class="logoBB" src="images/logo.png">
<br><text class="logosub">Tworzymy Dla Ciebie</text></br>
</div>
<!-- END .LOGO -->
<!-- BEGIN .MENU -->
<div class="menu">
<hr class="top_line">
<ul>
<li>O NAS</li>
<li>GALERIA PRODUKTÓW</li>
<li>AKTUALNOŚCI</li>
<li>ZADAJ PYTANIE</li>
<li>KONTAKT</li>
</ul>
<hr class="bottom_line">
</div>
<!-- END .MENU -->
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/slide1.png" alt="http://wowslider.net/" title="WOOD" id="wows0_0"/></li>
<li><img src="data0/images/3025992posterpdesignwork.jpg" alt="CUBES" title="CUBES" id="wows0_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/slide1.png" alt="WOOD"/>1</span>
<span><img src="data0/tooltips/3025992posterpdesignwork.jpg" alt="CUBES"/>2</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">wowslider.com by WOWSlider.com v8.6</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<!-- END .PAGE -->
<!-- FOOTER PUSHER -->
<div class="push"></div>
</div>
<!-- END .WRAPPER -->
<!-- BEGIN FOOTER -->
<div class="footer">
<!-- BEGIN FOOTER CONTAINER -->
<div class="footer_container">
<!-- BEGIN .FINDUS -->
<div class="findus">
</div>
<!-- END .FINDUS -->
<!-- BEGIN .DESIGNERS -->
<div class="designers">
</div>
<!-- END .DESIGNERS -->
<!-- BEGIN .INSPIRATIONS -->
<div class="inspirations">
</div>
<!-- END .INSPIRATIONS -->
</div>
<!-- END FOOTER CONTAINER -->
</div>
<!-- END FOOTER -->
</body>
<!-- END BODY -->
CSS
/* GENERAL PAGE SETTINGS */
* {
margin: 0;
padding: 0;
}
.page {
margin: 25px auto;
width: 960px;
}
/* WRAPPER & HTML SETTINGS */
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -168px;
}
.footer, .push {
height: 168px; /* .push must be the same height as .footer */
}
/* FOOTER SETTINGS */
.footer {
clear: both;
width: 100%;
background-color: #323232;
}
.footer_container {
width: 960px;
margin: 0 auto;
background-color: red;
}
.footer .findus {
float: left;
width: 33,33333%;
}
.footer .designers {
float: left;
width: 33,33333%;
background-color: red;
}
.footer .inspirations {
float: left;
width: 33,33333%;
}
/* LOGO SETTINGS */
img.logoBB {
margin: 0 28.95833333333333%;
}
.logosub {
font-family: Federant;
font-size: 17.83px;
color: #94979b;
padding: 0 40.625%;
}
/* MENU SETTINGS */
.menu {
margin: 0 90px;
}
.menu ul {
text-align: center;
list-style-type: none;
margin: 17px auto;
}
.menu li {
display: inline-block;
}
.menu a {
color: black;
text-decoration: none;
font-family: slabo;
font-size: 18px;
}
.menu .top_line {
width: 780px;
margin: 32px 0 0;
height: 2px;
color: black;
background-color: black;
}
.menu .bottom_line {
width: 780px;
margin: 0 0 40px;
height: 3px;
color: black;
background-color: black;
}
What I have tried (none worked):
Applying table to a footer
Using left, right and center float (in that order) with both % values and pixel values
Tried fixed values of everything in footer (this worked) yet I'm aiming to make this website responsive so that is not the way to go by any means.
If you happen to notice any other mistakes I have made, I'd be grateful for pointing them out.
Your footer columns need to have position: relative for them to become columns. Also, you have commas in your width percentages that need to be decimals. So each footer css would be as follows (with their correct class names, of course--I just grabbed one as an example):
.footer .inspirations {
float: left;
width: 33.33333%;
position: relative;
}
See Codepen
.findus, .designers, .inspirations{
display:inline-block;
position:relative;
width:calc(100% / 3);
}
Also, your three footer divs are inside the .footer_contatiner div, which has a max-width set to it. Put them outside the wrapper if you want it to extend 100% of the page width.
Try using inline / inline-block. You'd just change a few lines in the container and in each column:
.footer_container {
width: 960px;
margin: 0 auto;
background-color: red;
display: inline;
}
.footer .findus {
display: inline-block;
width: 33,33333%;
}
.footer .designers {
display: inline-block;
width: 33,33333%;
background-color: red;
}
.footer .inspirations {
display: inline-block;
width: 33,33333%;
}