Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

how to put div tag always shown in top left in html page?

hi,

I wanna put a div tag that always shown in top left (left corner) in page, and moreover,
I want anther div also should be always shown (as bar in top of page) when when a client scroll 50px down

example of what I mean exactly:

http://findmebyip.com/litmus/#target-selector

1- see triangle in top left corner ("New Development Tools")
2- scroll a little down, you will see a black bar of main menu always shown even with scrolling

so any idea how to do that?
0
njgroup
Asked:
njgroup
3 Solutions
 
LZ1Commented:
1) The triangle is in a fixed top left position.  The CSS looks like this:
left:0;position:fixed;top:0;z-index:500;

2) This is done using Jquery and a fixed CSS position.  The CSS looks like this:  
background:url("/images/utility_links_border_bg.png") repeat-x scroll 0 100% #170A0A;left:0;position:fixed;top:0;width:100%;z-index:9999;

Here's a demo for the menu that uses both Jquery & CSS3.
http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/
0
 
Gurvinder Pal SinghCommented:
<<I wanna put a div tag that always shown in top left (left corner) in page, and moreover,>>
looks like you are looking for a sticking div
http://www.jtricks.com/javascript/navigation/fixed_menu.html
http://plugins.jquery.com/plugin-tags/sticky-div
0
 
njgroupAuthor Commented:
but how its css3 while ie8 does not support css3?!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Justin MathewsCommented:
Check this out:

<html>
<head>
 
<style type="text/css">
body
  {
  height: 100%;
  overflow: hidden;
  }

div.banner {
  margin: 0;
  font-size: 80%;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900; border-bottom: 2px groove #900;}
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }

</style>
</head>
<body>

<div class="banner"><A href="#">Fixed Bar</A>
</div>
<div id='content'>
<script type="text/javascript">
for (var i=0; i<50; i++)
      document.write("Hello, World!<br>");
</script>
</div>

</body>

</html>
0
 
LZ1Commented:
With the URL's and explanation in my last post, you don't need CSS3.  It works cross browser and should be fully semantic.
0
 
njgroupAuthor Commented:
thanks you LZ1 the demo is really perfect, but are you sure it does not uses CSS3?, because the title of article is: "Menu with CSS3 and jQuery"


thanks gurvinder372, I used this website: http://www.jtricks.com/javascript/navigation/fixed_menu.html
its really nice

and thanks for jmatix, its also works fine
0
 
LZ1Commented:
You can do it without the CSS3 stuff.  The CSS3 stuff they're using is stuff you don't really need like the gradient, text-shadow and border styles.  
Other than that, it should be everything you need.
0
 
njgroupAuthor Commented:
thanks for everyone
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now