• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS footer

yovel45e

New Coder
<footer style="text-align: cennter; padding: 10px; background-color: rgb(122, 122, 122); color: white; font-family: 'Shalimar', cursive; font-size: 1.5em;border-radius: 10px;right: 0;bottom: 0;">
-example site-
</footer>
Hey I started writing this code and for some reason this footer keeps being in the center of the site
how do i bring it down to the bottom of the page?
 

yovel45e

New Coder
Add your other codes.
Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <body style="background-color:  rgb(45, 45, 45)">

            <!-- Fonts -->
            <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=Shalimar&display=swap" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
             <!-- Fonts -->

            <meta charset="Urf-8">
            <meta name="description" content="this is my website">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
    
            <title>Yovel</title>
            <center> 

                <header style="text-align: cennter; padding: 12px; background-color: rgb(122, 122, 122); color: white; font-family: 'Indie Flower', cursive;
                font-size: 70px;border-radius: 10px;">
                    Yovel Partush example site
                </header>
        
        </center>
        
        
            
            <center style="display: block; margin-left: auto; margin-right: auto; width: 100%;">
                <img style="border-radius: 45%; margin-top: 100px;" width="100" src="profile 2.jpg" alt="avatar" class="image">
                <h2 style="color: rgb(154, 106, 248);"><b><u><i>About me</b></i></u>
                </h2>
                
                <h3 style="margin-right: 0%; background-color: rgb(54, 53, 53);color: white; border-style: outset; width: fit-content; text-align: justify; padding: 5px;color: aquamarine;border-color: aqua;">My name is Yovel Partush.<br> Working as a security man.<br> Student of Full stack development.<br> 23 years old.</h3>
      
          
        <a href="http://www.google.com"
                <footer style="text-align: cennter; padding: 10px; background-color: rgb(122, 122, 122); color: white; font-family: 'Shalimar', cursive; font-size: 1.5em;border-radius: 10px;right: 0;bottom: 0;position: fixed;cursor: pointer;">
                    #examplesite
                </footer>
                <Footer style="text-align: center;padding: 10px;background-color: rgb(122, 122, 122);position: fixed;bottom: 0;left: 0;border-radius: 10px;font-size: 1.5em;color: white;font-family: shalimar;cursor: pointer;">
                    #examplesite
                </Footer>
            </center>
        </style> 
    
        </body>
    
</html>
WhatsApp Image 2022-10-28 at 01.04.45.jpeg
I was trying instead of those #examplesite at the bottom , to make footer like the header, and make it sticky to the bottom of page.
 

cbreemer

King Coder
It's time for my mantra again... Whenever something in your HTML/CSS does't work as expected, run your code through a HTML validator. Do it now, and be amazed at how many errors you have. I don't guarantee that your footer will then be in the right place, but by all means clean up your code first of all.
 

menator01

King Coder
Like cbreemer suggested, you should use a validator. There are many errors in your code.
That being said, are you trying to get something like this?
 

Attachments

  • Screenshot from 2022-10-30 12-39-58.png
    Screenshot from 2022-10-30 12-39-58.png
    308.5 KB · Views: 3

menator01

