why cant my nav bar work with javascript code - javascript

I am making a personal project. I was attempting to practice using other language libraries such as Javascript to add more style to my website
When attempting to do this I was using this w3schools lesson,
but I cant seem to get it to work. Did I miss something?
window.onscroll = function() {
myFunction()
};
var topnav = document.getElementByClass("topnav");
var sticky = topnav.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
topnav.classList.add("sticky")
} else {
topnav.classList.remove("sticky");
}
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYY0m5M4elle5s14mIhUSPJQJNXWE626vaxJfyLMp-t5aQYsuS8fDBTApBr1bvM6Yu4L4:https://files.123freevectors.com/wp-content/original/110787-dark-color-blurred-background-vector.jpg&usqp=CAU);
background-size: cover;
}
/* Header/Blog Title */
.header {
padding: 0px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
/* header overflow fix*/
.header>* {
width: 50%;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/*Make id's for main content sections to than asighn images with fixed sizes and no overflow*/
#first3dp {
background-color: white;
background-image: url("https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg");
background-size: contain;
background-repeat: no-repeat;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
img {
width: 50%;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
/* atempt for sticky nav bar */
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
<div class="content">
<div class="header">
<img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name " strike printing>
<!--<h1>strike printing</h1>-->
</div>
<div class="topnav">
<a class="active" href="#">Home</a>
Link
Link
Contact Us
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Who are we</h2>
<h5>sometime, 2012</h5>
<div class="fakeimg" id="first3dp" style="height:200px;"></div>
<p></p>
</div>
<div class="card">
<h2>where i am now?</h2>
<h5>august 2022</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p></p>
<p></p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Us</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p></p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
</div>
<div class="card">
<h3>Follow Us</h3>
<p>Some text.. can use embed with social media links</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
<h2>Footer to include credits to website creators and copyright information</h2>
</div>
</div>

The issue in your code is because getElementByClass() isn't a valid method. It's called getElementsByClassName() - however even this would be wrong in this case, as that returns a collection and not a single element as your code expects.
Looking at the original article and the change you've made, the best approach here would be to use querySelector() with a class selector so that it returns the single .topnav element.
Also note that there's a couple of other improvements you can make to the code, such as using addEventListener() instead of onscroll, and classList.toggle() with a boolean 'switch' argument. Here's a working example:
window.addEventListener('scroll', myFunction);
const topnav = document.querySelector(".topnav");
const sticky = topnav.offsetTop;
function myFunction() {
topnav.classList.toggle("sticky", window.pageYOffset >= sticky);
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYY0m5M4elle5s14mIhUSPJQJNXWE626vaxJfyLMp-t5aQYsuS8fDBTApBr1bvM6Yu4L4:https://files.123freevectors.com/wp-content/original/110787-dark-color-blurred-background-vector.jpg&usqp=CAU);
background-size: cover;
}
/* Header/Blog Title */
.header {
padding: 0px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
/* header overflow fix*/
.header>* {
width: 50%;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/*Make id's for main content sections to than asighn images with fixed sizes and no overflow*/
#first3dp {
background-color: white;
background-image: url("https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg");
background-size: contain;
background-repeat: no-repeat;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
img {
width: 50%;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
/* atempt for sticky nav bar */
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
<div class="content">
<div class="header">
<img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name " strike printing>
<!--<h1>strike printing</h1>-->
</div>
<div class="topnav">
<a class="active" href="#">Home</a>
Link
Link
Contact Us
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Who are we</h2>
<h5>sometime, 2012</h5>
<div class="fakeimg" id="first3dp" style="height:200px;"></div>
<p></p>
</div>
<div class="card">
<h2>where i am now?</h2>
<h5>august 2022</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p></p>
<p></p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Us</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p></p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
</div>
<div class="card">
<h3>Follow Us</h3>
<p>Some text.. can use embed with social media links</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
<h2>Footer to include credits to website creators and copyright information</h2>
</div>
</div>
As an aside, I would strongly suggest not using W3Schools. Their articles are often outdated (as in this case) and sometimes just plain wrong. MDN is a far better resource for Javascript.

Related

Responsive menu won't pop up

my code is here
https://codepen.io/bunea-andrei/pen/ZEeeWPK
I'm talking about the mobile view of the website , please make the screen smaller until it changes to the stance I'm referring to
I assume it's something wrong with my JavaScript code and I spent the last 3 hours trying to figure out what is it
Code is here
const wrapperSlide = () => {
const burger = document.querySelector(".burger");
const wrapper = document.querySelector(".wrapper");
burger.addEventListener("click", () => {
wrapper.classList.toggle("wrapper-active");
burger.classList.toggle("toggle");
});
}
wrapperSlide();
/* top side with the logo and info */
top{
height:140px;
width: 100%;
background: #fff;
display:block;
}
top .left-side {
margin-left: 450px;
text-align: left;
padding: 20px;
display: inline-block;
font-family: 'Anton', sans-serif;
}
top .left-side li{
letter-spacing: 2px;
line-height:1.2em;
}
top .right-side {
margin-right:450px;
text-align: left;
padding-top: 30px;
float:right;
}
top li{
list-style: none;
line-height:1.1em;
}
/* navigation menu */
menu {
width: 100%;
background: black;
height: 90px;
border-bottom: 22px solid red;
}
menu .wrapper {
display: flex;
justify-content: space-around; /*play with the width and padding to split out the categories more*/
width: 50%;
padding: 10px 485px;
}
menu .line{ /* the separation lines between the categories */
width:1px;
height:70px;
background:grey;
}
menu span { /* editing the writing of the menu bar*/
color: white;
font-size: 25px;
margin-top: 30px;
}
menu span a:link { /* removing the underline and set a color for the link to change it from blue*/
text-decoration: none;
color: white;
}
menu span a:visited{ /* makes the color of the links stay the same after clicking */
color:inherit;
}
menu .box { /* creating the box in which i will put each item of the menu*/
width: 180px;
height: 70px;
text-align:center;
line-height:65px;
}
menu .box:hover {
background-color: green;
}
menu .burger div{
width:25px;
height:3px;
display:none;
background-color: #97903f;
}
#media only screen and (max-width: 415px) {
menu {
width: 100%;
border-bottom: none;
max-height: 35px;
margin-top: -170px; /* to reverse the top with the menu*/
padding-top: 15px; /* to move the burger lines a bit down from the top of th menu */
background-color: rgb(35 22 68 / 0.94);
}
menu .burger div { /* editing the burger lines */
display: flex;
margin-bottom: 5px;
margin-left: 15px;
}
top {
margin-top: 30px; /* to get it further down from the top so i can replace it with the menu */
}
top .left-side {
margin-left: 10px;
display: block;
text-align: center;
}
top .right-side {
display: block;
text-align: center;
margin: 0 auto;
margin-top: -40px;
margin-right: 70px;
}
menu .wrapper {
margin-top: -207px;
width: 200px;
height: 569px;
padding:0px;
display: inline-block;
background-color: rebeccapurple;
padding-left: 20px;
transform: translateX(-100%);
transition: transform 0.5s ease-in;
}
menu .line{ /* modify the separation line from vertical display to horizontal */
height:1px;
width:220px;
margin-left:-20px;
}
.wrapper-active {
transform: translateX(0%);
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
}
<top>
<div class="left-side">
<ul>
<li style="font-size:50px; color:#0094ff; letter-spacing: 4px; ">ROXIRALU</li>
<li>DERATIZEZ TOT CE MISCA VERISORU' TE PUP</li>
<li>SPECIALIST xD</li>
</ul>
</div>
<div class="right-side">
<ul>
<li style="font-size:25px; color:#000000; letter-spacing:1px; font-family: 'Anton', sans-serif; padding-bottom:2px;">Suna 08763575321</li>
<li>Luni-Vineri 12:00-24:00</li>
<li>Sambata-Duminica INCHIS</li>
<li>Da-mi email la: sagunu#salam.hd</li>
</ul>
</div>
</top>
<menu>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="box">
<span>
Soareci
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Gaze
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Fantome
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Purici
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Otravuri
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Cozonaci
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Prafuri
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Contact
</span>
</div>
<div class="line"></div>
</div>
</menu>
<script src="js/index.js"></script>
</html>
The specificity for the selector .wrapper-active that is applying the transform to show the navigation has a lower specificity value than menu .wrapper, which is also defining a transform. This is causing the transform: translateX(-100%); to take over.
Adding more specificity to the active class should do the trick:
.wrapper.wrapper-active {
transform: translateX(0);
}

how to color change links according to page section user is currently on?

I have 4 sections horizontally placed in a container and a fixed navbar on top that has tabs for users to get to different sections of the page. I'm trying to make the color of text white when they are on the 'show' tab but if the user clicks on any other tab, I wanted the link to turn white. I thought of using JS to add/remove a class 'white-visible' or 'black-visible' depending on button click but not sure how to implement this in the quickest way.
Here is my code-
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
Show
About
Lookbook
Process
</div>
<div class="info overlay">
<div class="text">
MA
Coming Soon
BA
</div>
Back
</div>
</div>
<div class="tab-content">
<span>
<div id="show" data-tab-content class="active">
<div class="video-wrapper">
<video width="1920" height="1080" autoplay loop muted>
<source src="MA/SAMSON LEUNG MA COLLECTION AW20.mp4" type="video/mp4">
</video>
</div>
<!-- video catwalk -->
</div>
<div id="about" data-tab-content>
<div class="about-text">
</div>
<!-- about text -sum stills -->
</div>
<div id="lookbook" data-tab-content>
<div class="ma-about">
<h1>1dk</h1>
</div>
<!-- lookbook - videos + stills -->
</div>
<div id="process" data-tab-content>
<div class="ma-">
<h1>ndkj</h1>
<!-- lookbook continues -->
</div>
</div>
</span>
</div>
CSS
.nav-bar a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
text-decoration: none;
}
.black-visible {
color: black;
}
.white-visible {
color: var(--grCol3);
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
opacity: 0.6;
}
.info {
width: 90vw;
height: 10vh;
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 1.2rem;
color: var(--grCol3);
text-decoration: none;
/* border: 1px solid teal; */
}
.text {
width: 30%;
display: flex;
justify-content: space-around;
}
.text > a:first-child {
text-decoration: underline;
pointer-events: none;
}
.tab-content {
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
scroll-behavior: smooth;
}
.tab-content span {
overflow: visible;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
/* background-color: violet; */
font-size: 3rem;
width: 100vw;
height: 100vh;
scroll-behavior: smooth;
}
.video-wrapper {
width: 100%;
height: 100%;
}
#catwalk-ma {
width: 100% !important;
height: auto !important;
}
Assuming you have jQuery in your project, you can do this:
$("a.tab").on("click", (e) => {
// Remove active class from all tabs
$("a.tab").removeClass("active");
// Add active class to your current clicked tab
$(e.target).addClass("active");
});
You can define the colour you want the active tab to have using .active in your css

scroll to link id with fixed nav bar

in my web i have a fixed navigation bar and below it i have some another divs - the nav bar links connect to those links.
the problem is when i click on some link the fixed nav bar covered the begining of the div. and what i want and tring to do is that the nav bar will be at the start of the div and so it wont covered the begining.
here is the link for the result.
here is my html code:
<body>
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>מי אנחנו</li>
<li>מוצרים</li>
<li>צרו קשר</li>
<li><img src="1.png"></img></li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
</div>
<div id="main_photo2" class="phocont">
</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>
</div>
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>
<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>
<div id="down_nav_bar" class="container">
</div>
<div id="credit" class="container">
</div>
</body>
here is my css code:
body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;
}
#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}
#nav_bar ul li {
display: inline-block;
padding: 0 10px;
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}
#nav_bar ul li a{
color: inherit;
text-decoration: none;
}
#nav_bar ul li a:hover{
color:#a51212;
}
#nav_bar img{
height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}
#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}
Try adding padding top to container
.container
{
padding-top: 55px;
}
fiddle
If you do not wish to have the text move down by 'x' pixels, you can programmatically scroll with an adjusted offset using jQuery:
$('html, body').animate({
scrollTop: $(target).offset().top - 55
}, 1000);
Notice, this example does not use padding-top:
fiddle
Or, without jQuery:
window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);
fiddle
The easiest way by far would be to add some padding (as much as the navbar is high) to the divs that serve as targets for your links:
div.container{ padding-top: 55px; }
For the sake of semantics, I'd recommend you also use section elements instead of those meaningless divs, etc… https://html.spec.whatwg.org/multipage/semantics.html#sections

