SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Layer HELP plzzz

    First off Hello all

    Right down to it, I want to be able to place a date script that I have onto my site and other items too, but my site is made up of slices from photoshop and not tabled, I tryed this:

    <div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>

    as a test run and included the date script. it worked and after alittle messing around with where I wanted it placed look fine...BUT when the browser was changed in size the layer moved, what I`m asking for in the way of help is a way to place layers over my images and have them fixed so no matter what size my visitor has the content of the layer will stay inline, to give you an idea of where I`m coming from heres my address - www.eyecandestudio.com

    I look forward to your help guys as I`m pulling my hair out here.


    Dean

  2. #2
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I"m not sure if I'm following you exactly, but have you tried wrapping the layers and the images in a div and then use positioning to position the layer (such as the date script) where you would like in relation to the image.

    I checkout out your site, but didn't see any errors. If you haven't figured it out yet, post an example of ther error and I'll give it a try.

    Nice design by the way.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    After waiting ages for 170 (170!!) sliced photoshop images to load I couldn't see any sign of your date script. (Also the site is fully tabled or were you referring to something else.)

    As mentioned by devised above you will need to link the layer and the image in some way in order for them to react together. Either position the image inside the layer or have them both positioned from an outer element as a point of reference. The outer element will nered to have a position set (e.g. position:relative) in order for you to place elements in relation to it.

    If you have an example of what you are trying then you will get some more specific (and helpful) answers.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Oct 2003
    Location
    UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TY for replying guys, as for taking ages to load....well I`m baffled, all reports have been good, yes theres 170 images but it shouldn`t take more than about 20 seconds to load the site and anyone on a faster connection it should appear straight away, this is the layer code I was trying out:

    <div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>

    I placed the date code within it like below:

    <div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;"><font face="Verdana, Arial, Helvetica, sans-serif"
    size=1><b>
    <SCRIPT>
    // Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
    var mydate=new Date()
    var theYear=mydate.getFullYear()
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
    document.write(dayarray[day]+", "+montharray[month]+" "+daym+", "+theYear)
    </SCRIPT>
    </b></font></div>

    Then I set it to where I wanted on the site, just below the welcome text over the left menu, but as I said above each time I move the browser size it moved too, I`m very new to CSS so I`m in the dark here.

  5. #5
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    1. paste the code for div with the date script outside of the table with the other content in it.

    2. wrap the div with the date script and the table you want the script to be place in a div with relative positioning set

    3. you will then have to play with the coordinates for the absolute positioning for the div with the date script.

    I think this is what you were after, but let me know if it's not. Here's a brief example:



    <div style="position: relative;"> <!-- begin of div wrapper -->

    <div style="position: absolute; left: 20px; top: 80px; height: 400px; width: 100px; padding: 1em;">
    <SCRIPT>
    // Courtesy of SimplytheBest
    <!-- date script goes here -->
    </SCRIPT>
    </div> <!-- end of div with date script -->

    <table> <!-- table with all the content in it -->
    look at me, I'm a table with content in it
    </table>

    </div> <!-- end of div wrapper -->

  6. #6
    SitePoint Member
    Join Date
    Oct 2003
    Location
    UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ty so much devised, I`ve sorted it out now

  7. #7
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    np, glad to hear

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you sorted it out, but there is a slight problem with Mozilla (if you're interested ) where it is putting your date into new lines and overspilling the element and covering your menu.
    Like so:
    e.g.
    Friday,
    October
    10,
    2003

    You have also missed out the px from the end of your units from the inline style. Mozilla and other browers will interpret them as zero. IE takes a guess that you mean px.so it's ok in IE)

    You have not closed a div or have one too many I'm not sure which as it would take a while to sort through. See if you can close all divs to keep your code structured. You also have a missing closing font tag. (I know because DWMX highlights broken code but doesn't tell you (obviously) where the closing tags should go etc.

    As you don't have a doctype or character encoding you won't be able to validate your pages. Validating your pages would pick up a lot of these simple errors for you and help make your code more robust.

    However I think it would be a big job to change now as putting a doctype in at this stage is likely to make everything render differently.

    Also using a doctype will (usually!) help you create cross browser code as the browsers will work in standards mode as opposed to quirks mode (in most cases, but that's another subject ).

    Regarding the size of your page Opera tells me that its over 800k !! It took over 2.5 minutes to load in Opera7 and about 3 minutes in Mozilla. This is on an isdn connection at 64.0kbps.

    To be honest I wouldn't wait around for that even though your graphics are pretty good. I usually keep my pages under 100k and as you mentioned 20 seconds is about as long as people want to wait. There is no way that your page will load in 20 seconds unless it has previously been loaded and the images are in cache. Therefore I think you need to think a bit about optimisation etc unless of course you know your visitors are prepared to wait then that's ok.

    One last thing (sorry): Try not to use inline styles when using CSS as there is not really any benefit when using css this way. It's almost the same as using html presentational tags and is just as hard to control. The idea with css is to make your code lighter and easier to use and update from a central point.

    I know you only have a few styles in your page but you'd be surpised how soon these things grow. You already have some styles in the head of the document so why not move the inline styles to the head and uses classes or id's etc. The best solution is to put them in an external file and you will be able to use them sitewide as well.

    Hope these comments are constructive.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •