I have this kind of complex set up with divs and links. Anyway, the logo in the top of left of my page is supposed to change when you hover over it, and it does. However, it also changes if your mouse goes anywhere in the top section of the page (outlined in red on the image)
Also when I click on the logo, the link doesn't work. I think it may have to do with the way I have the divs set up, but i'm not sure.
I'm still kind of new at all of this, and I'm a little overwhelmed at figuring out this issue. If you can help, I would appreciate it.
Below is my html, css, and an image to help show you what I'm talking about.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topheader">
<a href="index.html">
<div id="logo">
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
</div>
<div id="welcome">
<h1>Welcome</h1>
<h2>
To
<span class="gold"> Promise Land Partners</span></h2>
</div>
<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | NEWSLETTER | FACEBOOK
<span class="right">DESIGN: HANGING OUT</span>
</p>
</div>
</div>
</body>
</html>
This is my CSS
#charset "utf-8";
/* CSS Document */
body {
background-image: url(img/dot.png), url(img/background.jpg);
background-repeat: repeat, no-repeat;
background-position: top left, center center fixed;
background-size: auto, cover;;
margin: 0px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#topheader {
height: 135px;
width: 100%;
overflow: hidden;
position: relative;
background-image: url(img/headerbar.png);
background-repeat: repeat-x;
}
#logo {
background-image:url(img/PLP.png);
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
#logo:hover, #logo:active {
background-image:url(img/PLP_pushed.png);
}
#navigation {
background-image: none;
background-position: top left;
padding-left: 180px;
}
#bottom_bar {
background-image:url(img/bottom_bar.jpg);
position: fixed;
bottom: 0;
height: 27px;
width: 100%;
color: white;
}
#bottom_bar p {
text-align: left;
padding: 4px;
margin: 0;
}
.right {
float:right;
}
#welcome {
background-image: url(img/welcomepanel.png);
background-repeat: no-repeat;
position: relative;
left: 0;
top: 70px;
height: 261px;
width: 100%;
padding-top: 10px;
padding_left: 10px;
margin: 0;
}
h1 {
color:white;
padding-left: 90px;
font-size: 6em;
margin: 0;
margin-top: 8px;
}
h2 {
color: white;
font-size: 4em;
padding-left: 20px;
margin: 0;
line-height: .65em;
}
.gold {
color: #ee9f00;
font-size: .75em;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
a:visited {
color: #c88601;
}
a:focus {
color: #ee9f00;
}
a:hover {
color: #ee9f00;
}
a:active {
color: c88601;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:visited {
color: white;
}
#navigation a:focus {
background-color: #ee9f00;
}
#navigation a:hover {
background-color: #ee9f00;
}
#navigation a:active {
background-color: #ee9f00;
}
You have your CSS set to change the image when you hover over #logo and #logo is set to width: 100%; Try changing the width of #logo or, if that breaks your style, add a child div to #logo in which you can change the background image.
See this fiddle for an example: http://jsfiddle.net/QDgVy/
HTML
<a href="index.html">
<div id="logo_container">
<div id="logo"></div>
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
CSS
#logo_container {
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#logo {
background-image:url(...);
width: 100px;
height: 100px;
display: block;
float: left;
}
#logo:hover, #logo:active {
background-image:url(... );
}
Related
I wanted to make a parallax effect but I try lots of ways still can't do it. now I have half of the parallax effect which is the background image are fixed, without moving and the next image will cover the previous image, but now I want it to become when I scrolling down the background image will move down too but just slower than the original speed.
My code here
<!DOCTYPE html>
<html>
<style>
html, body
{
height: 100%;
width: 100%
}
html
{
overflow:hidden;
}
body
{
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:scroll;
}
*
{
margin:0;
padding:0;
font-family: Century Gothic;
}
.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.bottom
{
background-image:url('../image/AdobeStock_80592193.jpeg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.main{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.main2{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.nav
{
float:left;
list-style-type: none;
margin-top:55px;
margin-left:65px;
}
.account
{
font-size: 25px;
font-family:"Times New Roman", Times, serif;
}
ul li
{
display: inline-block;
}
ul li a
{
text-decoration:none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover
{
background-color: #fff;
color:#000;
}
ul li .active a
{
background-color: #fff;
color: #000;
}
.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title
{
position: absolute;
top: 45%;
left: 34%;
}
.title h1
{
color:#fff;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
.title2
{
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2
{
color: black;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
</style>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
</body>
</html>
Here's a very simple example of a parallax effect using jQuery:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("img").css("top", "0" + (scroll / 1.8) + "px");
});
body {
margin: 0;
}
img {
position: absolute;
top: 0;
z-index: -1;
}
.block {
background: #ffffff;
position: relative;
margin-top: 100px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://placeimg.com/640/480/any">
<div class="block">Some text</div>
</div>
and here the same approach is specifically applied to your case:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("#header").css("background-position", "0%" + (scroll / -1.8) + "px");
});
html,
body {
height: 100%;
width: 100%
}
html {
}
body {
color: #fff;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
font-family: Century Gothic;
}
.top {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('https://placeimg.com/640/640/any');
height: 500px;
background-size: cover;
background-position: 0 0;
background-attachment: fixed;
}
.bottom {
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.main {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.main2 {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.nav {
float: left;
list-style-type: none;
margin-top: 55px;
margin-left: 65px;
}
.account {
font-size: 25px;
font-family: "Times New Roman", Times, serif;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover {
background-color: #fff;
color: #000;
}
ul li .active a {
background-color: #fff;
color: #000;
}
.logo img {
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title {
position: absolute;
top: 45%;
left: 34%;
}
.title h1 {
color: #fff;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
.title2 {
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2 {
color: black;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
I am new to HTML CSS and JS and am creating a website and have had a problem for a few days now, I have created a navigation bad to switch between pages but i cannot seem to position it correctly in the top left corner I was wondering if anyone could help. I would like it to be positioned exactly in the top left corner but it seems to be out of position. I have tried many solutions but cant seem to get the result i am looking for.
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
You can modify the position of an element with css position, specifying top, left, right, bottom position (only one x and one y are needed).
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
But your problem is that you specified a
margin-left: 50px;
for your body, causing the elements to move 50 px to the right, and you can reach it by deleting it:
body {
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I'm currently coding my design portfolio and have encountered a problem with the layout.
Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/
Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.
Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
<div id="main_content">
<div id="contact">
</div><!--end contact"-->
</div><!--end main content-->
</div><!--end container-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
width: 960px;
}
#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
width: 960px;
margin-top: 250px;
}
#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}
I would really appreciate any help! Thanks in advance! :)
One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.
I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
height:200px;
position:relative;
}
#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}
#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
}
#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
Looks like you need clear: both on your main_content div.
I think an
#header {
overflow:hidden
}
or anything else that clears the floats of div#nav and div#logo should help.
It take 2 steps:
1) Move <div id="contact">...</div><!--end contact"--> into <div id="logo">...</div><!--end logo-->.
2) Change the #contact style to:
background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative;
float: right;
top: 200px;
You need to set position: relative, otherwise it is not working.
Can anyone see why this isnt working? For this example the box should turn white when hovered over.
<style type="text/css" media="screen">
.center {
margin: 0 auto;
}
.box {
width: 250px;
height: 250px;
display: block;
background: #000;
border: 1px solid white;
float: left
}
.inner {
width: 175px;
height: 175px;
display: block;
margin-top: 15%;
margin-left: 15%;
background: #fff;
position: relative
}
.boxLink {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
width: 100%;
text-align: center;
line-height: 175px;
font-size: 30px
}
a:link.boxLink {
color:#000;
background: yellow
}
a:visited.boxLink {
color:#000;
background: yellow
}
a:hover.boxlink {
color:#fff;
background: white
}
a:active.boxLink {
color:#000;
background: green
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="inner">
<a class="boxLink" href="#">about</a>
</div>
</div>
</div>
You need to put the class name before :hover:
a.boxLink:link{color:#000; background: yellow}
a.boxLink:visited{color:#000; background: yellow}
a.boxLink:hover {color:#fff; background: white}
a.boxLink:active {color:#000; background: green}
While my suggestion is good practice, you actually made a spelling error on that hover line:
a.boxlink:hover {color:#fff; background: white}
CSS is case-sensitive, you need to make that l uppercase.