I have the last link on the top navbar "image4" that appears on all the footer. So where ever I mouse over on the footer the hyperlink of the last <li> item wants to trigger.
For some reason it looks like image4 link goes all the way down to the footer. If I remove the image4 <li> item, image3 is then the new link that can be triggered from anywhere in the footer.
How do i solve this?
My code is as follows:
HTML:
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /></li>
<li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></li>
<li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></li>
<li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></li>
</ul>
</div><!-- end of the nav -->
<div id="content">
<img alt="#" class="image5" src="image5.png" />
<img alt="#" class="image6" src="image6.png" />
</div><!-- end of the content -->
</div><!-- end of the wrapper -->
</body>
<footer>
<img class="logo" alt="#" src="logo.png" />
<p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
background: url('images/bg.png') repeat-x;
background-color: #ffffeb;
}
#nav {
float: left;
width: 1024px;
height: 732px;
display: block;
margin: 5px 0 0 200px;
}
ul {
list-style: none;
width: 420px;
margin: 0 auto;
}
li {
float: left;
}
.image5 {
position: absolute;
top: 0px;
left: 200px;
z-index: -1;
}
.image6 {
position: absolute;
top: 375px;
left: 200px;
z-index: -1;
}
footer {
height: 30px;
position: relative;
top: 715px;
}
.logo {
position: absolute;
left: 230px;
top: 0px;
}
p {
font-family: helvetica, arial, sans serif;
font-size: 12px;
color: #aaaaaa;
text-decoration: none;
position: absolute;
left: 940px;
top: 0px;
padding: 5px;
}
<head>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><img alt="#" src="image1.png" /> </li>
<li><img alt="#" src="image2.png" /></li>
<li><img alt="#" src="image3.png" /></li>
<li><img alt="#" src="image4.png" /></li>
</ul>
</div><!-- end of the nav -->
<div id="content">
<img alt="#" class="image5" src="image5.png" />
<img alt="#" class="image6" src="image6.png" />
</div><!-- end of the content -->
<footer>
<img class="logo" alt="#" src="logo.png" />
<p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>
</div><!-- end of the wrapper -->
</body>
</html>
the footer tag (and almost every other tag) should go inside the body tag.
<html>
<head>
<!--allows: meta, title, script and style -->
</head>
<body>
<!--allows every other tag, including script, style, li, ul, ol, b, i, u, hr, h1-h5, table, etc...... -->
</body>
</html>
other than that, i dont' see a reason your image4 graphic should be appearing in the footer =S
You forgot the '/' in the closing tag for <a>. The close tag should look like </a>.
Related
I already figured out how to keep the footer at the bottom of the other pages of the website I am trying to develop. But I can't figure out how to do it on my page with a photo gallery. The footer stays in the middle of the page. :(
Here is my HTML code for that page:
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0;
padding: 0;
min-height: 100%;
position:relative;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
position: absolute;
bottom:0;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
height: auto;
width: 45%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}
<body>
<div id="wrapper">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>© 2016 All rights reserved.</p>
</div>
</div>
</body>
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
}
.content{
width:100%;
display:block;
}
#wrapper {
margin: 0;
padding: 0;
width:100%;
display: block;
}
.content{
display: block;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
display:block;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
width:100%;
}
#gallery li {
display: inline-block;
height: auto;
width: 40%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}
<body>
<div id="wrapper">
<div class="content">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
</div>
</div>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>© 2016 All rights reserved.</p>
</div>
</body>
I found that if you make the ul#gallery have a property of display:inline-block; it will give the gallery a physical height (because at the moment my browser says the height is zero) and push the footer to the bottom.
I've got a slider, and it's working great. BUT, I've got one little problem. I want to change the slider image when I hover over one of the <li>s, and not when I click on them.
Is this possible? I've found this link, but maybe there's some new style available already?
.slide {
position: absolute;
display: none;
left: -150;
}
.next {
font-size: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: calc(50% - 25px);
right: 0;
}
.prev {
font-size: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: calc(50% - 25px);
}
.slider .slide:target {
transition: 1s;
left: 0;
z-index: 999;
display: block;
}
ul {
padding-top: 250px
}
ul li:hover>a:target {
left: 0;
transition: 1s;
z-index: 9999;
}
<div class='slider'>
<div class='slide' id="slide1" style="display: block;">
<a class="prev" href="#slide4"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576006.jpg" width="450" height="150" />
<a class="next" href="#slide2">></a>
</div>
<div class='slide' id="slide2">
<a class="prev" href="#slide1"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575498.jpg" width="450" height="150" />
<a class="next" href="#slide3">></a>
</div>
<div class='slide' id="slide3">
<a class="prev" href="#slide1"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576753.jpg" width="450" height="150" />
<a class="next" href="#slide4">></a>
</div>
<div class='slide' id="slide4">
<a class="prev" href="#slide3"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575922.jpg" width="450" height="150" />
<a class="next" href="#slide1">></a>
</div>
</div>
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
Do you need to use :target? Please check out my Fiddle.
.slide
{
position: absolute;
display: none;
left:0;
}
ul
{
padding-top: 50px;
list-style:none;
}
ul li
{
display:inline-block;
}
ul li a
{
position:relative;
top:-50px;
left:0;
}
ul li a:hover + .slide
{
transition: 1s;
z-index: 9999;
display: block;
}
<div class='slider'>
<ul>
<li>
Slide 1
<div class='slide' id="slide1" style="display: block;">
<img src="https://i.picsum.photos/id/591/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 2
<div class='slide' id="slide2">
<img src="https://i.picsum.photos/id/402/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 3
<div class='slide' id="slide3">
<img src="https://i.picsum.photos/id/1067/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 4
<div class='slide' id="slide4">
<img src="https://i.picsum.photos/id/382/450/150.jpg" width="450" height="150" />
</div>
</li>
</ul>
</div>
I removed the next and before buttons for convenience, but it would also be simple to include them again.
I have made a nav bar that sticks to the top of the page, but it is sticking to some of the content and I have tried using margin-top: 100px; in the CSS file but that just moves the nav bar down 100px. Anyone have any ideas?
Link to js fiddle
CSS
.con {
overflow: hidden;
background: #159B00;
width: 1000px;
height: 376px;
border-radius: 10px;
border: 2px solid black;
box-shadow: 0 4px 8px black;
}
.nav {
padding-top: 0px;
background: #fff;
height: auto;
width: 100%;
z-index: 150;
top: o;
position: fixed;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
HTML
<div class="nav">
<div id="nav_wraper">
<ul>
<li><a href="RUN ME.html">
</div>
</a></li>
</a>
</li><li>
Home
</li><li>
Designs▼
<ul>
</ul>
</li><li>
About▼
<ul>
</ul>
</li><li>
Contact▼
<ul>
</ul>
</li>
</ul>
</div>
</div>
<main>
<div id="iG" class="con" >
<img src="slider.png" alt="" />
<img src="step_1.png" alt="" />
<img src="step_2.png" alt="" />
<img src="step_3.png" alt="" />
<img src="slider.png" alt="" />
</div>
</main>
Thanks.
You can fix this by adding
body{
padding-top:100px;
}
and you have syntax error in
.nav{
top:o;
}
should be
.nav{
top:0;
}
updated fiddle
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li id="pic1">
<a href="img/Jack.jpg">
<img src="img/Jack.jpg" width="500" height="400" alt="">
<p> This is me </p>
</a>
</li>
<li id="pic2">
<a href="img/Life.jpg">
<img src="img/Life.jpg"width="500" height="400" alt="">
<p> This concludes my life(lol!) </p>
</a>
</li>
<li id="pic3">
<a href="img/Study.jpg">
<img src="img/Study.jpg"width="500" height="400" alt="">
<p> This shows what I study </p>
</a>
</li>
<li id="pic4">
<a href="img/2.jpg">
<img src="img/2.jpg"width="500" height="400" alt="">
<p> This is what I believe</p>
</a>
</li>
</ul>
</section>
<footer>
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</div>
</body>
</html>
Here is my CSS
a {
text-decoration:none;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
margin: 0;
padding-top: 4mm;
font-size: 2em;
font-family: 'Lobster', cursive;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
margin: -5px 0 0;
font-weight: normal;
}
body{
font-family: 'Gloria Hallelujah', cursive;
}
a {
color: #6ab47b;
}
header{
background: #6ab47b;
border-color:#599a68;
float:left;
margin: 0;
padding: 5px 0 0 0;
width: 100%;
}
nav{
background: #599a68;
text-align: center;
margin: 20px 0 0;
}
nav a, nav a:visited {
color:#fff;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
h1, h2{
color:#fff;
}
nav a.selected , nav a:hover {
color:#32673f;
}
footer{
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
margin:0;
}
img{
max-width: 100%;
}
#gallery{
margin: 0;
padding: 0;
list-style: none; /** remove bullet point **/
}
#gallery li{
float:left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p{
margin: 0;
padding: 0;
font-size: 1.5em;
color: #bdc3c7;
}
.icon{
width: 40px;
height: 40px;
margin: 5mm 5px;
}
body{
background: orange;
margin:0;
color:#999;
}
Why it only takes a portion of the width of the webpage?
I tried to set max-width and width 100%, it did not work.
How do I make footer take 100% of the width of the webpage?
That is what I am trying to do.
Your footer is inside the div.wrapper. Move it outside of the div. You'll have to fix the margin.
your current structure is :
<div id="wrapper"> ... <footer> .. </footer> </div>
you have to pull out the footer from wrapper div like :
<div id="wrapper"> ... </div> <footer> .. </footer>
Demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li id="pic1">
<a href="img/Jack.jpg">
<img src="img/Jack.jpg" width="500" height="400" alt="">
<p> This is me </p>
</a>
</li>
<li id="pic2">
<a href="img/Life.jpg">
<img src="img/Life.jpg"width="500" height="400" alt="">
<p> This concludes my life(lol!) </p>
</a>
</li>
<li id="pic3">
<a href="img/Study.jpg">
<img src="img/Study.jpg"width="500" height="400" alt="">
<p> This shows what I study </p>
</a>
</li>
<li id="pic4">
<a href="img/2.jpg">
<img src="img/2.jpg"width="500" height="400" alt="">
<p> This is what I believe</p>
</a>
</li>
</ul>
</section>
</div>
<footer>
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
Woking jsFiddle
Actually you must take out ... outside your main DIV
try this:
css
footer{
font-size: 1em;
text-align: center;
clear:both;
margin:0;
}
.footer_content{
width: 100%;
position: absolute;
left: 0;
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
margin:0;
}
html
<footer>
<div class="footer_content">
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</div>
</footer>