End trainer I want to build my first blog, I faced a problem I can't control in my header of page can anyone help?
This is my page
<!DOCTYPE html>
<html>
<head>
<html dir="rtl" lang="ar"> <!--<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="myblogspot.css">
<title> مدونة الراقي التقني </title>
</head>
<body>
<header>
<div id="top_header">
<div id="logo">
<img src="D:\only me\work\myblog\logo.png" height="150" width="150"></div>
<div id="main_menu">
<ul>
<li>الربح من الانترنت</li>
<li>تكنلوجيا</li>
<li>تسويق إلكتروني</li>
<li>تصميم</li>
<li>خدمات</li>
</ul>
</div>
</div>
</header>
</body>
</html>
<header>
<div id="top_header">
<div id="main_menu">
<ul >
<li class="logo"><img src="D:\only me\work\myblog\logo.png" height="150" width="150"></li>
<li>الربح من الانترنت</li>
<li>تكنلوجيا</li>
<li>تسويق إلكتروني</li>
<li>تصميم</li>
<li>خدمات</li>
</ul>
</div>
</div>
</header>
css
ul {
width: 100%;
padding: 0;
}
ul>li {
list-style-type: none;
display: inline-block;
vertical-align:middle;
}
I have no idea of your css file.
Here is my working code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مدونة الراقي التقني</title>
</head>
<body>
<header>
<div id="top_header">
<div id="logo" style="display: inline">
<img src="D:\only me\work\myblog\logo.png" height="150" width="150" />
</div>
<div id="main_menu" style="display: inline">
<ul style="display: inline-block">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</header>
</body>
</html>
It's not entirely clear what you meant, but I understood your request the way I reflected it in my decision. Also, you did not show your css.
In order to place the menu items on the same line with the logo, just add the flex rule to the #top_neader selector:
#top_header {
display: flex;
}
Also, you have an inconsistent html structure at the beginning. You are specifying the <html> tag twice:
...
<html>
<head>
<html dir="rtl" lang="ar"> <!--<![endif]-->
...
You can also change the order and location of flex objects using many flex rules.
Was it necessary?
#top_header {
display: flex;
}
<html dir="rtl" lang="ar"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="myblogspot.css">
<title> مدونة الراقي التقني </title>
</head>
<body>
<header>
<div id="top_header">
<div id="logo">
<img src="D:\only me\work\myblog\logo.png" height="150" width="150"></div>
<div id="main_menu">
<ul>
<li>الربح من الانترنت</li>
<li>تكنلوجيا</li>
<li>تسويق إلكتروني</li>
<li>تصميم</li>
<li>خدمات</li>
</ul>
</div>
</div>
</header>
</body>
</html>
Related
Video:
https://youtu.be/aOtayR8LOuc
Essential when I click a button on my nav it will go there but since I have the same nav bar on each page it will try to go to pages/about even if im already there (ex. pages/about/pages/about)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Replace your HTML code like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
this is not working as you expected because you provided false paths since the pages files are in a different folder not the parent so here is what you need to do
for the index.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="/src/index.html">Home</a>
News
Animals
About Me
Credits
</div>
</body>
for any other page inside the pages folder for example News.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="../index.html">Home</a>
News
Animals
About Me
Credits
</div>
<h1>News</h1>
</body>
Well there seems no issues with your index.html file except missing the .html extension after each page name, and you just need to fix the redirection in the pages/News , pages/Animals , pages/About, pages/Credits html files, as when you click on any one of them you are no longer in the root of your project instead you are inside pages/ so the redirection changes.
so your other pages(About/Credits/Animals/News) should look like this.
make whatever page you wish to make active.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<script src="../app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
Can you try adding "../" before the path? So News ...
Maybe this works?
Upon clicking the refresh button a random video from "Folder" should appear. This works well until I decide to integrate CSS via <link rel="stylesheet" href="site.css" /> (The HTML file is site.html). Only a gray box appears and when inspecting it does show the source to be an mp4 file from "Folder" but does not show. Removing the CSS link allows it to work again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="site.css" />
</head>
<body>
<header>
<h1>Generator</h1>
</header>
<main>
<section>
<article>
<video height="800px" controls >
<source id="vsrc" />
</video>
<script>
document.getElementById("vsrc").src = "./Folder/" + Math.floor((Math.random()*266)+ 1) + ".mp4";
</script>
</article>
<article>
<p><input type="button" value="Refresh" onClick="refresh(this)"></p>
<script>
function refresh(){
window.location.reload("Refresh")
}
</script>
</article>
</section>
</main>
</body>
</html>
So my problem is that when i click on a radiobutton to add the class "completed", it does what is suposed to do, but when i want to remove it, i need to click two times, i don't know why. Any help would be appreciated. Thank you
html
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link rel="stylesheet" type="text/css" href="TodoApp.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ------ Meta Tags ------ -->
</head>
<body>
<div id="container">
<div id="topImage">
<h1 id="topImage-title">T O D O</h1>
<img onclick="test()" id="moon" src="images/icon-moon.svg">
<img src="images/bg-mobile-light.jpg" width="100%" height="100%">
</div>
<div class="newToDo">
<input onclick="addTask()" id="ready" type="radio" name="ready">
<input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
</div>
<div id="tasksBox">
<div class="newTasks">
<input onclick="completeTask()" type="radio" class="bttComplete" name="bttComplete">
<span>Complete Online Javascript Course</span>
<div onclick="deleteTask()" class="delete"></div>
</div>
</div>
</div>
<script src="jquery_library/jquery-3.5.1.min.js"></script>
<script src="TodoApp.js"></script>
</body>
</html>
css
.completed{
background-image: url(images/icon-check.svg);
background-position: center;
background-repeat: no-repeat;
}
javascript
function completeTask(){
$(".newTasks").click(function(){
if ($(this).children().hasClass('completed')){
$(this).children().removeClass('completed');
} else {
$(this).children().addClass('completed');
};
});
}
Hello everyone i am making drag and drop web application. I am not able to run console.log("Dragging element"); inside addEventListener. Can anyone help me with this.
Below are 2 files that i have made yet
index.js
const dropZone=document.querySelector(".drop-zone");
dropZone.addEventListener("dragover",(e)=>{
console.log("Dragging element");
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inShare - Easy file sharing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="upload-container">
<div class="drop-zone">
<div class="icon-container">
<img src="./file.svg" alt="File icon" draggable="false" class="center">
<img src="./file.svg" alt="File icon" draggable="false" class="left">
<img src="./file.svg" alt="File icon" draggable="false" class="right">
</div>
<div class="title">Drop your files or,<span class="browseBtn">browse</span></div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>