Solved

CSS Position issue

Posted on 2013-12-30
7
384 Views
Last Modified: 2013-12-30
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
0
Comment
Question by:Ashraf Hassanein
  • 4
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39747014
#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 %
0
 

Author Comment

by:Ashraf Hassanein
ID: 39747121
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

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39747145
You're code keeps changing so I've made a mockup based on your image.  All you need to do is fill in the 'blanks'

http://jsfiddle.net/GaryC123/W73pU/4/
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Ashraf Hassanein
ID: 39747266
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?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39747282
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
0
 

Author Comment

by:Ashraf Hassanein
ID: 39747299
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.
0
 

Author Closing Comment

by:Ashraf Hassanein
ID: 39747300
Very helpful and great support
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now