I am trying to make a program that will make a button for every file in a directory.
They need to go equally on both the red lines on this image.
This is my code
<!DOCTYPE html>
<head>
<title>Games</title>
<style>
html, body {
background-color: #000000;
}
.text {
background-color: #000000;
font-size: 100%;
color: #00ff00;
padding: 10px;
}
a {text-decoration: none;}
.button {
padding: 15px 25px;
position: absolute;
top: 770px;
left: 45%;
font-size: 50px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
</style>
</head>
<body>
<div style="text-align:center;">
<h1 class="text" style="font-size:300%;">Thing</h1>
<img src="logo.png" alt="logo" width="600" height="600">
</div>
</body>
Any help would really be appreciated.
reddit.com/r/domyhomework
In all seriousness though, you need to provide more information. What sort of language are you working with besides HTML and CSS?
Obviously, your first step will be generating a list of the files in your directory. I don't know if these files are server side or client side, but here is a good place to start:
Get list of filenames in folder with Javascript
Related
Was following a tutorial on how to create a hoverable drop-down button with HTML/CSS. The button displays on the page when I load but does not display the links when I hover over it. I thought it may have been the browser but it does the same thing in Firefox and google chrome. I changed the code around when I tried it initially, then typed the code verbatim as the tutorial but had the same issue. Tried to post screenshot of page but site would not allow me yet.
.container {
text-align: center;
}
h1 {
color: brown;
}
.crumbs-btn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.crumbs {
position: relative;
display: inline-block;
}
.dropdown-crumbs {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-crumbs a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-crumbs a: hover {
background-color: #ddd;
}
.crumbs: hover .dropdown-crumbs {
display: block;
}
.crumbs: hover .crumbs-btn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<title>Memoir of the mind</title>
<!--<meta http-equiv="refresh" content="10"> -->
</head>
<body>
<div class="container">
<h1>Fish for Waves</h1>
<!--<p>this will refresh after ten seconds</p> -->
<p\><b>The website dedicated to providing daily gems of wisdom
to help nourish your mind and spirit.</b></p>
<img src="pictures\Thinking-Man.jpg" alt="Thinking-Man" width="200" height="300">
</div>
<br>
<br>
<div id="proverbs or phrases">
<h2>Daily Crumbs</h2>
<h4>February 28, 2022</h4>
<p>"Wisdom stems from the tree of experience and the branch of patience"</p>
<p>-<i>Buddy Nawlidge</i></p>
</div>
<div class="crumbs">
<button class="crumbs-btn">Previous Crumbs</button>
<div class="dropdown-crumbs">
Mar 9th, 2022
Mar 10th, 2022
Mar 11th, 2022
</div>
</div>
</body>
</html>
Divide your CSS from HTML. Create a CSS file, I named mine app.css
This is the snippet:
.container {
text-align: center;
}
h1 {
color: brown;
}
.crumbs-btn {
background-color: #04aa6d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.crumbs {
position: relative;
display: inline-block;
}
.dropdown-crumbs {
visibility: hidden;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-crumbs a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-crumbsa:hover {
background-color: #ddd;
}
.crumbs:hover .dropdown-crumbs {
visibility: visible;
}
.crumbs:hover .crumbs-btn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<title>Memoir of the mind</title>
<!--<meta http-equiv="refresh" content="10"> -->
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div class="container">
<h1>Fish for Waves</h1>
<!--<p>this will refresh after ten seconds</p> -->
<p><b>The website dedicated to providing daily gems of wisdom
to help nourish your mind and spirit.</b></p>
<img src="pictures\Thinking-Man.jpg" alt="Thinking-Man" width="200" height="300">
</div>
<br>
<br>
<div id="proverbs or phrases">
<h2>Daily Crumbs</h2>
<h4>February 28, 2022</h4>
<p>"Wisdom stems from the tree of experience and the branch of patience"</p>
<p>-<i>Buddy Nawlidge</i></p>
</div>
<div class="crumbs">
<button class="crumbs-btn">Previous Crumbs</button>
<div class="dropdown-crumbs">
Mar 9th, 2022
Mar 10th, 2022
Mar 11th, 2022
</div>
</div>
</body>
</html>
I used visibility hidden and visible but it also works with your way too. There are many solutions to do the same thing. There is nothing wrong with your code but I think you should divide your HTML from the CSS (external) so that the hover works better.
This question already has answers here:
Different Color Links on the Same HTML Page
(5 answers)
Closed last year.
I'm trying to apply CSS to this specific button, but it keeps cascading for all the buttons on the page. How do I make the style specific to this one button? I have no preference on what type of selector is used. Please help, I have 0.0 coding knowledge.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
Instead of doing this:
Buy Here
Use it as this:
<a id="buy_button" href="URL" target="_blank">Buy Here</a>
Then apply the CSS to that specific id like this:
#buy_button{
background-color: gray;}
This is a good example of a time where you can use an ID selector. You can do this by adding id="idValue" to your html element and target it with CSS using #idValue. Here's an example of how that'd look:
<html>
<head>
<style>
#customButton:link,
#customButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#customButton:hover,
#customButton:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
As mentioned in the comments, you can use the id - but there are maybe better ways to handle it.
<html>
<head>
<style>
#myButton:link,
#myButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#myButton:hover,
#myButton:active {
background-color: gray;
}
</style>
</head>
<body>
<a id="myButton" href="URL" target="_blank">Buy Here</a>
</body>
</html>
is this what you need?
a.btn:link,
a.btn:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.btn:hover,
a.btn:active {
background-color: gray;
}
Buy Here
<a class="btn" href="URL" target="_blank">Buy Here</a>
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:
My css class is not applying the style yet I have imported the css file. What might be the issue?
Here is the code:
.edubtn{
background-color: #862165;
border: 0;
padding: 2 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
<div class="edubtn" onclick="show()" >ORDER</div>
The only thing wrong with your css is you need to fix the padding attribute:
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
Rememeber if there is an error above this class, the css parser will skip the current block until the next working block.
Hey found the problem: I had put my css inside another (#media screen) brackets
#media screen and (max-width: 500px){
.attachchild{
width: 90%;
margin-top: 20px;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
your code works fine,
the background color is dark purple which is = to saying background-color: #862165;
the text color is white which is = to saying color: rgba(255,255,255,0.7);
I run your code and I did a <h2> with the same style and it works
HTML Code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Beep-Boop</title>
</head>
<body>
<h2 class="something"> Something..</h2>
<div class="edubtn" onclick="show()" >ORDER</div>
</body>
Style CSS :
.something{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.something:hover{
color: #fff;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
So i have created a horizontal navigation with a drop down menu, I've simply red what i saw and tried it myself. I've copied and pasted the html and css, I've changed the html in my lines of codes and it seems to work pretty well, now i would like to change the divs name to something more commun for mee since i am going to continue my html.
header {
border: 10px ridge blue
}
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="collegecss.css" />
<title>college sainte marie </title>
</head>
<script type="text/javascript" src="collegejvs.js"></script>
<body>
<header>
<img src="../saintemarie.png">
<h1>
<titre>Bienvenue dans le site du Lycée Sainte-Marie</titre>
<h1>
</header>
<nav>
<div class="container">
accueil
<div class="dropdown">
<button class="dropbtn">information générale</button>
<div class="dropdown-content">
inscription
historique
accéder au collège
horaires
règlement
tarifs
</div>
</div>
calendrier
visite
pastorale
vie du collège
</div>
</body>
</html>
i would like to change the div class : "container","dropdown","dropbtn" and "dropdown-container".And at the same time, it would change the css class name as well
any suggestion? i'm using notepad++ .
thank you in advance!
You can try ATOM or Sublime Text. its available for free download. Open your files in any of these Editors. make your selection-pattern with simple selection method and use "CTRL + D" to select similar text as selection-pattern in whole file. Multiple cursors will appear and you can change the text.
Or Simple FIND & REPLACE can be used if it is solving your problem.
#user5014677 said :
I don't think this has naything to do with SO x) Anyway just copy paste everything in notepad and CTRL+F>replace> write the class you want to replace and the name of the new class > replace ALL
and it is right ^^ thank you #user5014677