Solved

CSS Position issue

Posted on 2013-12-30
7
379 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 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

12 Experts available now in Live!

Get 1:1 Help Now