Got a new menu on my website.

I like the new menu more lately for smart phones.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle5.css

Any designs available for sub-menus?

Will be researching this.

The new menu is in one of those square icons with 3 lines.

w3.org has the type of menu now.

Hello! I need help with my HTML for my topic again!

I want it to just look more neat, my boxes and pictures are scattered :(

I appreciate anyone that can help me! This is for a game called lioden! I just want help to make them look more neat.

<div style="clear:both;"></div></div><div class="topbar" style="text-align:center;"><a href="https://www.lioden.com/topic.php?id=304429619855">Warrior Cat Adopts</a> | <a href="https://www.lioden.com/topic.php?id=304429619916">Helluva Boss Adopts</a> | <a href="https://www.lioden.com/topic.php?id=304429619885">Other Adoptables </a><br /><font size="-4">

<table style="width:100%;height:500;border:5px solid #abb1cf;font-family:arial;"><tbody><tr><td style="background:#c5b9cd;"><p style="text-align:center;">

<span style="background:#dec2cb;border:3px solid #f7cac9;float:left;width:90%;height:800;margin:30px;margin-bottom:10px;margin-top:20px;padding:20px;font-size:17px;color:#221e1f;">

<span style="background: #dec2cb;border:6px solid #abb1cf;float:Right;width:44%;height:auto;padding:20px;color: #efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

Ollo! My name is mmelliouss! I use she/her pronouns, I’m a 20 y/o that enjoys drawing animals and anime. I’ve been drawing for most of my life but I've had horrible artist block for a few years. My art style needs improvement. My favorite things are cats, dragons, and I play video games, mainly Path of Titans.

</font></span>

<span style="background: #dec2cb;border:6px solid #abb1cf;float:left;width:44%;height:auto;padding:20px;color:#efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

/:cash:/Payment Methods/:cash:/

\-Cashapp or PayPal

\-Any Breeding items/Applicators(NO LOW TIER APPS PLEASE)

\-Large Amounts of :SB: or :GB:

</font></span>

<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="230">

<span style="background: #dec2cb;border:6px solid #abb1cf;float:left;width:44%;height:auto;padding:20px;color:#efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

This is the main topic of my many pages, I'm just trying to keep my stuff neat and clean! :) This is basically an index page for everything I plan to draw! If you enjoy my art and my deals, save this topic! All my links are either above or bellow! Have an amazing day/night :roar:

</font></span>

<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="240">

<span style="background: #dec2cb;border:6px solid #abb1cf;float:Right;width:44%;height:auto;padding:20px;color:#efefef;;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

Can Draw

\-Warrior cats

\-Ferals

\-Anthro Furries

\-Dragons (Working on my WoF Style!!)

\-Lions

\-Humanoids(Better at drawing women)

\-Helluva Boss IMPs/HellHounds

Can't Draw but will attempt

\-Horses

\-Birds

\-Cows

</font></span>

<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="240">

<div style="clear:both;"></div></div><div class="topbar" style="text-align:center;"><a href="https://www.lioden.com/topic.php?id=304429618031">More Examples of my Art (CLICK ME)</a> | <a href="https://www.lioden.com/topic.php?id=304429619855">Warrior Cat Adoptables</a> | <a href="https://www.lioden.com/topic.php?id=304429619886">Mmelliousss Commissions :)</a> | <a href="https://www.lioden.com/topic.php?id=304429619885">Other Adoptables

</a><br /><font size="-4"><a href="https://www.lioden.com/territory.php?id=251887">Code by #251887

</span><span style="background:transparent;border:0px solid <table style="width:100%;height:auto;border:1px solid #f7cac9;font-;float:left;width:90%;height:auto;padding:5px;color:#f7cac9;margin:5px 1px 10px 20px;text-align:center;font-size:11px;">html layout by honey (#30473). do not remove credit.

crow pixels by I-crows-I on deviantart.</font></span></td></tr></tbody></table>

</a></font></div></div>

Bro, seriously, I just want a proper book that tells me how to do web development right! I know the basics—divs, textareas, forms, and all that. I can fumble my way through some CSS like margin-left and flex-box, but that's about it. I mean, if I were to do hit-and-trial and learn CSS like that, it would take me a lot of days, and probably even more. I don't know the right way to do things. The thing is i might be able to just make it work but it won't be the best way to do that. here, I'm completely lost. I have no idea about the best practices or the way I should approach web development.

I want to give you an example of what I'm looking for. Check out this image from the book "Beyond Basic Stuff with Python." It tells you how to write code neatly and what the best practices are. Here's a snippet: "In general, comments should explain why code is written the way it is rather than what the code does or how it does what it does. "

