Using Layers?

Discussion in 'HTML & Website Design' started by wd_2k6, Jun 20, 2007.

  1. #1
    Hi, i currently use layers everywhere in order to compile my website using Dreamweaver,
    does anybody forsee any problems with using layers? If so how would you go about placing objects where you wish on a page?
     
    wd_2k6, Jun 20, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Using "layers"[1] is full of gotchas with big teeth with which to bite the butts of the unwary. Absolute positioning has great appeal to the novice, but is mostly a poor choice for page layout. That DW uses either absolute positioning or tables for layout is indicative of its inadequacy as a wysiwyg code generator.

    Rather than rehash the issues here, I refer you to Absolute Positioning Pitfalls at Css Creator.

    chheers,

    gary

    [1] There is no such thing, other than an old proprietary Netscape4 element and DW's use of the term to refer to absolute positioned elements.
     
    kk5st, Jun 20, 2007 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    So how would you go about the re-positioning of objects?
    For example my adsense code is inserted into a layer box, that has a border around it, located towards the left of the screen.
    How would i locate it to the left, and put a border around it without the use of the layer box?

    Edit: Here is my site for reference http://ukdesi.ulmb.com/ as you can see virtually everything is packed inside layers, it looks alright on my P.C but obviously not on others. Would a site in this format/layout be possible?

    Sorry for such a noob question and many thanks in advance.
     
    wd_2k6, Jun 20, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I prefer to use floats and negative margins, though I start by stripping everything on the page of their margins and padding so I can get all four major rendering engines (which in laymans terms mean IE 6/7, Firefox, Opera, Safari/Konqueror) on the same page. A proper, complete DOCTYPE helps too.

    What browsers do you have available on your system?
     
    Dan Schulz, Jun 20, 2007 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Almost any positioning scheme would be better than that. DW has given you an unbelievable pile of crap for code. For an example of why it's crap, in Firefox, increase the font size by just one step, [ctl][+].

    Take a look at this (Google is your friend) 3 column layout tutorial. In fact, work your way through the tutorials at that site and also at htmldog.com. HTML and css are not rocket science. Put some time in on it, and you'll be turning out robust pages that will put DW's output to shame.

    cheers,

    gary
     
    kk5st, Jun 20, 2007 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Dan Schulz - I currently only have IE, however i plan on installing FireFox ASAP.

    kk5st - Many thanks for the help and site. So i have been trying to implement CSS into my page. Would be greatful if you could let me know how it looks now (in comparison to earlier)
    www.ukdesi.ulmb.com/indextest.html

    If this is going OK, do you know how i could go about centering my Nav bar (have tried auto widths without any luck) and also how i could place pictures in my content area next to each paragraph?

    Many Thanks in advance.
     
    wd_2k6, Jun 26, 2007 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Much better. You now need to correct some syntax errors. Hint: xhtml is case sensitive, all elements names and attributes being lowercase. An uppercase element is non-existent. Hint #2: You seem to have failed to close an element tag or two. That causes the "element not allowed here" error.

    To center your menu, do not float the ul. Set its width, and center it with margin, i.e., {margin: 0 auto;}. That would be one approach. Again, go back to the list tutorials at maxdesign.

    cheers,

    gary
     
    kk5st, Jun 26, 2007 IP
  8. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hey gary, how come your site is not always IE friendly?
     
    Arnold9000, Jun 26, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    A little off topic, but …

    Many of the pages demonstrate IE bugs or lack of support for css. The site is targeted at developers and tries to solve issues one might run into. Most times there is the right way to do things and then the work-arounds and hacks for IE.

    Look through the site; it should become clear why it's not particularly IE friendly.

    cheers,

    gary
     
    kk5st, Jun 26, 2007 IP
  10. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks for the swift reply,
    I have been able to center the menu and fix all of the syntax errors, bar 1 (re-occuring) error. I believe the others follow on from the first error. Any ideas on how to fix this? Here is the new improved validation: http://validator.w3.org/check?uri=http://ukdesi.ulmb.com/indextest.html
    Do you always recommend using the validator, i typed google into it and 53 errors appeared :s.
    What else would you reccomend, i really would like to place a picture next to each of the mini articles if this is possible?
     
    wd_2k6, Jun 26, 2007 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    Lines 81–83
    
    # <li><a href="/games/pes7/ofiles.html" title="Downloadable Option Files">Downloadable Option Files</a></li>
    # </ul>[color=red]</li>[/color]  
    # <li><a href="/games/gta/index.html" title="GTA PS3">GTA PS3</a>
    Code (markup):
    Red indicates missing closing tag. That's your repeated error.
    Browsers are amazingly fault tolerant, having complex algorithms to figure out what you really meant. Mostly they do very well. Sometimes, though, different browsers treat a given error differently.

    Strictly speaking, you could get away with syntactical errors in both the html and the css. The more complex the page, the more likely an error will cause problems. Both css and client side scripting work against the document object model (DOM). Invalid markup causes browsers to build a DOM with the supposed structure which may not be what you expect your css and javascript to apply themselves to.

    Consider how difficult it can be to debug a page. Why throw invalid markup into the mix? Making sure of validity may or may not fix something, but it will guarantee you one less thing to worry about. I validate with HTML Tidy each time I save. (It's only three keystrokes.) It is extremely rare that Tidy throws an error, simply because back in the day I had to correct a lot, and now valid markup is second nature, but I still check.

    cheers,

    gary
     
    kk5st, Jun 26, 2007 IP
  12. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Sorry for the late reply as have been on hols :)

    OK i sucessfully validated my page.

    Will i have to copy and paste the code for the menu onto every page, or is there any way i could turn this into CSS and enter it into an external stylesheet?

    The only other way i could think, is use a Dreamweaver template, then whenever the master template menu gets edited all of the other pages containing the menu will also get updated?

    Also would you reccomend using various external stylesheets, or defining all elements on one external stylesheet?

    Many Thanks.
     
    wd_2k6, Jul 9, 2007 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    HTML is for structure; CSS is for presentation; JavaScript is for behavior, a server-side program (or server-side includes) are for maintenance. I strongly suggest you read this post (link below) I wrote last year to avoid using Dreamweaver. Also please make sure you have either Server-Side Includes (SSI) or PHP enabled on your hosting provider's server. Don't worry, you don't need to learn everything about SSI or PHP. What I'll teach you in that post is all you'll need to know at this stage.

    http://forums.digitalpoint.com/showthread.php?p=2145250#post2145250
     
    Dan Schulz, Jul 9, 2007 IP