Image stretches screen instead of fitting within div

I'm trying to make a page that fits on a single screen without any scrolling, but the CSS that defines its format that I've got isn't working.
The problem can be seen in the JSFiddle
The footer is fixed at the bottom of the screen (as it should be), but the background image (within content) extends from below the header to below the footer.
There also seems to be a problem with the background image when resizing the browser, but I'm sure that will be fixed when solving this problem.
I have the following code:
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hide_these[hidden]).style.display='none';
$(".sidebar").slideToggle(600);
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Home
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
About
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Projects
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Contact
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$(".menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
$(".header h1").delay(500).animate({"opacity": "1"}, 700);
</script>
</body>
</html>
CSS: main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:absolute;
}
#about, #projects, #contact{
width: 100%;
height:100%;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
color: white;
display:flex;
align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
}
.content p {
padding-top: -10px;
text-align: center;
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: absolute;
}
.footer a img {
position: relative;
top: -5px;
}
My attempt to fix was setting the .content area from height = [30px, -80px] (i.e., from the top of the footer to the bottom of the header).
I'm brand new to CSS, so I'm sure this is very poorly formatted, so sorry in advance.
Thanks everyone,
erip
If you want to show everything on a single page without any scrolling then Give position:fixed to body. You can see the result here http://jsfiddle.net/mcnn1d81/1/ .
So if I understand you properly, you want the footer to line the bottom of your content while making sure to fill the browser, no matter the size. This looks like a job for "relative" positioning! Currently your footer is set to "absolute", which is why it overlaps your background.
here's an updated fiddle with RELATIVE changes: https://jsfiddle.net/mcnn1d81/13/
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: RELATIVE;
}
.content {
top: 0px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
position:RELATIVE;
}
I hope that helps!
EDIT: Added code to keep the content in the screen. https://jsfiddle.net/mcnn1d81/20/
This a quick, rough edit, and realize that what's written will only adhere to the content you put in it. As soon as you tell the content how big it needs to be you'll cause some wonky things to happen.
If you want dynamic content (that stretches and fits the screen) you'll have to add some code to the resize function to make sure everything stays the same in the CSS. I'd add more, but I've got other things I need to get to. I hope this pushes you in the right direction!
just update your css with this.
html,body {
padding: 0;
margin: 0;
font-family: arial;
height:100%;
width:100%;
overflow:hidden;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: 100%;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
overflow:hidden;
}
that will fix your issue
you can keep background-size : cover; for .content class. it will best option to set your background image.
Try this :
body
{
margin:0%;
overflow:hidden;
}

