I have a navigation bar which is transparent, and thus shows my gradient background at first. However when I scroll, it shows the text and/or pictures underneath, but I would like it to show the background and cover over the text. Main page: https://gyazo.com/6c5e35ca0ed4f6f37e9e72f490737c78 , scrolled down website: https://gyazo.com/9a2957d728e36ae23e0cd9af604e8de1; scrolled down more: https://gyazo.com/4849fb7f11689a5360e2e8686713d01d .
As you can see the navigation-bar is above everything - but I would like there to be a box around the navigation-bar which only shows the background when you scroll - if that makes sense - How would you do that? GIF showing scrolling problem: https://gyazo.com/6626f65e632e61127413c673d92a2cba
Relevant HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="smoothscroll.js"> </script>
<body>
<div class="main">
<nav class="fixed-nav-bar">
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>General<li>
<li>Computers in <br>the Workforce</li>
<li>Automated <br>Decision Making</li>
<li>Artificial <br>Intelligence</li>
<li>Environmental <br>Effects</li>
<li>Censorship &<br> The Internet</li>
<li>Monitoring<br> Behaviour</li>
<li>Analysis of<br> Personal<br> Information</li>
<li>Piracy &<br> Offensive<br> Communications</li>
<li>User Interface<br> Design<br> Considerations<li>
<li>Contact</li>
</ul>
</div>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</nav>
Relevant CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
font-size-adjust: auto;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px 35px;
width: 15%;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{
transform: scale(1.35)
}
.fixed-nav-bar{
position:fixed;
z-index: 9999;
height: 200px;
width: 100%;
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -230px;
margin-right: 106px;
padding-right: 15px;
/* note position zzzz*/
}
.navigation-links ul {
display: inline-flex;
}
.navigation-links ul li {
margin: 10px 9px;;
margin-top: 14px;
padding: 6px 5px;
font: Montserrat;
font-weight: normal;
position: relative;
list-style: none;
font-size: 85%;
word-spacing: 0px;
overflow: hidden;
z-index: 3;
}
#media screen and (max-width: 1580px) {
.navigation-links ul li {
font-size: 0.75rem;
margin: 10px 6px;
word-spacing: 0px;
padding: 6px 3px;
}
.navigation-links{
margin-right: 74px;
margin-top: -180px;
}
.logo img{
width: 230px;
height: 230px;
}
}
#media screen and (max-width: 1220px) {
.navigation-links ul li {
font-size: 0.65rem;
margin: 10px 5px;
word-spacing: 0px;
padding: 6px 2px;
}
.navigation-links{
margin-right: 74px;
margin-top: -163px;
}
.logo img{
width: 205px;
height: 205px;
}
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.navigation-links ul li a:hover{
font-weight: bold;
}
.gift img{
width: 5.5%;
float: right;
margin-top: -76px;
margin-left: 10px;
margin-right: 30px;
padding-left: 30px;
padding-right: 30px;
}
I do not know if i need to add a block which is like transparent for the background but not for the text/pictures in the html file?
Hopefully that is the relevant code so that you understand my problem and know how to possibly help me?
Thanks
Maybe you can achieve that by using JQuery. You can trigger a function that displays the border on the navigation bar whenever the page is scrolled. Here is the sample code.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('nav').css("border","1px solid black");
}
});
Related
I am just getting back to working with websites, and cannot for the life of me center this navigation bar. I have floated the header over to the left, and feel like I have tried every possibly property, but it just will not center. Any help would be very appreciated.
Not centered NavBar:
.container {
margin: 0 auto;
background-color: #fff;
}
.header-heading {
float: left;
padding-top: 8px;
padding-left: 5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
background: #000;
padding: 0;
width: 100%;
}
.nav {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Report Demo</title>
<styles></styles>
<link rel="stylesheet" href="ed.css">
</head>
<body>
<div class="container">
<h1 class="header-heading">Web Reporting Demo</h1>
<div class="nav-bar">
<ul class="nav">
<li>Daily Master</li>
<li>Route Progress</li>
<li>UL Move Query</li>
<li>Stock Query</li>
</ul>
</div>
</div>
</body>
This should work
.container {
margin: 0 auto;
background-color: #000;
position:relative;
width: 100%;
height: 40px;
}
.header-heading {
position: absolute;
top:-20px;
left:5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
padding-top: 5px;
}
.nav {
margin: auto;
padding: 5px;
list-style: none;
text-align: center;
width: 100%;
}
.nav li {
display: inline;
padding: 5px;
}
.nav li a {
text-decoration: none;
color: #fff;
}
You will need to do some changes as you work in your responsive design.
Try giving the .container text-align: center.
I've been following this video online on how to create dropdown menu using css. I followed it and there's no any signs of a dropdown menu on my website. It's so frustrating because i want to get over with it so i can focus now on backend dev. Hope you guys can figure this one out.
Code for html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<script src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="shortcut icon" type="image/png" href="../Music Store/img/rockSign.png"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul id="nav">
<li>HOME</li>
<li>INSTRUMENTS
<ul class="sub-menu">
<li>ELECTRIC GUITARS</li>
<li>BASS GUITARS</li>
<li>DRUMS</li>
</ul>
</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/ibanez.jpg"/></li>
<li><img src="../Music Store/img/raven.jpg"/></li>
<li><img src="../Music Store/img/metallica.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<section class="one-third">
<div class="border_section">
<h3>NEW BASS AMPS THIS YEAR</h3>
<img src="../Music Store/img/fender_amps_bassbreaker.jpg"/>
<p>We would like to proudly announce the new shipment of fender bass amps that you all have been
waiting for. It will provide you that rich rock and roll tone like no other. Please check
out our bass amp section for more details.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>NEW FEATURE ARTIST</h3>
<img src="../Music Store/img/feature_markHolcomb.jpg"/>
<p>Behold Mark Holcomb from Periphery is in the house! Check out his info and new signature guitar
at our feature artists section. He will also be having a 20-minute guitar clinic on Oct 8 2016 right
here at Music Store.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>ATTENTION VOCALISTS!</h3>
<img src="../Music Store/img/GoMic.jpg"/>
<p>Check out the new Samson Go Mic Connect. It has a top-notch noise cancellation feature that can
definitely minimize the annoying sound that your dog makes while your recording. For more details,
Go to Accessories section.</p>
</div>
</section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Code for CSS:
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Music Store/img/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
.sub-menu
{
position: absolute;
background-color: black;
list-style-type: none;
width: 124px;
padding-left: 0px;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
.sub-menu li
{
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
#nav_menu li:hover .submenu
{
opacity: 1;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1120px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev{
background: url("../Music Store/img/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Music Store/img/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third{
width: 27.35%;
float: left;
margin: 2% 0 3% 4.5%;
text-align: center;
background-color: white;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
Add this to your CSS :
It will help you to have the result you want. Of course there are still adaptations to do regarding your preferences.
/* Without this line, the submenu elements are black on black background */
#nav_menu .sub-menu li a {
color: #fff;
}
/* With this line you will remove the opacity:0; of the submenu when you hover the parent li */
#nav_menu li:hover .sub-menu {
opacity: 1;
}
/* Don't set a width so you have a better output */
#nav_menu li .sub-menu {
width: auto;
}
/* This lines make the submenu li dislay verticaly and not inline */
#nav_menu li .sub-menu li {
display: block;
}
Edit:
Instead of changing the opacity property to show/hide the submenu, you should use the display property.
Currently, the submenu is just transparent, but always opened. If your menu were bigger in height, you could open it by hovering the mouse on the slide at the location where it is when opened.
By using the display property, you're actually hiding it, and it will be opened only if you hover the menu element (as it should be).
To do this, you have to replace the opacity: 0; in your .sub-menu class by : display: none;
Then change the code opacity: 1; in the #nav_menu li:hover .sub-menu by : display: block; (in the code I gave you before).
It will be cleaner than handling it with the opacity.
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
I can't get my navigation links to work, and I have no idea why. They used to work before, but after I added in a little bit more of coding.. they seem to have stopped.
Anyone have any idea why?
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div id="mainbody">
<img src="images/mainbody.png" />
<div class="news1">
<img src="images/news1.png" /></div>
<div class="teamspeak"> <!--Teamspeak IMG-->
<img src="images/teamspeak.png" /></div>
<div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget -->
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1037062, 100);
-->
</script>
</div>
<div id="footer">
<p>©2014 Rythmn Designs<p></div>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news1
{
margin: 0 auto;
position: absolute;
top: 155px;
right: 375px
}
.teamspeak
{
position: absolute;
top: 155px;
right: 30px
}
#ts3viewer_1037062
{
position:absolute;
top: 185px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
There are few CSS fixes that can be done
So nav elements (<a> tags) are floated, which means you must clear your floats. A quick way to do it would be to use overflow:hidden on parent element ( in this case, i'd go with ul which is #nav )
Also noticed some negative margins being applied on #nav element. Im not sure if it was a design decision -anyway, commenting them out will get the nav not to go out of screen.
And wherever possible - try to avoid giving fix height to elements.
below is ammended css for #nav
#nav {
/*height: 1px;*/
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
/*
margin: -14px;
margin-top: -15px;
*/
overflow:hidden;
}
Moving onto nav links #nav li a. Again, not sure if it is a design decision but position:relative; and top:-12px seems to break it.
#nav li a {
/*position:relative;
top: -12px;*/
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
fiddle: http://jsfiddle.net/Varinder/8A9sW/1/
In your following css code, height of 1px is creating the problem. Make it 20-25px and check or just simply remove height:1px; if it doesn't affect your design.
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
I have a simple site so far but have two issues. I have done everything with percentages because the site might go up on a high def tv and i want them to scale well. The scaling works with the images but id also like to scale the navbar background and text so that it doesnt end up looking small.
The second issue is When the site is squished the bottom image covers the nav bar and doesn't flow under the nav bar element. Id just like this feature because it would scale well for smartphones.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
Here is the css:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}
To stop the image from flowing into other elements, use clear:both on your #maincontent img
Edit : A good article can be found on it here which suggests other methods. http://quirksmode.org/css/clearing.html
Edit2: This only applys to floated elements, I have just noticed you havn't used floats atall. See my comment below