Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. 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.
  2. In the two places where it says padding: 14px 16px; replace 14px with a smaller number.
  3. 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>
  4. You can center the content using flex box: .flip-box-front, .flip-box-back { display: flex; flex-direction: column; justify-content: center; }
  5. Ingolme

    Image Gallery

    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; }
  6. Ingolme

    CSS Grid

    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; }
  7. There's no need to memorize anything. You just need to understand enough to know what to look for when you need it.
  8. 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
  9. 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
  10. 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; }
  11. 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.
  12. 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
  13. 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); }
  14. 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.
  15. 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.
  16. 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.
  17. 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>
  18. 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.
  19. 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"
  20. 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.
  21. It's probably reloading the page because of the links. If you remove the <a href=""> tags it should work.
  22. The invalid column name might be because of the quotation marks. Try wrapping UserID in backticks `UserID`
  23. CSS can do it, it's pretty simple. You can read about the CSS position:sticky; in this tutorial page: https://www.w3schools.com/css/css_positioning.asp
  24. The forums have always been community driven. Answers are provided by other forum members. In recent years the forums have become much less active so there are fewer people available to answer questions.
  25. Here are some tweaks I made to the CSS to get it to align to the right. You just need to replace the existing .topnav, .topnav a and .dropdown rules with these ones: .topnav { text-align: right; overflow: hidden; background-color: #333; } .topnav a { display: inline-block; vertical-align: middle; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .dropdown { display: inline-block; vertical-align: middle; overflow: hidden; }
×
×
  • Create New...