Link to home
Create AccountLog 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
Avatar of Gary
Gary
Flag of Ireland image
#status-block {}
Remove the position:fixed

#menu {}
Change position:fixed to position:absolute
and add
   right: 0;
    top: 20px;

That should get you on the right track

You really need to give #header {} a fixed height in pixels not %
Avatar of Ashraf Hassanein
Ashraf Hassanein

ASKER

Thank you so much that helped a lot I have found as well a type in my index.php file where I was using id=menu for the toolbar so I have changed it.
I also believe you meant for the menu div to add left: 0 to align it to the left of the screen and not right: 0, correct?
I have assigned as well a fixed height to the header, the only issue I have now that the three elements in the header div: the logo (id=ribbon) the status (id=status-block) and the toolbar menu (id=toolbar-block) are overlapping over each other, here is the main.css after I have changed it, what do you think please?
main.css:
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:80px;
                width:100%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #menu {
                position: absolute;
                height:90%;
                width:20%;
                top: 80px;
                : 0;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #main {
                position: fixed;
                height:90%;
                width:80%;
                top: 80px;
                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;
   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;
   }
#toolbar-block {
   right: 0;
   padding: 4px;
   background: #CEF6F5;
   display: block;
   }
#header-toolbar {
   padding: 4px;
   background: #CEF6F5;
   display: inline-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


header div:
<div class="ribbon" id="ribbon">
<strong class="ribbon-content" id="ribbon-content"><img src="../images/hassans.gif" alt="Hassans" width="150" height="75"></strong>
</div>
<div  id="status-block">
username
</div>
<div id="toolbar-block">
<div id="header-toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="toolbar-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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Ashraf Hassanein
Ashraf Hassanein

ASKER

Thank you so much that is really working , and it solved my problem.
I have one more small issue not related to the positioning but to my main.css, where I can see that
  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: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
        background-position: right;

Open in new window


  Is only working in chrome and IE11, can you help me in that or you prefer to open a new question not to mix the subjects?
Avatar of Gary
Gary
Flag of Ireland image
Best to open a new question, as I have to go shortly and you haven't said what the problem is.

But...
input[id=button-login] // this will work
should be written as
#button-login // this is how you should write it

This is native shorthand in css when you reference the ID, if you need to reference an element by its class name then you use the period e.g.
.element-classname
Avatar of Ashraf Hassanein
Ashraf Hassanein

ASKER

Thanks I have changed but still not working I am doubts regarding :
  
 background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);

Open in new window

I believe they are different in IE, but I will open another question, thanks for your help.
Avatar of Ashraf Hassanein
Ashraf Hassanein

ASKER

Very helpful and great support