AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Ashraf Hassanein
Ashraf Hassanein

asked on 

CSS Position issue

I have an web page which I  Have converted from frames to div, but I have an issue in positioning them using the CSS, I want to transfer it as per the attached image, but the position attribute is very tricky where I can see the logo (robbin), the username, and (Header-toolbar) are overlapping over each other (I want the header div to have a fixed position so whenever you scroll down you still can see the header,
My main.css file:

html, body {
        width: 100%;
        height: 100%;
         font-family: "Helvetica Neue", Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #444;
        -webkit-font-smoothing: antialiased;
        background: white;

}
        #header {
                position: fixed;
                height:15%;
                width:100%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #bottom {
                position: fixed;
                height:85%;
                width:100%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #menu {
                position: fixed;
                height:100%;
                width:20%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #main {
                position: fixed;
                height:100%;
                width:80%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
#upper-login-window {
        position: fixed;
        width: 340px;
        height: 340px;
        top: 50%;
        left: 50%;
        margin-top: -140px;
        margin-left: -170px;
        background: #CEF6F5;
        border-radius: 3px;
        border: 1px solid #ccc;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}

form {
        margin: 0 auto;
        margin-top: 20px;
}

label {
        color: #555;
        display: inline-block;
        margin-left: 18px;
        padding-top: 10px;
        font-size: 14px;
}

p a {
        font-size: 11px;
        color: #aaa;
        float: right;
        margin-top: -13px;
        margin-right: 20px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}

p a:hover {
        color: #555;
}

input {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        font-size: 12px;
        outline: none;
}

input[id=username-login],
input[id=password-login] {
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 290px;
        height: 35px;
        border: 1px solid #c7d0d2;
        border-radius: 2px;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}

input[type=captcha] {
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 200px;
        height: 35px;
        border: 1px solid #c7d0d2;
        background: #FFFFFF;
        border-radius: 2px;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}


input[id=username-login]:hover,
input[id=password-login]:hover,
input[type=captcha]:hover {
        border: 1px solid #b6bfc0;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}

input[id=username-login]:focus,
input[id=password-login]:focus,
input[type=captcha]:focus {
        border: 1px solid #a8c9e4;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}

img[id=siimage] {
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        border: 1px solid #c7d0d2;
        border-radius: 2px;
        height:  35px;
        width: 200px;
}

p a[id=refresh-captcha] {
        margin-top: 14px;
        margin-right: 40px;
}
#lower-login-window {
        background: #BDBDBD;
        width: 100%;
        height: 69px;
        margin-top: 20px;
        box-shadow: inset 0 1px 1px #fff;
        border-top: 1px solid #ccc;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
}

input[id=keepMe] {
        margin-left: 20px;
        margin-top: 30px;
}

.check {
        margin-left: 3px;
        font-size: 11px;
        color: #444;
        text-shadow: 0 1px 0 #fff;
}

input[id=button-login] {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
        width: 80px;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-image: url(../images/login.png);
        background-position: right;
}

input[id=button-login]:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
        background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

input[id=button-login]:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
        background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
        background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
#status-block {
   width: 247px;
   position: fixed;
   text-align: center;
   border-radius: 10px;
   font-size: 20px!important;
   background: red;
   background: -webkit-gradient(linear, left top, left bottom, from(#cef6f5), to(#cef6f5));
   background: -webkit-linear-gradient(top, #cef6f5, #cef6f5);
   background: -moz-linear-gradient(top, #cef6f5, #cef6f5);
   background: -ms-linear-gradient(top, #cef6f5, #cef6f5);
   background: -o-linear-gradient(top, #cef6f5, #cef6f5);
   background-image: -ms-linear-gradient(top, #cef6f5 0%, #cef6f5 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
#ribbon {
   width: 247px;
   position: absolute;
   text-align: center;
   border-radius: 10px;
   font-size: 20px!important;
   background: #cef6f5;
   background: -webkit-gradient(linear, left top, left bottom, from(#cef6f5), to(#cef6f5));
   background: -webkit-linear-gradient(top, #cef6f5, #cef6f5);
   background: -moz-linear-gradient(top, #cef6f5, #cef6f5);
   background: -ms-linear-gradient(top, #cef6f5, #cef6f5);
   background: -o-linear-gradient(top, #cef6f5, #cef6f5);
   background-image: -ms-linear-gradient(top, #cef6f5 0%, #cef6f5 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
#header-toolbar {
   position: fixed;
   padding: 4px;
   background: #CEF6F5;
   display: block;
   }
 /* support: IE7 */
   *+html #header-toolbar {
    display: inline;
   }
  .ui-menu {
     width: 150px;
     background: #FAFAFA;
    }
/* Support for the demo css of the UI */
table {
        font-size: 1em;
}

.demo-description {
        clear: both;
        padding: 12px;
        font-size: 1.3em;
        line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
        background-position: top;
}

Open in new window



And my html code:

<HTML>
<HEAD>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>HASSANS</title>
              <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css">
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
</HEAD>
<BODY>
 <div class="header-frame" name="header" id="header">
   <div class="ribbon" id="ribbon">
<strong class="ribbon-content" id="ribbon-content"><img src="../images/logo.gif" alt="My Site" width="150" height="75"></strong>
</div>
<div  id="status-block">
username
</div>
<div id="menu"  style="text-align: right">
<div id="header-toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

                <script>
                 $(function() {
                        var $logout = $("#logout").button({ text: false, icons: { primary: "ui-icon-key" } });
                        var $settings = $("#settings").button({ text: false, icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
                        var $menu = $("#settings").parent().next().show();

                $(document).click(function() {
                        $menu.hide();
                $settings.removeClass("active");
                });

                $settings.click(function(evt) {
                        evt.stopImmediatePropagation();
                        $(this).toggleClass("active")
                        $menu.css("display", $(this).hasClass("active")?"block":"none");
                        $menu.position({ my: "left top", at: "left bottom", of: this });
                        });

                $settings.parent().buttonset().next().hide().menu();

                $menu.hover(function() {
                $(this).addClass("overme");
                }, function() {
                        if($(this).hasClass("overme")) {
                                $(this).hide();
                                $(this).removeClass("overme");
                                $settings.removeClass("active");
                                }
                        });

                $menu.click(function(evt) {
                        alert($(evt.target).text());
                        });
                $("#header-toolbar").hide();
                });
                </script>
</div>
<div class="bottom-frame" name="bottom" id="bottom">
 <div class="menu-frame" name="menu" id="menu">
   menu
 </div>
 <div class="main-frame" name="main" id="main">
   	<div id="upper-login-window">
		
		<form autocomplete="off" action="check_login.php" method="POST">
		
		<label for="name">Username:</label>
		
		<input type="name" name="username" id="username-login" onclick="this.value=''" />
		
		<label for="username">Password:</label>
		
		<p><a href="#">Forgot your password?</a>
		
		<input type="password" name="password" id="password-login" onclick="this.value=''" />

                <img id="siimage" style="border: 1px solid #000; margin-right: 15px" src="securimage/securimage_show.php?sid=afe4dc656d8505ad548a58b174e51691" alt="CAPTCHA Image" align="center" onclick="this.blur()" />

                <object type="application/x-shockwave-flash" data="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" width="20" height="20">
                <param name="movie" value="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" />
                </object>


                <a id="refresh-captcha" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = 'securimage/securimage_show.php?sid=' + Math.random(); this.blur(); return false"> 
	 
                <img src="images/refresh.png" alt="Reload Image" height="20" width="20" onclick="this.blur()" align="bottom" border="0" />
  
                </a>

		<input type="captcha" name="captcha_code" onclick="this.value=''" placeholder="Enter Code" />
	
		<div id="lower-login-window">
		
		<input type="checkbox" name="keepMe" id="keepMe" value="true" ><label class="check" for="checkbox">Keep me logged in</label>
		
		<input type="submit" id="button-login" value="Login">
		
		</div>
		
		</form>
		
	</div>
	
	<!-- End Page Content -->
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $.noConflict();

    function reloadCaptcha()
    {
        jQuery('#siimage').src = 'securimage/securimage_show.php?sid=' + Math.random();
    }

</script>
 </div>
</div>
</BODY>
</HTML>

Open in new window

site-layout.jpg
CSSHTMLJavaScript
Avatar of undefined
Last Comment
Ashraf Hassanein
8/22/2022 - Mon
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent