Jump to content
Please Use CODE Tags

CSS: Centering does not work with relative footer

Hip
By Hip
in Programming
 Share
Posted

Hey guys,

 

somehow the logo I put in the middle of the screen is not that centered and those bars appear in the window when I set the position as relative. As fixed it is gone but the footer in the middle of the screen then what I dont want to have.

 

 

I want to have it like that:

 

image.png.3c619e31d3098b71883aaca93ab0957f.png

 

But instead I get this:

 

image.png.10ce372fc2378d7f6e3c3a47915ce29e.png

 

 

HTML:

  

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="../css/placeholder_stylesheet.css">
        <title>Hello World</title>

    </head>
    
    <body>
        <main id="main">
            <header id="header">
                <div id="logo">
                </div>
                    <div class="buttons-header">
                    </div>
            </header>


            <center>
                <div id="center-text">
                    
                </div>
            </center>
         </main>
    </body>
    <footer id="footer">
        <div id="footer-left">
        <aside>
            <ul class="list-unstyled">  
                <li><a href="/disclaimer/">Disclaimer</a></li>
                <li><a href="/privacy/">Privacy</a></li>
                <li><a href="/terms/">Terms</a></li>
                <li><a href="/faq/">FAQ</a></li>   
            </ul>
        </aside>
        </div>
         <div id="footer-right">
        <aside>
            <ul class="list-unstyled">  
                <li><a href="/Contact/">Contact</a></li>
                <li><a href="About us/">About us</a></li>
            </ul>
        </aside>
        </div>
    </footer>

</html>

 

CSS: 

*   
{
    margin: 0;
    padding: 0;
}


html, body  
{
    height: 100%;
    width: calc(100%-1em);
    -webkit-font-smoothing: antialiased;
}


/* == BODY == */

body    {
            background: #F2F2F2;
          
        }

/* HEADER */

#header
{
    margin-top: 10em;
    margin-left: 33%;
    margin-right: 5em;
    margin-bottom: 5em;
    justify-content: center;
    align-items: center;
    display: block;
    width: 50%;
}


#logo   
{
    margin-top: auto;
    width: calc(100%-1em);
    min-width: 100%;
    height: 7em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../Images/logo.svg);
    overflow: hidden;
}

img 
{
    max-width: 100%;
    height: auto;
    
}

        

/* CENTER */

#main   
{   
    padding-bottom: 4em;
    overflow: auto;
    min-height: 100%;
}


/* == FOOTER == */

#footer  {
            display: flex;
            background-color: black;
            width: 100%;
            height: 4em;
            margin-top: -4em;
            bottom: 0;
            position: fixed;
            padding: 3em;
            clear: both;
            text-decoration: none;
        }

#footer-left    {
                    display: inline-block;
                    float: left;
                    width: 50%;
                    height: 5em;
                }

#footer-right   {
                    display: inline-block;
                    width: 50%;
                    height: 5em;
                    float: left;
                }


ul     {
        list-style-type: none;
        }

a       {
        text-decoration: none;
        color: #F2F2F2;
        }

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Not entirely sure what your after, but this is what I came up with and maybe it will help.

 

Preview

Spoiler

image.thumb.png.55aa47293a9d365dc21ac8173cef992b.png

 

HTML

Spoiler 





<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <meta name="description" content="Test Page">
        <meta name="author" content="Nayr438">
        <link rel="stylesheet" href="./stylesheet.css">
    </head>

    <body>
        <!-- Start Header Content -->
        <div id='header'>
            <a id='logo' href='#'></a>
        </div>
        <!-- End Header Content -->

        <!-- Start Global Body Content -->
        <div id='content'>
            Some Content
        </div>
        <!-- End Global Body Content -->

        <!-- Start Footer Content -->
        <div id='footer'>
            <div id='footer_right'>
                <ul>
                    <li><a href="/Contact/">Contact</a></li>
                    <li><a href="About us/">About us</a></li>
                </ul>
                <ul>
                    <li><a href="/disclaimer/">Disclaimer</a></li>
                    <li><a href="/privacy/">Privacy</a></li>
                    <li><a href="/terms/">Terms</a></li>
                    <li><a href="/faq/">FAQ</a></li>
                </ul>
            </div>
        </div>
        <!-- End Footer Content -->
    </body>
