Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-09-24
8
Medium Priority
?
370 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 800 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:Gurvinder Pal Singh
Gurvinder Pal Singh earned 800 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 16

Assisted Solution

by:Justin Mathews
Justin Mathews earned 400 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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 …
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…

721 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