Ingolme

November 12, 2023

The content at the bottom of the page has to be manually put there by you, then you can have links that point to it using the #hash part of the URL

In your page content your code should look like this:

<abbr title="InterPlanetary File System">IPFS</abbr><sup><a href="#reference-1">1</a></sup>

Then you have to add this to the references section of your page. The id attribute has to match the href of the link above.

<h2>References</h2>
<ol>
  <li id="reference-1"><a href="https://wikipedia.org/wiki/IPFS">IPFS on wikipedia</a></li>
</ol>

November 12, 2023

Oh, the URL of the background image is relative to the location of the stylesheet.

You would have to write it like this:

background-image:url('../images/background.jpg');

November 11, 2023

It looks as if there might be other rules further down in the stylesheet which are overriding it.

October 31, 2023

It requires some advanced knowledge but here's the API to implement it: https://developers.facebook.com/products/facebook-login/

October 28, 2023

There are two images. A small one embedded on the page and a large one that the link goes to.

In its most basic form it's just this:

<a href="large-image.jpg">
  <img src="small-image.jpg">
</a>

They might have server-side code which generates the image files when they create the article but there's nothing special happening in the browser.

October 23, 2023

In the two places where it says padding: 14px 16px; replace 14px with a smaller number.

October 3, 2023

Youtube URLs are not video files. If you'd like to embed a Youtube video onto your site you can find the correct HTML by clicking on the "Share" button on the Youtube video and then selecting "embed"

Here's the code for your video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ubt7ypQ-qGc?si=GVmp2zue9Sa2kxHM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

September 24, 2023

You can center the content using flex box:

.flip-box-front, .flip-box-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

September 23, 2023

It depends on the structure of your HTML. You can try making each one of the boxes a flex-box and use flex box rules to center the image inside the box.

div.gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

September 21, 2023

I thought I could make a couple of changes and explain how to fix it, but rewriting it to make it simpler was a better option.

You don't need to set widths, heights and margins on everything. The grid divides all the space evenly into columns and rows which already have their width and heights automatically set. If you set a width, the box will change its size, but nothing around it will relocate to account for that because the space reserved for it by the grid hasn't changed.

Here's some simplified CSS and I updated the class names in the HTML to be more meaningful. I fixed some mismatched <head> and <body> tags which might mess with the layout as well.

<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta http-equiv="content-type" content="text/html" 
    charset=UTF-8>
    <link rel="stylesheet" type="text/css" 
    href="styles.css" media="screen" />
      <title>GRID</title>
</head>
<body>
      
  <div class="grid-container">
    <div class="name">Name</div>
    <div class="photo">Photo</div>
    <div class="birth">Birth</div>  
    <div class="birth-details">Date:<br>
                       Place:<br>
                       Mother:<br>
                       Father:</div>
    <div class="marriage">Marriage</div>
    <div class="marriage-details">Spouse:<br>
                       Date:<br>
                       Place:</div>
    <div class="death">Death</div>
    <div class="death-details">Date:<br>
                       Place:<br>
                       Burial: </div>
    <div class="children">Children</div>
    <div class="bio">Bio </div>
    <div class="thumbnails">Thumbnails</div>
  </div>
</body>
      

</html>

CSS

.grid-container 
{
  display: grid;
  background-color: rgb(234, 217, 201);
  row-gap: .25px;
  margin-left: auto;
  margin-right: auto;
  border-style:ridge; 
  border-width: 3px;
  border-radius:20px;
  width: 860px;
  grid-template-areas:
    'name name name name name name name name'
    'photo photo photo birth birth-details birth-details birth-details birth-details'  
    'photo photo photo marriage marriage-details marriage-details marriage-details marriage-details'
    'photo photo photo death death-details death-details death-details death-details'
    'bio bio bio bio bio bio bio bio'
    'children children children children children children children children'
    'thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails';
}

.grid-container > div 
{
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding-left: 9px;
  padding-top: 1px;
  font-size: 11px;
  border-style:ridge; 
  border-width: 2.5px;
  border-radius:20px;
  margin: 5px;
}

.grid-container > .name
{ 
  grid-area: name;
  height: 40px;
  margin-left: 130px;
  margin-right: 130px;
  margin-bottom: 10px;
  text-align: center;
  border-style:ridge; 
  border-width: 5px;
  border-radius:10px;
}
.photo { grid-area: photo; }
.birth { grid-area: birth; }
.birth-details { grid-area: birth-details; }
.marriage { grid-area: marriage; }
.marriage-details { grid-area: marriage-details;}
.death { grid-area: death;}
.death-details { grid-area: death-details; }

.children 
{ 
  grid-area: children;
  height: 35px;
}

.bio 
{ 
  grid-area: bio; 
  height: 95px;
}