</html>

 

 

CSS

Spoiler 



html, body {
    height: 100%;
    margin: 0px;
    background: black;
}

body {
    display: flex;
    flex-flow: column;
}

/* Start Header Content */
#header > #logo {
    margin: auto;
    display: block;
    width: 26em;
    height: 4.5em;
  	background: url("https://raw.githubusercontent.com/Nayr438/ltt_stylus_theme/master/images/AltLogoBanner_Unofficial_LTT.png") no-repeat;
    background-size: contain;
}
/* End Header Content */


/* Start Global Body Content */
#content
{
    flex: auto;
    background: grey;
}
/* End Global Body Content */

/* Start Footer Content */
#footer_right
{
    margin-right: 5em;
}

#footer_right > ul
{
    list-style-type: none;
    color: #F2F2F2;
    min-width: 10em;
    float: right;
}

#footer_right > ul > li > a
{
    text-decoration: none;
    color: inherit;
}
/* End Footer Content */

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
12 hours ago, Nayr438 said:

Not entirely sure what your after, but this is what I came up with and maybe it will help.

 

Preview

  Hide contents

image.thumb.png.55aa47293a9d365dc21ac8173cef992b.png

 

HTML

  Hide contents 






<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <meta name="description" content="Test Page">
        <meta name="author" content="Nayr438">
        <link rel="stylesheet" href="./stylesheet.css">
    </head>

    <body>
        <!-- Start Header Content -->
        <div id='header'>
            <a id='logo' href='#'></a>
        </div>
        <!-- End Header Content -->

        <!-- Start Global Body Content -->
        <div id='content'>
            Some Content
        </div>
        <!-- End Global Body Content -->

        <!-- Start Footer Content -->
        <div id='footer'>
            <div id='footer_right'>
                <ul>
                    <li><a href="/Contact/">Contact</a></li>
                    <li><a href="About us/">About us</a></li>
                </ul>
                <ul>
                    <li><a href="/disclaimer/">Disclaimer</a></li>
                    <li><a href="/privacy/">Privacy</a></li>
                    <li><a href="/terms/">Terms</a></li>
                    <li><a href="/faq/">FAQ</a></li>
                </ul>
            </div>
        </div>
        <!-- End Footer Content -->
    </body>
</html>

 

 

CSS

  Hide contents 






html, body {
    height: 100%;
    margin: 0px;
    background: black;
}

body {
    display: flex;
    flex-flow: column;
}

/* Start Header Content */
#header > #logo {
    margin: auto;
    display: block;
    width: 26em;
    height: 4.5em;
  	background: url("https://raw.githubusercontent.com/Nayr438/ltt_stylus_theme/master/images/AltLogoBanner_Unofficial_LTT.png") no-repeat;
    background-size: contain;
}
/* End Header Content */


/* Start Global Body Content */
#content
{
    flex: auto;
    background: grey;
}
/* End Global Body Content */

/* Start Footer Content */
#footer_right
{
    margin-right: 5em;
}

#footer_right > ul
{
    list-style-type: none;
    color: #F2F2F2;
    min-width: 10em;
    float: right;
}

#footer_right > ul > li > a
{
    text-decoration: none;
    color: inherit;
}
/* End Footer Content */

 

Unfortunately thats not completely what I am looking for. I want to have  the footer lists next to each other even when the display size is really small. So thats working with my code. But then the whole somehow is too big for the screen and a horizonbal scroll bar is showing.

Unfortunately thats not completely what I am looking for. I want to have  the footer lists next to each other even when the display size is really small. So thats working with my code. But then the whole somehow is too big for the screen and a horizonbal scroll bar is showing.

