My footer overlaps my content (not always, I have created several flex/grid themed HTML's and they work fine, the footer gets pushed down to where it should be and when resizing the page the footer still recognizes the content and goes farther down).
The footer is responsive, the width / height change as the browser window is resized, so a .px value for the footer wouldn't work and I hope its not necessary.
Here is the code, and I will include the JSFiddle at the bottom of this content. I have tried some question-answers on Stack Overflow, but nothing seems to work.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<base target="_blank"/>
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Template</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- Navigation Bar -->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">MALLORCA<span>NOW</span></label>
<ul>
<li><a class="active"href="Index.html">Home</a></li>
<li>Holiday Rentals</li>
<li>Properties For Sale</li>
</ul>
</nav>
<!-- End Navigation Bar -->
<!-- Main Content -->
<!-- InstanceBeginEditable name="main-content" -->
<div class="main-content">
<div class="a-body">
<div class="a-box">
<span style="--i:1"><img src="Images/Slideshow/1.png"></span>
<span style="--i:2"><img src="Images/Slideshow/2.png"></span>
<span style="--i:3"><img src="Images/Slideshow/3.png"></span>
<span style="--i:4"><img src="Images/Slideshow/4.png"></span>
<span style="--i:5"><img src="Images/Slideshow/5.png"></span>
<span style="--i:6"><img src="Images/Slideshow/1.png"></span>
<span style="--i:7"><img src="Images/Slideshow/2.png"></span>
<span style="--i:8"><img src="Images/Slideshow/3.png"></span>
</div>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="footer-main-content">
<div class="left box">
<h2>About Us</h2>
<div class="footer-content">
<p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
<div class="social">
<span class="fab fa-facebook-f"></span>
<span class="fab fa-twitter"></span>
<span class="fab fa-instagram"></span>
<span class="fab fa-youtube"></span>
</div>
</div>
</div>
<div class="center box">
<h2>Address</h2>
<div class="footer-content">
<div class="place">
<span class="fas fa-map-marker-alt"></span>
<span class="text">Cala Bona, Mallorca</span>
</div>
<div class="phone">
<span class="fas fa-phone-alt"></span>
<span class="text">+34-676841886</span>
</div>
<div class="email">
<span class="fas fa-envelope"></span>
<span class="text">office#mallorca-now.com</span>
</div>
</div>
</div>
<div class="right box">
<h2>Contact Us</h2>
<div class="footer-content">
<form action="#">
<div class="email">
<div class="text">Email *</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">Message *</div>
<textarea rows="2" cols="25" required></textarea>
</div>
<div class="btn">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<center>
<span class="credit">Est. 2012 - Mallorca-Now</span>
<span class="far fa-copyright"></span><span> - All Rights Reserved</span>
</center>
</div>
</footer>
<!-- End Footer -->
</body>
<!-- InstanceEnd --></html>
CSS (The last css style is the style applied to this HTML in particular):
#charset "utf-8";
/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */
/*---------------------------------------- Page-Wide Styles ----------------------------------------*/
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline:; 1px solid slategrey;
border-radius:80px;
}
/*---------------------------------------- Navbar ----------------------------------------*/
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
z-index:1;
top:0;
overflow:hidden;
}
label.logo{
color:white;
font-size:35px;
font-weight:100;
line-height:80px;
padding:0 100px;
}
label.logo span{
font-weight:900;
}
nav ul{
float:right;
margin-right:20px;
}
nav ul li{
display:inline-block;
line-height:80px;
margin:0 5px;
}
nav ul li a{
color:white;
font-size:17px;
padding:7px 13px;
}
nav ul li a.active,nav ul li a:hover{
background:#6DD5FA;
transition:0.9s;
border-radius:4px;
}
.checkbtn{
font-size:30px;
color:white;
float:right;
line-height:80px;
margin-right:40px;
cursor:pointer;
display:none;
}
#check{
display:none;
}
#media (max-width: 952px){
label.logo{
font-size:30px;
padding-left:50px;
}
nav ul li a{
font-size:16px;
}
}
#media (max-width: 489px){
label.logo{
font-size:25px;
padding:0px 0px 0px 10px;
}
.checkbtn{
font-size:25px;
margin-right:20px;
}
nav ul li a{
font-size:0px;
}
}
#media (max-width:1000px){
.checkbtn{
display:block;
}
ul{
position:fixed;
width:100%;
height:100vh;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
top:80px;
left:-100%;
text-align:center;
transition:all .9s;
}
nav ul li{
display:block;
margin:50px;
line-height:30px;
}
nav ul li a{
font-size:20px;
}
a:hover,a.active{
background:none;
color:#0082e6;
}
#check:checked ~ ul{
left:0;
}
}
/*---------------------------------------- Footer ----------------------------------------*/
footer{
position:relative;
bottom:0;
width:100%;
background-color:#101010;
color:white;
}
.footer-main-content{
display:flex;
}
.footer-main-content .box{
flex-basis:50%;
padding:10px 20px;
}
.box h2{
font-size:1.125rem;
font-weight:600;
text-transform:uppercase;
}
.box .footer-content{
margin:20px 0 0 0;
position:relative;
}
.box .footer-content:before{
position:absolute;
content:'';
top:-10px;
height:2px;
width:100%;
background:#1a1a1a;
}
.box .footer-content:after{
position:absolute;
content:'';
height:2px;
width:15%;
background:#6DD5FA;
top:-10px;
}
.left .footer-content{
text-align:justify;
}
.left .footer-content .social{
margin:20px 0 0 0;
}
.left .footer-content .social a{
padding: 0 2px;
}
.left .footer-content .social a span{
height:40px;
width:40px;
background:#1a1a1a;
line-height:40px;
text-align:center;
font-size:18px;
border-radius:5px;
color:white;
}
.left .footer-content .social a span:hover{
background:#6DD5FA;
transition:0.9s;
}
.center .footer-content .fas{
font-size:1.4375rem;
background:#1a1a1a;
height:45px;
width:45px;
line-height:45px;
text-align:center;
border-radius:50%;
transition:0.9s;
cursor:pointer;
}
.center .footer-content a span{
color:white;
}
.center .footer-content .fas:hover{
background:#6DD5FA;
}
.center .footer-content .text{
font-size:1.0625rem;
font-weight:500;
padding-left:10px;
}
.center .footer-content .phone{
margin:10px 0;
}
.right form .text{
font-size:1.0625rem;
margin-bottom:2px;
color:#656565;
}
.right form .msg{
margin-top:10px;
}
.right form input, .right form textarea{
width:100%;
font-size:1.0625rem;
background:#151515;
padding-left:10px;
border:1px solid #222222;
color:white;
}
.right form input:focus,
.right form textarea:focus{
outline-color:#3498db;
}
.right form input{
height:32px;
}
.right form .btn{
margin-top:10px;
}
.right form .btn button{
height:40px;
width:100%;
border:none;
outline:none;
background: #6DD5FA;
font-size:1.0625rem;
font-weight:500;
cursor:pointer;
transition:0.3s;
color:white;
}
.right form .btn button:hover{
background:#000;
}
.bottom center{
padding:5px;
font-size:0.9375rem;
background:#151515;
}
.bottom center span{
color:#656565;
}
.bottom center span a{
color:white;
}
#media screen and (max-width:900px){
footer{
position:relative;
bottom:0px;
}
.footer-main-content{
flex-wrap:wrap;
flex-direction:column;
}
.footer-main-content .box{
margin:5px 0;
}
}
/*---------------------------------------- Main Content ----------------------------------------*/
.main-content{
min-height:;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
}
/*---------------------------------------- Rantaltest Styles ----------------------------------------*/
.a-body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.a-box{
position:relative;
width:200px;
height:200px;
}
And the JSFiddle
https://jsfiddle.net/f46vzgwj/
As you can see in the JSFiddle, the footer starts overlapping the content, then finishes its box, and you can see the last of the content after the footer.
Set height: auto
.a-box{
position:relative;
width:200px;
height:auto; /* this was 200px */
}
Related
I have the following problem: When I use absolute positioning for the #mobile-nav-content container for my mobile menu, the elements of the ul in it are appearing top of each other.
I want them to be stacked under each other with background-color:grey; (They do not need to be hidden, I will work on that part later).
I want the elements of the ul to be over each other and the background color to be BLACK.
This is my code, what do I need to change to get this to work?
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:100%;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<!-- <div class="container">
<div class="row">
<div class="col-6">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
You are very close with the code you have, you just need to make one change. The problem is being caused by height:100% in your .header-nav ul CSS. What this does is take 100% of the container height (i.e. #mobile-nav-dropdown ), but for this to work the container must have been given a specific height.
In this case, we don't want to give the nav dropdown and ul a specific height, but instead to be auto so it will be the height it needs to accommodate its contents. So you just need to change the height in .header-nav ul to auto:
.header-nav ul{
margin:0;
padding:0;
position:absolute;
right:10px;
/* Change height from 100% to auto (or remove it altogether as auto is the default value ) */
height:auto;
}
When you start working on the code to show/hide the menu, this should work with it!
Working Example:
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:auto;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
I have a header on my page and there is a box containing a login picture and your website balance. But i'm trying to add a drop down menu with options but or some reason my Font Awesome icon is appearing under the text box. Basically I just want to understand why my Font Awesome icon is appearing under my text box. Any help?
JSFiddle: https://jsfiddle.net/nxt4Lzch/
<head>
<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/dropdown.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-box">
<div class="steam-info">
<img class="steam-avatar" src="<?=$steamprofile['avatar'];?>">
<div class="balance-box">
<i class="fa fa-database">
<span class="balance-amount">$201.50</span>
</i>
</div>
<div class="steam-dropdown">
<i class="fa fa-chevron-down"></i>
</div>
</div>
</div>
</div>
<!--Website Sidebar-->
<div id="sidebar-menu">
<ul>
<li><i class=""></i></li>
<li><i class="fa fa-area-chart"></i></li>
<li><i class="fa fa-life-ring"></i></li>
<li><i class="fa fa-cart-arrow-down"></i></li>
<li><i class="fa fa-shopping-basket"></i></li>
<li><i class="fa fa-users"></i></li>
</ul>
</div>
</body>
/* Default Stuff */
* {
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"Open Sans", sans-serif;
}
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
/* Header (Steam Section) */
.steam-box {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);
width:180px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-avatar {
width:30px;
height:30px;
margin-left:5px;
margin-top:3px;
border:2px solid rgb(28,28,28);
border-radius:10px;
}
.balance-box {
height:30px;
width:100px;
border-radius:10px;
position:absolute;
margin-top:5px;
margin-left:5px;
display:inline;
background:rgb(28,28,28);
}
.balance-box i {
color:rgb(255,255,255);
line-height:30px;
margin-left:10px;
}
.balance-amount {
color:rgb(255,255,255);
font-family:"Montserrat", sans-serif;
margin-right:10px;
}
.steam-dropdown i {
color:rgb(255,255,255);
font-size:8px;
}
/* Sidebar Menu */
#sidebar-menu {
background:rgb(41,41,41);
width:60px;
height:100%;
position:absolute;
text-align:center;
line-height:60px;
box-shadow:4px 4px 8px black;
left:0px;
top:0px;
}
#sidebar-menu ul {
margin:0px;
padding:0px;
margin-top:3px;
}
#sidebar-menu ul li {
list-style:none;
height:60px;
border-bottom:2px solid rgb(17,17,17);
}
#sidebar-menu ul li a {
color:rgb(255,255,255);
font-size:30px;
display:block;
height:100%
width:100%;
}
#sidebar-menu ul li a:hover {
background:rgb(255,255,255);
color:rgb(41,41,41);
}
#sidebar-menu ul li a:active {
font-size:25px;
}
This is happening because your steam-dropdown that contains the font-awesome icon is not display:inline;, Instead it is display:block; by default. Therefore it needs a new line.
Now if you add display:inline; to this steam-dropdown then it will move in the same line, but it goes under .balance-box because you are setting position:absolute; to this .balance-box. You have to remove that.
I suggest removing position:absolute; from .balance-box and Use flex on their parent div (which is .steam-info). By adding this in the your css:
.steam-info{
display:flex;
flex-direction:row;
align-items:center;
}
.steam-dropdown i {
margin-left:5px;
}
This solves the problem asked. But might I suggest replacing left:1160px; with right:20px; in the css for .steam-info because in smaller screens it goes way too right. I have included this in my solution but you may remove this if you don't want that.
Here is a working fiddle.
And here is a working Snippet:
/* Default Stuff */
* {
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"Open Sans", sans-serif;
}
/* Loading Animation */
#loading-overlay {
height:100%;
width:100%;
background:rgb(17,17,17);
position:fixed;
z-index:9999999999;
left:0px;
top:0px;
}
.loading-spinner {
width:100px;
height:100px;
border:2px solid rgb(255,255,255);
border-top:3px solid rgb(250,32,32);
border-radius:100%;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
animation:loading-spin 1s infinite linear;
}
#keyframes loading-spin {
from {
transform:rotate(0deg);
} to {
transform:rotate(360deg);
}
}
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
/* Header (Steam Section) */
.steam-box {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:180px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
right:20px;
}
.steam-avatar {
width:30px;
height:30px;
margin-left:5px;
margin-top:3px;
border:2px solid rgb(28,28,28);
border-radius:10px;
}
.balance-box {
height:30px;
width:100px;
border-radius:10px;
//position:absolute;
margin-top:5px;
margin-left:5px;
display:inline;
background:rgb(28,28,28);
}
.balance-box i {
color:rgb(255,255,255);
line-height:30px;
margin-left:10px;
}
.balance-amount {
color:rgb(255,255,255);
font-family:"Montserrat", sans-serif;
margin-right:10px;
}
.steam-dropdown i {
color:rgb(255,255,255);
font-size:8px;
}
/* Sidebar Menu */
#sidebar-menu {
background:rgb(41,41,41);
width:60px;
height:100%;
position:absolute;
text-align:center;
line-height:60px;
box-shadow:4px 4px 8px black;
left:0px;
top:0px;
}
#sidebar-menu ul {
margin:0px;
padding:0px;
margin-top:3px;
}
#sidebar-menu ul li {
list-style:none;
height:60px;
border-bottom:2px solid rgb(17,17,17);
}
#sidebar-menu ul li a {
color:rgb(255,255,255);
font-size:30px;
display:block;
height:100%
width:100%;
}
#sidebar-menu ul li a:hover {
background:rgb(255,255,255);
color:rgb(41,41,41);
}
#sidebar-menu ul li a:active {
font-size:25px;
}
.steam-info{
display:flex;
flex-direction:row;
align-items:center;
}
.steam-dropdown{
flex-grow:1;
}
.steam-dropdown a{
display:block;
width:100%;
margin:0;
padding:0;
height:100%;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--Loading Animation
<div id="loading-overlay">
<div class="loading-spinner"></div>
</div>-->
<!--Website Header-->
<div id="header">
<div class="steam-box">
<? if(isset($_SESSION['steamid'])) {?>
<div class="steam-info">
<img class="steam-avatar" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg">
<div class="balance-box">
<i class="fa fa-database">
<span class="balance-amount">$201.50</span>
</i>
</div>
<div class="steam-dropdown">
<i class="fa fa-chevron-down"></i>
</div>
</div>
<? } else {?>
<? } ?>
</div>
</div>
<!--Website Sidebar-->
<div id="sidebar-menu">
<ul>
<li><i class=""></i></li>
<li><i class="fa fa-area-chart"></i></li>
<li><i class="fa fa-life-ring"></i></li>
<li><i class="fa fa-cart-arrow-down"></i></li>
<li><i class="fa fa-shopping-basket"></i></li>
<li><i class="fa fa-users"></i></li>
</ul>
</div>
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
I am trying to make 4 separate buttons in a layout in a foursquare type layout. (see attached image and pretend the boxes are the same size and equidistant from eachother) my issue is that i want the boxes to be in the center of the page no matter the browser window size, except i do not want the buttons to re-size when the page gets too small. I am drawing blanks at how to do this but it doesnt seem to hard.
body{
font-family: Arial, Helvetica, Sans-Serif;
font-size:1em;
padding:0;
margin:0;
}
#content{
position:relative;
}
/* Banner Styling */
#banner {
display:inline-block;
}
#banner a{
text-decoration:none;
color:black;
}
#banner h1{
float:left;
padding-left:1em;
padding-right:auto;
}
#banner #logo{
position:absolute;
top:0px;
right:0px;
}
/* Navigation Styling */
Nav {
margin-top:2em;
}
Nav ul{
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
background-color: #1666af;
padding-left:2em;
min-width:1532px;
}
Nav ul li{
float:left;
text-align:center;
}
Nav li a{
border: 1px solid #1666af;
padding:.3em 2em .3em 2em;
display: block;
background-color: #1666af;
color:White;
text-decoration:none;
}
Nav .current{
background-color:green;
border:1px solid green;
}
Nav li a:hover{
border: 1px solid #278efc;
background-color:#278efc;
}
/* BUTTONS */
#buttons{
position:relative;
left:50%;
}
#buttons a{
width:330px;
height:210px;
display:inline-block;
text-align:center;
color:white;
text-decoration:none;
border-radius:6px;
margin-top:50px;
box-sizing:border-box;
padding-top:89px;
}
/* CDW Button */
#button1{
border:1px solid black;
background-color:green;
transition: background-color 1.0s;
}
#button1:hover{
background-color:yellow;
}
/* ADR button */
#button2{
border:1px solid black;
background-color:blue;
transition: background-color 1.0s;
}
#button2:hover{
background-color:red;
}
/* GoGatway Button */
#button3{
border:1px solid black;
background-color:red;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button3:hover{
background-color:teal;
}
/* AAS button */
#button4{
border:1px solid black;
background-color:orange;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button4:hover{
background-color:brown;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
</head>
<body>
<div id="content">
<div id="banner">
<h1>Website</h1>
<img id="logo" src="images/imagehere" alt="imagehere" />
</div>
<nav>
<ul>
<li><a class="current" href="default.htm"> Home</a></li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
<div id=buttons>
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
</body>
</html>
<div id=buttons>
<!--create a div here-->
<div class="container" style=" width:100%, height:540px">
<!--inside this div you create a new div for your foursquares-->
<div class="forsquare">
<!--use something like canvas to create the graphic or
use something like canvas to get the image how you would like it
you can also create a image and map it to create different a href
elements that links from the square-->
</div>
</div>
The red bar is overlapping the topbar when it should be right below it, also even though I set the width to be 100% it's not extending the whole way across. I copied the CSS code from the topbardiv CSS, but it still wasn't working properly.
Image:
Code:
<head>
<title>Grace's WRAL</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin:0;
}
#topbar {
background-color:#0C1F2F;
width:100%;
height:95px;
}
.fixedwidth {
width:1095px;
margin:0 auto;
}
#logodiv {
padding:10px 0 0 45px;
float:left;
}
#topmenudiv {
}
#topmenudiv ul {
background-color:none;
padding:8px 0 0 35px;
margin:0;
height:20px;
}
#topmenudiv li {
list-style:none;
color:#008ECD;
font-size:0.9em;
font-family:Gill Sans;
border-right:1px solid #008ECD;
padding: 0 6px 0 10px;
float:left;
background-color:none;
}
#alertdiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 334px 0 334px;
font-size:0.9em;
}
#alertdiv p {
float:right;
margin-top:1px;
font-family:Gill Sans;
padding:0 5px 0 5px;
}
#signindiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 271px 0 271px;
}
#signindiv p {
margin-top:1px;
font-size:14px;
font-family:Baskerville;
margin-top:-8px ! important;
}
#searchdiv {
float:right;
margin-top:-33px ! important;
padding:0 55px 0 55px;
}
#searchdiv input {
height:15px;
width:190px;
background-color:#093B51;
border:none;
font-size:0.9em;
padding:5px 6px 6px 5px;
background-image:url("file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Search_Icon.png");
background-repeat:no-repeat;
background-position:right center;
}
#searchdiv input:focus {
background-color:#FFFFFF;
}
#searchdiv input::-webkit-input-placeholder {
color: white;
text-transform:none;
font-size:13px;
padding-left:5px;
}
#topicmenudiv {
}
#topicmenudiv ul {
background-color:none;
margin:0;
}
#topicmenudiv li {
list-style:none;
float:left;
color:white;
padding:15px 0 0 15px;
font-family:Gill Sans;
font-size:16px;
}
#currentweatherdiv {
float:right;
font-size:33px;
padding:8px 8px 0 0;
color:white;
}
#currentweatherdiv img {
float:right;
padding-top:4px;
}
#currentweatherimgdiv {
float:right;
padding:10px 50px 0 0;
}
.break {
clear:both;
}
#newsbardiv {
background-color:red;
width:100%;
height:95px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="topmenudiv">
<ul>
<li>Noticias</li>
<li>Instant Savings</li>
<li>Classifieds</li>
<li>Jobs</li>
<li style="border-right:none">Real Estate</li>
</ul>
</div>
<div id="alertdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Alert_Icon.png" /> <p>Alert</p>
</div>
<div id="signindiv">
<p>Sign In</p>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div id="logodiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/WRAL_logo.png" />
</div>
<div id="topicmenudiv">
<ul>
<li>News</li>
<li>Weather</li>
<li>Sports</li>
<li>Business</li>
<li>Consumer</li>
<li>Health & Life</li>
<li>Entertainment</li>
<li>Video</li>
</ul>
</div>
<div id="currentweatherimgdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Current_Weather.png" />
</div>
<div id="currentweatherdiv">
65 <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Degrees_Icon.png" />
</div>
<div class="break"></div>
<div id="newsbardiv">
<div class="fixedwidth"></div>
</div>
</div>
</div>
</body>
</html>
The red bar is nested inside a div with the class fixedwidth, which unsurprisingly has a fixed width of 1095px. So the width of the red bar can only be 1095px.
To debug a problem such as this, simply view it in Chrome, press F12, press Ctrl-Shift-C, and click on the element you want to inspect. It will explain what's going on.
One is issue is because .fixedwidth has a width of 1095px so your div can't be 100% because since it's nested 100% = 1095px.
Change .fixedwidth to this,
.fixedwidth {
width:100%;
margin:0 auto;
}
CODEPEN DEMO