1

i have tried a couple of fixes and even turned to chatGPT-4o (right after i looke on the internet and docs)

I want to get this to be my error page which i redirect from a page i am fixing to ensure the people who use my projects know they are either broken or are being worked on. I primarily do countdowns, but i also do other stuff too! CSS is not my strong suite but i wanted to step out of my comfort zone so i tried it an i am not about to waste the 10+ hours i spent of my life just to go back into my comfort zone and do just html.

my html code hub: https://dateclock.w3spaces.com/hub.html

here is the code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <div class="page-setup">
    <link rel="icon" href="https://th.bing.com/th/id/OIP.0Z295SNshKyJSCHaQNNjcAHaHa?rs=1&pid=ImgDetMain">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CD ERR PAGE</title>
    <style>
        body { 
            background-color: #ff0000; /* set background color to red */
            text-align: center; /* center the text */
            margin :0; /*remove default margin */
            padding: 0; /* remove default padding*/
        
        }
        .content {
        padding: 20px; /*add padding to create space around content */
        box-sizing: border-box; /*include padding in width calculation */
        }
        h1 {
            font-size: 24px; /* Adjust as needed */
            color: white; /* Customize the color */
        }
        p {
            font-size: 16px; /* Adjust as needed */
            color: white; /* cusomize as needed */
        }
        footer{
        position: relative; /* Ensure footer content is contained */
        width: 100%; /* Full width */
        height: 50px; /* set fixed height for iframe container */
        overflow: hidden; /* Hide any overflow */
        
    }
    .iframe-container {
    width: 730px; /* occupy full width of container*/
    max-width: 100%; /* set limit for width */
    height: 500px; /* set height for iframe content */
    border: 3px solid white; /* add a 3px solid white border */
    display: flex;
    justify-content: center; /* center the iframe content */
    align-items: center; /* ensure the content is centered */
    }
    iframe {
    display: block;
    width: 100%; /*  width of footer */
    height: 100%; /* full height of footer*/
    border: none;
    }
    </style>
    </div>
</head>
<body>
    <div class="content">
    <h1>Sorry, this countdown is currently broken or is being worked on.</h1>
    <p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML hub</a>.</b></p>
    <p><b>This issue will be resolved shortly.</b></p>
    </div>
    <footer>
        <div class="iframe-container">
        <iframe src="https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif"></iframe>
        </div>
    </footer>
</body>
</html>
Improve this question
1
  • What will CSS do to redirect? Use JS or try this simple approach. Add this, change time and url <meta http-equiv="refresh" content="0; url=newpage.com" />
    – JulesUK
    Commented Jul 7 at 16:20

1 Answer 1

Reset to default
0

Why did you use Iframe and place it in footer? I don't know, but here is solution:

 body { 
      background-color: #ff0000; /* set background color to red */
      text-align: center; /* center the text */
      margin :0; /*remove default margin */
      padding: 0; /* remove default padding*/
      }
.content {
       display: flex;
       flex-direction: column;
       align-items:center;
       box-sizing: border-box; /*include padding in width calculation */
}
h1 {
   font-size: 24px; /* Adjust as needed */
}
p {
  font-size: 16px; 
}
p,h1{
  color: white; 
}
.pic-container {
    width: 730px; /* occupy full width of container*/
    max-width: 100%; /* set limit for width */
    height: 500px; /* set height for iframe content */
    border: 3px solid white; /* add a 3px solid white border */
    display: flex;
    justify-content: center; /* center the iframe content */
    align-items: center; /* ensure the content is centered */
    }
#MyPicture{
    width: 100%; /*  width of footer */
    height: 100%; /* full height of footer*/
    background-image:url("https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif");
    border: none;
}
<div class="content">
    <h1>Sorry, this countdown is currently broken or is being worked on.</h1>
    <p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML      hub</a>.</b></p>
    <p><b>This issue will be resolved shortly.</b></p>
   <div class="pic-container">
          <div id="MyPicture"></div>
   </div>
</div>

Improve this answer
3
  • the reason is because it is at the bottom of the page hence me putting i in the footer...
    – Adam Hardwick
    Commented Jul 8 at 2:07
  • Footer is not for placing images like the one you used. One way or another if I solve your problem you can click my post to make it solution.... if you like ;)
    – ProgramistaZaDyche
    Commented Jul 8 at 14:00
  • I had no idea about that because I learned HTML on my own. also, how would I go about installing it into my code?
    – Adam Hardwick
    Commented Jul 8 at 15:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.