HTML page elements alignment and style Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    HTML page elements alignment and style

    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°1

    HTML page elements alignment and style Empty HTML page elements alignment and style

    Post by Kami-sama June 20th 2017, 12:31 am

    Hey guys!

    Take a look at the screenshot attached.
    What is the correct way to arrange these elements?
    So far my style sheet looks like a huge mess ://
    I am a bit lost with the positions. Especially how to position div ABOVE footer -.-

    Screenshot:


    Last edited by Kami-sama on June 20th 2017, 3:00 pm; edited 1 time in total
    • Back to top
    masesm
    masesm
    masesm
    Forumember


    Male Posts : 75
    Reputation : 7
    Language : Java, C++, C#, Python, JavaScript, PHP, MySQL, AWS
    Location : United States
    • Post n°2

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by masesm June 20th 2017, 2:21 am

    Use z-index to arrange what goes on top of what. Relative positioning works great with z-index. You can use positive or negative numbers. To arrange things, you must know that it's not easy to understand how to keep the footer at the bottom, but this might help: http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css. 


    Also, when you come to assign the width of each div, use percentages. ie:

    Code:

    #background{

    position: relative;

    width: 70%;


    z-index: -999;


    }



    Hope this helps
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°3

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 20th 2017, 11:50 am

    Oh great! z-index was exactly what I'm looking for.
    The only issue now would be with DIV element centering.
    If position added to it, it is placed in the bottom, but no longer centered.
    Without position it is centered, but not in the bottom -.-
    And how does it look in general? Correct enough?

    EDIT: lol, solved the centering with
    Code:
    right: 0;
    left: 0;
    position: fixed;
    Very Happy so all good. JUst let me know if the code looks tidy enough, what could be improved? Smile

    EDIT2: another thing considering the style. In the forum our language has UNICODE characters. Yet when I add any it in the HTML page, unicode characters are not displayed :/ any idea why?
    Code:
    <html>
    <head>
    <style>
    body {
      background-color: red;
    }
    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 10px;
      background-color: #eeede5;
      text-align: center;
      z-index: -1;
    }
     
    .elem1 {
      background-color: green;
      width: 484px;
      height: 200px;
      margin-left: auto;
      margin-right: auto;
      bottom: 0;
    }
    </style>
    </head>
    <body>
    <div class="elem1">
       TEXT
    </div>
    <div class="footer">
      <a href="https://www.forumlt.com" target="_blank">forumlt.com</a>
    </div>
    </body>
    </html>
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°4

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Draxion June 20th 2017, 2:31 pm

    Here's a tidier version of that code if you would like it.
    Code:
    <html>

    <head>
      <style>
        body {
          background-color: red;
        }
        .footer {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          padding: 10px;
          background-color: #eeede5;
          text-align: center;
          z-index: -1;
        }
       
        .elem1 {
          background-color: green;
          width: 484px;
          height: 200px;
          margin-left: auto;
          margin-right: auto;
          bottom: 0;
        }
      </style>
    </head>

    <body>
      <div class="elem1">
        TEXT
      </div>
      <div class="footer">
        <a href="https://www.forumlt.com" target="_blank">forumlt.com</a>
      </div>
    </body>

    </html>
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°5

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 20th 2017, 2:59 pm

    I meant more the coding, not spacing, but thanks Wink

    Couple more alignment things I am working on.
    Header contains an image. How to properly center in vertically?
    Style:
    Code:
    .header {
      background-image: url("https://i.solidfiles.com/Dk6R4NKYPzZp8.png");
      background-size: cover;
      background-attachment: fixed;
      background-position: top;
      width: 100%;
      height: 536px;
      top: 0;
      left: 0;
      position: fixed;
     
    }

    Place in code:
    Code:
    <body>
    <div class="header">
      <center><img src="URL" /></center>
    </div>
    ....

    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°6

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 20th 2017, 5:50 pm

    Hi,

    Using the center tag to center stuff is deprecated since html 4.0 or maybe earlier. You should use css to center an element:
    Code:
    .header{
    text-align:center;
    }

    Note that this centers everything in the .header element.
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°7

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 20th 2017, 6:15 pm

    Hello Wolfuryo,

    Thank you for the info. Did not know that.
    Unfortunately, your option will not work here. I mean. I need in the center/middle of the header element. With text-align it only centers horizontally. Vertical alignment is not affected. I have tried vertical alignment tag as well :/
    Disregard that. I think it will be easier just placing the div in another location.

    Current issues with said style - header background is an PNG image. All good on PC. Yet on mobile device it shoes up incorrectly transparent. any ideas what is causing this? Or it's just a mobile phone issue?
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°8

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 20th 2017, 6:29 pm

    I'm not sure about that, but I think that it is a mobile related issue. What browser are you using? Also, the OS of the phone is Android or IOS?
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°9

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 20th 2017, 6:37 pm

    I think this might be related to browser height...

    I currently tried on apple iphone and apple computer, windows computer.
    Each with google chrome, safari browser...
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°10

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 22nd 2017, 11:44 pm

    Okey. Found the last thing causing me a headache.

    For a guest - everything is working great.
    Now a logged in user. Basically, if a logged in user goes to HTML login page he can see it. So I need him redirected to the /forum/ Here is what I tried:
    Code:
    if(document.URL.indexOf("http://URL/") >= 0){
         if(_userdata.session_logged_in){
              window.location = "http://URL/forum";
            } else {
              /*DO NOTHING*/
            }
      } else {
        /*DO NOTHING*/
      }

    As the HTML login is the main page, its address is just help.forumotion.com/
    The if redirects to the forum page: help.forumotion.com/forum
    But then if runs again, as there is URL. So loop happens.
    Any ideas on this?
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°11

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 8:05 am

    If the user is logged in and goes to the login page you want him/her to be redirected to the first page, right? If so, this JS should do it:
    Code:

    if(window.location.pathname="/" && _userdata.session_logged_in){
    window.location="/forum";
    };

    About your code:If you don't want to do something if the condition is false, there is no need for else. Also, it's better to merge conditions into a single If when possible. Both the first page and the /forum page contained the string "/" in them so the code could not work properly.
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°12

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 11:19 am

    Your code created the loop as well ://
    I was thinking, maybe it is better to check if specific phrasing or element is present && user loged in?
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°13

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 1:04 pm

    You have to put the code in the login page, surrounded by
    Code:
    <script>
    tags
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°14

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 1:10 pm

    LOL, feel silly now. Very Happy that is so logical

    Yet, the code does not seam to react....hmmm
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°15

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 1:25 pm

    I tested the code on my forum and it seemed to work. Post the login page's coding here, there might be an error in another javascript that prevents this one from running.
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°16

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 1:28 pm

    Well there is no other script there. hmmm
    Here is the script used for loin in general:
    Code:
    //Code by KamiSama
    $(document).ready(function(){
     
      /*Remove elements for guests*/
      if(_userdata.session_logged_in){
        /*DO NOTHING*/
      } else {
             
      $(function(){
        var pages=["http://hogas.huhohi.com/t2865", "http://hogas.huhohi.com/t2874-kas-kur-kaip", "http://hogas.huhohi.com/t2866-pirmam-kursui-butinu-daiktu-sarasas", "http://hogas.huhohi.com/f3-informacija", "http://hogas.huhohi.com/t2949", "http://hogas.huhohi.com/t2486-draugai-ir-ju-baneriai", "http://hogas.huhohi.com/t2862-hogo-metrastis", "http://hogas.huhohi.com/f33-draugai-ir-ju-banneriai", "http://hogas.huhohi.com/register", "http://hogas.huhohi.com/profile?mode=sendpassword", "http://hogas.huhohi.com/login", "http://hogas.huhohi.com/register?agreed=true&step=2"];
        var elements=[".rightHeaderLink", "#info_closed", "#info_open", "#ptrafic_closed", "#ptrafic_open", ".mainmenu", "#fa_ticker_block", "#fa_right"];
        var len1=pages.length, len2=elements.length, j=0;
        for(var i=0;i<len1;i++){
           if(document.URL.indexOf(pages[i]) >= 0){
              j=1;
              break;
            };
        };
        if(j){
           for(var i=0;i<len2;i++){
              $(elements[i]).hide();
            };
        };
      });
     
      }
     
      /*Redirect if not logged in*/
      if(document.URL.indexOf("http://hogas.huhohi.com/forum") >= 0){
         if(_userdata.session_logged_in){
              /*DO NOTHING*/
            } else {
              window.location = "http://hogas.huhohi.com/";
            }
      }
     

      /*Nesekmingo prisijungimo links*/
      if(/login/.test(window.location.pathname) && $("a:contains('čia')").length){
       var link_page="http://hogas.huhohi.com/";
           $("a:contains('čia')").attr("href", link_page);
      };
     
      /*Logout redirection*/
      $(function() { /*Wait for the page to become fully loaded*/
        if (/logout/.test(window.location.search)) { /*If the string logout is present in the page link*/
            var sending = 0; /*No request sent to the server*/
            $("[name='confirm']").click(function(e) { /*When user clicks on yes*/
                if (sending) return; /*If request has already been sent, don't do anything*/
                sending = 1; /*Update the variable so that we know the request has already been sent*/
                e.preventDefault(); /*Prevent the default action(sending the user to the page saying successfull logout*/
                var tid = $("[name='tid'").val(),
                    key = $("[name='key']").val();
                $.post("/login?logout=1&tid=" + tid + "&key=" + key, function(data) {
                    window.location = "http://hogas.huhohi.com/";
                });
            });
        };
      });
     
    });


    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°17

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 1:47 pm

    I cleaned the code up a bit:
    Code:
            //Code by KamiSama
            $(document).ready(function() {

     /*Remove elements for guests*/
              if(!_userdata.session_logged_in){
                        var pages = ["http://hogas.huhohi.com/t2865", "http://hogas.huhohi.com/t2874-kas-kur-kaip", "http://hogas.huhohi.com/t2866-pirmam-kursui-butinu-daiktu-sarasas", "http://hogas.huhohi.com/f3-informacija", "http://hogas.huhohi.com/t2949", "http://hogas.huhohi.com/t2486-draugai-ir-ju-baneriai", "http://hogas.huhohi.com/t2862-hogo-metrastis", "http://hogas.huhohi.com/f33-draugai-ir-ju-banneriai", "http://hogas.huhohi.com/register", "http://hogas.huhohi.com/profile?mode=sendpassword", "http://hogas.huhohi.com/login", "http://hogas.huhohi.com/register?agreed=true&step=2"];
                        var elements = [".rightHeaderLink", "#info_closed", "#info_open", "#ptrafic_closed", "#ptrafic_open", ".mainmenu", "#fa_ticker_block", "#fa_right"];
                        var len1 = pages.length,
                            len2 = elements.length,
                            j = 0;
                        for (var i = 0; i < len1; i++) {
                            if (document.URL.indexOf(pages[i]) >= 0) {
                                j = 1;
                                break;
                            };
                        };
                        if (j) {
                            for (var i = 0; i < len2; i++) {
                                $("body "+elements[i]).hide();
                            };
                        };

                }

                /*Redirect if not logged in*/
                if (document.URL.indexOf("http://hogas.huhohi.com/forum") >= 0) {
                    if (_userdata.session_logged_in) {
                        /*DO NOTHING*/
                    } else {
                        window.location = "http://hogas.huhohi.com/";
                    }
                }

                /*Nesekmingo prisijungimo links*/
                if (/login/.test(window.location.pathname) && $("a:contains('čia')").length) {
                    var link_page = "http://hogas.huhohi.com/";
                    $("a:contains('čia')").attr("href", link_page);
                };

                /*Logout redirection*/
             
                    if (/logout/.test(window.location.search)) { /*If the string logout is present in the page link*/
                        var sending = 0; /*No request sent to the server*/
                        $("[name='confirm']").click(function(e) { /*When user clicks on yes*/
                            if (sending) return; /*If request has already been sent, don't do anything*/
                            sending = 1; /*Update the variable so that we know the request has already been sent*/
                            e.preventDefault(); /*Prevent the default action(sending the user to the page saying successfull logout*/
                            var tid = $("[name='tid'").val(),
                                key = $("[name='key']").val();
                            $.post("/login?logout=1&tid=" + tid + "&key=" + key, function(data) {
                                window.location = "http://hogas.huhohi.com/";
                            });
                        });
                    };
    if(window.location.pathname="/" && _userdata.session_logged_in){
    window.location="/forum";
    };
            });
    This should do it.
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°18

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 1:52 pm

    This script is placed in JS page.
    If I place this :
    Code:
    if(window.location.pathname="/" && _userdata.session_logged_in){
    window.location="/forum";
    };
    The loop will happen again.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°19

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 2:03 pm

    I accidentally posted this in the toolbar thread lol. I received the PM. Replace the script with this one:
    Code:
    $(function(){
    $.get("/forum", function(data){
    if(data.match(/Anonymous/)!="Anonymous") window.location="/forum";
    });
    });
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°20

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 2:08 pm

    Hmmm same... This is how I post it:
    Code:
    <html>
    <head>
       <link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" />
       <link href="https://fonts.googleapis.com/css?family=Caveat&subset=latin-ext" rel="stylesheet" />
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />

      <script type="text/javascript">
       
     $(function(){
    $.get("/forum", function(data){
    if(data.match(/Anonymous/)!="Anonymous") window.location="/forum";
    });
    });
     
    </script>
     
       <style>
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°21

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 2:10 pm

    In your code, after
    Code:
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    , put this one:
    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°22

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 2:27 pm

    I added it before. But did not help. Will try one more time just in case.
    OH, not it worked! (with the latest code you provided)
    Will test now to see if everyting else works fine...
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°23

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 2:29 pm

    Finally lol This thread gave me a little headache Smile
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°24

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 3:57 pm

    @BloodDrunk, thanks! Wink I like helping others because I learn things for myself. It's like a challenge to me
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°25

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 5:53 pm

    One last question about this (hopefully XD) I know, I am a pain :DD

    Is there a way to do the script before the page fully loads?
    Now it seams that a page loads and then the JS is executed.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°26

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 6:02 pm

    Yes, it's possible. Delete the old code, than place this one at the beginning of the script tag(without $(function() or $(document).ready(function(){ before it):
    Code:
    var gt = function() {
    this.get = function(aUrl, aCallback) {
    var anHttpRequest = new XMLHttpRequest();
    anHttpRequest.onreadystatechange = function() {
    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
    aCallback(anHttpRequest.responseText);
    }
    anHttpRequest.open( "GET", aUrl, true );           
    anHttpRequest.send( null );
    }
    }
    var getd=new gt();
    getd.get("/forum", function(data){
    if(data.match(/Anonymous/)!="Anonymous") window.location="/forum";
    })
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51517
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°27

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by SLGray June 23rd 2017, 6:10 pm

    BloodDrunk wrote:@Wolfuryo
    I just love your patience with helping.
    Good job, and keep on.
    Please take off-topic discussion to PM's.



    HTML page elements alignment and style Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°28

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 6:11 pm

    Ha, it actually feels like it's taking longer Very Happy
    then just posting this

    Code:
    <script>
    $.get("/forum", function(data){
    if(data.match(/Anonymous/)!="Anonymous") window.location="/forum";
    });</script>
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°29

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Guest June 23rd 2017, 6:28 pm

    Well, that code is jquery, while the last one is vanilla javascript(plain javascript). There should not be any major performance difference between them.
    • Back to top
    Kami-sama
    Kami-sama
    Kami-sama
    Forumember


    Female Posts : 407
    Reputation : 12
    Language : EN, RU, DE, LT
    Location : Lithuania
    • Post n°30

    HTML page elements alignment and style Empty Re: HTML page elements alignment and style

    Post by Kami-sama June 23rd 2017, 10:34 pm

    Okeeeeey, The last thing. This code is not working.
    After clicking yes, user is not logged out:
    Code:
    /*Logout redirection*/
      $(function() { /*Wait for the page to become fully loaded*/
        if (/logout/.test(window.location.search)) { /*If the string logout is present in the page link*/
            var sending = 0; /*No request sent to the server*/
            $("[name='confirm']").click(function(e) { /*When user clicks on yes*/
                if (sending) return; /*If request has already been sent, don't do anything*/
                sending = 1; /*Update the variable so that we know the request has already been sent*/
                e.preventDefault(); /*Prevent the default action(sending the user to the page saying successfull logout*/
                var tid = $("[name='tid'").val(),
                    key = $("[name='key']").val();
                $.post("/login?logout=1&tid=" + tid + "&key=" + key, function(data) {
                    window.location = "http://hogas.huhohi.com/";
                });
            });
        };
      });
    • Back to top