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>
Related
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 */
}
I got 2 questions.
1st: How do I put my Logo + Brand Text inside my navbar? I want it at the left end of the nav and inline.
2nd: I want it to appear at the center of my Mob Menu.
I tried putting it at li tag but someone told me it shouldn't be there. So, I'm kinda clueless where will I put it and what tag will I use and how will I insert it in the nav. I've been figuring it out for almost 2 weeks now but I just destroy some elements.
HTML:
<div id="fixed">
<div id="search-wrap" class="wrap-top search-wrap">
<div class="width">
<ul class="clearfix">
<li ><i class="fa fa-search"></i> <input type='search' placeholder="Search..."></li>
<li id="li-3">Search</li>
<li id="li-4"> <i class="fa fa-times"></i> </li>
</ul>
</div>
</div>
<div id="tags-wrap" class="wrap-top tags-wrap">
<div class="width">
<ul class="clearfix">
<li>tag#1</li>
<li>tag#2</li>
</ul>
<div id="search-results"></div>
</div>
</div>
<div id="nav-wrap" class="wrap-top nav-wrap">
<div class="width">
<ul class="clearfix">
<li>Link#1<span>Sub-link#1</span></li>
<li>Link#2<span>Sub-link#2</span></li>
<li id="search-btn" class="s-desk"> <i class="fa fa-search"></i> </li>
</ul>
<i class="fa fa-reorder fa-2x menu-mob" id="menu-mob"></i>
</div>
</div>
</div>
</div>
CSS:
#fixed{
position:fixed;
z-index:1000;
width:100%;
top:0;
}
.wrap-top{
height:70px;
width:100%;
line-height:70px;
}
.wrap-top ul{
position:relative;
width:100%;
height:100%;
}
.wrap-top ul li{
float:left;
list-style:none;
text-align:center;
text-transform:uppercase;
font-size:21px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
}
.width{
max-width:800px;
width:100%;
margin: 0 auto;
height:100%;
}
#search-wrap{background:#253444;}
.search-wrap{margin-top:-70px;}
.search-wrap.active{margin-top:0;}
#search-wrap ul li{
width:75%;
color:#3b5167;
height:70px;
border-right: 1px solid #3b5167 ;
}
#search-wrap ul li:first-child{
border-left: 1px solid #3b5167 ;
position:relative;
}
#search-wrap ul li:first-child i{
position:absolute;
top:23px;
left:3.5%;
color:#3b5167;
}
#search-wrap #li-3{width:15%; cursor:pointer; font-size:18px; color:#97a5b5;}
#search-wrap #li-4{ width:10%; cursor:pointer;}
#search-wrap #li-3:hover, #search-wrap #li-4:hover{ background:#2c3e50; color:#fff;}
#search-wrap input{
text-align:left;
width:100%;
height:100%;
border:none;
outline:none;
padding:4% 4% 4% 10%;
background:none;
color:#fff;
font-size:36px;
font-family: 'Anton', sans-serif;
}
#search-wrap input:focus{ background:#2c3e50;}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
#search-wrap input::-webkit-input-placeholder{ color:#3b5167; opacity:1;}
#search-wrap input:-moz-placeholder{color:#3b5167; opacity:1;}
#search-wrap input::-moz-placeholder{color:#3b5167; opacity:1;}
#search-wrap input:-ms-input-placeholder {color:#3b5167; opacity:1;}
.menu-mob{display:none !important;}
#nav-wrap{ background:#fff; line-height:64px;}
.nav-wrap.active, .nav-wrap.active li{ height:50px; line-height:50px;}
.nav-wrap.active ul li#search-btn{ line-height:50px !important;}
.nav-wrap.active ul li:before{display:none;}
.nav-wrap.active ul li span{display:none;}
#nav-wrap ul li{
width:15%;
cursor:pointer;
color:#3b5167;
border-right: 1px solid #cad0d6 ;
position:relative;
}
#nav-wrap ul li:first-child{border-left: 1px solid #cad0d6 ;}
#nav-wrap ul li#search-btn{
width:10%;
line-height:70px;
}
#nav-wrap ul li:hover,
#nav-wrap ul li.active {
color:#FFF;
background:#2c3e50;
}
.nav-wrap ul li span{
display:block;
line-height:0;
font-size:9px;
position:relative;
top:-12px;
color:#415C76;
font-family:Arial, sans serif;
}
.tags-wrap{
height:0px;
background:#3b5167;
overflow:hidden;
}
.tags-wrap.active{
height:50px;
}
.tags-wrap ul li{
font-size:12px;
color:#707f91;
background:#2c3e50;
line-height:20px;
height:auto;
padding:2px 0;
width:8%;
margin:0 1%;
font-family:Arial, sans serif;
text-transform:lowercase;
cursor:pointer;
font-weight:bold;
opacity:0.8;
}
.tags-wrap ul li:hover{
opacity:1;
color:#97a5b5;
}
#search-results{
text-align:center;
color:#fff;
font-family:Arial, sans serif;
height:50px;
line-height:50px;
}
#search-results span{
font-weight:bold;
}
.search-wrap, .tags-wrap, .nav-wrap, #first-row i{
-webkit-transition: all 0.3s cubic-bezier(0, .68, .07, 1);
-moz-transition: all 0.3s cubic-bezier(0, .68, .07, 1);
transition: all 0.3s cubic-bezier(0, .68, .07, 1);
-ms-transition: all 0.3s cubic-bezier(0, .68, .07, 1);
}
My Logo + Brand Text:
<div class='rbanner'>
<a href='/'><img class='sr' align="left" border="0" height="70" src="mylogo.png" />
<span class="sr1">Test</span><span class="sr2">Page</span></a>
</div>
Sample Preview:
Desktop and Mobile View
Thanks!
I am building a navigation bar. This is what the HTML looks like
<div class="navhead">TEXT</div>
<div class="navcontainer">
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
</div>
And this is what the CSS looks like.
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
height:60px;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
}
.button {
width:20%;
height:60px;
float:left;
background-color:#FFF;
color:#000;
text-align:center;
vertical-align:central;
line-height:60px;
transition:background-color 1.5s ease;
margin:0px;
padding:0px;
}
.button:hover {
width:20%;
height:60px;
float:left;
background-color:#000;
color:#FFF;
text-align:center;
vertical-align:central;
line-height:60px;
margin:0px;
padding:0px;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
The problem I am having is that the last button to the right isn't flush with the browser window. I don't really know what I'm doing wrong. I added everything I thought I needed to the "body" class, but still there's space... I mean, there's no space on top of it, just to the right of the last button.
jsfiddle here
This is a better way to structure your HTML and a more reliable way to create that menu: http://codepen.io/pageaffairs/pen/xaGuq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
list-style: none;
display: table;
table-layout: fixed;
}
.navcontainer li {display: table-cell;}
.navcontainer li a {line-height: 60px;
background-color:#FFF;
color:#000;
text-align:center;
transition:background-color 1.5s ease;
display: block;
text-decoration: none;
}
.navcontainer li a:hover {
background-color:#000;
color:#FFF;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
</style>
</head>
<body>
<div class="navhead">TEXT</div>
<ul class="navcontainer">
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
</ul>
</body>
</html>
I am trying to make my button horizontal but always not work
I have tried display:block, display:inline, adjust padding & margin
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<p1>
RUMAH TAHFIDZ
</p1>
<br>
<p2>
YATIM PIATU DAN DLU'AFA
<p2>
<ul class="navbutton">
<li>BERANDA</li>
<li>ACARA</li>
<li>INFO</li>
<li>DONASI</li>
<li>PROFIL</li>
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:180px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
margin:0 auto;
}
.banner_img {
float:left;
padding-right:10px;
}
p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
text-align:center;
}
p2 {
font-size:20px;
color:#FFF;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
ul.navbutton {
position:relative;
list-style-type:none;
}
ul.navbutton li {
display:inline;
}
and this is preview
https://db.tt/uxAm95A2
help my practice
thank you in advance :)
Check this link, if this is what you want:-
http://jsfiddle.net/s7d8D/
ul.navbutton {position: relative;width: 100%;}
Try
ul li {
display:inline-block;
float:left;
}
Thanks a lot to you guys :D :D :D
I have edited my html and css
my html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<span class="p1">
RUMAH TAHFIDZ
</span>
<span class="p2">
YATIM PIATU DAN DLU'AFA
</span>
<ul class="navbutton">
<li class="navbutton1">
BERANDA
</li>
<li class="navbutton2">
ACARA
</li>
</li>
<li class="navbutton5">
PROFIL
</li>
<li class="navbutton4">
DONASI
</li>
<li class="navbutton3">
INFO
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:186px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
border-radius:35px;
margin:0 auto;
}
.banner_img {
padding-right:10px;
}
.p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
position:relative;
top:-128px;
text-align:center;
}
.p2 {
font-size:20px;
color:#FFF;
position:relative;
top:-129px;
left:190px;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:fixed;
top:1px;
}
.navbutton {
position:inline;
width:100%;
}
.navbutton1 {
position:relative;
top:-38px;
left:-30px;
list-style-type:none;
}
.navbutton2 {
position:relative;
top:-58px;
left:80px;
list-style-type:none;
}
.navbutton3 {
position:relative;
top:-118px;
left:170px;
list-style-type:none;
}
.navbutton4 {
position:relative;
top:-98px;
left:240px;
list-style-type:none;
}
.navbutton5 {
position:relative;
top:-78px;
left:330px;
list-style-type:none;
}
works well on firefox, safari and chrome :D :D
preview
https://db.tt/oLPp1Bza
I have a code here for a nav bar. When I hover over the links, a small arrow which is a png image should display below it in the center. The below code works fine in Firefox and Chrome but in IE, the arrow goes slightly below the div so only a part of it is seen. What's the issue?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<body>
<div id="wrapper">
<div id="logo-wrapper">
<img src="logo.png" id="logo">
</div>
<div id="menu-wrapper">
<ul>
<li><a id="home" href="#" >Home</a></li>
<li><a href="#" >Work</a></li>
<li><a href="#" >Us</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div>
</div>
below is the CSS:
body,html{
border:0px;
padding:0px;
margin:0px;
}
#wrapper{
width:954px;
height:59px;
padding-top:0px;
padding-right:20px;
padding-bottom:0px;
padding-left:15px;
margin:0 auto;
border-style:none;
outline:none;
background-color:black;
position:relative;
}
#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
}
#logo-wrapper{
width:223px;
float:left;
padding:0px;
margin:none;
}
#menu-wrapper{
padding:0px;
margin:none;
position:absolute;
bottom:6%;
right:30px;
}
ul{
width:200px;
position:relative;
left:0;
bottom:-5px;
list-style-type:none;
padding:0px;
margin:none;
}
li{
margin:0px;
padding:0px;
display:inline;
width:20%;
text-align:center;
}
#home{
margin:0px;
padding:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a{
height:31px;
padding-bottom:16px;
text-decoration:none;
font-family:"arial";
font-weight:bold;
font-size:12px;
color:white;
margin-right:13px;
margin-bottom:0px;
border:none;
}
#menu-wrapper a:hover{
padding:none;
margin:0px;
outline:none;
border:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a:active{
outline:none;
margin:0px;
border:none;
}
#menu-wrapper a:focus{
outline:none;
margin:0px;
border:none;
}
You could try to add a z-index to the arrow image.
Like this:
#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
z-index: 9999;
}
Edit. z-index on all images inside #logo-wrapper
#menu-wrapper img{
z-index: 9999;
}