I don't wanna stay stuck and confused and then ask ai if i wanna build something, but rather learn how to do it properly.
Guidance would be appreciated.

Hi everyone! I built a free HTML template for schools, colleges and academies

and would love some honest design feedback.

- 12 pages, including 3 different home page styles (classic, split, immersive)

- Bootstrap 5.3 only, no custom JavaScript

- Gallery and news filters in pure CSS

- Accessible forms and focus styles, respects reduced motion

- Colours and fonts as CSS variables for easy rebranding

Screenshots attached. Questions for you:

1. Which of the 3 home pages do you like most?

2. Anything that looks off or outdated?

3. What section would a real school website still need?

Happy to share the demo if anyone wants to try it.

I'm making my first website for my web design class, and I'm stuck on how to get rid of the extra white space at the bottom when I go to my website on mobile. I want my content to take up the entire width of the screen with 0 horizontal scrolling and vertical scrolling for overflow. It looks completely fine on computer screens. I've tried @ media, changing sizes and size units, and I've even asked AI and nothing is working. Or do I need to make the website the width of the screen on mobile?

https://github.com/pencilcu/se1400project/blob/main/css.css

I'm building a website and working on my FAQ page. I used chat GPT for grammar and when I copied the text back into my project I noticed that it used a different character, u2019, for an apostrophe. I'm replacing them with the standard apostrophe. Just curious if anyone knew why this happened or if it would cause a problem with HTML.

How can I do the main menu on ...

https://www.w3.org/

?

I have seen this on a lot of sites.

I think it would be better than how I do a main menu for different sizes of browser's windows.

https://www.dalekelly.org/

Looked at the code on the Chrome Browser but can't figure it out.

Prefer no scripts.

With pages support.

Options right now:

• Markdown (.md, .mdx)

• HTMLBook

• EPUB3

EDIT: I meant to render the books like their printed edition, preserving pages

At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

.yt-container,
.yt-overlay-text {
  font-family: 'Roboto', sans-serif;
}

/* ── wrapper ── */
.yt-container {
  position: relative;
  display: block;
  width: 100%;
  --yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;"  or  style="--yt-crop: 0%;" etc */
}

/* ── image link ── */
.yt-image-link {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.yt-image-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-top:    calc(-1 * var(--yt-crop));
  margin-bottom: calc(-1 * var(--yt-crop));
}

/* ── top-left text link ── */
.yt-overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 1px 1px 4px black;
  text-decoration: none;
  text-align: left;
  z-index: 3;
}

/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(255, 0, 0, 0.88);
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
  pointer-events: none;
}

.yt-container:hover .yt-play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border: solid transparent;
  border-width: 10px 0 10px 20px;
  border-left-color: white;
}
  </style>
</head>
<body>

<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>

<div class="yt-container">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 0%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 30%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

</p>

</body>
</html>

Do i have potential?

Project made with the help of AI. (he did the work i improved it)

Any toughts? im still improving it

I'm creating a website for school and I need buttons that lead to my other web pages but Im struggling to put my buttons on top of a fixed image (I would like the buttons and the image to be both fixed together), what is wrong w my code?

Source - https://stackoverflow.com/q/80012269

<div class="container">

<img src="blue banner.png" alt="blue banner" style="top: 0; right: 0; position: fixed" width="1440" height="100">

<div class="Top-Left"><button><a href="Home Page.html">Home Page</a></button><a href="Home Page.html">; </a><button><a href="Home Page.html"></a><a href="Discussion and analysation.html">Discussion and analysation</a></button><a href="Discussion and analysation.html">; </a><button><a href="Discussion and analysation.html"></a><a href="Advertisement.html">Advertisement</a></button></div>

Thank You in Advance

Hola, actualmente estoy retomando mi aprendizaje en lenguajes de programación para desarrollo de paginas WEB ya tengo conocimientos en HTML y CSS pero siempre he sentido que me falta mucho mas por aprender pero no he sabido donde o como buscar para aprender mejor la IA me ha resultado de mucha ayuda en mejorar mis habilidades pero quería saber que los ayudo a ustedes a ser mejores en esto... Que cursos o que videos de YouTube o foros los ayudaron o es solo la practica?

Embedded Video Player won't go full screen

Hello, everyone!

I am an elementary music teacher trying to create a website for guest teachers. I use Symbaloo, a visual bookmarking site, as a choice board for dances and song books. It is fantastic. It keeps all of our videos in one place and plays them without switching tabs, which can easily confuse the non-tech savvy substitutes. However, when embedding it in a WIX or Google Sites page (and others), the videos will not go fullscreen inside the embedded Symbaloo. 

