I'm having some issues with the sliding menu links. Each sliding menu works as intended, but if I try to hover the sliding link in the same horizontal space as the h1 text (the first one, the one that says "PERFIL"), it doesn't work until the cursor leaves the h1 area.
<!doctype html>
<html class="video">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="wrapper">
<ul id="menu">
<li id="home">
PERFIL<img src="menu/home.png">
</li>
<li id="3d">
GRAFICA 3D<img src="menu/3d.jpg">
</li>
<li id="3">
AUDIOVISUAL<img src="menu/audio.jpg">
</li>
<li id="4">
FOTOMONTAJE DIGITAL<img src="menu/ps.png">
</li>
<li id="5">
CONTACTO<img src="menu/contact.png">
</li>
</ul>
</div>
<body>
<h1><div id="video">VIDEO</div></h1>
</body>
</html>
.wrapper * {
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
.wrapper ul li {
display:flex;
margin-bottom:10px;
}
.wrapper ul li a {
background:black;
color:white;
padding:5px 10px;
transform: translateX(calc(-100% + 45px));
transition: transform 1s ease;
text-decoration: none;
}
.wrapper img {
max-width:32px;
margin-left:5px;
}
.wrapper ul li a:hover {
background:black;
color:white;
padding:5px 10px;
transform: translateX(0);
}
.wrapper:hover a:focus {
left: 0;
background: none;
}
.video h1 {
font-family: verdana;
color: white;
text-align: right;
margin-right: 5%;
margin-top: -280px;
margin-bottom: 50px;
text-transform: uppercase;
background-position: center;
transform: skewX(-20deg);
transform-origin: top;
}
.video div {
padding: 2%;
display: inline;
border-radius: 15px;
}
#video {
background-color: black;
padding: 1%;
display: inline;
border-radius: 15px;
}
Here's a mockup of the site
(Jfiddle)
It's because the width of the h1 element overlaps the menu. You can change the width of the h1 and it should works as expected.
See updated fiddle
Related
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
I'm trying to make my own select option element. But when i try position fixed and apply some css to the li tag then all li lists are not shown. It shows only one list. I tried a lot but couldn't! Please help me! Here's my short code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu</title>
<style>
#main-content{
height: 380px;
width: 700px;
background-color: #3498db;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span{
font-size: 1.5em;
}
a{
font-size: 1em;
}
ul li{
background-color: #e74c3c;
padding: 0.3em 5em 0.3em 0.3em;
cursor: pointer;
list-style: none;
position: fixed;
}
li:hover{
background-color: #dadada;
}
</style>
</head>
<body>
<div id = "main-content">
<div id = "menu">
<ul id = "menus">
<span>Select... ></span>
<li>Sausage</li>
<li>Burger</li>
<li>Chicken</li>
</ul>
</div>
</div>
</body>
</html>
position:fixed fixes the position of the element, and in your case it's in li element, so all the li elements overlaps and you can see only the last li element.
Further, to show and hide the list item, you can use display: none and display: block.
Update(asked in comment): Text below the drop down should not move on mouse over drop down element.
#menu{
position:relative;
}
ul{
position:absolute;
z-index:1;
left:0;
top:10px;
padding-left: 10px;
}
#main-content {
height: 380px;
width: 700px;
background-color: #3498db;
padding:20px;
}
span {
font-size: 1.5em;
}
a {
font-size: 1em;
}
#menu{
position:relative;
}
ul{
position:absolute;
z-index:1;
left:0;
top:10px;
padding:0 10px;
}
ul li {
background-color: #e74c3c;
padding: 0.3em 5em 0.3em 0.3em;
cursor: pointer;
list-style: none;
display: none;
max-width:100px;
}
li:hover {
background-color: #dadada;
}
#menu:hover li {
display: block;
}
<div id="main-content">
<div id="menu">
<span>Select... ></span>
<ul id="menus">
<li>Sausage</li>
<li>Burger</li>
<li>Chicken</li>
</ul>
Some text. Some text. Some text. Some text<br/>
Some text. Some text. Some text. Some text<br/>
</div>
Some text. Some text. Some text. Some text<br/>
Some text. Some text. Some text. Some text<br/>
</div>
I made a dropdown menu with css and i wanted to activate it by hovering over menu button and it works just fine. But problem is that,when i hover below menu button dropdown menu is activated again ,and i don't want that. Here is my HTML and CSS and every help would be more than appreciate.
PS Sorry if you find some typos english is not my native language.
#charset "UTF-8";
body {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 100%;
}
* {
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.container {
width: 1000px;
height: 100%;
margin: 0px auto;
}
nav ul a {
color: white;
}
nav ul {
width: 100px;
height: 30px;
margin: 270px 460px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul li {
width: 100px;
height: 30px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
margin-top: 5px;
position: relative;
top: 17px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul:hover li {
opacity: 1;
}
nav ul li:hover a {
border-bottom: 2px solid white;
}
li:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
ul:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>HOME
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
Try this made some css changes to your code. see the overflow hidden changes.
nav ul{
list-style-type:none;
transition:all 0.3s;
max-height:50px;
overflow:hidden;
width:120px;
padding:0px;
}
nav ul li{
height:30px;
width:100px;
padding:10px;
margin-top:5px;
background:teal;
text-align:center;
cursor:pointer;
transition:all 0.3s;
}
nav ul li a{
color:white;
font-family:'segoe ui';
text-decoration:none;
}
nav ul li:hover{
background:yellowgreen;
}
nav ul li:not(:first-child){
opacity:0;
}
nav ul:hover{
max-height:600px;
}
nav ul:hover li{
opacity:1;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
so, managed to sort my nav bar out the way I like it... However now I've moved onto what I want underneath it. Except I cannot appear to 'gain control' over the 'list' element... What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact">CONTACT</li>
<li class="about">ABOUT
<strong><li class="leagues">LEAGUES</li></strong>
<li class="home">HOME</li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li>Essex</li>
<li>London</li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
This is all you need to gain control of these in css. See the jsfiddle example here
http://jsfiddle.net/fwvc6zsc/
If you want more certainty that you are using the right one you could also change it like this:
strong li a{
color: #000000;
text-decoration: none;
}
Because you using different class
Use this:
.navbar li {
css code
}
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}