UPDATE: Here's a Fiddle: https://jsfiddle.net/720v4zdy/8/
I'm customizing a tumblr blog to match someone's site and it's almost in good shape. We started with a theme that already matched it closely and then made some changes in CSS.
The last problem I can't solve is how to make the navigation bar stretch the entire page while containing all of the links in a max-width of 1024px.
Here's the tumblr blog WIP: http://craftysheepblog.tumblr.com/
I want the navigation bar to stretch the entire page, but the links to be contained with a max-width of 1024px. The trouble here is I only have one DIV to do this with, so I'm not quite sure how to make it happen.
I'm using this currently, which works somewhat. It gets ugly when you make the browser window smaller though.
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
width: 100%;
}
You can set the nav to max width: 1024px and fill the "gaps" on the sides with ::before and ::after pseudo elements. You'll need to hide the overflow on header#top to avoid sideways scrolling, because the pseudo elements are set wider than the content.
This does rely on you setting the height of your nav and following suit with the <a> (height, line-height, etc.) ...
Also - tweak some more; there is a 600px break point in your CSS on the live site that will interfere with this (along with a lot of your extra CSS that I didn't clean up).
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
margin: 0;
}
#top {
overflow: hidden;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
max-width: 1024px;
margin: 50px auto 20px;
height: 50px;
width: 100%;
border-width: 0;
padding: 0;
position: relative;
}
#top nav::before{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
right: 100%;
}
#top nav::after{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
left: 100%;
top: 0;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
border: 0;
display: inline-block;
padding: 0 1em;
margin: 0;
height: 50px;
line-height: 50px;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<nav>
<a class="page" href="#">Link 1</a><a class="page" href="#">Link 2</a><a class="page" href="#">Link 3</a>
</nav>
</div>
</div>
</header>
How about using max-width: 1024px;
The best way to do this is to use a ul inside of a div as your navigation bar. The ul can contain all of your links. That way, the div can have a width that spans the entire page while the unordered list has a max width of 1024px.
Example code:
<html>
<head>
<style>
#nav {
width: 100%;
height: 20%;
}
#nav-links {
max-width: 1024px;
}
</style>
</head>
<body>
<div id="nav">
<ul id="nav-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>...</li>
</ul>
</div>
</body>
</html>
Then you can style your ul as a nav bar however you like. Here's a good link for that: http://www.w3schools.com/css/css_navbar.asp
With the amount of information you have shared it is hard to say. Obviously the cleanest way to accomplish this is to insert another element (div or otherwise) around these child elements, and assign it a max-width... however this does not sound as if it is an option for you?
If you know how many elements you want to make up the 1024px, you could assign their widths manually (i.e. give each of the four children a width of 256px, or something similar).
If you do not know any of these things, and your options for the space are limited, Javascript is your best option. You could write a script that counts the children, and either assigns their widths appropriately or inserts clears at the proper location.
If you expand your question to target a specific approach, I'm sure myself and the many gurus on here will be able to give you more specific guidance.
Use flexbox: https://philipwalton.github.io/solved-by-flexbox/
The links should stretch as normal but start to shrink when they each exceed 341px which is 1023px as a total width.
Note: Snippet best viewed in Full Page mode.
Relevant CSS
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
}
.row {
max-width: 100%;
}
#top {
margin-top: 0px;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
text-decoration: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
#posts {
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.column,
.columns {
padding: 0;
}
#posts article:nth-child(1) {
padding-top: 20px;
}
#posts article .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 36px;
color: rgb(38, 39, 43);
text-align: center;
font-weight: 500;
}
#posts article footer {
display: none;
}
#paginate {
display: none;
}
#bottom {
border: none;
}
#bottom {
border: none;
max-width: 1024px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<img class="headimg" src="http://assets.tumblr.com/images/x.gif?v=1">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<div class="description"></div>
<nav>
<a class="page" href="/online-store">Shop NAO</a><a class="page" href="/nao-couture">NAO Couture</a><a class="page" href="/nao-experience">NAO Experience</a>
</nav>
</div>
<!--.columns-->
</div>
<!--.row-->
</header>
Related
So I made a post similar to this one, since I didn't get a precise answer and didn't understand the instructions. So I am once again asking for your support.
There are a couple of issues regarding my nav bar that I am unable to fix. One of them is a button sticking inside of the nav bar, but it doesn't even belong in the div class.
Navigation Bar
The second issue is that I can't line the logo/text [SINUS] and the links together in one line.
Any help would be appreciated!
/*====================
The CSS File
Section 1:
Buttons
=====================*/
button {
background-color: #358cf0;
border: none;
border-radius: 18px;
text-align: center;
text-decoration: none;
opacity: 0.8;
font-size: 14px;
color: rgb(255, 255, 255);
padding: 12px 48px;
transition: 0.3s;
outline: none;
}
button:hover {
opacity: 1;
}
ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: raleway;
}
ul li:hover {
color: orange;
}
/*====================
The CSS File
Section 2:
Alerts
=====================*/
.container {
position: fixed;
top: 74%;
right: 0;
left: 77%;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: basic;
}
.modal {
width: 40%;
min-width: 20rem;
background-color: #ffffff;
border-radius: 12px;
}
.modal-header {
display: flex;
align-items: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: #358cf0;
padding: 8px 10px;
color: #fff;
font-size: 110%;
font-weight: 600;
font-family: basic;
}
.modal-content {
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.modal-footer {
text-align: center;
}
/*====================
The CSS File
Section 3:
Body etc.
=====================*/
body {
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
position: fixed;
width: 100%;
left: 0;
top: 0;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
/*====================
The CSS File
Section 4:
Text
=====================*/
#font-face {
font-family: basic;
src: url(Helmet-Regular.ttf);
}
h1 {
font-family: basic;
color: white;
font-size: 390%;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sccp.css">
<title>Sinus - 【Home】</title>
<link rel="icon" href="titl.ico">
<link rel="apple-touch-icon" href="titl.ico" />
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
<div class="container" role="alert">
<div class="modal">
<div class="modal-header">
UPDATE! Sinus 1.0v
</div>
<div class="modal-content">
Here new stuff go gogogo
<br>Read more...
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>
To align the logo and links, use flex on the #navigation-container:
#navigation-container {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content: space-between will put the maximum space between the contents - in this case your logo and ul that contain the links. align-items:center lines them up vertically.
https://codepen.io/doughballs/pen/RwPrYoX
Not sure what your issue with the button is but because your nav has position:fixed, it is being taken out of the flow of the page, so the button doesn't 'know' it is there. If you wanted it to sit under the nav, you need to add a container with margin-top to push it down. But I'm not sure what your issue is with it, clarify and I'll amend the codepen.
I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.
Problem 1:
My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.
Problem 2:
This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).
My footer should simply fall below the main section but it fails to acknowledge main's existence.
A couple snippets of code although I have linked the brief CodePen at the bottom.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
img {
display: block;
margin: 0 auto;
}
.page {
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
* ---
* Adding a clearfix to .main__inner resolved this.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen link with full code
To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?
Any help is greatly appreciated. Thanks for your time.
Seems like you simply should add a clearfix to your .main__inner block, something like this:
.main__inner:after {
content: '';
display: table;
clear: both;
}
Check out:
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen
Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body,
html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1,
h2,
h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3,
h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
float: left;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
float: left;
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div>
<!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul>
<!-- end nav links -->
</div>
<!-- end .nav__inner -->
</nav>
<!-- end nav -->
<main class="main">
<div class="image__header">
</div>
<!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's
<snip>Raycast</snip> and
<snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a
<snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
<snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div>
<!-- end .main__inner -->
</main>
<!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div>
<!-- end .footer__inner -->
</footer>
<!-- end footer -->
</div>
<!-- end .page__inner -->
</div>
<!-- end .page -->
</body>
</html>
remove float: left from the section with class .content
http://codepen.io/anon/pen/XMrVVv?editors=1100
How can I place my button in the center without any kind of "margin cheat" (for example setting margin-left: 525px;)?
HTML
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
CSS
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
margin-left: 525px;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
I've tried making it sit in the center but it didn't work out so well without me setting margin-left; 525px;, which in my case, centers the button under the text, please help me remove this "margin cheat" and do it in the right way.
The a act like text it means when you give text-align:center; to its parent, it will be placed in center of its parent.
You don't need to give margin to the a element. You can use text-align:center;.
#bannerContainer
{
text-align:center;
}
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
If you set the position of the button to absolute, give it a set width, and add this it should center:
left: 50%; right: 50%;
Have you try this:
<center>Products</center>
I am not sure whether it is helpful to you..
It's taken me a ridiculous amount of work to get this menu bar looking clean, which is a problem in and of itself. However, I think it's finally coming together. The problem I'm having now is three-fold.
Two questions:
When this is viewed full screen, the menu bar looks great, but as you close in the screen the "run" button drops to the bottom. What is causing this?
How come if I keep closing the window, the middle .toggle list is stacking on top of the "CodePlayer" logo? What do I need to do to make it so that when the window shrinks, the divs get to the point where they'd begin to overlap and stop?
Why is there a tiny bit of gap between the border-right and bottom-border in the middle section of my menu? I've tried 0px padding and it isn't working.
http://jsfiddle.net/ow5zq9fL/
/*-----------UNIVERSAL------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
/*-----------MENU BAR------------*/
#menuBar {
height: 40px;
background-color: gray;
max-width: 100%;
}
/*------LOGO, TOGGLES, BUTTON-----*/
#logo,
#buttonDiv,
#toggles {
vertical-align: middle;
display: inline-block;
width: 33%;
height: 18px;
}
/*-----------LOGO------------*/
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
position: relative;
top: 12px;
left: 12px;
/* background-color: blue;
*/
}
/*-----------TOGGLES------------*/
.toggles {
text-align: center;
border: 1px solid black;
height: 20px;
position: relative;
top: -9px;
width: 300px;
left: 20px;
}
.toggles li {
list-style: none;
display: inline-block;
border-right: 1px solid black;
}
/*----------TOGGLES LIST----------*/
#resultList {
border-right: none;
}
/*-------------BUTTON------------*/
#buttonDiv {
text-align: right;
position: relative;
top: 8px;
right: 12px;
vertical-align: middle;
}
/*-----------BUTTON------------*/
#htmlList {
padding-right: 20px;
margin-left: -20px;
}
#cssList {
padding: 0 25px;
}
#jsList {
padding: 0 25px;
}
#resultList {
padding: 0 20px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<div id="toggles">
<ul class="toggles">
<li id="htmlList">HTML</li>
<li id="cssList">CSS</li>
<li id="jsList">JS</li>
<li id="resultList">Result</li>
</ul>
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
Try this. I added a wrapper and applied everything from #buttonDiv to .wrapper. Then I altered it so that it was centered.
New Code:
.wrapper {
text-align: right;
position: relative;
bottom: 12px;
right: 12px;
vertical-align: middle;
}
and
<div class="wrapper">
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
Add float left
#logo, #buttonDiv, #toggles {
...
float: left;
}
http://jsfiddle.net/ow5zq9fL/4/
Here is the Code also in fiddle http://jsfiddle.net/SgtRx/ (should done this earlier, sorry)
Okay, My navigation bar is within the Div Wrapper, underneath the header, and on top of the content area (body).
I'm a pretty novice user, so excuse any mistakes I may be making.
When I added border to separate each block (button or text) it separated the buttons well, however, it leaves a small whitespace at the end of the nav bar (the right-hand side).
The wrapper Div is 1000px and I have 5 buttons, each 200px, Therefore without borders they fit in perfect, but with the borders if I keep the width at 200px the nav bar moves down, and when I reduce the width of the nav bar, it leaves the white space on the right. I have been doing this for 2 days and i finally give in. Please Help if you can. Thanks.
<body>
<div id="wrapper">
header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" order="0" align="center" cellpadding="0" cellspacing="0"/>
<nav id="mainnav">
<ul>
<li><a href="index.html" class="noBorder" >Home</a></li>
<li>Sightseeing</li>
<li>Eating Out</li>
<li>What's On</li>
<li>Test</li>
<li>Test1</li>
<li>Where to Stay</li>
</ul>
</nav></div>
</header>
And the CSS
#mainnav ul {
margin-top: auto;
margin-bottom: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
float: left;
width: 1000px;
margin-left: auto;
list-style-type: none;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin-right: auto;
right: 0px;
left: 0px;
top: 0px;
bottom: 25px;
}
/*This will style all links nested in the <nav> element with the ID mainnav*/
#mainnav a {
width: 197px;
display: block;
float: left;
text-align: center;
background-color: #020202;
color: #FCFCFC;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
line-height: 290%;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
left: 0px;
margin-top: auto;
border-color: #FFFFFF;
border-left-style: solid;
border-width: thin;
right: 0px;
bottom: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
opacity: 1;
}
.noBorder {
border-left-style: none !important;
}
I highly recommand you to use width:20% for each button instead of using fixed value.
Same goes for the navbar, use width:100%
This is your anserw:
jsfiddle
#mainnav a{
width:19.91%;
}
Here is the code:
I used display flex on ul.
Than set direct child li of ul *flex:1.
Lastly, I set a tag to width:100%
I have removed some unwanted code.
#charset "utf-8";
body {
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
margin: 0;
background-color: #250e20;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
padding-bottom: 0px;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
min-width: 739px;
max-width: 1000px;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
position: static;
}
#hero {
clear: left;
position: relative;
}
#hero img {
min-width: 100%;
min-height: 100%;
}
h1,
h2 {
color: #3399cc;
font-family: source-sans-pro;
font-weight: 600;
text-transform: none;
}
h1 {
font-size: 73px;
text-align: center;
text-transform: uppercase;
margin-top: 0px;
color: #ffffff;
}
#main {
width: 58%;
float: left;
margin-left: 2px;
}
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
clear: left;
background-color: #02080a;
color: #ffffff;
padding-left: 2%;
bottom: 10px;
position: static;
padding-right: 2px;
}
figure {
width: 420px;
}
figcaption {
display: block;
font-weight: bold;
font-size: 14px;
text-align: center;
}
figure img {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
background-color: #ffffff;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}
.centered {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
clear: none;
}
.floatleft {
margin-right: 10px;
float: left;
}
.floatright {
margin-left: 10px;
float: right;
}
/*This will style links in all states*/
a {
text-decoration: none;
font-weight: bold;
right: 0px;
}
a:link {
color: #ff6600;
}
a:visited {
color: #ff944c;
}
a:visited {
color: #ff944c;
}
a:hover,
a:active,
a:focus {
color: #f5f406;
text-decoration: underline;
list-style-type: none;
}
/*This targets the unordered list nested inside the <nav> element with the ID mainnav*/
#mainnav ul {
padding: 0;
display: flex;
width: 100%;
list-style-type: none;
position: relative;
right: 0px;
left: 0px;
bottom: 25px;
}
#mainnav ul>li {
flex: 1;
}
/*This will style all links nested in the <nav> element with the ID mainnav*/
#mainnav a {
z-index: 1;
width: 100%;
display: inline-block;
text-align: center;
background-color: #020202;
color: #fcfcfc;
text-transform: uppercase;
font-size: 16px;
line-height: 24px;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
border-color: #ffffff;
border-left-style: solid;
border-width: thin;
}
.noBorder {
border-left-style: none !important;
}
#mainnav a:hover,
#mainnav a:active,
#mainnav a:focus,
#mainnav a.thispage {
text-decoration: none;
background-color: #43a6cb;
}
#hero article {
width: 36%;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 10px;
right: 43px;
background-color: #d88673;
border-radius: 15px;
color: white;
}
#hero h2 {
color: white;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: -7px;
}
#container {
background-color: #e1e54e;
display: block;
width: 1000px;
height: 420px;
float: left;
overflow: auto;
}
#prev {
background-image: url(../images/larrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 420px;
float: left;
position: relative;
z-index: 99;
}
#next {
background-image: url(../images/rarrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 420px;
float: right;
position: relative;
z-index: 99;
}
#slider {
display: block;
width: 1000px;
height: 420px;
float: left;
position: absolute;
overflow: hidden;
}
article,
aside,
figure,
footer,
header,
nav {
display: block;
}
#test {
height: 220px;
margin-top: -8px;
margin-bottom: -8px;
padding-bottom: 0px;
position: static;
width: 1000px;
}
<body>
<div id="wrapper">
<header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" border="0" align="center" cellpadding="0" cellspacing="0" />
<nav id="mainnav">
<ul>
<li>Home</li>
<li>Sightseeing</li>
<li>Eating Out</li>
<li>What's On</li>
<li>Where to Stay</li>
</ul>
</nav>
</div>
</header>
<div id="hero">
<div id="hero2">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="images/slide2.jpg" width="1000" height="420" />
<img src="images/slide3.jpg" width="1000" height="420" />
</div>
<div class="controller" id="next"></div>
</div>
</div>
</div>
<article id="main">
<h2>Riding the Cable Cars</h2>
<p>No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square
to Fisherman's Wharf, and a third route along California Street.</p>
<p>The cable cars rely on cables running constantly beneath the road’s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great
skill. He needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the
downward slopes.</p>
<figure><img src="images/cable_car1.jpg" width="400" height="266" alt="" />
<figcaption>The cable car terminus near Union Square</figcaption>
</figure>
<p>Although the cable cars are now mainly a tourist attraction, they're still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays.</p>
</article>
<aside id="sidebar">
<h2>Cable Car Tips</h2>
<p>A single ride on a cable car costs $6. If you plan to travel around the city, it's often cheaper to buy a Muni Passport, which gives you unlimited rides on San Francisco's extensive public
transport system, including the cable cars (but not the BART subway system). Even a single-day passport ($14) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don't want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers
on the way. The California Street route is generally less crowded (but not as spectacular).
</aside>
<footer>
<div id: "footer">
<p>© Copyright 2014 Bayside Beat</p>
</div>
</footer>
</div>
</body>
</html>