King Coder
Sure, here ya go. A liitle bit different than the above. Been playing around a bit.

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Page</title>
        <meta charset="utf-8">
        <meta name="description" content="This is my site">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background-color: rgb(45,45,45);
            }
            h1 {
                text-align: center;
                padding: 12px;
                background-color: rgb(122,122,122);
                background-image: linear-gradient(rgb(100,100,100), rgb(150,150,150));
                color: white;
                font-family: 'Indie Flower', cursive;
                font-size: 70px;
                border-radius: 10px;
                box-shadow: 0px 0px .35em rgba(0,0,0,1);
                margin-top: .15em;
                text-shadow: 2px 2px 2px rgb(10,10,10);
            }
            h2 {
                color: rgb(154,106,248);
                font-weight: bold;
                font-style: italic;
                text-decoration: underline;
                text-align: center;
                width: 10em;
            }
            p {
                border:solid 3px slategray;
                padding: 1em;
                width: 30%;
                color: white;
                text-shadow: 1px 1px 2px black;
                box-shadow: 0px 0px 8px rgba(0,0,0,1);
                border-radius: 10px;
                margin-bottom: 3em;
                text-indent: 1em;
                background-image: linear-gradient(rgb(50,50,50), rgb(80,80,80));
                font-size: 1.25em;
            }
            footer {
                text-align: center;
                color: white;
                font-size: 1.5em;
                font-family: Shalimar, cursive;
                position: fixed;
                bottom:80px;
            }
            footer :any-link {
                color: white;
                text-shadow: 1px 1px 2px black;
                text-decoration: none;
                font-size: 2.25em;
                border-radius: 10px;
                background-color: rgb(122,122,122);
                padding-left: 5px;
                padding-right: 5px;
                font-weight: bold;
                box-shadow: 0px 0px 4px black;
            }
            footer :hover {
                color: orangered;
                background-color: beige;
                font-weight: bold;
                padding-left: 5px;
                padding-right: 5px;
                font-size: 2.25em;
                box-shadow: 0px 0px 2px black;
            }

            .main-footer {
                position:fixed;
                bottom: 2px;
                text-align: center;
                padding: 12px;
                background-color: rgb(122,122,122);
                background-image: linear-gradient(rgb(100,100,100), rgb(150,150,150));
                color: white;
                font-family: 'Indie Flower', cursive;
                font-size: 1.50em;
                border-radius: 10px;
                box-shadow: 0px 0px .35em rgba(0,0,0,1);
                text-shadow: 2px 2px 2px rgb(10,10,10);
                width: 98.5%;
            }
            .left {
                position: fixed;
                left: 10px;
            }
            .right {
                position: fixed;
                right: 10px;
            }
            .ratt-container {
                display: flex;
                border: solid 1px black;
                border-radius: 50%;
                width: 120px;
                height: 120px;
                box-shadow: 0px 0px 1.35em rgba(0,0,0,1);
                background-color: rgba(50,50,50, 0.5);
    
            }
            .center-h {
                display: flex;
                justify-content: center;
            }
            .center-v {
                display: flex;
                align-items: center;
            }
            img {
                width: 100px;
            }
            table {
                box-shadow: 0px 0px 8px rgba(0,0,0,1);
                border-spacing: 8px;
                border-radius: 10px;
                width: 32%;
            }
            table td {
                border: solid 1px black;
                font-size: 1.75em;
                color: rgb(200,200,200);
                text-shadow: 2px 2px 3px black;
                padding: 8px;
                box-shadow: 0px 0px 4px black;
            }
            .leftimg {
                width: 40%;
                background-color: rgba(20, 20, 20, 0.5);
            }
        </style>
        <link rel="shortcut icon" href="ratt.svg" type="image/x-icon">
        <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Shalimar&display=swap" rel="stylesheet">
    </head>
    <body>
        <h1>Some Site Header</h1>
        <div class="center-h center-v">
            <div class="center-h center-v ratt-container">
                <img src="ratt.svg" class="img" alt="my image">
            </div>
        </div>
        
        <div class="center-h center-v">
            <h2>About Me</h2>
        </div>
        <div class="center-h center-v">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
                dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
        <div class="center-h center-v">
            <table>
                <colgroup>
                    <col style="background-size: cover; background-color: rgb(125,120,120); background-image: url(ratt.svg); background-repeat: no-repeat;">
                    <col style="background-image: linear-gradient(rgb(30,30,30), rgb(100,100,100), rgb(30,30,30));">
                    <col style="background-image: linear-gradient(rgb(30,30,30), rgb(100,100,100), rgb(30,30,30));">
                </colgroup>
                <tr>
                    <td class="leftimg"></td>
                    <td>Row 1 Mid</td>
                    <td>Hello Right</td>
                </tr>
                <tr>
                    <td class="leftimg"></td>
                    <td>Row 2 Mid</td>
                    <td>Mid Right</td>
                </tr>
                <tr>
                    <td class="leftimg"></td>
                    <td>Row 3 Mid</td>
                    <td>Right Bottom</td>
                </tr>
                
            </table>
        </div>
        <footer class="left footer"><a href='http://google.com'>Google</a></footer>
        <footer class="right footer"><a href='http://duckduckgo.com'>DuckDuckGo</a></footer>
        <footer class="main-footer">Gaming-Rat Productions &copy; 10/30/22</footer>
    </body>
</html>
 

Attachments

  • Screenshot from 2022-10-30 21-56-19.png
    Screenshot from 2022-10-30 21-56-19.png
    349.7 KB · Views: 11
Last edited:
Top