I'm trying to create a navigation bar BELOW two icons/logos, but it flies to the bottom of the page, OR overlays the 2 logos. A live version is available at http://ddlgaming.com/giga/
This is my code so far:
(Please ignore some of the color:white, it's to help me see better.)
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
<body>
<!--Giga logo, top left--!>
<div id="gigalogomainbox">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
<div class="clearfix">
</div>
</div>
<!--Steam logo, top right--!>
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<div class="clearfix">
</div>
</div>
<!--navigation barrrrrr--!>
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li>Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS:
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30%;
height: 50vw;
overflow: hidden;
transform: skewX(20deg);
}
#gigalogobox
{
margin: 0 3vw 0 5vw;
padding: 0 0 0 2vw;
background-color: white;
width: 80%;
height: 20%;
}
#gigalogo
{
width: 90%;
float: left;
margin: 2.5vw 2vw 0 0;
}
#steamlogomainbox
{
width: 10%;
height: 50vw;
float: right;
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
float: right;
background-color: white; /*000c21*/
transform: skewX(-20deg);
}
#steamlogo
{
width: 65%;
float: right;
margin: 3vw 2vw 0 0;
transform: skewX(20deg);
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
width: 100%;
}
#navbar, #navbar ul
{
width: 100%;
height: 5vw;
margin: 0;
color: white;
background-color: white;
display: inline-block;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw;
color: red;
font-size: 30px;
}
You've set a height of 50vw on your logos. So it's taking half the screen height (50vw = 50% of the view width), what you want is set the height as the same as your image height (50px? px = pixels). Then, it's pushing the rest to the bottom.
is this what you are looking for?
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox
{
width: 100%;
}
#navbar, #navbar ul
{
width: 90%;
height: 70px;
margin: 0;
color: white;
background-color: white;
display: inline-block;
}
#gi {
margin-top: -10px;
width:80px;
height: 50px;
line-height: 50px;
vertical-align:middle;
}
#steam{
margin-top: -10px;
width: 80px;
height: 60px;
line-height: 70px;
vertical-align: middle;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding-top:15px;
padding-right: 1%;
color: red;
font-size: 80%;
}
<div id="navbarbox">
<ul id="navbar">
<li><img id="gi" src="http://ddlgaming.com/giga/images/gigalogo.png"></li>
<li>Home</li>
<li>Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
<li><img id="steam" src="http://ddlgaming.com/giga/images/steamlogo.png"></li>
</ul>
</div>
Related
I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code:
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
this is how it should look like
this is how it looks like when i put .top{position:fixed}
When you set an element to absolute or fixed position, it will be out of the the normal content flow and trigger the shrink to fit feature. You can apply the offsets and width/height to position and recreate the box size you wish to have.
.top {
position: fixed;
left: 0; /* ADDED */
top: 0; /* ADDED */
width: 100%; /* ADDED */
}
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
Because .top has no width. However, when set to fixed it is using the viewport width to calculate the width. You might want to set it to 75%.
You also might want to set .container to position: relative so .top will relate to its borders.
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
position: relative;
}
.top {
position: fixed;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
I have a navigation bar that I want to skew, but just the bar and not the words of the bar.
So, I skewed the main div (of the navigation bar), and skewed the negative value of it to the text.
However, the text still does not un-skew.
How does this work?
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox
{
clear: both;
display: block;
width: 80vw;
height: 3.5vw;
margin: auto;
padding: 0.5vw 0 0 0;
}
#navbar, #navbar ul
{
width: 70vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
}
#navbar span
{
height: 3.5vw;
transform: skewX(15deg); /*This is supposed to un-skew, but doesn't work!*/
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 0.8vw 3vw 0 3vw;
text-align: center;
color: red;
font-size: 2vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
background-color: green;
}
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
</body>
The transformation has no affect on your span element because it is being displayed as inline. You need to set it to display as a block:
#navbar span {
display: block; /* or inline-block */
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox
{
clear: both;
display: block;
width: 80vw;
height: 3.5vw;
margin: auto;
padding: 0.5vw 0 0 0;
}
#navbar, #navbar ul
{
width: 70vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
}
#navbar span
{
display: block;
height: 3.5vw;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 0.8vw 3vw 0 3vw;
text-align: center;
color: red;
font-size: 2vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
background-color: green;
}
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
</body>
I'm not sure how to ask this questions but I will try my best to explain what I'm trying to accomplish.I have a banner on my homepage and inside this banner I have a div that is overlapping it.
Now, by overlapping this item over the banner It creates a problem where all other content on my homepage is going behind this overlapped item.. Example: my footer (which is marked in red) is going behind this overlapped item and I want to stop this from happening, I want all contents to go below it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-size: 13px;
background-color: #fafafa;
font-family: Arial, sans-serif;
}
.container {
height: auto;
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
secion {
width: 100%;
height: auto;
background-color: #fff;
}
header {
width: 100%;
height: 168px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
}
.top-nav {
width: 100%;
height: 42px;
background-color: white;
}
.top-nav ul {
float: left;
line-height: 42px;
list-style-type: none;
}
.top-nav ul li {
display: inline-block;
}
.top-nav ul li a, a:visited {
color: #444;
padding: 42px 12px;
text-decoration: none;
}
.top-nav ul li a:hover {
background-color: #fafafa;
}
.center-console {
width: 100%;
height: 80px;
background-color: #f4f4f4;
}
header nav {
width: 100%;
height: 46px;
background-color: #fff;
}
header nav ul {
float: left;
line-height: 46px;
list-style-type: none;
}
header nav ul li {
margin: 0;
display: inline-block;
}
header nav ul li a, a:visited {
color: #444;
padding: 46px 12px;
text-decoration: none;
color: rgba(0,0,0,.54);
}
header nav ul li a:hover {
color: #15c;
background-color: #fff;
box-shadow: 0 4px 8px 0 #dcdcdc;
}
.logo {
float: left;
width: 200px;
height: 50px;
margin-top: 15px;
background-color: #fff;
}
.center-console form {
float: right;
width: 400px;
height: 40px;
padding: 0 15px;
margin-top: 20px;
border-radius: 3px;
background-color: #fff;
}
.search-icon-small {
width: 18px;
height: 19px;
float: right;
margin-top: 11px;
background-repeat: no-repeat;
background-image: url("../images/search-icon-small.png");
}
header form input[type=text] {
border: 0;
width: 342px;
height: 40px;
outline: none;
background-color: #fff;
}
.shopping-cart {
width: 38px;
height: 32px;
float: right;
margin-top: 7px;
font-size: 25px;
background-repeat: no-repeat;
background-image: url("../images/shopping-cart.png");
background-position:bottom;
}
.item-count {
color: #fff;
width: 18px;
height: 18px;
float: right;
font-size: 10px;
line-height: 19px;
font-weight: bold;
border-radius: 50%;
text-align: center;
background-color: #4683ea;
}
/*** Homepage ***/
.banner {
width: 100%;
height: 480px;
background-color: #4387fd;
}
.banner form {
width: 880px;
height: 50px;
margin: 0 auto;
padding: 0 15px;
margin-top: 228px;
border-radius: 3px;
background-color: #fff;
}
.search-icon {
width: 30px;
height: 30px;
float: right;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url("../images/search-icon.png");
}
.banner form input[type=text] {
border: 0;
width: 805px;
height: 50px;
outline: none;
background-color: #fff;
}
.featured-items {
width: 1200px;
height: 358px;
padding: 21px;
margin-top: 100px;
border-radius: 6px;
position: absolute;
overflow: hidden;
background-color: #fff;
}
.featured-items ul {
list-style-type: none;
}
.featured-items ul li {
float: left;
width: 214px;
height: 214px;
margin-right: 22px;
background-color: #f5f5f5;
}
.featured-items ul li:last-child {
margin: 0;
float: right;
}
footer {
width: 100%;
height: 400px;
margin-top: 80px;
overflow: hidden;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>BasicOffer</title>
<link rel="stylesheet" type="text/css"href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="top-nav">
<div class="container">
<ul>
<li>Selling</li>
<li>Help</li>
</ul>
<ul style="float:right;">
<li>Account</li>
</ul>
</div>
</nav>
<div class="center-console">
<div class="container">
<div class="logo"></div>
<form>
<input type="text" placeholder="Search..">
<div class="search-icon-small"></div>
</form>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>Health & Beauty</li>
<li>Household Supplies</li>
<li>Baby & Toddler</li>
<li>Home & Garden</li>
<li>Electronics</li>
<li>Pet Supplies</li>
</ul>
<div class="shopping-cart">
<div class="item-count">11</div>
</div>
</div>
</nav>
</header>
<div class="banner">
<div class="container">
<form>
<input type="text" placeholder="What are you looking for?">
<div class="search-icon"></div>
</form>
<div class="featured-items">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<footer>This will be the footer</footer>
</body>
</html>
Design:
Thanks,
Richard.
Instead of using absolute position. you can try
margin-top: -150px;
position: relative;
working example
It's unclear why absolute positioning is needed in this example, but I recommend you look into using position: relative for the content block that follows the banner.
Relative positioning behaves mostly like the default (static) when it comes to layout flow, but it supports the z-index layering like absolute positioning. (Considering using relative position also on the banner if you don't really need it to be absolutely positioned.)
I’m creating this website and I made this nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works. I cannot figure out where I went wrong. I was editing properties and things just stopped working.
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html,
body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<title>CM Sound | Home</title>
<meta charset="UTF-8">
<meta name="description" content="CM Sound's studio webpage">
<meta name="author" content="Ryan Buck | May 2015">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Add this in nav ul li a
:
position: relative;
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html, body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {
}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
position: relative;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
nav {
height: 40px;
position: relative;
}
just add the position relative to nav
It seems that when I zoom in on my browser, my navigation buttons completely go on top of each other. Check the following images:
Normal: http://i.imgur.com/yFxwrXw.png
Zoom: http://i.imgur.com/OnUP6Sg.png
Does anyone know a way to prevent this / stop this from happening?
body {
width: 100%;
height: 100%;
padding: 0;
max-width: 960px;
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 0.4166666666666667% 2.5%;
background: #595959;
margin: 0 10px;
border:1px solid #828282;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
width: 99.79166666666667%;
min-height: 50%;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="logo">
<img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
padding: 0;
min-width: 960px; /* Change max-width to min-width */
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
Set min-width: 960px; in body
DEMO
Here is a Fiddle