Alrighty. I'm making a website, and I'm already screwing up. In the process of making a navbar, the animation I'm trying to make is not working correctly.
* {
margin: 0;
padding: 0;
font-family: Roboto;
}
header {
box-sizing: border-box;
max-height: 50px;
}
nav {
position: sticky;
top: 0;
padding: 7.5px;
}
.link {
padding: 7.5px;
display: inline-block;
font-size: 15px;
color: black;
text-decoration: none;
border-radius: 10px;
background-color: white;
transition-duration: 0.75s;
}
.linkanim {
padding: 7.5px;
display: inline-block;
font-size: 15px;
color: black;
text-decoration: none;
border-radius: 10px;
}
.linkanim:hover {
background-color: grey;
}
.icocredit {
position: absolute;
top: 97.5%;
font-size: small;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<title>Test</title>
</head>
<body>
<header>
<nav>
<a class="link linkanim" href="#test">Test</a>
</nav>
</header>
<main>
</main>
<footer>
<div class="icocredit">Icons made by Freepik from www.flaticon.com</div>
</footer>
</body>
</html>
The button is only supposed to show an animation when a mouse hovers over it.
However, the Button does some weird movement on page load.
I found out that it's either an issue with the font or with me loading the HTML file locally in chrome, on a real web server this isn't an issue. I'll mark this as the answer and thereby close this question.
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
I am learning HTML and CSS and I was trying to create menu button with drop down list of another menu items showing on hover. It is working fine, but there is one thing, which is not correct in my opinion. And that is fact, that this drop down menu shows up for half second after every page reload/refresh. Can somebody pls help and check, what is wrong in code I was trying to use?
Thank you very much in advance. Below is my HTML and CSS code.
body{
background-color: tomato;
height: 100vh;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.logo{
float:left;
font-family: arial;
}
.logo h2{
color:#fff;s
}
.menu_button{
background-color: transparent;
color:#fff;
padding:15px;
font-size:15px;
cursor: pointer;
border: 1px solid #fff;
width: 100px;
}
.right_menu{
position:relative;
display: inline-block;
float: right;
}
.dropdown_menu{
visibility: hidden;
text-align: center;
position: absolute;
background-color: #f9f9f9;
width: 100px;
box-shadow: 0px 8px 16px 0 px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: .3s;
}
.dropdown_menu a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_menu a:hover{
background-color: #000;
color:#fff;
transition: .3s;
}
.right_menu:hover .dropdown_menu{
visibility: visible;
opacity: 1;
transition: .4s;
}
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<title>Hello world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetStyle.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<h2>LOGO</h2>
</div>
<div class="right_menu">
<button class="menu_button">Menu</button>
<div class="dropdown_menu">
Home
About us
Contacts
</div>
</div>
</div>
</body>
</html>
What you're seeing on that flicker is the time between which the browser has downloaded and rendered the HTML, and it has downloaded interpreted and applied the CSS.
Depending on the speed of their computer, a user may or may not see the same artifact you're describing.
I'm trying to get an alert banner under my header, but it won't show up. I've styled it in the CSS and coded it into the actual HTML, but it doesn't show up.
I've tried using argin-top: 120px; (120px is the height of my header) and it screwed up the header. I also tried top: 120px; but that did nothing. This is probably a simple fix, but I'm rather new to coding. Here is my HTML:
.alert {
padding: 20px;
background-color: #0E6655;
color: white;
margin-bottom: 12px;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> My services are not impacted by the COVID-19 pandemic. Please refer to my Facebook for more info.
</div>
The above problem can be resolved through these 3 steps -
Step 1: Update the CSS for the header to make sure that it always stays on top
Step 2: Add the ID attribute to the alert-box element and use document.getElementById() to access the web element for an accurate result.
Step 3: If the header has fixed position, then set fixed position, margin-top and z-index attributes to the alert-box, so that it will not get hidden behind the header.
Here is the working code with document.getElementById used for finding and closing the alert-box element:
<!DOCTYPE html>
<html>
<head>
<title>Alert - demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.alert {
padding: 20px;
background-color: #0E6655;
color: white;
position: fixed;
display: block;
margin-top: 120px;
z-index: 999;
}
.closebtn {
margin-right: 20px;
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<div style="border:1px solid #0E6655; width: 100%; height: 120px; position: fixed;">
-- Header: 120 px height --
</div>
<div id="alert-box" class="alert">
<span class="closebtn" onclick="document.getElementById('alert-box').style.display='none';">×</span>
My services are not impacted by the COVID-19 pandemic.
Please refer to my
<a href="https://www.facebook.com/Brett_Gee-103794371341643/">
Facebook
</a>
for more info.
</div>
</body>
</html>
Output:
I have been studying CSS, however i came across a weird behavior, there is this anchor element that i gave a class with name "sponsor-link", it does not show up in Firefox nor in Chrome(completely removed from the DOM tree), however if i name it something else(i.e. sponsor-link-btn) then it shows up.
Can anyone explain why using "sponsor-link" as class name can remove an element?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Franklin Running Club</h1>
</header>
<div class="container">
<main class="main">
<h2>Come join us!</h2>
<p>
The Franklin Running club meets at 6:00pm every Thursday
at the town square. Runs are three to five miles, at your
own pace.
</p>
</main>
<aside class="sidebar">
<a href="/twitter" class="button-link">
follow us on Twitter
</a>
<a href="/facebook" class="button-link">
like us on Facebook
</a>
<a href="/sponsors" class="sponsor-link">
become a sponsor
</a>
</aside>
</div>
</body>
</html>
CSS
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
}
header {
color: #fff;
background-color: #0072b0;
border-radius: .5em;
padding: 1em 1.5em;
}
main {
display: block;
}
.container {
display: flex;
}
.main {
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
width: calc(30% - 1.5em);
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}
.button-link {
display: block;
padding: 0.5em;
color: #fff;
background-color: #0090C9;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.button-link + .button-link {
margin-top: 1.5em;
}
.sponsor-link {
display: block;
color: #0072b0;
font-weight: bold;
text-decoration: none;
}
I found out now.
My browsers have AdBlock Plus plugins,
which hide the element.
I think ABP black listed the text "sponsor-link"
i'm working on doing a website and i can't seem to make my css apply and everything appears as plaintext to the side. i've been searching for over an hour, i can't figure out what i've done wrong.
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100%
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
here's the full text
You've missed the closing } in .sidenav. Because of this, all of the styles that come after this do not get applied. Adding this in correctly applies the styles that follow it.
In addition to this, you've also missed the closing > in your <meta name>, meaning your Google Font is not getting applied either.
Finally, your colours all have five characters. You either need to use 3 letters (shorthand) or 6 characters for the full hex value.
You can avoid these mistakes by validating your code with the W3 Markup Validation Service.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100% width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111 overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: 'Opens Sans Condensed', sans-serif;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #cccccc;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
img.center {
display: block;
margin: 0;
}
h1 {
font-size: 25px;
font-family: 'Jura', sans-serif;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<h1>SOLAR RECORDS™</h1>
<div style="text align: center"><img src="the.png" alt="Records"></div>
<div id="mySidenav" class="sidenav">
×
HOME
RELEASES
ARTISTS
EVENTS
MIXES
NEWS
LABEL
CONTACT
</div>
<span onclick="openNav()">OPEN</span>
</body>
</html>