40
Replies
Use your browser's Inspect Feature.
Right-click ⇒ Inspect (F12 function key).
See screenshot from https://www.bassett.net/pages/david2.shtml
First thanks is for the F12 tip. I knew something like that existed, but I couldn't find it for the life of me. I've put that tip into my Dreamweaver notes AND my Firefox note, so that next time, I'll find it.
Next, now that I'm using the inspector, I see that I was looking at the html and shtml files and forgot to look in the css file (great that it even tells you the line number)
However, although I now have
#left {
margin-left: 2px;
margin-right: 0%;
and have uploaded it, the inspector still is showing the old figures.
If I change using the inspector, I'm getting more what I expected.
So, why does it work via the inspector? That doesn't save the underlying css file, right? That's just an "on the fly" trial? I will work on the excess codes while I await your reply of what I did wrong this time., and why it's not reading the updated css.
Also fix your code errors. Your page contains duplicate tags before and after the <body>. Only one set of tags are allowed. Remove excess code from your server-side include files.
https://validator.w3.org/check?verbose=1&uri=https%3A%2F%2Fwww.bassett.net%2Fpages%2Fdavid2.shtml
Basic HTML page.
#collapse {
width: 95%;
border: 1px solid red /**THIS IS FOR DEMO PURPOSES ONLY**/
}
.panel {padding: 0 18px; /**OMIT**/width: 100%; /**OMIT**/display: none; /**OMIT**/
background-color: white;overflow: hidden; /**OMIT**/
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 20px;
}
Screenshot with these changes.
I didn't get the red border...
By @Kathryn - Pasadena CA
===========
The screenshot image should be self-evident. The red border shows an outline around your #collapse Div so you can see what you're working with.
The other problems can't be addressed until you first resolve the code errors.
Window ⇒ Results ⇒ Validation... Check Document & fix reported errors.
My advice is to remove negative margins from your CSS. They create far more problems than they fix.
Have a pleasant Memorial Day of Remembrance.
May I suggest an alternative approach?
Copy and paste the following code into a new document and view it in your favourite browser:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Bassett 1945-2025</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="http://bassett.net">Home - Bassett.net</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Main Container -->
<div class="container mt-4">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3">
<div class="card">
<img src="/photos/family/2025-05-02-justDave.jpg" class="card-img-top img-fluid" alt="David Bassett">
<div class="card-body text-center">
<h5 class="card-title">Kathryn & Dave</h5>
<p>2008 Trip to Alaska</p>
</div>
</div>
</div>
<!-- Content Section -->
<div class="col-md-9">
<h1>David Bassett 2 May 1945 - 16 May 2025</h1>
<!-- Accordion Section -->
<div class="accordion" id="biographyAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#birthYears">
Birth and Elementary Years
</button>
</h2>
<div id="birthYears" class="accordion-collapse collapse" data-bs-parent="#biographyAccordion">
<div class="accordion-body">
<p>Born to Charles Harold Bassett and Sarah Gertrude Jones.</p>
<p>Coming soon: Various pictures including the Model T he learned to drive on.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#highSchool">
High School and Vietnam
</button>
</h2>
<div id="highSchool" class="accordion-collapse collapse" data-bs-parent="#biographyAccordion">
<div class="accordion-body">
<p>Stories from his time in the service, including Vietnam, Bob Hope’s visit, and more.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#workingYears">
Working Years
</button>
</h2>
<div id="workingYears" class="accordion-collapse collapse" data-bs-parent="#biographyAccordion">
<div class="accordion-body">
<p>Details about his teaching career, construction experience, and locksmith work.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
How did I get this code? I opened your current page in my Edge browser. Then I opened Copilot (top right corner of the browser) and asked to "give me the HTML code for the whole document using Bootstrap 5.3"
This was the reply:
Here's a modernized version of your document using Bootstrap 5.3 for improved responsiveness, accessibility, and styling. It replaces custom JavaScript accordions, outdated inline styles, and manual layout structures with Bootstrap components.
Key Improvements:
- Bootstrap grid system (`container`, `row`, `col-*`) for proper responsiveness.
- ccordion component for collapsible sections.
- Navbar for intuitive site navigation.
- Bootstrap card components for structured content.
- Image responsiveness (`img-fluid`) for better display on all devices.
---
Updated HTML Code Using Bootstrap 5.3
(as shown above)
Additional Enhancements
Fully responsive layout using Bootstrap grid.
Improved readability with better font sizing and spacing.
Bootstrap components replace custom styles and scripts.
Accordion system for structured content browsing.
Would you like additional features, such as a footer or contact form? 😊
The result:
Try it for yourself, you'll be surprised!
Got it! Lack of sleep struck again making me not see the obvious pattern.
https://www.bassett.net/pages/bootstrap.html Now the only thing left (for this page anyway), is what am I doing wrong with the H1 and image. I have <h1 align="center"> and <img align="center". The heading centers, but the image does not, so what's wrong there? Did I misplace the center part of the code?
By @Kathryn - Pasadena CA
As you are using Bootstrap in the example use some dedicated Bootstrap css classes (see in red below):
<h1 class="text-center">David Bassett<br>2 May 1945 - 16 May 2025</h1>
<img class="mx-auto d-block" src="/photos/family/2025-05-02-justDave.jpg width="555" alt="David Bassett">
That should do it!
AdChoices