Solved

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

Posted on 2010-09-24
8
360 Views
Last Modified: 2013-11-19
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
Comment
Question by:njgroup
8 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 200 total points
ID: 33756098
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
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 200 total points
ID: 33756112
<<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
 

Author Comment

by:njgroup
ID: 33757499
but how its css3 while ie8 does not support css3?!
0
 
LVL 16

Assisted Solution

by:jmatix
jmatix earned 100 total points
ID: 33757515
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 30

Expert Comment

by:LZ1
ID: 33757598
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
 

Author Comment

by:njgroup
ID: 33759828
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
 
LVL 30

Expert Comment

by:LZ1
ID: 33760360
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
 

Author Closing Comment

by:njgroup
ID: 33762072
thanks for everyone
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Syntax 2 47
validation, if text area is typed or pasted into 2 25
Animated .jpg? 13 62
Wrapper for APPs 9 40
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
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…

863 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

18 Experts available now in Live!

Get 1:1 Help Now