I am sure this is something very simple but I want to align my burger Nav with the text I have defined. It is currently sitting underneath.
I have tried including the href link within the defined text but this then causes the burger nav to be shown at all times, and not just mobile sizes. Ideally this will only be shown at smaller screen widths.
Here is my code.
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 60%;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
/* Showcase */
#showcase {
min-height: 400px;
color: black;
}
#showcase h1 {
margin-top: 50px;
font-size: 300%;
margin-bottom: 10px;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
margin-top: 10px;
}
aside#sidebar .quote input,
aside#sidebar .quote textarea {
top-margin: 10px;
width: 80%;
padding: 10px;
}
/* Main-col */
article#main-col {
float: left;
width: 65%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Services */
ul#services li {
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #35424a;
color: white;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/* Media Queries */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
font-size: 50%;
float: none;
}
#showcase h1 {
margin-top: 40px;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html8shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Local Award Winning Trader</h1>
<h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i> 07756848657</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>
<p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Weekly Blog</h1>
<form>
<input type="email" placeholder="Subscribe today...">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
</section>
<section id="imagery">
<div class="container">
<div class="box">
<i class="fa fa-star" aria-hidden="true"></i>
<h1>Accredited</h1>
<p>Gas Safe Accreditted </p>
</div>
<div class="box">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<h1>Reputable</h1>
<p>"25 years service experience "</p>
</div>
<div class="box">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<h1>Local</h1>
<p>Sussex and Surrey Countywide</p>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>
</html>
Wanting to float the burger nav to align with text
Place your button first, on the top of the nav like this
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 60%;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
/* Showcase */
#showcase {
min-height: 400px;
color: black;
}
#showcase h1 {
margin-top: 50px;
font-size: 300%;
margin-bottom: 10px;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
margin-top: 10px;
}
aside#sidebar .quote input,
aside#sidebar .quote textarea {
top-margin: 10px;
width: 80%;
padding: 10px;
}
/* Main-col */
article#main-col {
float: left;
width: 65%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Services */
ul#services li {
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #35424a;
color: white;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/* Media Queries */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
font-size: 50%;
float: none;
}
#showcase h1 {
margin-top: 40px;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
<head>
<title>DB Plumbing | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html8shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<div class="icon">
☰
</div>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Local Award Winning Trader</h1>
<h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i> 07756848657</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>
<p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Weekly Blog</h1>
<form>
<input type="email" placeholder="Subscribe today...">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
</section>
<section id="imagery">
<div class="container">
<div class="box">
<i class="fa fa-star" aria-hidden="true"></i>
<h1>Accredited</h1>
<p>Gas Safe Accreditted </p>
</div>
<div class="box">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<h1>Reputable</h1>
<p>"25 years service experience "</p>
</div>
<div class="box">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<h1>Local</h1>
<p>Sussex and Surrey Countywide</p>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>
I've taken only the part we are interested into on code so it's a little more readable and here's my sugegstion. Using the display: flex property will help put the elements on the same line:
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
.container {
width: 60%;
margin: auto;
overflow: hidden;
/*Below is the simple fix*/
display: flex;
align-items: baseline;
}
#branding {
display: inline-block;
background: red; /*Only for readability purpose*/
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
text-decoration: none;
font-size: 130%;
background: teal; /*Only for readability purpose*/
}
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav">
<li class="icon">
☰
</li>
</ul>
</nav>
</div>
See A complete guide to flexbox on CSS Tricks for more insights.
Hope I got it right :)
My problem is that in mobile view which is 320px wide, everything looks okay, but when I start manually scaling up, the nav won't stay in center. It just stays on the left side of the screen, when the right side gets bigger. Title (h1) scales up normally. Navigation "buttons" should remain with the same width till break which is 768px wide.
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display: flex;
display: inline-block;
width: 280px;
margin-top: 5px;
text-align: center;
margin-left: -20px;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
see here : jsfiddle
you were using both display:flex and display:inline-block on li a . just use one display .
i suggest you don't use fixed width on the buttons, but instead use float:left with percentage
also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.
added also a media Q for below 768px
check also snippet
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
ul.main-nav {
padding:0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
float:left;
width: 32.66%;
margin-right:1%;
}
ul li:last-child { margin-right:0;}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display:block;
margin-top: 5px;
text-align: center;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.main-nav li { width:100%}
}
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
see here : jsfiddle
you were using both display:flex and display:inline-block on li a . just use one display .
i suggest you don't use fixed width on the buttons, but instead use float:left with percentage
also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.
added also a media Q for below 768px
check also snippet
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
ul.main-nav {
padding:0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
float:left;
width: 32.66%;
margin-right:1%;
}
ul li:last-child { margin-right:0;}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display:block;
margin-top: 5px;
text-align: center;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.main-nav li { width:100%;margin:0}
}
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
I don't think my nav li's are collapsing but I've been spending two days researching and trying to fix the problem. Bascially my Contact nav li element is hanging right below About nav li. I want them to all display all on one line whenever i resize the browser screen to 700px. Here is my relevant code:
HTML
<header>
<div class="logo">
<h1>Randy Goldsmith</h1>
<h4>Front End Web Developer</h4>
</div>
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
/***********************
Navigation
***********************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
display: inline-block;
}
nav li {
display: inline-block;
}
nav a {
padding: 15px 10px;
font-weight: 800;
}
/***********************
Heading
***********************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#media screen and (min-width: 700px){
/***********************
Header
***********************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 2%;
text-align: right;
width: 50%;
}
.logo {
float: left;
margin-left: 5%;
text-align: left;
width: 33.3%;
}
}
My codepenio where my page is: http://codepen.io/duel_drawer8/pen/xOLErV?editors=1100
SOLUTION:
You need to remove the property width: 50%; from your nav selector in your media query.
Replace:
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 2%;
text-align: right;
width: 50%;
}
With:
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 2%;
text-align: right;
}
EXPLANATION:
One floated element next to another floated element can’t stick out
past the edge of its container.
The problem lies in your floated elements since they no longer fit their container in that specific viewport. That's why your last element is hanging right below.
CODE SNIPPET:
a {
text-decoration: none;
}
li {
list-style: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.logo {
text-align: center;
margin: 0;
}
header {
background: green;
border-color: green;
}
h1,
h3 {
color: white;
}
nav a,
a:hover {
color: white;
list-style: none;
text-decoration: none;
}
img {
width: 100%;
}
/***********************
Navigation
***********************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
padding: 15px 10px;
font-weight: 800;
}
/***********************
Heading
***********************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
/***********************
Footer
***********************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
}
footer img {
width: 6%;
padding-bottom: 5px;
}
/***********************
Portfolio
***********************/
#gallery {
list-style: none;
margin: 0;
padding: 0;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
#media screen and (min-width: 480px) {
/***********************
Two Column Layout
***********************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/***********************
Portfolio
***********************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
}
#media screen and (min-width: 700px) {
/***********************
Header
***********************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 2%;
text-align: right;
}
.logo {
float: left;
margin-left: 5%;
text-align: left;
width: 33.3%;
}
}
<header>
<div class="logo">
<h1>Randy Goldsmith</h1>
<h3>Front End Web Developer</h3>
</div>
<nav>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="#">
<img src="https://s6.postimg.org/wi2l9sni9/Screenshot_7.png">
<p>Weather App</p>
</a>
</li>
<li>
<a href="#">
<img src="https://s6.postimg.org/wi2l9sni9/Screenshot_7.png">
<p>Weather App</p>
</a>
</li>
<li>
<a href="#">
<img src="https://s6.postimg.org/wi2l9sni9/Screenshot_7.png">
<p>Weather App</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/duel_drawer8" target="_blank">
<img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/4-128.png">
</a>
<a href="https://www.facebook.com/randy.goldsmith.10" target="_blank">
<img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/3-128.png">
</a>
<a href="www.linkedin.com/in/randygoldsmith" target="_blank">
<img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/9-128.png">
</a>
<a href="https://github.com/Dueldrawer8" target="_blank">
<img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/29-128.png">
</a>
<p>Copyright © 2016 Randy Goldsmith</p>
</footer>
</div>
Please refer to the posted image. I want to add a margin-left on the first image and then in the rest of image I don't want them. Can I use the child selectors to achieve this or there is any other way?
Can I make the images, overflow: scroll like we do in case of text? As I don't know jquery/javascript as of now.
* {
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.wrapper {
width: 93%;
height: auto;
margin: auto;
}
.headwrap {
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
float: left;
width:50px;
height:50px;
padding:0;
margin-right: 30px;
background: #000;
border-radius:30px;
}
.socialbuttons ul li img{
margin-left:20px;
margin-top:20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left; /* this and see changes */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
/* float producing wrong results */
}
.navbar ul li {
float: left; /* height of menu bar increases when float is defined */
display: inline; /* does it have any use ? */
padding: 25px 10px;
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
width: 15%;
}
.navbar ul li:first-child {
border-left: none;
}
.navbar ul li:last-child {
border-right: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.slider img {
float:left;
width:100%;
}
.text{
color:white;
margin-top:-35%;
float:left;
margin-left: 80px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
font-size : 50px;
line-height: .5;
}
#project {
background-color: #555653;
width: 100%;
margin-top: 10px;
float: left;
}
.head {
float: left;
background-color: #1D1D1C;
width: 100%;
}
.head h3 {
color: white;
font-family: Arial , sans-serif;
font-weight: lighter;
margin-left: 20px;
}
.imgContainer img {
margin-top: 20px;
padding-left: 40px
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"></img></li>
<li><img src="twitter.png"></img> </li>
<li><img src="feed.png"></img></li>
<li><img src="google.png"></img></li>
</ul>
</div>
<nav class="navbar">
<ul class="clearfix">
<li style="width:5%;"><img src="home.png"></li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
</ul>
</nav>
</header>
<div class="slider">
<img src="industrial.jpg" />
<div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
</div>
<div id="project">
<div class="head">
<h3>FEATURED PROJECTS</h3>
</div>
<div class="imgContainer">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<!--<img src="6.jpg"/>-->
</div>
</div>
</div>
</body>
</html>
Use :first-child selector for this:
.imgContainer img:first-child{
margin-left:10px;
}
You can easily achieve this using this css
.imageContainer img:first-child
{
margin-left:20px;
}
You can select the first child with any of the given selectors below:
.imgContainer img:first-of-type
.imgContainer img:first-child
.imgContainer img:nth-child(1)
If you want to set some sort of overflow to your images, you'll need to wrap them in another element, like a generic div and set your overflow rules to this element, standard overflow rules won't apply directly to img elements.
See CSS Tricks - overflow
I am having a hard time understanding why there is a small white space next to my webpage. I have checked inspect element and it says the body stops before the white space begins (as in the border of my body is where is want it to be). I am a beginner at writing HTML and CSS so hopefully this will be an easy problem to fix!
HTML:
<!DOCTYPE html>
<html>
<body>
<!--Logo + Social media and login + navbar + search bar-->
<div class="login">
<div class="container-fluid">
<ul class="pull-right">
<li class="loginbutton">Log In</li>
<li>Sign Up</li>
<li></li>
</ul>
<ul class="pull-left">
<li><img class="twitter" src="#"></li>
<li><img class="facebook" src="#"></li>
<li class="pressreleases">Press</li>
</ul>
</div>
</div>
<div class="logo">
<div class="container-fluid">
<img class="logo" src="#" border="0">
</div>
</div>
<div class="nav">
<ul class="navbar">
<li>New</li>
<li>Popular</li>
<li>Database</li>
<li>News</li>
</ul>
</div>
<div class="searchbar">
<div class="container-fluid">
<div class="col-md-12">
<form>
<input class="search" type="text" placeholder="Lookup symbol..." required>
<input name="Submit" class="button" type="submit" value="Search">
</form>
</div>
</div>
</div>
<!-- end Logo + Social media and login + navbar + search bar-->
<div class="frontpage">
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="headliner">
<h3>New releases</h3>
<p>Learn everything you need to know. <p>
<p>Learn more</p>
</div>
</div>
<div class="col-md-3">
<div class="ad1">
<h1>Ad</h1>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<ul class="top">
<li>About Us</li>
<li>Contact Us</li>
<li>Sitemap</li>
</ul>
</div>
<div class="row">
<ul class="middle1">
<li>Advertise</li>
<li>Investor Relations</li>
</ul>
</div>
<div class="row">
<ul class="middle2">
<li>Application for Internship/Position</li>
</ul>
</div>
<div class="row">
<ul class="bottom">
<li>Privacy Policy</li>
<li>Terms of use</li>
<li>Feedback</li>
</ul>
</div>
<div class="copyright">
<p>2014<p>
</div>
</footer>
</body>
</html>
CSS:
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Logo + navbar
+ login/social media + search bar v
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.logo {
max-width: 280px;
margin-right: auto;
margin-left: auto;
}
.logo img {
width: 150%;
}
.logo .container-fluid {
height:135px;
background-color: #ffffff;
width: 100%;
padding-top:5px;
}
.nav .navbar {
background-color: #40517f;
list-style-type: none;
margin: 5;
padding: 5;
overflow: hidden;
position:relative; bottom:50px;
}
.nav .navbar li {
float: left;
border-style: solid;
border-width: 1px;
border-color: #40517f;
}
.nav .navbar li a{
display: block;
width: 300px;
font-weight: none;
color: #40517f;
background-color: #B4C8E8;
text-align: center;
padding: 14px;
text-decoration: none;
font-family: 'Cabin', sans-serif;
}
.nav .navbar li a:hover {
color: #666666;
background-color: #CAD8EF;
FONT-WEIGHT:none;
font-family: 'Cabin', sans-serif;
}
.login .container-fluid {
background-color: #ffffff;
padding-top:5px;
z-index: 1;
height: 30px;
}
.login .pull-right li {
float: right;
list-style: none;
overflow: hidden;
}
.login .pull-right li a {
display: inline;
padding: 10px;
color: #40517f;
font-size: 14px;
font-family: 'Cabin', sans-serif;
}
.login .pull-right li a:hover {
color: #B4C8E8;
margin-top: 0px;
margin-bottom: 0px;
font-family: 'Cabin', sans-serif;
}
.login .pull-left li {
float: left;
list-style: none;
color: #666666;
font-size: 14px;
position: relative;
right: 50px;
overflow: hidden;
}
.login .pull-left li a {
display: inline;
padding: 10px;
opacity: .8;
font-family: 'Cabin', sans-serif;
}
.login .pull-left .facebook {
width: auto;
height: 20px;
vertical-align: sub;
}
.login .pull-left .twitter {
width: 20px;
height: auto;
vertical-align: sub;
}
.login .pull-left .pressreleases {
right: 3 px;
vertical-align: sub;
font-family: 'Cabin', sans-serif;
}
.searchbar {
background-color:#D1D1D1;
text-align:center;
position:relative;bottom:75px;
border-style: solid;
border-width: 2px;
border-color: #40517f;
}
.search {
width: 250px;
padding:8px 15px;
background-color:#FFFFFF;
border:3px solid #D1D1D1;
color: #666666;
font-family: 'Cabin', sans-serif;
}
.button {
position:relative;
padding:6px 15px;
left:-2px;
background-color:#40517f;
color:#ffffff;
opacity: .6;
font-family: 'Cabin', sans-serif;
}
.button:hover {
background-color:#B4C8E8;
border-color: #B4C8E8;
color:#ffffff;
opacity: 1;
font-family: 'Cabin', sans-serif;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Logo + navbar + ^
login/social media + search bar
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Frontpage v
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.frontpage {
position:relative; bottom:50px;
}
/*
Height and width for all of "frontpage" are just placeholders!
Make sure to get right of them when content is added.
*/
.frontpage .container-fluid .headliner {
background-color: #efefef;
height: 400px;
}
.frontpage .container-fluid .ad1 {
background-color: #efefef;
height: 400px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Frontpage ^
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Footer v
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
footer {
background-color: #666666;
text-align:center;
}
footer .top {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
padding-top:15px;
}
footer .top li {
display: inline;
}
footer .top li:before {
content: " | ";
}
footer .top li:first-child:before {
content: none;
}
footer .middle1 {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
}
footer .middle1 li {
display: inline;
}
footer .middle1 li:before {
content: " | ";
}
footer .middle1 li:first-child:before {
content: none;
}
footer .middle2 {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
}
footer .middle2 li {
display: inline;
}
footer .middle2 li:before {
content: " | ";
}
footer .middle2 li:first-child:before {
content: none;
}
footer .bottom {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
}
footer .bottom li {
display: inline;
}
footer .bottom li:before {
content: " | ";
}
footer .bottom li:first-child:before {
content: none;
}
footer .copyright {
background-color: #666666;
height: 60px;
}
footer .copyright p {
color: #D1D1D1;
padding-top: 10px;
font-size: 12px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Footer ^
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
You can try adding
body {
margin:0;
}
Add this code at top of css:
html, body {
margin: 0;
padding: 0;
}
see the result:
http://jsfiddle.net/zpq3uxuq/
Enjoy your code!
The div class="row"s in the footer need to have a div class="container" around them.
If you are referring to the white space between the div.frontpage and footer, then check my answer below:
.frontpage {
position: relative;
bottom: 50px;
}
Remove the bottom:50px to resolve the issue.
bottom explanation
UPDATE
In light of the comment from the OP, I've updated my answer:
The issue is related to the negative margin set by the following CSS declaration:
.row {
margin-right: -15px;
margin-left: -15px;
}
Remove the negative margin to resolve the issue.