Fixed it with :  

 overflow-x: hidden; in the body

 

Also I want to center the logo I have in the main part. Do you know any other method than using width-left: 33%? Thanks!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
21 hours ago, Hip said:

overflow-x: hidden; in the body

Can I ask why you don't want it to overflow. That's just telling it to cut off any content and keep it from being displayed. You might consider just resizing your elements to fit in the space and continue to let it overflow for edge cases.

 

So I am getting that your wanting to make this more mobile friendly. I would recommend using the img tag so you can resize in both directions.

I would do something like this, which will also auto center it. 

        <!-- Start Header Content -->
        <div id='header'>
            <a id='logo' href='#'><img src='https://raw.githubusercontent.com/Nayr438/ltt_stylus_theme/master/images/AltLogoBanner_Unofficial_LTT.png' /></a>
        </div>
        <!-- End Header Content -->

  

/* Start Header Content */
#header {
    display: flex;
}

#header > #logo {
    margin: auto;
    width: 30em;
}

#header > #logo > img
{
    max-width: 100%;
    height: auto;
}
/* End Header Content */

 

I also made some changes to the original I shared, that's maybe a little more friendly in the footer.

Spoiler

Preview Full

Spoiler

image.thumb.png.6dde2f631defb0be168183935e1ed242.png

 

Preview Small

 

Spoiler

image.png.cb6c044fcfd79328c50796a62ef8409a.png

 

HTML

Spoiler 





<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <meta name="description" content="Test Page">
        <meta name="author" content="Nayr438">
        <link rel="stylesheet" href="./stylesheet.css">
    </head>

    <body>
        <!-- Start Header Content -->
        <div id='header'>
            <a id='logo' href='#'><img src='https://raw.githubusercontent.com/Nayr438/ltt_stylus_theme/master/images/AltLogoBanner_Unofficial_LTT.png' /></a>
        </div>
        <!-- End Header Content -->

        <!-- Start Global Body Content -->
        <div id='content'>
            Some Content
        </div>
        <!-- End Global Body Content -->

        <!-- Start Footer Content -->
        <div id='footer'>
            <div id='footer_right'>
                <ul>
                    <li><a href="/Contact/">Contact</a></li>
                    <li><a href="About us/">About us</a></li>
                </ul>
                <ul>
                    <li><a href="/disclaimer/">Disclaimer</a></li>
                    <li><a href="/privacy/">Privacy</a></li>
                    <li><a href="/terms/">Terms</a></li>
                    <li><a href="/faq/">FAQ</a></li>
                </ul>
                 <ul>
                    <li><a href="/disclaimer/">Disclaimer</a></li>
                    <li><a href="/privacy/">Privacy</a></li>
                    <li><a href="/terms/">Terms</a></li>
                    <li><a href="/faq/">FAQ</a></li>
                </ul>
            </div>
        </div>
        <!-- End Footer Content -->
    </body>
</html>

 

 

CSS

Spoiler 





html, body {
    height: 100%;
    margin: 0px;
    background: black;
}

body {
    display: flex;
    flex-flow: column;
    overflow-x: hidden;
}

/* Start Header Content */
#header {
    display: flex;
}

#header > #logo {
    margin: auto;
    width: 30em;
}

#header > #logo > img
{
    max-width: 100%;
    height: auto;
}
/* End Header Content */


/* Start Global Body Content */
#content
{
    flex: auto;
    background: grey;
}
/* End Global Body Content */

/* Start Footer Content */
#footer
{
    text-align: center;
}
#footer_right
{
    display: inline-block;
    text-align: left;
}

#footer_right > ul
{
    padding: 0 2em;
    width: auto;
    list-style-type: none;
    color: #F2F2F2;
    float: right;
}

#footer_right > ul > li > a
{
    text-decoration: none;
    color: inherit;
}
/* End Footer Content */

 

 

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×