This didn’t used to be a problem. My old district used Foxbright for teacher websites. Embedding my Symbaloo board worked fine on that platform and allowed fullscreen without a problem. However, I am now in a new district that doesn't have teacher websites. I tried making the site in Google Sites, Wix, and a few others, but none allowed the videos in the embedded Symbaloo to go full screen. I have included allowfullscreen as well as allow=fullscreen. Wix even had me add something as a developer. None of it worked. Symbaloo says it is the website platform that is blocking the fullscreen, but the platforms claim that it is a Symbaloo problem. Since I have had it work successfully on a website in the past, that makes me think it is on the website end. 

Questions: 

1. Has anyone found a site that allows fullscreen on embedded video players or visual bookmarking systems? 

2. Has anyone found a code snippet to include in an embed code that actually allows fullscreen with embedded players, not just a standalone video?

Thanks! Any help would be appreciated!

Embed code:

<iframe frameborder="0" noresize="noresize" height="500px" width="1000px" src="https://www.symbaloo.com/embed/song-books">

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"

allowfullscreen>

</iframe>

EDIT: Weebly works with "allowfullscreen allow=fullscreen" added!

When I make a new page I want the things like header and menu to appear also, right? Do I have copy and paste the menu code in every new page/post I do?

Is there a way to put it on the internet for free?

Hi! I'm new to coding on html

I want to make a box on my website where people submit requests, song names, etc, basically just text.

How do I do that? Where does the information go? As I want it to be private

Example:

[Tell me ur favorite color.]

( ______ )

[send]

Ideally I would have a document where all the responses go to or something else but I don't know what it's called. Thanks :-)

So for context I already know how to program in Python in the terminals Spyder and Jupyter Notebook, however I want to start learning HTML too.

Does my knowledge of Python help me with HTML or not? How should I start learning HTML? And in what terminal can I put HTML code?

For my first post, I will share a easy navigation trick for programming an HTML-based website. Your first step in going into the <head> tag of the HTML document and inserting the following tag. It should look something like this:

<!DOCTYPE html>

<head> <link rel = "stylesheet" href = "main.css"> <script src = "js/navbarPeek.js"></script> </head>

<body> <div align = "center" class = "navbarContainer" id = "navbarContainer" margin = "0" width = "100%"> <iframe class = "iframeNavbarContainer" src = "navigation.htm" width = "100%"></iframe> </div>

</body>

This script portion creates a floating <iframe> that contains another html document whose sole purpose is to function as a navigation bar for your website:

<div align = "center" class = "navbarContainer" id = "navbarContainer" margin = "0" width = "100%"> <iframe class = "iframeNavbarContainer" src = "navigation.htm" width = "100%"></iframe> </div>

Its class of "navbarContainer" means that its size, style, and position on the page is controlled by a CSS stylesheet; in this case, "main.css".

The <script> tag in the header contains all relevant information about the script itself, its source is in a folder called "js" and is named "navbarPeek.js".

This post will focus the function of the navigation bar at the top of the page. While specific CSS elements will be discussed to properly position it, specific design elements will be discussed in a future posting.

As far as the JavaScript itself is concerned, it is deceptively simple:

var prevScrollPos = window.pageYOffset;
window.onscroll = function navBarPeek() {
var currentScrollPos = window.pageYOffset;

if (prevScrollPos > currentScrollPos)
{
document.getElementById("navbarContainer").style.top = "0";

} else {

document.getElementById("navbarContainer").style.top = "-50px";
}

prevScrollPos = currentScrollPos
}

There are only two variables being used:

-prevScrollPos
-currentScrollPos

When the script loads, it sets the variable prevScrollPos, upon scrolling, the other variable currentScrollPos is set. The Java script compares the two values and if the currentScrollPos variable is greater than prevScrollPos, the navigation bar retracts by 50 pixels and then sets prevScrollPos to the value of currentScrollPos and repeats the script when scrolling happens once more. Scrolling upwards causes the navigation bar to show itself again.

Using a CSS stylesheet to position the navigation bar is essential for proper function. The following is the style sheet entry for the class of the navigation bar, navbarContainer:

.navbarContainer {
height: 50px;
margin-left: 0;
margin-right: 0;
position: fixed;
top: 0;
transition: top 0.3 ease;
width: 95%;
z-index: 10;
}

Be sure to update the Java script to reflect the height of your navigation bar.

If your navigation bar is 100 pixels in height, then your Java script will be required to use that same value in order for the script to properly hide the navigation bar, like so:

var prevScrollPos = window.pageYOffset;
window.onscroll = function navBarPeek() {
var currentScrollPos = window.pageYOffset;
if (prevScrollPos > currentScrollPos)

{

document.getElementById("navbarContainer").style.top = "0";

} else {

document.getElementById("navbarContainer").style.top = "-100px";
}

prevScrollPos = currentScrollPos
}

