When i hover over the words "Skate Night" a list will show up with a transition, but i can't get the list to stay when i move my mouse off the text.
This is what i've tried.
<html>
<head>
<meta name="description" content="Skate Night is a community website by skaters, for skaters where you can share your content, get to know other skaters and enjoy what people have to share." />
<title>
Skate Night
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<a class="menu" href="forums.html"><li>Forums</li></a>
<a class="menu" href="videos.html"><li>Videos</li></a>
<a class="menu" href="about.html"><li>About</li></a>
<a class="menu" href="team.html"><li>Join the team</li></a>
<a class="menu" href="login.html"><li>Login</li></a>
</div>
</body>
</html>
html
{
background-color: #ff4444;
}
#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}
#sn:hover ~ .menu
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
Any help would be much appreciated, thanks in advance
You need JavaScript (JS) for that
function snActive () {
this.classList.add("active")
}
var sn = document.querySelector("#sn");
sn.addEventListener("mouseenter",snActive,false)
html
{
background-color: #ff4444;
}
#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}
#sn.active ~ .menu
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
<html>
<head>
<meta name="description" content="Skate Night is a community website by skaters, for skaters where you can share your content, get to know other skaters and enjoy what people have to share." />
<title>
Skate Night
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<a class="menu" href="forums.html"><li>Forums</li></a>
<a class="menu" href="videos.html"><li>Videos</li></a>
<a class="menu" href="about.html"><li>About</li></a>
<a class="menu" href="team.html"><li>Join the team</li></a>
<a class="menu" href="login.html"><li>Login</li></a>
</div>
</body>
</html>
It can be done with pure css:
#header:hover #sn
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
Fiddle:http://jsfiddle.net/hprnxw8n/
here it is with css, added a new div. you need to put li tags in a ul or ol.
EDITED my answer, took li's out altogether as they weren't doing anything, I thought they were for styling but they weren't
{
background-color: #ff4444;
}
#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}
#sn:hover ~ #submenu a
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
#submenu:hover .menu
{transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<div id="submenu" >
<a class="menu" href="forums.html">Forums</a>
<a class="menu" href="videos.html">Videos</a>
<a class="menu" href="about.html">About</a>
<a class="menu" href="team.html">Join the team</a>
<a class="menu" href="login.html">Login</a>
</div></div>
There are a couple of problems that I will attempt to solve here using only CSS and a bit of HTML restructuring. First of all, you list items are not inside a list - this in and of itself is already semantically incorrect and will cause issues. Heres the HTML I would use:
<div id="header">
<a id="sn" href="home.html">Skate Night</a>
<ul>
<li>Forums</li>
<li>Videos</li>
<li>About</li>
<li>Join the team</li>
<li>Login</li>
</ul>
</div>
I have nested your links inside the list items and added them to a list itself. This allows for accurate targeting so I can remove you class of .menu. I will already preface this by saying that I havent replicated your styling entirely here as that isn't the purpose of this answer. The purpose is to show how two elements can interact like that, the styling is but a detail.
Now, theres the problem that I can't really see what your animation is trying to do at all. You can, however, be clever about it. If you want a persistent animation, you can apply it to both your header and your list. So lets try that:
html {
background-color: #ff4444;
}
#header{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
/* Here I added some styling for you new list */
#header ul {
display: inline-block;
}
#header ul li {
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
/* The below is important to prevent hovers on the ul */
list-style: none;
overflow: hidden;
height: 0;
}
#header ul li a {
color: inherit;
}
/* Here is where the magic happens */
#header #sn:hover {
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
#header #sn:hover + ul li,
#header ul:hover li {
color: #009900;
}
As long as you insure (by using paddings, for example) that you cursor does not fall in a gap between there #sn and the ul, then the hover will apply to both and stay applied until you leave either the #sn or the ul. You need to use a height: 0 and overflow: hidden to prevent hovers from happening before you hover on your #sn but otherwise this is the way to do it without javascript.
html {
background-color: #ff4444;
}
#header{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#header ul {
display: inline-block;
}
#header ul li {
display: inline-block;
color: #000000;
padding-left: 5%;
transition: color 0.5s;
text-decoration: none;
list-style: none;
overflow: hidden;
height: 0;
}
#header ul li a {
color: inherit;
}
#header #sn:hover {
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
#header #sn:hover + ul li,
#header ul:hover li {
color: #009900;
height: auto;
}
<div id="header">
<a id="sn" href="home.html">Skate Night</a>
<ul>
<li>Forums</li>
<li>Videos</li>
<li>About</li>
<li>Join the team</li>
<li>Login</li>
</ul>
</div>
Related
So I am extremely new to coding and I am doing this for my career school capstone project and I am running into a lot of problems. Mainly two: How to put the image above the content box? (even with a transparent background).
Here is my Code:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: #FFFFFF;
opacity: 0.5;
display: flex;
position: relative;
}
#box img:logo.png {
opacity: 1;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
The white box appears next to the image. I wanted it to be inside the box. I also wanted to box to have it's own set of opacity and colors. Which I know that I need to adjust my DIV boxes and create better ones but I'm not sure where to start #1, and I don't necessarily have any guidance on how to do so.
So first at all:
If you want to make the background of the box a bit transparent then you should not give an opacity: 0.5; but a background: rgba(255,255,255,0.5);
Then I also saw this in your CSS code:
You used a class for the box in the HTML. For the box-image in CSS you used an ID. And if you want to address the image in the Box class then you don't say .box img:logo.png but .box img
The correct CSS code should look like this:
Here is the whole revised code again. If something is missing then let us know:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: rgba(255,255,255,0.5);
display: flex;
position: relative;
}
.box img {
opacity: 1;
margin: 0 auto;
display: block;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
Try this
#box img:logo.png {
float: none;
opacity: 1;
}
As you can see in the first image, I have the underline appear under the links which covers the red "hr" that runs across the page. I want to apply the same effect on the archives and categories links but with it appearing above. I can't seem to find a way of doing it. I looked up a hover underline position, and tried using text-underline-position to being above but that doesn't do what I want it to do. How do I go about doing this?
In the second image, in the prototype I had designed to have the underline have a drop-shadow effect. How do I go about doing that with hover links? Can it even be achieved if I'm using an image as a background? Or would I need to save that as a .png with transparency? Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header></header>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="My">My<span id="Site">Site</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p>My Site</p>
</footer>
</body>
</html>
CSS:
body {
background-color: #ffffff;
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
/* #media (max-width:3440px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
/* #media (min-width:480px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0%;
}
#My {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Site {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
margin-bottom: 5px;
text-decoration-line: underline;
text-underline-position: above;
text-decoration-style: solid;
text-decoration-color: #414141;
text-decoration-thickness: 4px;
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 60%;
position: absolute;
top: 20%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
Use this
HTML code
<div class="menu">
A
B
C
D
E
F
</div>
CSS
.body {
background:#222;
padding:50px;
}
.menu {
margin:0 auto;
with 90%;
}
.menu a {
display:block;
float: left;
padding:5px 0;
color:#fff;
text-decoration:none;
margin:0 10px; font-family:arial;
}
.menu a:hover {
border-bottom:3px solid #fff;
}
Hope gonna help you, also i would be glad if you rate my comment good!
Using two lists and using border on the li you can get the color.
.navbar {
position: relative;
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
}
.navbar a {
text-decoration: none;
color: #414141;
}
.navbar ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
line-height: 2.5em;
margin-left: 1em;
}
.sub ul {
justify-content: flex-end;
}
.navbar::before{
position: absolute;
z-index: -1;
margin-top: 2.5em;
content: '';
border-top: 10px solid #FF0000;
width:100%;
}
.main li.active {
border-bottom: 10px solid #000000;
box-shadow: 0 4px 2px -2px #AAAAAA;
}
.sub li.active {
border-top: 10px solid #000000;
margin-top: -10px;
box-shadow: 0px -4px 2px -2px #AAAAAA;
}
<div class="navbar">
<nav class="main">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</nav>
<nav class="sub">
<ul>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
I'm trying to make a webpage to put some academic/work related stuff on it, but can't seem to figure out how to just put some buttons around my text without the button's margin totally running into each other.
My issue is when I try to add a margin to my projects button, it pushes the contact info button down a line. Any suggestions?
Here's what I have:
Please run code snippet in a full window
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li>Contact Info</li>
</ul>
</body>
</html>
You should never use px value for alignement, you can use float:right and float-left instead of them , but they are not working in your exemple , or to be more specific, only the float:rightis not working, because that the width it is not taking 100% of the screen width , here's the fix : https://stackblitz.com/edit/angular-jihnyk
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button"><a href="#contacts" >Contact Info</a></li>
</ul>
</body>
</html>
CSS :
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
transition: all 0.4s ease 0s;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%
}
.right-button{
float: right;
padding-right: 47px
}
a small hint : you can add the same transition you added in hover to the normal class, to get the same transition when the mouse leaves the button
been trying to get my logo which is a .gif to float on my header image and stick there even when resizing page
almost had it, then i resized my window. Am i wasting my time because i actually give up been trying for hours with no luck.
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>B.13 DJ Hire</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
</head>
<body>
<div id="box">
<div id="header">
<a href="index.html" class="banner">
<img src="images/banner.jpg">
</a>
<a href="index.html" class="logo">
<img src="images/logo.gif">
</a>
</div>
<h1>B13. DJ Equipment Hire</h1>
<nav>
<ul id="mainnav">
<li class="home">Home</li>
<li class="mixers">Mixers</li>
<li class="turntables">Turntables</li>
<li class="mp3">MP3 Media Players</li>
<li class="headphones">Headphones</li>
<li class="contact">Contact Us</li>
</ul>
</nav>
<h2> Our Equipment Range<h2>
<br><br>
<p> we are a equipment hire company..</p>
<br>
<p id="footer">45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</div>
</body>
Here is my CSS code
body {
padding: 0;
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}
h1, h2 {
text-align: center;
font-family: georgia, "times new roman", times, serif;
}
h1 {
margin: 0;
font-size: 2em;
color: white;
background: #585858;
line-height: 1.90em;
width: auto;
text-align: centre;
background-position: center;
text-shadow: 2px 2px 4px #000000;
border-radius: 0.30em;
}
h2 {
font-size: 1.5em;
}
#box {
border-style: none;
width: 70em;
padding: 0em;
margin-left: auto;
margin-right: auto;
background: #C2C2C2;
}
#header{
}
.banner img{
position: relative;
float: left;
height:206px;
width:1120px;
z-index: 1;
display:block;
}
.logo img {
position: absolute;
float:right;
margin-top: 0px;
margin-left: 0px;
z-index: 2;
height:290px;
width:712px;
bottom:335px;
right:50px;
}
#footer {
background: #A6A6A6;
text-align: right;
padding: 0.25em;
margin: 0;
}
.callout {
font-weight: bold;
}
#mainnav {
text-align: center;
background: #A6A6A6;
padding: 0.75em;
margin: 0;
position: relative;
border-radius: 0.5em;
}
#mainnav li {
display: inline-block;
list-style-type: none;
padding: 0;
background: A6A6A6;
color: #A6A6A6;
}
#mainnav a:link{
color:black;
background-color: transparent;
text-decoration: none;
}
#mainnav a:hover{
color: blue;
background-color:#C2C2C2;
text-decoration: underline;
text-shadow: 8px 12px 12px blue;
}
#mainnav a:visited {
color: black;
}
#mainnav li.home a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.home a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.mixers a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mixers a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.turntables a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.turntables a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.mp3 a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mp3 a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.headphones a{
color:#black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.headphones a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.contact a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.contact a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#slideshow {
position:absolute;
text-align: center;
}
#pics {
margin-left: auto;
margin-right: auto;
width: 50%;
float: right;
text-align: center;
}
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
img {
max-width: 120%;
display: block;
background-size: 100%;
}
img {
max-width: 100%;
display: block;
}
#slideshow {
wd
You say you want to float your image, and you have float stated for the logo style, but you also have position:absolute stated as well. You need to use one or the other to achieve your goal my friend.
Also you are missing a few closing DIVs in your code. Can you share a URL to your issue? that may be easier than seeing the incomplete code.
Your CSS styling you have (position:absolute) is causing the problem. Along with the fact that you have it positioned exactly in a fixed spot on the page with your position properties like "top" "bottom" "left" and "right". You do not want this when you have a logo in a spot on the page that doesn't move around (like in your header). To fix this, you want to remove what you had under the CSS for ".logo img" and put the following:
.logo img {
height:200px;
width:200px;
}
Here is an example of it: https://jsfiddle.net/Lp7fwm7a/. When you resize the window, the logo stays in the correct place like how you want it.
You might also want to look into the float property if you have two div's in your header. Here's a good article on it: https://css-tricks.com/all-about-floats/.
Using the position: absolute; attribute means that image is being positioned according to the browser window (because you don't have any other absolute positioned elements on the page).
Your top and bottom values are counting from the edge of the browser window, not from the edge of your image.
You can center it like by replacing .logo img with:
position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;
Your logo is a lot taller than your header image. I noticed the top of the logo in your code was cut off, not sure if you meant to do that or not but if you edit that first 0 in margin, you can adjust the top margin. -100px or so should put it back where you had it.
Also just a comment about what the other answers say, you're not missing a closing div tag - there's just really inconsistent indentation making your HTML and CSS really difficult to read. You are missing a / in the closing h2 tag and you spelled 'center' as 'centre' in your h1, h2 CSS.
Here's a link to all the fixes (including indentation): http://codepen.io/anon/pen/KpXKVG
I am new to learning HTML and CSS. I am attempting to recreate some of the design interfaces of a certain site, but have run into a problem. The navigation menu, though in the header, appears below it for some reason. I have attempted multiple combinations of fixes but they do not end up working and I am too much of a novice to completely understand why it may be doing such a thing. I have uploaded my site and left the directories open to explore. The code is very small, so it should be somewhat easier to point out my mistake.
http://razorcloud.cz.cc/
HTML:
<body class="body">
<header class="header">
<img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
<div class="bottom-header">
<div class="navigation-bar">
<ul>
<li>
Home
<div class="dropdown-container dropdown-shadow">
<div class="dropdown-column">
<p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
Video
</li>
</ul>
</div>
</div>
<!--<div class="header-alert">
This website is still under development!
</div>-->
</header>
CSS:
.body
{
margin: auto;
width: 95%;
clear: both;
}
.body a
{
color: inherit;
}
.header
{
background-color: black;
color: white;
display: block;
font-family: "GillSansStdRegular";
margin-bottom: 20px;
position: relative;
}
.bottom-header
{
display: block;
position: relative;
padding: 0 20px;
}
.navigation-bar
{
color: white;
display: inline-block;
font-size: 12px;
float: right;
text-transform: uppercase;
}
.navigation-bar > ul
{
border: transparent 1px solid;
border-bottom: 0;
float: left;
height: 34px;
list-style: none;
margin-left: 5px;
}
.navigation-bar > ul a
{
display: block;
line-height: 16px;
margin-right: 23px;
padding: 0px 2px 0px 2px;
text-decoration: none;
}
.navigation-bar > ul:active a
{
background-color: white;
}
.navigation-bar > ul:hover a
{
color: black;
height: 31px;
background: white;
}
.navigation-bar > ul:hover .dropdown-container
{
display: block;
}
.dropdown-column
{
}
.dropdown-container
{
color: black;
display: none;
position: absolute;
z-index: 99;
left: 0;
width: 100%;
border-color: black;
border-top: 2px;
border-top-style: solid;
}
.dropdown-shadow
{
margin-top: 0;
background: url("../images/backgrounds/submenu-bg.png");
-webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
-moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}
.dropdown-shadow:after
{
display: block;
clear: both;
}
.header-alert
{
background-color: white;
border-bottom: 2px solid black;
color: black;
font-family: "GillSansStdLightRegular";
font-size: 110%;
text-align: center;
text-transform: uppercase;
width: 100%;
}
You need to float your elements. Inside the header the<img/> should be set to float:left and the navigation container (.navigation-bar) needs to be set to float:right. And you'll need to add a clearfix after the floats:
FIDDLE