I cannot seem to keep the image inside my div element. The image is stretching outside of it.
I cannot seem to find the source of the error and have researched a lot, and still cannot find the source. Some help would be awesome!
Here is my HTML/CSS...
.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;
}
.container {
}
.brand-text {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
font-weight: 700px;
color: black;
-webkit-transition: color 700ms ease;
text-align: center;
}
.brand-text:hover {
color: grey;
}
.nav-brand {
text-decoration:none;
}
.nav-menu {
text-align: center;
}
.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
color: black;
font-family: Georgia, Times, 'Times New Roman', serif;
-webkit-transition: color 700ms ease;
position: relative;
}
.nav-link:hover {
color: grey;
}
/*Gallery*/
a {
text-decoration: none;
}
div.img {
margin: 5px;
float: left;
width: 180px;
-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
transition: opacity 400ms ease, box-shadow 400ms ease;
background-color: #fff;
}
div.img:hover {
background-color: transparent;
box-shadow: 0 0 50px -14px #000;
opacity: 0.8;
}
div.img img {
width: 100%
height: auto;
}
div.desc {
text-align: center;
color: black;
padding: 15px;
}
* {
box-sizing: border-box;
}
#media only screen and (max-width: 700px){
.reponsive {
width: 49.999999%;
margin: 6px;
}
}
#media only screen and (max-width: 500px){
.responsive {
width: 100%
}
}
.clearfix:after {
content: "";
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>
</body>
try
img{
max-width: 100%;
height: auto;
}
this will keep ur img inside its container
You just forgot the ; in your div.img img definition :
div.img img {
width: 100%;
height: auto;
}
.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;
}
.container {
}
.brand-text {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
font-weight: 700px;
color: black;
-webkit-transition: color 700ms ease;
text-align: center;
}
.brand-text:hover {
color: grey;
}
.nav-brand {
text-decoration:none;
}
.nav-menu {
text-align: center;
}
.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
color: black;
font-family: Georgia, Times, 'Times New Roman', serif;
-webkit-transition: color 700ms ease;
position: relative;
}
.nav-link:hover {
color: grey;
}
/*Gallery*/
a {
text-decoration: none;
}
div.img {
margin: 5px;
float: left;
width: 180px;
-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
transition: opacity 400ms ease, box-shadow 400ms ease;
background-color: #fff;
}
div.img:hover {
background-color: transparent;
box-shadow: 0 0 50px -14px #000;
opacity: 0.8;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
text-align: center;
color: black;
padding: 15px;
}
* {
box-sizing: border-box;
}
#media only screen and (max-width: 700px){
.reponsive {
width: 49.999999%;
margin: 6px;
}
}
#media only screen and (max-width: 500px){
.responsive {
width: 100%
}
}
.clearfix:after {
content: "";
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>
</body>
you are explicitly setting the image width and heigth to width="300" height="200"
So since you already specify the image width on your CSS.
Change this:
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
To this
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain">
(remove width and height attributes)
You are missing ; at end of the image width propery.
div.img img {
width: 100%;
height: auto;
}
I am not sure if this is what your looking for but you can try to change the picture elements size properties to 100%.
So change this line:
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
To this:
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="100%" height="100%">
Related
I am having difficulties in centering the background or divs when zooming in. Everything is centered when I zoom out because I set the * at 1200px. But when I zoom in the POV zooms on the left side of the background.
Here's an example of my POV when it is zoomed:
[https://imgur.com/a/gF50dhh][1]
Here is my code:
*{
width: 1200px;
margin: 0 auto;
padding: 0;
}
html {
background-color: #0f1011;
text-align: center;
font-size: 100%;
background-repeat: no-repeat;
box-sizing: border-box;
position: relative;
min-height: 100%;
margin: 0 auto;
}
/*NAVIGATION BAR*/
.nav {
padding: 20px;
background-color: #a91817;
font-size: 21px;
margin:0 auto;
}
.navbarmargin {
margin: 0 auto;
}
.product {
font-family: 'Zen Dots';
font-size: 15px;
display: flex;
float: left;
}
/*NAVIGATION BAR ELEMENT*/
.homee {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.homee:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.memberss {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.memberss:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.socialss{
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.socialss:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.contactt {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.contactt:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
/*BANNER*/
.banner {
background-image: url("https://cdn.discordapp.com/attachments/868146365014876250/868702765906526239/dwwdwdw.jpg");
padding: 45px;
object-fit: contain;
display: block;
margin:0 auto;
}
.logo1 {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin:auto;
display: block;
border-radius: 10px;
width: 150px;
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
.jawbreaker {
font-family: 'Zen Dots';
font-size: 25px;
color: red;
}
.jawbreaker1 {
font-family: 'Zen Dots';
font-size: 25px;
color: cyan;
}
.sugarrush {
padding: 25px;
background-color: #45b5b5;
display: block;
margin:0 auto;
}
.sugarrushh {
font-family: 'Lobster';
text-shadow: 2px 2px 4px #000000;
text-decoration: none;
font-size:25px;
color: whitesmoke;
transition: 1000ms ease-in-out;
}
.sugarrushh:hover {
font-size: 30px;
color: rgb(245, 88, 179)
}
body {
text-align: center;
}
.aboutt {
width: 1024px;
background-color: #414849;
text-align: center;
display: block;
border-radius: 5px;
margin-top: 10px;
margin:0 auto;
margin-right: 20px;
margin-left: 20px;
width: 960px;
}
#About {
background-color: #141414;
padding: 100px;
margin:0 auto;
}
<!DOCTYPE html>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="body.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Alatsi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<html lang="en">
<head>
<title>Jawbreaker SMP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="nav">
<nav>
Home
Members
Socials
Contact
</nav>
</div>
<div class="banner">
<picture>
<source srcset="https://cdn.discordapp.com/attachments/552032784890331155/867288559429615636/jawbreakerlogo.png" type="image/webp">
<source srcset>
<img class="logo1" alt="Logo" src=""> <br> <br> <br>
</picture>
<span class="jawbreaker">Jaw</span>
<span class="jawbreaker1">Breaker</span>
</div>
<div class="sugarrush">
<a href="https://media1.tenor.com/images/e71c8574914d2cabb2c6c4bd9ad3af28/tenor.gif" class="sugarrushh">
Let The Sugar Rush Begin!</a>
</div>
</head>
<body>
<section id="About">
<div class="aboutt">
<h3>h</h3>
</div>
</section>
</body>
</html>
This is because you have a fixed size width try replacing 1200px with 100% this will help but not solve the issue. For that, I recommend you use BOOTSTRAP very easy to implement just add the CDN line and it will be working fine.
And you can start here Bootstrap tutorials
This will help to make the page design be compatible with all devices.
I have a div with two divs within: A div containing the three images, and one containing the buttons. The buttons center properly, but the images refuse to do so. How can I make them center properly, no matter the page width?
HTML: https://pastebin.com/jLy9vN3K
CSS: https://pastebin.com/gSWbF2HP
Result:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: top;
font-family: Lato;
overflow: hidden;
background-color: #333;
}
li.navitem {
display: inline;
float: left;
}
li.navitem>a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.navitem>a:hover {
background-color: #111;
}
.active {
background-color: #a9a9a9;
float: right;
}
li.active>a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.slide-container {
width: 600;
height: 400;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
}
.image-container {
width: 1800px;
height: 400px;
position: relative;
transition: left 2s;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
}
.slider-image {
float: left;
margin: 0px;
padding: 0px;
}
.button-container {
top: -20px;
position: relative;
}
.slider-button {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: white;
}
#slider-image-1:target~.image-container {
left: 0px;
}
#slider-image-2:target~.image-container {
left: -600px
}
#slider-image-3:target~.image-container {
left: -1200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
<ul class="topnav">
<li class="navitem">Home</li>
<li class="active">Projects</li>
<li class="navitem">Upcoming</li>
<li class="navitem">About</li>
</ul>
<br>
<div class="slide-container">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-container">
<img src="https://dummyimage.com/600x400/000/fff" class="slider-image">
<img src="https://dummyimage.com/600x400/a839a8/fff" class="slider-image">
<img src="https://dummyimage.com/600x400/ffffff/000000" class="slider-image">
</div>
<div class="button-container">
</div>
</div>
</body>
</html>
By adding margin: 0 auto; to the .image-container class, the images will center on the screen.
.image-container {
width: 1800px;
height: 400px;
position: relative;
transition: left 2s;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
margin: 0 auto;
}
everyone!! I am building a very simple page in codepen and I am pretty new to these stuff. I want to align all the options on my navigation bar in the same row. I don't even know why they looked like this in the first place. I want to do the same for the social media icons at the end of the page, too. Here's my pen https://codepen.io/maria_punchio/pen/mWggYO/.
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
Thanks
Is this what you're looking for?
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
</div>
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
here is code...
<style>.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}</style>
THIS IS OUTPUT PICTURE CLICK ON IT
A quick fix is to add
width: 33%;
margin: 0;
to .topnav a in your css.
But I would advise you to take a look at how flexbox works as this will be more responsive.
I personally really like this guide.
Change this:
a {
overflow: hidden;
display: inline-block;
margin-bottom: px;
width: calc(50% - 4px);
margin-right: 8px;
}
To this:
a {
overflow: hidden;
display: inline-block;
margin-bottom: px;
width: calc(33% - 4px);
margin-right: 8px;
}
And change this:
#media screen and (min-width: 80em) {
a {
width: calc(40% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
to this:
#media screen and (min-width: 80em) {
a {
width: calc(33% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
HTML
<body style="background-color:#d1ffe3">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Heebo" rel="stylesheet">
<div class="container-fluid">
<ul class="topnav">
<li style="width:100%">ABOUT</li>
<li style="width:100%">PORTFOLIO</li>
<li style="width:90%">CONTACT ME</li>
</ul>
<center>
<div id="div_id">
<h1>ABOUT</h1></center>
</div>
<div class="row">
<div class="col-md-6">
<center>
<h2>Hello, I am Maria Pantsiou</h2>
<h1>Former musician, 3D graphics design hobbyist, physicist and potential web developer.<h1>
</center></div>
</div>
</div>
<div id="div_id2"><center><h1>PORTFOLIO</h1></center>
</div>
<center>
<div>
<a href="http://i.imgsafe.org/56bfd0da30.png">
<figure>
<img src="http://i.imgsafe.org/56bfd0da30.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56be3db222.png">
<figure>
<img src="http://i.imgsafe.org/56be3db222.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/5649eb799c.png">
<figure>
<img src="http://i.imgsafe.org/5649eb799c.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56ae6b85ac.png">
<figure>
<img src="http://i.imgsafe.org/56ae6b85ac.png" alt="">
</figure>
</a>
</center>
<section id="contact">
<div id="div_id3">
<center>
<h1>CONTACT ME</h1></center>
</div>
<section id="contact">
<center>
<div class="container">
<form name="htmlform" method="post" action="toyousender.php">
<input type="text" name="first_name" placeholder="NAME" required>
<input type="email" name="email" placeholder="MAIL" required>
<textarea name="comments" placeholder="MESSAGE" required></textarea>
<button name="send" type="submit" class="submit">SEND</button>
</form>
</div>
</center>
</section>
</div>
CSS
body { background-image: url('http://i.imgsafe.org/7d2cbd7925.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .topnav {
background-color: #586882;
overflow: hidden; width:100%; display:inline-flex;
}
/* Style the links inside the navigation bar */ .topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px; }
/* Change the color of links on hover */ .topnav a:hover {
background-color: #ddd;
color: black; }
/* Add a color to the active/current link */ .topnav a.active {
background-color: #4CAF50;
color: white; }
h1 { font-size: 30px; font-family: 'Josefin Sans', sans-serif;
}
h2 { font-size: 25px; font-family: 'Heebo', sans-serif; }
.photo-border { border-radius: 50%; }
.smaller_image { width: 170px; }
body { width: 90%; margin: 30px auto; font-family: sans-serif; }
div { font-size: 0; }
a { overflow: hidden; display: inline-block; margin-bottom: px; width: calc(50% - 4px); margin-right: 8px; }
a:nth-of-type(2n) { margin-right: 0; }
#media screen and (min-width: 80em) { a {
width: calc(40% - 6px); } a:nth-of-type(2n) {
margin-right: 8px; } a:nth-of-type(4n) {
margin-right: 0; } }
a:hover img { transform: scale(1.15); }
figure { margin: 5; }
img { border: none; max-width: 100%; height: ; display: block; background: #ccc; transition: transform .2s ease-in-out; }
#contact { width: 100%; height: 100%; margin 0 auto; background: ; }
.container { width: 960px; height: auto; margin: 0 auto; padding: 50px 0; }
#contact .container form input,
#contact .container form textarea { width: 97.4%; height: 30px; padding: 5px 10px; font-size: 12px; color: #999; letter-spacing: 1px; background: #cbd9ef; border: 2px solid #586882; margin-bottom: 5px; -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form input:focus,
#contact .container form textarea:focus { border: 2px solid #3b4759; color: #999; }
#contact .container form textarea { height: 150px; }
#contact .container form .submit { width: 97.5%; padding: 5px 10px; font-size: 12px; letter-spacing: 1px; background: #586882; height: 40px; text-transform: uppercase; letter-spacing: 1px; color: #FFF; border: 2px solid #3b4759; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form .submit:hover { color: #FFF; border: 2px solid #586882; background: #343f4f; cursor: pointer; }
#contact .container form .required { color: #586882; }
.fb_photo { border-radius: 70%; }
.smaller-image { width: 30px; }
My nav bar is behind my images when i try and scroll but i don't want to use z index because i have a lightbox that when you click the image it opens to a bigger image and when the bigger image opens if i have a zindex of 2 then it overlaps the big image in my lightbox. Any help would be great!
Edit: I tried putting the lightbox to an index of 9000 when my nav bar is zindex 1 but this happens:
Nav bar above lightbox:
I would like my nav bar to be behind my lightbox but when i scroll the images don't go over my nav bar.
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** Pad the lightbox image */
max-width: 100%;
max-height: 95%;
margin-top: 2%;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
#wrapper {
width: 90%;
height: 950px;
background-color: rgba(155,155,155,0.05);
margin: auto;
}
#nav-bar {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
z-index: 0;
}
#nav-bar-portfolio {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
}
#main-content-index {
height: 900px;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
#main-content-portfolio {
height: 100%;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.nav-text {
float:left;
padding-top: 10px;
padding-left: 20px;
}
h3 {
font-size: 25px;
font-family: helvetica, sans-serif;
display: inline;
text-align: left;
}
h4 {
display: inline-block;
font-family: helvetica, sans-serif;
font-size: 13px;
}
nav {
padding-right: 20px;
float: right;
box-shadow: solid black 100px;
}
nav li {
display: inline-block;
padding: 15px;
}
nav a {
font-family: helvetica, sans-serif;
font-size: 14px;
color: black;
transition: opacity .5s ease-in-out;
}
nav a:hover {
text-decoration: none;
opacity: 0.2;
}
/* __________________________________________
Main Area
__________________________________________ */
.welcome-banner {
display: block;
margin-left: auto;
margin-right: auto;
}
#portfolio-button {
width: 150px;
height: 50px;
padding-top: 15px;
padding-left: 30px;
background-color: rgba(0, 0, 0, 1);
color: white;
border-radius: 10px;
display: block;
text-decoration: none;
font-family: helvetica, sans-serif;
margin: 40px auto;
transition: opacity .5s ease-in-out;
}
#portfolio-button:hover {
opacity: 0.3;
}
/* __________________________________________
Footer
__________________________________________ */
#footer {
width: 100%;
height: 50px;
text-align: center;
background-color: black;
clear: both;
padding-top: 15px;
}
.div-left {
float: left;
}
.div-left p {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
padding-left: 20px;
}
.div-center {
margin: 0 auto;
width: 100%;
}
.div-center p {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
}
.div-center a {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
padding-left: 10px;
text-decoration: none;
transition: opacity 0.5s ease-in-out;
}
.div-center a:hover {
opacity: 0.3;
}
.div-right {
float: right;
}
.div-right ul li {
display: inline-block;
}
.div-right ul li a {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
padding-right: 20px;
transition: opacity 0.5s ease-in-out;
}
.div-right ul li a:hover {
opacity: 0.3
}
/* Portfolio */
.main-box {
background-color: rgba(0, 0,0, 0.05);
width: 300px;
height: 400px;
text-align: center;
float: left;
margin-left: 50px;
margin-top: 10px;
margin-bottom: 20px;
}
.project-icons {
padding: 10px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 0.6s ease;
-webkit-transition: -webkit-filter 0.6s ease;
}
.project-icons:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
.project-text {
padding: 10px;
font-family: helvetica, sans-serif;
font-size: 16px;
}
.project-text-caption{
font-size: 10px;
font-family: helvetica, sans-serif;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div id="nav-bar">
<div class="nav-text animated">
<h3>Kyle Du Preez</h3>
<h4>| PORTFOLIO</h4>
</div>
<nav>
<ul>
<li> Home </li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
<main>
<div id="main-content-portfolio" class="animated fadeIn">
<!-- thumbnail image wrapped in a link
<a href="#img1">
<img src="http://insomnia.rest/images/screens/main.png" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS
<a href="#_" class="lightbox" id="img1">
<img src="http://insomnia.rest/images/screens/main.png">
</a>
-->
<!-- Portfolio 1 -->
<div class="main-box">
<a class="thumbnail" href="#img1"><img class="project-icons" src="images/projects/greek-icon.jpg"></a>
<p class="project-text">Greek Alphabet Poster</p>
<p class="project-text-caption">Typography</p>
</div>
<a href="#_" class="lightbox" id="img1">
<img src="images/projects/greek.jpg">
</a>
<!-- Portfolio 2 -->
<div class="main-box">
<img class="project-icons" src="images/projects/premedia-icon.jpg">
<p class="project-text">Pre Media Poster</p>
<p class="project-text-caption">Large Format</p>
</div>
<!-- Portfolio 3 -->
<div class="main-box">
<img class="project-icons" src="images/projects/mohawkposter-icon.jpg">
<p class="project-text">Hamilton Marathon Poster</p>
<p class="project-text-caption">Typography</p>
</div>
<!-- Portfolio 4 -->
<div class="main-box">
<img class="project-icons" src="images/projects/movieposter-icon.jpg">
<p class="project-text">Movie Poster</p>
<p class="project-text-caption">Large Format</p>
</div>
<!-- Portfolio 5 -->
<div class="main-box">
<img class="project-icons" src="images/projects/crayola-icon.jpg">
<p class="project-text">Crayola Packaging</p>
<p class="project-text-caption">Packaging Design</p>
</div>
<!-- Portfolio 6 -->
<div class="main-box">
<img class="project-icons" src="images/projects/housebooklet-icon.jpg">
<p class="project-text">Laing Homes</p>
<p class="project-text-caption">Brochure Design</p>
</div>
</div>
</main>
<footer>
<div id="footer">
<div class="footer-elements">
<div class="div-left"> <p> 2016 - Kyle Du Preez </p> </div>
<div class="div-right">
<ul>
<li><a class="footer-links" href="#">Home</a></li>
<li><a class="footer-links" href="#">About</a></li>
<li><a class="footer-links" href="#">Portfolio</a></li>
<li><a class="footer-links" href="#">Contact</a></li>
</ul>
</div>
<div class="div-center"> <p> LinkedIn: https://ca.linkedin.com/in/kyledupreez </p> </div>
</div>
</div>
</footer>
</div>
</body>
</html>
If you don't want to use z-index,
I think you need to re-order the sequence of DOM. Thus, move your navigation to the bottom, and add top: 0
http://plnkr.co/edit/53wQYQmvPR3fcdKfoZjI?p=preview
#nav-bar {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
top: 0;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
z-index: 0;
}
I have added my html code and also my CSS, I am very confused as to how I would go about making this webpage responsive, so when a user is on a different device the webpage auto scales to their device. (Sorry if this is a repeat question, I was not able to find the answer).
footer {
margin: 50px 0;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
h1 {
margin: .67em 0;
font-size: 2em;
font-family: 'Dosis', sans-serif;
}
body {
font-family: 'Dosis', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
padding-right: 5px;
}
body {
max-width: 1000px;
margin: 10px auto;
}
body {
font-family: 'Dosis', sans-serif;
}
body {
background: white;
}
.container {
max-width: 100%;
text-align: center;
}
.centre {
position: relative;
display: inline-block;
float: left;
max-width: 100%;
padding: 50px;
}
ul {
max-width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
max-width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.accordion {
width: 895px;
height: 485px;
max-width: 100%;
overflow: hidden;
box-shadow: 0 10px 6px -6px #111;
margin: 20px auto
}
.accordion ul {
width: 200%;
max-width: 100%;
}
.accordion li {
position: relative;
display: block;
width: 160px;
max-width: 100%;
float: left;
box-shadow: 0 0 30px 8px #222;
transition: all 0.4s ease .300ms;
}
.accordion ul:hover li {
width: 40px
}
.accordion ul li:hover {
width: 640px
}
.caption {
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
width: 640px
}
.caption a {
display: block;
color: #fff;
text-decoration: none;
font: normal 16px'Lato', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 10px;
}
.center {
align-content: center;
}
.thumbnail {
display: block;
padding: 4px;
padding-left: 5px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
<body>
<nav class="contain">
<div>
<div>
<ul>
<li><a class="active" href="index.html">Home</a>
</li>
<li>Mens Shoes
</li>
<li>Womens Shoes
</li>
<li>Boys Shoes
</li>
<li>Girls Shoes
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<div>
<div class="accordion">
<ul>
<li>
<div class="caption">Slide 1
</div>
<a href="#">
<img src='Slider_Image1.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 2
</div>
<a href="#">
<img src='Slider_Image2.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 3
</div>
<a href="#">
<img src='Slider_Image3.jpg' />
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="centre , fade ,">
<div>
<a href="Nike_Shoes1.html">
<img src="Image1.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="Nike_Trainers.html">
<img src="Image2.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<img src="Image3.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="boys_clothing.html">
<img src="Boys_Clothing.jpg" alt="Boys Clothing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Footer -->
<footer>
</footer>
</div>
You make a page responsive by adding media queries to the css file, for example:
#media(max-width: 800px){
/* Add mobile styles here */
}
You can see more about media queries here, as there are many configs available: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
You can make a responsive webpage by using media queries , Flexible grid-based layout for relative sizing and Flexible images.
this book may help you Responsive Web Design by Ethan Marcotte