Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to do styling of a page header layout to fit in tablet & smart phones?

    @nasyia
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 687
    Answer it

    I have this page header and i need to make responsive so it can fit in tablet and smart phones and i need to direct form right to left and how can i use pure javascript to achive that (no Jquery needed) 

     

    <!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Arabic HTML responsive grid</title>
    <meta name="viewport " content="width=device-width">

    <!--  favicon.ico -->

    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="bootstrap-grid.css">
    <link rel="stylesheet" href="bootstrap-reboot.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <script src=" http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js "></script>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <style>
        body {
            background-color: #d1d1d1;
            direction: rtl;
        }
        
        .header {
            border: #222 double;
            width: 100%;
            display: inline-table;
            height: 20px;
            min-width: 980px;
            background-color: #4c4e5a;
        }
        
        .header .div1 {
            *background-color: skyblue;
            width: 25%;
            float: right;
        }
        
        .div2 {
            *background-color: burlywood;
            width: 50%;
            float: right;
            margin: 0 auto;
        }
        
        .div2,
        .div2 ul,
        .div2 li,
        .div2 a {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
        }
        
        .div2 ul {
            height: 40px;
            width: 505px;
            margin: 5px auto;
            background: #4c4e5a;
            background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        
        .div2 li {
            position: relative;
            list-style: none;
            float: right;
            display: block;
            height: 40px;
        }
        
        .div2 li a {
            display: block;
            padding: 0 14px;
            margin: 6px 0;
            line-height: 28px;
            text-decoration: none;
            border-left: 1px solid #393942;
            border-right: 1px solid #4f5058;
            font-family: Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-size: 18px;
            color: #f3f3f3;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
            -webkit-transition: color .2s ease-in-out;
            -moz-transition: color .2s ease-in-out;
            -o-transition: color .2s ease-in-out;
            -ms-transition: color .2s ease-in-out;
            transition: color .2s ease-in-out;
        }
        
        .div2 li:first-child a {
            border-left: none;
        }
        
        .div2 li:last-child a {
            border-right: none;
        }
        
        .div2 li:hover>a {
            color: #8fde62;
        }
        
        .div3 {
            *background-color: gainsboro;
            width: 25%;
            float: left;
        }
        
        .div3 .dropdown {
            margin-top: 15px;
        }
        /* DropDown */
        
        .dropdown {
            color: #555;
            margin: 3px -22px 0 0;
            width: 143px;
            position: relative;
            height: 17px;
            text-align: left;
        }
        
        .submenu {
            position: absolute;
            z-index: 100;
            width: 135px;
            display: none;
            margin-left: 10px;
            padding: 40px 0 5px;
            border-radius: 6px;
        }
        
        .dropdown li a {
            color: #555555;
            display: block;
            font-family: arial;
            font-weight: bold;
            padding: 6px 15px;
            cursor: pointer;
            text-decoration: none;
        }
        
        .dropdown li a:hover {
            background: #155FB0;
            color: #FFFFFF;
            text-decoration: none;
        }
        
        a.account {
            font-size: 18px;
            line-height: 16px;
            color: #fff;
            position: absolute;
            z-index: 110;
            display: block;
            padding: 11px 0 0 20px;
            height: 28px;
            width: 150px;
            margin: -11px 0 0 -10px;
            text-decoration: none;
            background: url(images/arrow.png) 80px 32px no-repeat;
            cursor: pointer;
        }
        
        .root {
            list-style: none;
            font-size: 11px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
            background: #fff;
            padding: 10px 0 10px 0;
            border-radius: 5px 5px 5px 5px;
            margin: 21px 0 0 0;
        }
        
        .root:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-bottom-color: #ffffff;
            position: absolute;
            color: #ffffff;
            top: 54px;
            right: 17px;
        }
        /* DropDown */
    </style>
    <script>
        $(document).ready(function()

            {

                $(".account").click(function()

                    {

                        var X = $(this).attr('id');

                        if (X == 1)

                        {

                            $(".submenu").hide();

                            $(this).attr('id', '0');

                        } else

                        {

                            $(".submenu").show();

                            $(this).attr('id', '1');

                        }

                    });

                $(".submenu").mouseup(function()

                    {

                        return false

                    });

                $(".account").mouseup(function()

                    {

                        return false

                    });

                $(document).mouseup(function()

                    {

                        $(".submenu").hide();

                        $(".account").attr('id', '');

                    });

            });
    </script>
</head>