How do I place icons in header at far right?

Hello I am working on my website. I would like to know how to place contact icons at the header section to the far right. (relative to the text of the header that reads creative mind. How do I do that? Below is my code. Help please. Thanks.
HTML
<body>
<div class="auto-style1">
<div id="header">
Header
<h1>Creative Mind</h1>
</div>
<div id="nav">
Navigation
<ul>
<li>Homepage</li>
<li>Tips and Tricks</li>
<li>About me</li>
<li>Get in Touch</li>
</ul>
</div>
<div id="main">Main</div>
<h3>Contact Information</h3>
<h3>Phone</h3>
<p>1-323</p>
<h3>Email</h3>
<img src=/>gmail
<h3>Social Networks</h3>
<img src=/>
<div id="footer">
Footer
<h3>Creative Mind Jonathan Mourning</h3>
</div>
</body>
CSS
#charset "utf-8";
/* CSS Document */
body {
background-color: #A6FFFF;
width: 100%;
}
#header,
#main,
#footer {
display: block;
position: relative;
float: left;
}
#header,
#footer {
height: 15%;
width: 100%;
}
#header {
margin-bottom: 2px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#footer {
margin-top: 2px;
text-align: right;
border: 2px;
}
#main {
position: relative;
width: 70%;
height: 100%;
margin: 0 auto;
background-color: #FFF;
float: center;
text-align: center;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
}
You can use float: right for example
HTML:
<div id="header">Header
<img src="http://lorempixel.com/100/50">
<h1>Creative Mind</h1>
</div>
CSS:
.contact {
float: right;
}
JSFiddle
Try adding unique classname for your icon:
#header{
position:relative; //makes relative to browser
}
#header .myIcon {
position:absolute; // makes to position to right corner of header
right:0px;
float:right;
}
Fiddle: http://jsfiddle.net/WLR5S/7/
You can use position: relative; and then positioning the icon with top, left, right and bottom property.

Categories