Solved

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

Posted on 2010-09-24
8
366 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

710 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