.thumbnails 
{ 
  grid-area: thumbnails; 
  height: 55px;
}

September 21, 2023

There's no need to memorize anything. You just need to understand enough to know what to look for when you need it.

September 19, 2023

Flexbox isn't able to do that. Flexbox puts items one after another into rows or columns. To fit something like this into your flexbox layout you would need those three rows to be inside a container which is part of the parent flexbox layout.

The CSS grid is probably a better tool for what you're trying to accomplish: https://www.w3schools.com/css/css_grid.asp

September 18, 2023

It's a matter of specificity. Selectors that are more specific take priority and override rules of other selectors. This page describes which selectors are more specific: https://www.w3schools.com/css/css_specificity.asp

Assuming that your .name element is a child of .flex-container, then this selector should allow you to change the font size:

.flex-container .name

September 17, 2023

A flex container is a block element by default. The way to center blocks is to set the left and right margins to "auto" like in this code:

.flex-container {
  display: flex;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

September 16, 2023

I answered the first one in your other thread. It selects items inside the container.

.flex-container is a class selector. It selects any element where which has class="flex-container" as an attribute. You could replace "flex-container" with anything you like. The information about the class selector is on this page: https://www.w3schools.com/css/css_selectors.asp

align-items centers them vertically. If you want horizontal centering you can use justify-content. Here's a reference page for justify-content: https://www.w3schools.com/cssref/css3_pr_justify-content.php

When you don't set the width of an element it automatically fills the entire width available. You can give it a width but in most cases this standard behavior is desirable.

Yes, the numbers are text and they're centered horizontally due to the text-align property.

September 16, 2023

The ">" is a child selector. It selects all <div> elements which are contained inside an element with class="flex-container"

Information about it and similar things is on this page: https://www.w3schools.com/css/css_combinators.asp

August 25, 2023

Find the position of the substring, then get everything up to that position.

let pos = document.URL.indexOf("#blah");
let address = document.URL;
if(pos >= 0) {
  address = address.substr(0, pos);
}

August 23, 2023

I can't remember exactly. I think they did most of the changes sometime late last year, though it might be even earlier than that.

August 23, 2023

Yes, if you opened the HTML file from your laptop that's probably the cause of the error.

You can install a local server on your laptop if you want to test these kinds of things on your laptop. WAMP or XAMPP are relatively easy to install and let your laptop act like a real server.

June 23, 2023

That is not the W3Schools website, it's an unrelated website named "3schools"

This page on the official W3Schools website has the information: https://www.w3schools.com/howto/howto_google_translate.asp

Since this code loads data from an external API it may not work in an HTML file on your desktop but it should work when running on a proper web server.

June 13, 2023

Here's an example, paste this into the TryIt editor:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}

.anchor {
  padding-top:48px;
  margin-top: -48px;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#section1">Section1</a>
  <a href="#section2">Section2</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h1>Fixed Top Menu</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <h2 class="anchor" id="section1">Section 1</h2>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <h2 class="anchor" id="section2">Section 2</h2>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

June 13, 2023

I'd have to see your page to see exactly what the problem is and how to solve it.

If your sticky header is 60 pixels tall, then you can add 60px padding at the top of the element you're linking to, the one with the id attribute.

June 12, 2023

If you give the target element some top padding the size of the header then the content will appear below it. Another option is to have the target element be empty and shift it upwards using "position:relative"

June 11, 2023

The internet has changed, forums are a mostly forgotten medium. People get their information from social media sites and Discord channels. Speaking of that, W3Schools has a Discord channel link under the "Services" menu of their website. The link to the forums is very tiny in the website footer.

June 4, 2023

It's probably reloading the page because of the links. If you remove the <a href=""> tags it should work.

Sign In

Ingolme

Posts

Joined

Last visited

Days Won

Content Type

Profiles

Forums

Events

Posts posted by Ingolme

how create references like on wikipedia pages without using .js?

Background image not displaying but background color is

Background image not displaying but background color is

How do you go about coding the 'sign up using' bit?

There's a mysterious (to me) self-adjusting function for images...

How to set the height with CSS Dropdown Navbar

<video> tag does not work

How to center text in a box?

Image Gallery

CSS Grid

Common Image Format

Flexbox Container Positioning

Setting Font Size in Flexbox Child Container to a Different Value

Can a Flex Container be Centered?

Another CSS Flexbox Question

CSS Flexbox Tutorial

How to delete substring beginning with "#blah" until end?

How long has that tutorial portal system been around on here for?

HTML5 download attribute is not working at all on all browsers

This code will not work off your website - Why?

"Jump to" links on a fixed header?

"Jump to" links on a fixed header?

"Jump to" links on a fixed header?

Ambiguous Column

Popup menu display and immediately disappears - why?

Browse

Activity