<body>


    <div class="header">


        <div class="div1">
            <a href="" class="navbar-brand"><img src="website-logo.png" alt="" height="30"></a>
        </div>

        <div class="div2">

            <ul>

                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">  </a>
                </li>
                <li>
                    <a href="#">  </a>
                </li>
                <li>
                    <a href="#"> </a>
                </li>
            </ul>

        </div>
        <div class="div3">

            <div class="dropdown">

                <a href="#" class="account" id="account"> </a>

                <div class="submenu" style="display: none; " id="submenu">

                    <ul class="root">

                        <li><a href="#">Dashboard</a></li>

                        <li><a href="#">Profile</a></li>

                        <li><a href="#">Settings</a></li>

                        <li><a href="#">Sign Out</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <div class="container">

        <div class="row justify-content-center mt-5">



            <div class=" col-xl-5 col-md-6 col-xs-12 col-sm-12 col-12 bg-default ">

                <div class="card ">

                    <div class="card-block pt-3">

                        <h2 class="card-title text-center"> </h2>
                        <p class="card-text text-center text-muted"><small>Please fill out all the fields</small></p>
                        <form action="" method="">

                            <fieldset class="form-group">
                                <label for="username"> </label>
                                <input type="text" class="form-control" />
                            </fieldset>
                            <fieldset class="form-group">
                                <label for="username"> </label>
                                <input type="text" class="form-control" />
                            </fieldset>

                            <div class="checkbox">

                                <label for="">
                                           <input type="checkbox">
                                    </label>

                            </div>

                            <div>
                                <a href="#">   </a>

                            </div>

                            <div>
                                <button class="btn btn-block btn-success"> </button>
                            </div>

                        </form>
                    </div>
                    <div class="card-footer text-muted text-center">
                        <p> </p>
                        <a href=""> </a>
                    </div>
                </div>

            </div>

        </div>

    </div>



    <script src="jquery-1.8.2.min.js"></script>
</body>

</html>

     

    html css Javascript
    Answer it

 1 Answer(s)

  • @mukul.kant
    Recommendations Offline Message

    about 7 years ago

    Make below change in your CSS, I hope this will work for you, which you want to achieve.
      
            <style>
            body {
                background-color: #d1d1d1;
                direction: rtl;
            }
            
            .header {
                border: #222 double;
                /*width: 100%;
                display: inline-table;
                height: 20px;
                min-width: 980px;*/
                background-color: #4c4e5a;
            }
            .header::after{
                clear: both;
                content: "";
                display: block;
            }
            
            .header .div1 {
                *background-color: skyblue;
                width: 25%;
                float: right;
                /*float: left;*/
            }
            
            .div2 {
                *background-color: burlywood;
                width: 50%;
                float: right;
                margin: 0 auto;
                /*float: left;*/
            }
            
            .div2,
            .div2 ul,
            .div2 li,
            .div2 a {
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
            }
            
            .div2 ul {
                height: 40px;
                /*width: 505px;*/
                margin: 5px auto;
                background: #4c4e5a;
                background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
            
            .div2 li {
                position: relative;
                list-style: none;
                float: right;
                display: block;
                height: 40px;
            }
            
            .div2 li a {
                display: block;
                padding: 0 14px;
                margin: 6px 0;
                line-height: 28px;
                text-decoration: none;
                border-left: 1px solid #393942;
                border-right: 1px solid #4f5058;
                font-family: Helvetica, Arial, sans-serif;
                font-weight: normal;
                font-size: 18px;
                color: #f3f3f3;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
                -webkit-transition: color .2s ease-in-out;
                -moz-transition: color .2s ease-in-out;
                -o-transition: color .2s ease-in-out;
                -ms-transition: color .2s ease-in-out;
                transition: color .2s ease-in-out;
            }
            
            .div2 li:first-child a {
                border-left: none;
            }
            
            .div2 li:last-child a {
                border-right: none;
            }
            
            .div2 li:hover>a {
                color: #8fde62;
            }
            
            .div3 {
                *background-color: gainsboro;
                width: 25%;
                float: left;
            }
            
            .div3 .dropdown {
                margin-top: 15px;
            }
            /* DropDown */
            
            .dropdown {
                color: #555;
                margin: 3px -22px 0 0;
                width: 143px;
                position: relative;
                height: 17px;
                text-align: left;
            }
            
            .submenu {
                position: absolute;
                z-index: 100;
                width: 135px;
                display: none;
                margin-left: 10px;
                padding: 40px 0 5px;
                border-radius: 6px;
            }
            
            .dropdown li a {
                color: #555555;
                display: block;
                font-family: arial;
                font-weight: bold;
                padding: 6px 15px;
                cursor: pointer;
                text-decoration: none;
            }
            
            .dropdown li a:hover {
                background: #155FB0;
                color: #FFFFFF;
                text-decoration: none;
            }
            
            a.account {
                font-size: 18px;
                line-height: 16px;
                color: #fff;
                position: absolute;
                z-index: 110;
                display: block;
                padding: 11px 0 0 20px;
                height: 28px;
                width: 150px;
                margin: -11px 0 0 -10px;
                text-decoration: none;
                background: url(images/arrow.png) 80px 32px no-repeat;
                cursor: pointer;
            }
            
            .root {
                list-style: none;
                font-size: 11px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
                background: #fff;
                padding: 10px 0 10px 0;
                border-radius: 5px 5px 5px 5px;
                margin: 21px 0 0 0;
            }
            
            .root:before {
                content: '';
                display: inline-block;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 7px solid #ccc;
                border-bottom-color: #ffffff;
                position: absolute;
                color: #ffffff;
                top: 54px;
                right: 17px;
            }
            /* DropDown */
Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: