I cannot get the text for navigation to display inline and in the grey bar at the top of the page. I am guessing there is some type of problem with my CSS. Before I had the text included with the class="box" and the formatting was working, but the buttons wouldn't work, so I created a new div class="new" so the buttons would work.
HTML:
<div class="box-contents">
<img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>
<div class="box">
</div>
<div class="new">
<nav>
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
font-size: 100%;
}
.box {
width: auto;
height: 120px;
background: grey;
overflow: hidden;
opacity: 0.85;
position: relative;
z-index: 3;
}
.box-contents {
margin: auto;
width: 100%;
overflow: hidden;
position: absolute;
opacity: 1 !important;
z-index: 4;
}
.new ul{
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
font-size: 2em;
margin-top: 0;
padding-top: 25px;
float: right;
margin-right: 100px;
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
z-index: 99;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
float: left;
width: 150px;
margin: 10px 2%;
}
.images{
display: block;
width: 800px;
float: inherit;
margin: auto;
padding-bottom: 20px;
padding-top: 20px;
}
The picture below shows the formatting issues
The most appropriate approach is to contain your logo and navigation links within your <nav> element. Right now they're broken out into separate elements which will cause them to stack. Recently, flexbox has become the best solution for situations like this. You'll be flexing your nav container and the unordered list inside. The margin property on the ul has left set to auto, which will push the navigation items to the right.
I've removed all of the unnecessary elements since we really just need <nav>. Hopefully this helps. I've included only the relevant CSS to give you a better understanding of what is happening.
nav {
display: flex;
align-items: center;
background-color: grey;
}
nav ul {
display: flex;
margin: 0 0 0 auto;
list-style-type: none;
}
nav ul li {
padding-right: 10px;
}
<nav>
<img src="//placehold.it/150x50" alt="Stephen Crawford Photography Logo">
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
Add this css to your code and <div class="new"> //content </div> inside <div class="box"> </div> like so
.new ul li{
display: inline-block;
}
body{
margin: 0;
padding: 0;
font-size: 100%;
}
.box {
width: auto;
height: 120px;
background: grey;
overflow: hidden;
opacity: 0.85;
position: relative;
z-index: 3;
}
.box-contents {
margin: auto;
width: 100%;
overflow: hidden;
position: absolute;
opacity: 1 !important;
z-index: 4;
}
.new ul{
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
font-size: 2em;
margin-top: 0;
padding-top: 25px;
float: right;
margin-right: 100px;
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
z-index: 99;
}
.new ul li{
display: inline-block;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
float: left;
width: 150px;
margin: 10px 2%;
}
.images{
display: block;
width: 800px;
float: inherit;
margin: auto;
padding-bottom: 20px;
padding-top: 20px;
}
<body>
<div class="box-contents">
<img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>
<div class="box">
<div class="new">
<nav>
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
</div>
</div>
<div>
<img class="images" src="../images/DSC_7997-Edit.jpg" alt="Trevi Fountain, Rome">
<img class="images" src="../images/DSC_1195.jpg" alt="Lake Hartwell">
<img class="images" src="../images/DSC_7564-Edit.jpg" alt="Cinque Terre">
<img class="images" src="../images/_DSC4277.jpg" alt="Park City">
<img class="images" src="../images/LAC_6060.jpg" alt="Toccoa Falls">
<img class="images" src="../images/DSC_7547-Edit.jpg" alt="Cinque Terre">
<img class="images" src="../images/_DSC8776.jpg" alt="Campfire">
<img class="images" src="../images/_DSC2203-Edit.jpg" alt="Milkyway">
<img class="images" src="../images/_DSC8094-Edit.jpg" alt="Lake Hartwell">
</div>
</body>
Put your div with class new in div with class box
<div class="box">
<div class="new">...</div>
</div>
and then change your css by replacing .new ul with .new li
.new li{
...
}
Related
I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>
I've been going around the web trying to find an answer to how to center my navbar but none of the solution worked.
The code below will show what I have so far with both HTML and CSS.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
This is how it looks like right now:
I have also noticed that in CSS, when I did "float: center;" it had no difference with when I did "float: left;". But when I did "float: right;" it would shift to the right.
ul {
margin: 0 auto;
text-align: center;
}
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin: 0 auto;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have removed the below css from your code
header #smcontent {
float: left;
}
and added margin: 0 auto; text-align: center; to the ul
Try absolute position with float none, left 50% and a left translate of 50% to center your nav bar perfectly.
CSS: add
header .newCenter {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
HTML: add
<nav class="newCenter">
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
Float only applies to left and right. I added display: grid and justify-content: center to your header. I removed float: left; in header #smcontent.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
display: grid; //or flex
justify-content: center;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline;
padding: 0 20px;
}
header nav {
margin: 10px auto 0;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin: 0 auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
To align text horizontally center use text-align:center. In your to align nav bar content center just add text-align:center to header nav
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
In below code snippet I have added some images for demonstration purpose.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-may-26-2015twitter-260nw-281505518.jpg">
</a>
<a href="https://facebook.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-april-27-2015-260nw-278925056.jpg">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
I have spent a long time trying to figure out why I can't center my img element. I have set it as block element, and set the margin set to auto. However the display is always shown with margin-left less than margin right.
If anyone can help would be great appreciated.
#header {
width: 100%;
height: 30px;
}
body {
margin: 0;
}
li {
display: inline;
}
a {
display: inline-block;
text-decoration: none;
color: #000;
margin-right: 3px;
font-family: arial, sans-serif;
font-size: 12px;
}
ul {
float: right;
}
#logo {
position: relative;
top: 200px;
}
#logo img {
display: block;
margin: auto;
height: 92px;
}
#logo p {
position: absolute;
top: 3.5em;
left: 51em;
}
<div id="header">
<ul>
<li>Gmail</li>
<li>Images</li>
<li>
<img src="">
</li>
<li>
<img src="">
</li>
<li>
<img src="">
</li>
</ul>
</div>
<div id="content">
<div id="logo"><img src="https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div id="search"></div>
<div id="button1"></div>
<div id="buttton2"></div>
</div>
<div id="footer"></div>
You float the header div but never clear it. Add:
#content {
clear:both;
}
jsFiddle example
Well, this is because of the ul in the header, after the header close tag you should add
<div style="clear:both"></div>
#header {
width: 100%;
height: 30px;
}
body {
margin: 0;
}
li {
display: inline;
}
a {
display: inline-block;
text-decoration: none;
color: #000;
margin-right: 3px;
font-family: arial, sans-serif;
font-size: 12px;
}
ul {
float: right;
}
#logo {
position: relative;
top: 200px;
}
#logo img {
display: block;
margin: auto;
height: 92px;
}
#logo p {
position: absolute;
top: 3.5em;
left: 51em;
}
<div id="header">
<ul>
<li>Gmail</li>
<li>Images</li>
<li>
<img src="">
</li>
<li>
<img src="">
</li>
<li>
<img src="">
</li>
</ul>
</div>
<div style="clear:both"></div>
<div id="content">
<div id="logo"><img src="https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div id="search"></div>
<div id="button1"></div>
<div id="buttton2"></div>
</div>
<div id="footer"></div>
Here's a link to my site (Currently a work in progress so very basic right now):
website
I just can't figure out why one image is messed up. It's not even the last image in the gallery and it's the same size as all the other images. Maybe i'm missing the obvious, I'm pretty tired.
Here's the code: https://jsfiddle.net/b0r684hh/2/
HTML
<div class="row">
<div class="col-lg-10">
<h1 class="page-header">Ryk Design</h1>
</div>
<!--<div class="col-lg-2 page-header">
<ul class="nav navbar-nav">
<li>
<a class="invert" href="#">About</a>
</li>
<li>
<a class="invert" href="#">Contact</a>
</li>
</ul>
</div>-->
</div>
<div class="row">
<div id="photos">
<ul id="photo-gallery">
<li>
<a href="img/DoomQuoteMed.png">
<img src="img/thumbs/DoomQuoteThumb.png">
</a>
</li>
<li>
<a href="img/crop/SlaveBlur.png">
<img src="img/thumbs/SlaveBlur.png">
</a>
</li>
<li>
<a href="img/love wins2.png">
<img src="img/love wins2.png">
</a>
</li>
<li>
<a href="img/rd.png">
<img src="img/thumbs/rdcrop.png">
</a>
</li>
<li>
<a href="img/crop/taplrCrop.png">
<img src="img/thumbs/taplrCrop.png">
</a>
</li>
<li>
<a href="img/cider.jpg">
<img src="img/cider.jpg">
</a>
</li>
<!--<li>
<a href="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
<img src="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
</a>
</li>-->
</ul>
</div>
</div>
CSS
a,
h2,
h3 {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 92px;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
a {
color: #000;
}
.invert {
color: #fff;
background-color: #000;
}
.col-md-4 p {
padding-top: 5px;
}
a:hover {
color: #000;
background-color: #fff;
text-decoration: none;
}
.nav,
.navbar-nav {
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.page-header {
border: none;
padding-bottom: 40px;
}
footer {
margin: 50px 0;
}
.row {
padding-left: 0;
}
#photos {
opacity: .88;
}
#photos img {
width: 30%;
float: left;
display: block;
margin: 1px;
}
ul {
list-style: none;
margin: 0px auto;
padding: 10px;
display: block;
max-width: 100%;
text-align: center;
}
#overlay {
background: rgba(0, 0, 0, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
margin: 10% auto 0;
width: 550px;
border-radius: 5px;
}
#photos {
width: 100%;
padding: 10px;
}
#photo-gallery {
width: 100%;
}
Cheers for the help guys!
You should float li elements instead of img elements, just change the css,
Here is the updated jsfiddle
#photos li {
width: 30%;
float: left;
display: block;
margin: 1px;
}
#photos img {
max-width: 100%
}
Your problem is due to the first image having a bigger height than the others. If you inspect your images, you'll see that all of them have a height of 339px - EXCEPT the first image - that one is 339.33.
Since you are floating your images, this very slight difference throws off the alignment. There 2 solutions:
1) Set all of the images the same height
2) Clear the first image of each row so it resets the alignment. So with your example, having 3 images across you would want to clear the 4th image:
#photo-gallery li:nth-child(3n+1) img {
clear: left;
}
its seems the first image height is .39 bigger so pushes them around. But you should be able to do this better etc
something like this might help as well.
http://codepen.io/simondavies/pen/VaRBMo
<div class="image-outer-wrapper">
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
</div>
.image-outer-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
}
.image-outer-wrapper:before,
.image-outer-wrapper:after { content: " "; display: table;}
.image-outer-wrapper:after {clear: both;}
.image-outer-wrapper .image-wrapper {
margin:5px;
position: relative;
float: left;
width: 279px;
height: 237px;
text-decoration: none;
transition: background-position 500ms;
cursor: pointer;
}
.image-outer-wrapper .image-wrapper.CasinoLink {
background: url('http://placehold.it/558x237');
background-position: 0 0;
}
.image-outer-wrapper .image-wrapper.CorpLink {
background: url('http://placehold.it/558x237');
background-position: 0 0;
}
.image-outer-wrapper .image-wrapper:hover {
background-position: -279px 0;
}
I am new to CSS and have been trying to build a 2-column website. The code is here: JSFiddle. There is a left-side menu with a right-side content area. If the window is large enough, there is no problem with the layout. However, when resizing the window to a narrow one, the content overflows to the menu area and I don't know how to fix it without making the position fixed or absolute, which I don't want to do because I want to have a footer at the end of the page. Can someone help me fix the problem? Thank you so much!
I also apologize in advance for the long code. I don't know which part lies the problem and pasted everything
html code:
<body>
<div id="wrapper">
<div id="menunav">
<img src="images/logo.jpg" alt="siteLogo" class="centered" id="logo"/>
<nav id="nav">
<ul>
<li>Portfolio</li>
<li>About Me</li>
<li>Resume</li>
</ul>
</nav>
</div>
<div id="content">
<div class="grid3">
<article class="bucket" >
<a href="#">
<img src="images/baskerville1.jpg" alt=""/>
<div class = "img-overlay">
<h3>Monogram</h3></div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Gastalt.png" alt=""/>
<div class="img-overlay">
<h3>Gastalt Composition</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/redThread.png" alt=""/>
<div class="img-overlay">
<h3>The Red Thread - A Visual Book</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay">
<h3>Typographic Hierarchy</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Spaces.png" alt=""/>
<div class="img-overlay">
<h3>Living in Two Spaces</h3>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©2014</div>
</div>
</body>
css code:
#charset "UTF-8";
*{
margin:0;
}
html, body {
margin: 0;
background-color: #FFFFFF;
height: 100%;
padding: 0;
}
#wrapper {
background-color: #FFFFFF;
width: 1000px;
padding-bottom: 0px;
margin:0 auto;
position:relative;
min-height: 100%;
}
#menunav {
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}
#logo {
width: 70%;
position: static;
}
#menunav ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menunav a {
display: block;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 12px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding-left: 20px;
background-color: rgba(193,193,193,1.00);
color: rgba(0,0,0,1.00);
}
#menunav a:hover, #menunav a:active, #mainnav a:focus, #menunav a.thispage {
background-color: rgba(0,174,210,1.00);
color: rgba(255,255,255,1.00);
text-decoration: none;
}
#content {
display: block;
margin: 0 auto;
padding-left:225px;
padding-top:80px;
background-color:#fffeee;
}
.centered {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: auto;
margin-bottom: auto;
}
a {
text-decoration: none;
}
.bucket {
position:relative;
float: left;
margin-left: 3.2%;
margin-bottom:30px;
}
.grid3 .bucket:nth-of-type(3n+1){
margin-left: 0;
clear: left;
}
.grid3 .bucket{
width: 31.2%;
}
.img-overlay h3 {
opacity: 1;
display: inline-block;
margin: auto;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
color: rgba(255,254,254,1.00);
text-align: center;
vertical-align: middle;
}
.img-overlay {
background-color: rgba(0,0,0,0.6);
bottom: 0px;
top: 0px;
opacity: 0;
overflow:hidden;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
}
.bucket:hover .img-overlay {
opacity:1;
filter: alpha(opacity=100);
}
.bucket img {
width: 100%;
}
#footer{
clear:both;
text-align: center;
line-height:20px;
vertical-align: middle;
}
#media screen and (max-width:740px){
/*change 3 column to 2 column*/
.grid3 .bucket:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.grid3 .bucket:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}
Set z-index:1 and set background-color: #FFFFFF; in #menunav
#menunav {
z-index: 1;
background-color: #FFFFFF;
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}
Here it is http://jsfiddle.net/n9V3W/2/ working!!!