Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Thread: DIV Layers

  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    5
    Member #
    15588
    i am trying to put a piece of information in the top right corner of all pages so that no matter how large your screen is it will still be jstified top right and lay over whatever is existing.

    is there a way to do this?

    appreciate the help.

    mike c.
    www.mynouveau.com/newcandy

  2.  

  3. #2
    Member dsmflash's Avatar
    Join Date
    Jan 2007
    Location
    Indiana
    Posts
    40
    Member #
    14695
    Just nest the layer in the layer you want it justified in. In Dreamweaver, go to Edit>Preferences>Layers and check the nested tables box. Click on the main layer, and draw another layer inside that one. Insert your text, image, etc. In the CSS/layers panel, make sure "absolute" is checked and that will make the new layer dependent on the main one. In the layers panel, the new layer should be offset and under the main layer. This will let you know it is nested.

  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    5
    Member #
    15588
    i'm not understanding...

    i want it to lay over everything but still expand/contract with the window size.

    so if it was possible a 100% table that at the top that layed over everything else, with the text justified right. i know you can't do this but i don't understand your explanation either

  5. #4
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Honestly, you shouldn't use DW's built in layer tool, or their CSS tools either. You should take a few days and learn some basic CSS, and code it yourself. You will be much happier with the results!

    karinne has a great list of CSS resources, posted here at WDF.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    See this forum post I found ... looks like someone might have a solution for you.

    http://www.thescripts.com/forum/thread101097.html


  7. #6
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Sounds to me like you just need some absolute positioning...

    Code:
    <style>
       #top-right {
              width: 100%;
              position: absolute;
              top: 0px;
              right: 0px;
              text-align: right;          
       }
    </style>
    
    <div id="top-right">Welcome to my great site!</div>
    If you want it to stay visible as you scroll down the page, then the simplest way I can think is to let the CSS control the scrolling rather than the browser. Do this using overflow...

    Code:
    <style>
       #top-right {
             (as above)
       }
       #content {
             width: 100%;
             height: 100%;
             overflow: auto;
       }
    </style>
    
    <div id="top-right">Welcome to my great site!</div>
    <div id="content">
            ...loads of content... !
    </div>
    Sean

  8. #7
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Here's my "solution" in action...

    http://www.seanmiller.net/examples/scroll/

    Sean

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Sean ... good one!

    I can't "thumbs up" ... I guess I have to spread it around first.


  10. #9
    Junior Member
    Join Date
    Jul 2007
    Posts
    5
    Member #
    15588
    hey sean,

    thanks for your help. i tried your solution but couldnt get it to work. it was pushing everything on the page down and was aligned top left.

    i found another solution that is on all pages now at www.mynouveau.com/newcandy and it works great in firefox but in IE it disappears.

    any suggestions?

  11. #10
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    So you're now using Javascript? It's good enough if the customer is happy... only point I would make is to move your styling for the floating div (ie. the default styling for non-Javascript browsers where you anchor it top right on the page) into the main definition rather than use the "style" tag on the div itself.

    By the way, I notice that you are not using external CSS files... as the site grows embedding the style definitions on every page is likely to become less and less manageable so as a general rule of thumb I'd always tend to put Javascript functions, CSS definitions in their own files and link to them from each of the pages - means you can alter in one place and the whole site changes, which is preferable. Imagine the day in 2 years when they say "I want the whole colour of my site changed", at which point you say "Hmmm... that'll be a couple of days' work... $500 please" and then proceed to change the CSS in 10 minutes and go and play golf, lol... not that I'd advocate such practices, you understand, but there's no point making your life harder than it has to be :-)

    Turning to the problem, I suspect it's because you've got <div id="floatdiv"...> sitting in the <head> section rather than in the <body> - you shouldn't do things like that, you define the styles in the head but you put your content in the body. I know that Firefox can be quite "understanding" when it comes to these things, but from memory IE is more picky. Because your <div> is actually absolutely positioned it doesn't really matter where you put it in your body, top middle or bottom, so you might like to consider where you want it to come should somebody view the site in a text-only browser where neither CSS or Javascript come into play and then put it there.

    When writing absolutely positioned CSS sites, btw, this is a very important "rule of thumb". It doesn't matter if your navbar is at the top or on the left - where would you naturally want it should you be text-only? At the top, or (perhaps) at the bottom so that people get it last once they've read a page? And if they're printing the page, do they really want the navbar at all? display:none is actually very useful when printing pages - alternative styling for print media with things like navbars, adverts or the like disabled makes your site look much more professional when folks come to print off useful information. This common "click here for print-friendly version" is just laziness... CSS gives you this for free :-)

    But I'm rambling... all the best... move that div into its correct place and I suspect you'll be fine :-)

    Sean


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com