Solved

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

Posted on 2010-09-24
8
369 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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
 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

617 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