I have been trying to solve this issue but for some reason my code is wrong and I am a beginner, I am trying to get those in place, but it isn't responsive, and they get distorted. I am seeking some help to solve this.
please do look at the link(https://i.stack.imgur.com/ZO5F2.jpg) above.
Thank you!!
#import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Alice&family=NTR&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #F4F4F4;
}
navup{
justify-content: space-around;
align-items: center;
display: flex;
min-height: 62px;
background-color: #000000;
color: white;
}
navup h1{
/*padding-left: 40rem;*/
font-family: 'alice', serif;
font-size: 36px;
font-weight: normal;
font-style: italic;
}
navup li{
list-style: none;
}
navup ul li{
display: flex;
}
navup li a{
/*padding-right: -10rem;*/
display: flex;
color: white;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
}
navup img{
/*margin-right: 200px;*/
}
navlo{
width: 100%;
justify-content: space-evenly;
align-items: center;
display: flex;
max-height: 60px;
margin: auto;
background-image: linear-gradient(#FFFFFF,#898989);
border-radius: 0px 0px 0px 9px;
}
navlo img{
width: 61px;
height: 61px;
margin-top: 2.95px;
}
navlo ul{
display: flex;
}
navlo ul li{
list-style: none;
display: flex;
padding: 0rem 1.5rem;
}
navlo li a{
color: #000000;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
font-weight: bold;
}
.barone img{
position: absolute;
width: 89px;
height: 10px;
left: 906px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bartwo img{
position: absolute;
width: 102px;
height: 10px;
left: 1025px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barthree img{
position: absolute;
width: 109px;
height: 10px;
left: 1157px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfour img{
/* Services bar */
position: absolute;
width: 89px;
height: 10px;
left: 1296px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfive img{
/* Partners Bar */
position: absolute;
width: 101px;
height: 10px;
left: 1415px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barsix img{
position: absolute;
width: 111px;
height: 11px;
left: 1546px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bars img{
display: inline;
/*width: 50%;*/
margin-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<title>Art</title>
<style>
/* width */
::-webkit-scrollbar {
background-color: grey;
width: 13px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<SECTION>
<navup>
<div class="logo">
<h1>Art</h1>
</div>
<!-- <ul>
<li>
Login/Signup
</li>
<li>
<img src="../images/account.png">
</li>
</ul> -->
</navup>
</SECTION>
<section>
<navlo>
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li>
BUY ART
</li>
<li>
BLOG
</li>
<li>
PARTNERED
</li>
<li>
CONTACT ME
</li>
</ul>
</navlo>
<section class="bars">
<div class="barone"><img src="../images/homebar.svg" alt="a lower bar for home"></div>
<div class="bartwo"><img src="../images/aboutmebar.svg" alt="a lower bar for home"></div>
<div class="barthree"><img src="../images/buyartbar.svg" alt="a lower bar for home"></div>
<div class="barfour"><img src="../images/blogbar.svg" alt="a lower bar for home"></div>
<div class="barfive"><img src="../images/partnersbar.svg" alt="a lower bar for home"></div>
<div class="barsix"><img src="../images/contactmebar.svg" alt="a lower bar for home"></div>
</section>
</section>
</body>
</html>
Rajayogi Nandina
Related
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
I am very frustrated with this all, I never had such an easy and annoying and at the same time difficult problem
i can't set the footer element at the end of the site.
I need to keep this footer at the down of the site, and it shouldn't override the main content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title>ARL</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1 class="header-title">
Need a good coder? contact us!
</h1>
</header>
<main>
<section class="main-section">
<div class="team">
<h3 class="team-manager">
our general manager, Pavel
</h3>
<img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
<div class="container">
<ul>
<li>Members</li>
<ul>
<li>Aleksandr</li>
<li>Ruslan</li>
<li>Leonard</li>
</ul>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="contacts">
<p>
call us: 5555555555
</p>
<a class="link" href="https://www.facebook.com" target= "_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png"/></a>
<a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
<a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png"/></a>
<a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
</div>
</footer>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;500&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght#200;300;400;600;700&display=swap');
html{
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
height: 100%;
background:#221F1F;
color: white;
font-family: monospace;
}
header{
background: #F65314;
box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.75);
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: darkslategray;
font-size: 25px;
font-style:oblique;
font-weight: 100;
}
main{
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
display: block;
}
.main-section{
position: relative;
max-width: 1750px;
display: block;
margin: auto;
margin-top: 175px;
}.main-section img{
width: 385px;
}
.team{
position: relative;
margin-left: 5%;
}
.team-manager{
position: relative;
color: #F65314;
font-size: 25px;
font-style: italic;
}
.container{
position: relative;
font-size: 40px;
border: 5px solid #F65314;
width: 385px;
}
.container ul{
position: relative;
list-style: none;
}
.container ul li{
position: relative;
color: gray;
}
.container ul ul li{
position: relative;
margin-left: -40px;
line-height: 60px;
color: white;
}
.container ul ul{
position: relative;
margin-top: 35px;
}
footer{
bottom: 0;
width: 100%;
height: 100px;
position: absolute;
background: #303030;
}
.contacts{
display: flex;
justify-content: space-around;
align-items: center;
margin: auto;
width: 400px;
}
.contacts p{
font-size: 20px;
}
.link img{
width: 35px;
border-radius: 5px;
}
Here are some images, I have no idea how to deal with this
https://ibb.co/ssvBMQJ
https://ibb.co/hL9JLvv
https://ibb.co/HHgVKbc
(I don't need to make the footer element position: fixed;, i need to make average footer, which doesn't override the main content, and nested always at the bottom of the page)
Just remove bottom: 0 on footer, like this:
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;500&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght#200;300;400;600;700&display=swap');
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: #221F1F;
color: white;
font-family: monospace;
}
header {
background: #F65314;
box-shadow: 0px 11px 26px 0px rgba(0, 0, 0, 0.75);
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: darkslategray;
font-size: 25px;
font-style: oblique;
font-weight: 100;
}
main {
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
display: block;
}
.main-section {
position: relative;
max-width: 1750px;
display: block;
margin: auto;
margin-top: 175px;
}
.main-section img {
width: 385px;
}
.team {
position: relative;
margin-left: 5%;
}
.team-manager {
position: relative;
color: #F65314;
font-size: 25px;
font-style: italic;
}
.container {
position: relative;
font-size: 40px;
border: 5px solid #F65314;
width: 385px;
}
.container ul {
position: relative;
list-style: none;
}
.container ul li {
position: relative;
color: gray;
}
.container ul ul li {
position: relative;
margin-left: -40px;
line-height: 60px;
color: white;
}
.container ul ul {
position: relative;
margin-top: 35px;
}
footer {
width: 100%;
height: 100px;
position: absolute;
background: #303030;
}
.contacts {
display: flex;
justify-content: space-around;
align-items: center;
margin: auto;
width: 400px;
}
.contacts p {
font-size: 20px;
}
.link img {
width: 35px;
border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>ARL</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1 class="header-title">
Need a good coder? contact us!
</h1>
</header>
<main>
<section class="main-section">
<div class="team">
<h3 class="team-manager">
our general manager, Pavel
</h3>
<img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
<div class="container">
<ul>
<li>Members</li>
<ul>
<li>Aleksandr</li>
<li>Ruslan</li>
<li>Leonard</li>
</ul>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="contacts">
<p>
call us: 5555555555
</p>
<a class="link" href="https://www.facebook.com" target="_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png" /></a>
<a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
<a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png" /></a>
<a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
</div>
</footer>
</body>
</html>
you need to add position: relative to the body and bottom: -100px in footer tag css
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;500&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght#200;300;400;600;700&display=swap');
html{
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
height: 100%;
background:#221F1F;
color: white;
font-family: monospace;
position: relative;
}
header{
background: #F65314;
box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.75);
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: darkslategray;
font-size: 25px;
font-style:oblique;
font-weight: 100;
}
main{
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
display: block;
}
.main-section{
position: relative;
max-width: 1750px;
display: block;
margin: auto;
margin-top: 175px;
}.main-section img{
width: 385px;
}
.team{
position: relative;
margin-left: 5%;
}
.team-manager{
position: relative;
color: #F65314;
font-size: 25px;
font-style: italic;
}
.container{
position: relative;
font-size: 40px;
border: 5px solid #F65314;
width: 385px;
}
.container ul{
position: relative;
list-style: none;
}
.container ul li{
position: relative;
color: gray;
}
.container ul ul li{
position: relative;
margin-left: -40px;
line-height: 60px;
color: white;
}
.container ul ul{
position: relative;
margin-top: 35px;
}
footer{
bottom: -100px;
width: 100%;
height: 100px;
position: absolute;
background: #303030;
}
.contacts{
display: flex;
justify-content: space-around;
align-items: center;
margin: auto;
width: 400px;
}
.contacts p{
font-size: 20px;
}
.link img{
width: 35px;
border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title>ARL</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1 class="header-title">
Need a good coder? contact us!
</h1>
</header>
<main>
<section class="main-section">
<div class="team">
<h3 class="team-manager">
our general manager, Pavel
</h3>
<img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
<div class="container">
<ul>
<li>Members</li>
<ul>
<li>Aleksandr</li>
<li>Ruslan</li>
<li>Leonard</li>
</ul>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="contacts">
<p>
call us: 5555555555
</p>
<a class="link" href="https://www.facebook.com" target= "_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png"/></a>
<a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
<a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png"/></a>
<a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
</div>
</footer>
</body>
</html>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I was wondering how I can get my footer to stay at the bottom. Sorry I am still new to this and still learning. If you guys see anything in my code I could do better on just let me know. I was messing around with the positioning a lot. I think the next website I design I will be using flexbox lol. If anyone has any suggestions or some tips for me to do better please let me know. I tried making the body relative and made the footer absolute with bottom set to 0 but that didn't work
#font-face{
font-family: 'HeadingFont';
src: url(../fonts/KaushanScript-Regular.otf);
font-style: normal;
}
body{
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background: #ffffff;
box-sizing: border-box;
}
/* global */
.container{
width: 100%;
margin: 5px 0 15px 0;
overflow-x: hidden;
}
#wrapper{
padding: 60px 155px ;
}
ul{
text-align: left;
list-style-type: square;
}
.button_1{
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* header */
header{
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid;
}
header #branding{
float: left;
font-family: 'HeadingFont' , 'Times New Roman', Times, serif;
font-size: 0.9rem;
}
header #branding h1{
margin: 0;
}
.navbar a{
color: white;
padding-right: 20px;
}
.navbar{
padding-right: 20px;
}
.side-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background: #35424a;
opacity: 0.9;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
}
.side-nav a{
padding: 20px 30px 20px 10px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.side-nav .btn-close{
position: absolute;
top: 20px;
left: -50px;
font-size: 36px;
margin-left: 50px;
padding: 10px;
}
.fas{
float: right;
font-size: 30px;
}
header .highlight, header .current a{
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #cccccc;
transition: all 0.3s ease;
font-weight: bold;
}
/*Slider*/
.slider-inner{
width: 90%;
height:400px;
position:relative;
overflow:hidden;
float:left;
padding:3px;
}
.slider-inner img{
display:none;
width:100%;
height:500px;
}
.slider-inner img.active{
display:inline-block;
}
.prev,.next{
float:left;
margin-top:130px;
cursor: pointer;
}
.prev{
position:relative;
margin-right:-45px;
z-index:100;
}
.next{
position:relative;
margin-left:-45px;
z-index:100;
}
/*Homepage packages*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .bronze{
color: #cd7f32; /*Bronze*/
text-align: center;
}
#boxes .silver{
color: #C0C0C0; /*silver*/
}
#boxes .gold{
color: #CFB53B; /*Gold*/
}
/*Gallery Page*/
#gallery{
max-width: 90%;
padding: 50px;
}
.image{
border-radius: 5px;
width: 70%;
background: #35424a;
margin: 0 auto;
padding: 50px;
}
.image img{
width: 200px;
padding: 10px;
}
.image img:hover{
transform: scale(1.2);
}
/*Contact Page*/
form {
border-radius: 5px;
background: #35424a;
color: white;
width:70%;
padding: 50px;
margin: 0 auto;
}
#contact{
width: 90%;
}
input[type=text], [type=email], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
width: 100px;
}
.submit:hover{
color: black;
background: rgb(60, 255, 0);
transition: all 0.9s ease;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#contact{
padding: 50px;
line-height: 3em;
}
/*footer*/
footer{
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
}
/*Media Queries*/
#media only screen and (max-width: 940px){
#wrapper{
padding: 0;
margin: 0;
}
#boxes .box{
float: left;
text-align: center;
width: 100%;
padding: 5px;
}
header{
padding: 10px;
}
header nav{
margin: 0;
float: left;
}
.image{
width: 450px;
margin: 0 auto;
}
#gallery{
width: 100%;
}
#contact{
padding-left: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<title>photagraphy - Welcome</title>
<link rel="stylesheet" href="./css/style.css">
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="jqslider/js/main.js"></script>
<script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
<script src="navigation.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span class="highlight">Jamie's</span> photagraphy</h1>
</div>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
×
Home
Gallery
Contact Us
</div>
</div>
</header>
<div id="wrapper">
<div class="container">
<div class="slider-outer">
<img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="jqslider/images/image1.jpg" class="active">
<img src="jqslider/images/image2.jpg">
<img src="jqslider/images/image3.jpg">
<img src="jqslider/images/image4.jpg">
</div>
<img src="jqslider/images/arrow-right.png" class="next" alt="Next">
</div>
</div>
<section id="boxes">
<div class="container">
<div class="box">
<h3 class="bronze">Bronze</h3>
<ul>
<li>Full Day coverage of your wedding.</li>
<li>Unlimited Photographers time on Wedding day.</li>
<li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
<li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
<li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
</ul>
</div>
<div class="box">
<h3 class="silver">Silver</h3>
<ul>
<li>
Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
</li>
<li>
Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
</li>
<li>
1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
</li>
<li>
OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
</li>
<li>
Online proofs.
</li>
</ul>
</div>
<div class="box">
<h3 class="gold">Gold</h3>
<ul>
<li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
<li>Online proofs.</li>
<li>Two photographers</li>
<li>One 16x20 Print!</li>
<li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
<li>Custom Hard Cover Photo Book.</li>
<li>15 full format images of your choice, copyright free.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<p>Created by Justin Hamilton. Copyright © 2019</p>
</footer>
</body>
</html>
I Use:
.footer{
width: 100%;
height: 4rem;
bottom: 0;
left: 0;
position: absolute;
}
Your Css had:
footer{
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
}
You can make your footer fixed
make sure you add z-index value so that other element don't overlaps the footer.
footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 5;
}
Making your footer position: fixed will help you achieve this. You may have to watch out for other elements near the bottom colliding and overlapping. You can use margins to help with that. Also, using a high z-index will prevent other elements from being displayed over top of it.
You can read more about fixed positioning here.
#font-face {
font-family: 'HeadingFont';
src: url(../fonts/KaushanScript-Regular.otf);
font-style: normal;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background: #ffffff;
box-sizing: border-box;
}
/* global */
.container {
width: 100%;
margin: 5px 0 15px 0;
overflow-x: hidden;
}
#wrapper {
padding: 60px 155px;
}
ul {
text-align: left;
list-style-type: square;
}
.button_1 {
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* header */
header {
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid;
}
header #branding {
float: left;
font-family: 'HeadingFont', 'Times New Roman', Times, serif;
font-size: 0.9rem;
}
header #branding h1 {
margin: 0;
}
.navbar a {
color: white;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background: #35424a;
opacity: 0.9;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
}
.side-nav a {
padding: 20px 30px 20px 10px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.side-nav .btn-close {
position: absolute;
top: 20px;
left: -50px;
font-size: 36px;
margin-left: 50px;
padding: 10px;
}
.fas {
float: right;
font-size: 30px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
transition: all 0.3s ease;
font-weight: bold;
}
/*Slider*/
.slider-inner {
width: 90%;
height: 400px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
width: 100%;
height: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
cursor: pointer;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
/*Homepage packages*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .bronze {
color: #cd7f32;
/*Bronze*/
text-align: center;
}
#boxes .silver {
color: #C0C0C0;
/*silver*/
}
#boxes .gold {
color: #CFB53B;
/*Gold*/
}
/*Gallery Page*/
#gallery {
max-width: 90%;
padding: 50px;
}
.image {
border-radius: 5px;
width: 70%;
background: #35424a;
margin: 0 auto;
padding: 50px;
}
.image img {
width: 200px;
padding: 10px;
}
.image img:hover {
transform: scale(1.2);
}
/*Contact Page*/
form {
border-radius: 5px;
background: #35424a;
color: white;
width: 70%;
padding: 50px;
margin: 0 auto;
}
#contact {
width: 90%;
}
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
width: 100px;
}
.submit:hover {
color: black;
background: rgb(60, 255, 0);
transition: all 0.9s ease;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#contact {
padding: 50px;
line-height: 3em;
}
/*footer*/
footer {
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
position: fixed;
bottom: 0;
}
/*Media Queries*/
#media only screen and (max-width: 940px) {
#wrapper {
padding: 0;
margin: 0;
}
#boxes .box {
float: left;
text-align: center;
width: 100%;
padding: 5px;
}
header {
padding: 10px;
}
header nav {
margin: 0;
float: left;
}
.image {
width: 450px;
margin: 0 auto;
}
#gallery {
width: 100%;
}
#contact {
padding-left: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<title>photagraphy - Welcome</title>
<link rel="stylesheet" href="./css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="jqslider/js/main.js"></script>
<script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
<script src="navigation.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span class="highlight">Jamie's</span> photagraphy</h1>
</div>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
×
Home
Gallery
Contact Us
</div>
</div>
</header>
<div id="wrapper">
<div class="container">
<div class="slider-outer">
<img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="jqslider/images/image1.jpg" class="active">
<img src="jqslider/images/image2.jpg">
<img src="jqslider/images/image3.jpg">
<img src="jqslider/images/image4.jpg">
</div>
<img src="jqslider/images/arrow-right.png" class="next" alt="Next">
</div>
</div>
<section id="boxes">
<div class="container">
<div class="box">
<h3 class="bronze">Bronze</h3>
<ul>
<li>Full Day coverage of your wedding.</li>
<li>Unlimited Photographers time on Wedding day.</li>
<li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
<li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
<li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
</ul>
</div>
<div class="box">
<h3 class="silver">Silver</h3>
<ul>
<li>
Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
</li>
<li>
Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
</li>
<li>
1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
</li>
<li>
OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
</li>
<li>
Online proofs.
</li>
</ul>
</div>
<div class="box">
<h3 class="gold">Gold</h3>
<ul>
<li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
<li>Online proofs.</li>
<li>Two photographers</li>
<li>One 16x20 Print!</li>
<li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
<li>Custom Hard Cover Photo Book.</li>
<li>15 full format images of your choice, copyright free.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<p>Created by Justin Hamilton. Copyright © 2019</p>
</footer>
</body>
</html>
#container {
position: relative;
min-height: 100vh;
}
#content {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="container">
<div id="content">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
I'm very new to HTML and CSS and have finally created my new website. The site works fine on my laptop and PC, but when I open it on my phone, there is this huge white space covering half my screen in portrait mode. It's perfectly fine in landscape mode.
I want my website to be completely zoomed in when opened in portrait mode, so that you can swipe/scroll to navigate on the site and get rid of the white space. Basically, at the moment, when the site is opened, it zooms out to show 100% of the site, but I only want it to show whatever fits the mobile screen in portrait mode. Hope my question is clear. I've been searching for an answer for over 3 hours now. Please help me guys :(
My css: https://pastebin.com/AeHyczJh
My HTML: https://pastebin.com/N5jV8yqY
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design, professional web design">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header>
<div class="container">
<img src="images/final.png" width="162" height="200" alt="logo" id="logo"/>
<nav>
<ul>
<li class="current">Home</li>
<li class="dropdown">
Registration
<div class="dropdown-content">
Team
Individual
Coach a team
Manage a team
</div>
</li>
<li class="dropdown">
KWSA Women's Soccer League
<div class="dropdown-content">
Match Schedule
Practice Schedule
Pitch Locations
Team Kits
Top Scorers
</div>
</li>
<li class="dropdown">
Sponsors
<div class="dropdown-content">
Sponsors of KWSL
Sponsor a team
</div>
</li>
<li class="dropdown">
Info
<div class="dropdown-content">
Rules
FAQ
</div>
</li>
<li>The Carpool Program</li>
</ul>
</nav>
</div>
</header>
<section id="main_content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WSd0HZVh5pE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div id="main_text">
<h1></h1>
<p></p>
</div>
</section>
<footer>
<div class="foot-container">
<img src="images/fb.png" class="social_fb">
<img src="images/youtube.png" class="social_youtube">
<img src="images/insta.png" class="social_insta">
<img src="images/mail.png" class="social_mail">
</div>
</footer>
</div>
</body>
</html>
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url(''); /*URL to font*/
}
#charset "utf-8";
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
max-height: 5px;
}
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
overflow: scroll;
background: url(images/field.jpg) no-repeat 0 -200px;
}
h1,
p{
margin: 0;
}
#wrap{
}
.container{
margin: auto;
overflow: hidden;
}
header{
padding-top: 30px;
min-height: 70px;
padding-bottom: 0px;
min-width: 1300px;
padding-left: 20px;
}
#logo{
position: absolute;
top: 20px;
left: 20px;
margin: auto;
}
header li{
float:center;
display:inline;
padding: 0 70px 0 0px;
}
nav{
float: right;
}
header a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
}
header a:hover{
font-weight: bold;
}
iframe{
position: static;
top: 300px;
left: 200px;
float:right;
box-shadow: 10px 10px 100px black;
overflow: hidden;
margin: 200px 20px 0px 0px;
}
#main_content{
position: static;
min-height: 700px;
min-width: 1300px;
width: 100%;
z-index: 1;
}
#main_content h1{
position: absolute;
left: -135px;
top: 165px;
text-align: center;
color: #FFFFFF;
font-family:"Bauhaus 93";
font-size: 50px;
min-height: 500px;
min-width: 150px;
}
#main_content p{
color:#FFFFFF;
text-align: center;
height: 10px;
width: 400px;
position: absolute;
left: 410px;
top: 275px;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 700ms ease;
border: black 1px solid;
}
li a:hover, .dropdown:hover .dropbtn {
background: black;
color: white;
box-shadow: inset 0 0 0 3px black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
background: rgba(208,208,208,0.8);
box-shadow: 1px 1px 1px black;
}
.dropdown-content a:hover {background-color:black;}
.dropdown:hover .dropdown-content {
display: block;
}
li a, .dropbtn-2 {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown2:hover .dropbtn-2 {
}
.dropdown-content-2 {
display: none;
position: absolute;
background-color: #1A3C60;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-2 a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content-2 a:hover {background-color:rgba(56,97,159,0.46)}
.dropdown2:hover .dropdown-content-2 {
display: inline-block;
position: absolute;
left: 160px;
margin-top: -47px;
}
li.dropdown2 {
display: inline-block;
}
#FAQ{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
height: 100%;
}
#FAQ h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#FAQ ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#FAQ ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
.social_fb{
position: relative;
top: 15px;
left: 500px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_fb:hover{
background: #3b5998;
}
.social_youtube{
position: relative;
top: 15px;
left: 520px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_youtube:hover{
background: #bb0000;
}
.social_insta{
position: relative;
top: 15px;
left: 540px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_insta:hover{
background: #8a3ab9;
}
.social_mail{
position: relative;
top: 15px;
left: 560px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_mail:hover{
background: #e4a805;
}
#carpool{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
z-index: 1;
height: 100%;
}
#carpool h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#carpool ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#carpool ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
#soon{
position: absolute;
left: 550px;
top: 300px;
}
I am new to Html and css but I am stuck with a buggy problem. I created my first responsive website but when i scale it down to small sizes and scroll to the right there are 40-50 px of empty space with only the background . I must add that when I scale it up the empty part disappears. Some help?
html {
width: 100%;
display: inline-block;
margin: 0px;
}
body {
margin: auto;
font-family: Arial;
background-image: url("weed.png");
margin-left: 0px;
margin-right: 0px;
}
/*Weedmania Logo*/
#weedmania_shade{
z-index: -1;
height: 255px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(0,0,0,0.7);
}
#weedmania_logo_img {
margin-right: -120px;
margin-top: -405px;
height: 370px;
width: 90%;
min-width: 350px;
max-width: 800px;
}
/*Site Banner*/
#site_panel {
float: left;
background-image: url(weeds.jpg);
font-family: "Gigi Regular";
width: 98%;
color: green ;
border: 4px solid black;
padding: 5px;
margin-left: 6px;
margin-top: -175px;
}
#site_panel p {
font-style: italic;
text-shadow: 1px 2px black;
}
#site_panel h1 {
text-shadow: 1px 3px black;
}
/*Menu*/
nav {
float: left;
width: 10%;
max-width: 200px;
min-width: 100px;
height: 100px;
margin-top: 0px;
margin-left: 6px;
}
nav ul{
padding: 0;
background-color: green;
border: 2px solid black;
}
nav ul li {
list-style: none;
border : 1px solid lime;
padding : 5px;
}
nav ul li a{
color: lime;
list-style: none;
text-decoration: none;
font-family: "Arial";
font-style: italic;
}
nav ul li a:hover{
color : #ccffb3;
text-decoration: underline;
}
/*Leaves And Joint*/
#joint_figure #joint_img{
float: center;
border: 3px solid black;
margin-top: 0px;
width: 50%;
min-width: 157px;
}
#leaf_img_left{
float: left;
max-width: 300px;
width: 25%;
height: 30%;
margin-left: -30px;
margin-top: 10px;
}
#leaf_img_right{
float: right;
max-width: 300px;
width: 25%;
height: 30%;
margin-right: -30px;
margin-top: 10px;
}
#description{
width: 50%;
height: 10%;
min-width: 300px;
font-size: 110%;
background-color: rgba(0,0,0,0.75);
}
#description_text{
color: rgba(255,255,255,0.5);
font-family: "Comic Sans MS";
padding-top: 2px;
text-align: center;
font-size: 83%;
}
<!DOCTYPE html>
<html>
<head>
<title> WeedMania - Weed's biggest community </title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" contnet="initial-scale=1.0">
</head>
<body>
<div><nav>
<ul>
<li>
Index
</li>
<li>
Good Trip
</li>
<li>
Buy Weed
</li>
</ul>
</nav></div>
<article><center><figure id="weedmania_shade"></figure></center></article>
<div><figure id="weedmania_logo"><center><img src="weedmania_logo.png" id="weedmania_logo_img" alt=""></center></figure></div>
<div><figure id="stop"></figure></div>
<div><article id="site_start">
<header id="site_panel">
<h1> Smoke Weed Everyday </h1>
<p> Posted by <strong>WeedMania</strong> </p>
</header>
<div><figure class="leaves">
<img id="leaf_img_left" src="leaf.png" alt="">
</figure></div>
<div><figure class="leaves">
<img id="leaf_img_right" src="leaf.png" alt="">
</figure></div>
</article></div>
<div><center><figure id="joint_figure">
<img id="joint_img" src="joint1.jpg" alt="">
</figure></center></div>
<center><article id="description">
<p id="description_text">This forum is designed to bring you the latest news about weed worldwide, informations about weed strains, smoking stories and , basically everything you need to know about weed. Feel free the create an account and join the community</p>
</article></center>
</body>
</html>
If you don't want space to the right side. you need to remove 'min-width' or width with padding. Please see below example. you cannot have any spaces.
html {
width: 100%;
display: inline-block;
margin: 0px;
}
body {
margin: auto;
font-family: Arial;
background-image: url("weed.png");
margin-left: 0px;
margin-right: 0px;
}
/*Weedmania Logo*/
#weedmania_shade{
z-index: -1;
height: 255px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(0,0,0,0.7);
}
#weedmania_logo_img {
//margin-right: -120px;
margin-top: -405px;
height: 370px;
width: 90%;
//min-width: 350px;
max-width: 800px;
}
/*Site Banner*/
#site_panel {
float: left;
background-image: url(weeds.jpg);
font-family: "Gigi Regular";
//width: 98%;
color: green ;
border: 4px solid black;
padding: 5px;
margin-left: 6px;
margin-top: -175px;
}
#site_panel p {
font-style: italic;
text-shadow: 1px 2px black;
}
#site_panel h1 {
text-shadow: 1px 3px black;
}
/*Menu*/
nav {
float: left;
width: 10%;
max-width: 200px;
min-width: 100px;
height: 100px;
margin-top: 0px;
margin-left: 6px;
}
nav ul{
padding: 0;
background-color: green;
border: 2px solid black;
}
nav ul li {
list-style: none;
border : 1px solid lime;
padding : 5px;
}
nav ul li a{
color: lime;
list-style: none;
text-decoration: none;
font-family: "Arial";
font-style: italic;
}
nav ul li a:hover{
color : #ccffb3;
text-decoration: underline;
}
/*Leaves And Joint*/
#joint_figure #joint_img{
float: center;
border: 3px solid black;
margin-top: 0px;
width: 50%;
//min-width: 157px;
}
#leaf_img_left{
float: left;
max-width: 300px;
width: 25%;
height: 30%;
margin-left: -30px;
margin-top: 10px;
}
#leaf_img_right{
float: right;
max-width: 300px;
width: 25%;
height: 30%;
margin-right: -30px;
margin-top: 10px;
}
#description{
//width: 50%;
height: 10%;
//min-width: 300px;
font-size: 110%;
background-color: rgba(0,0,0,0.75);
}
#description_text{
color: rgba(255,255,255,0.5);
font-family: "Comic Sans MS";
padding-top: 2px;
text-align: center;
font-size: 83%;
}
<!DOCTYPE html>
<html>
<head>
<title> WeedMania - Weed's biggest community </title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div><nav>
<ul>
<li>
Index
</li>
<li>
Good Trip
</li>
<li>
Buy Weed
</li>
</ul>
</nav></div>
<article><center><figure id="weedmania_shade"></figure></center></article>
<div><figure id="weedmania_logo"><center><img src="weedmania_logo.png" id="weedmania_logo_img" alt=""></center></figure></div>
<div><figure id="stop"></figure></div>
<div><article id="site_start">
<header id="site_panel">
<h1> Smoke Weed Everyday </h1>
<p> Posted by <strong>WeedMania</strong> </p>
</header>
<div><figure class="leaves">
<img id="leaf_img_left" src="leaf.png" alt="">
</figure></div>
<div><figure class="leaves">
<img id="leaf_img_right" src="leaf.png" alt="">
</figure></div>
</article></div>
<div><center><figure id="joint_figure">
<img id="joint_img" src="joint1.jpg" alt="">
</figure></center></div>
<center><article id="description">
<p id="description_text">This forum is designed to bring you the latest news about weed worldwide, informations about weed strains, smoking stories and , basically everything you need to know about weed. Feel free the create an account and join the community</p>
</article></center>
</body>
</html>