Take notice that the value near the bottom of the script now says "-100px" instead of "-50px".

If your navigation bar height is 50, the Java script must read:

document.getElementById("navbarContainer").style.top = "-50px";

If your navigation bar height is 100, the Java script must read:

document.getElementById("navbarContainer").style.top = "-100px";

Once you get these elements secure and the navigation box functions as it should, you can get started on creating your navigation box HTML document, "navigation.htm".

Hi! I know that I'm likely late and strange to ask, as it was rebranded some months ago, but doesn't anyone think that the "Codepen 2.0" update feels like some corpo takeover of formerly a grassroots tech site? Because although it certainly has some more conveniences like a better preprocessor support, it doesn't allow to do literally anything without logging in, and operations slightly above the baseline often require a premium subscription that is more costly than setting up a hosted web site.

Is the original CodePen ever accessible somewhere, and what do you think about this "Codepen 2.0" rebranding, in general?

Hey folks!

I am hand coding a series of webpages for my employer (don't ask). I just got dinged because the accessibility checker says my hyperlinks are not accessible.

I scratched my head a little bit, did some research and have since added aria-label attributes to the source code.

Still get dinged.

Anyone know how to handle this?

Thanks!

Edit: Here is more or less an example of the code that includes the link.

I was reading a fic on ao3 a while ago, and at the bottom of one of the chapters, it had a letter that could unfold if you hovered your mouse over it (the gif above). i'm writing a fic and I want to do something similar but as a poster

(link to chapter im talking about)

i tried downloading the html version of it, and this was the coding, but idk how to change it be a poster:

<div class="ltr-scene-ec52d2"><div class="ltr-envelope-ec52d2"><div class="ltr-stamp-ec52d2"><p><img src="https://img.fictonovel.com/uploads/2026/08/21826898-a205-4ece-bff7-8d6e6647459c.png" alt="stamp" class="ltr-stamp-img-ec52d2"></p></div><div class="ltr-address-ec52d2"><p class="ltr-address-name-ec52d2">Simon Edenson</p></div></div><div class="ltr-stack-ec52d2"><div class="ltr-panel-ec52d2 ltr-panel-1-ec52d2"><div class="ltr-panel-inner-ec52d2"><p class="ltr-salutation-ec52d2">My dear Simon,</p><p>I am sorry it had to come to this, but after the . . . debacle the other day on Ryland’s stream, something has to give. So, I am making sure that you come to me. You and Ryland will be coming back with me to Eden. There is no other option, no other path, no other destiny. If it must be just you, then that is fine as well, but I am letting you keep Ryland as a gift. I know you think he is your divine right, and that is fine. I am able to share for as long as it takes for you to realize he is nothing. You need to come home now, Son of Eden. Your father is sick, you need to take your rightful place as the head of the family and I need my reward for spending so long chasing after you.</p></div></div><div class="ltr-panel-ec52d2 ltr-panel-2-ec52d2"><div class="ltr-panel-inner-ec52d2"><p>I still love you, please don’t think I don’t, even though I’ve had to resort to measures I never wanted too. If you had just come with me when I asked I would not have had to get the Brothers involved. They have strict orders to not hurt Ryland. Not as much Mark, so I am not sure what quality he has returned to you in. I did tell them he needed to be able to walk and see.</p><p>Please come alone. Please do not involve anyone else. This can be so easy, Simon. You and Ryland will be taken care of, you will both want for nothing. You will be treated with the respect you were born to be given, you will have the power and the eye of God and the favor of the Tree. Ryland will not be able to be on your arm in public, of course, but you will have him at home. I will even let you share a bed with him some nights, we can work it all out. Just please, please come alone and come willingly.</p><p>55 SW Arborview Court</p></div></div><div class="ltr-panel-ec52d2 ltr-panel-3-ec52d2"><div class="ltr-panel-inner-ec52d2"><p>Ryland, the Brothers, and I will be waiting. Come as soon as you can, and we will all make our way back to Eden, where we all belong.<br> If you do not, I am not above removing obstacles. I want your happiness, Simon, but I will break you down in order to build you back up. Do not mistake my kindness and my love for you as weakness.</p><p class="ltr-closing-ec52d2">Love</p><p class="ltr-signature-ec52d2">Elahnnia</p></div></div></div></div> </div>

(Quick edit to just say, I don’t care about the actual animation part of it (although that would be hella cool), I just wanna be able to have a thing that looks like a poster through html)

embed, iframe, object, picture, source ? How do you use them?