Basic Dreamweaver question

Discussion in 'Web Design' started by FrontPage97, Apr 18, 2013.

to remove all ads.
  1. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    So can't someone just make adjustments to what Dreamweaver creates? I will have to experiment with browser zoom settings to see if I can recreate those issues that you are talking about. Back to my original question....

    I saw some tutorials on YouTube and they say that for AP DIV's to add new properties of "margin: Auto" and "position: relative".

    For DIV tags (used to center a page layout) they say under set "Box" to set "right" and "left" to "auto".
    http://www.youtube.com/watch?v=CcswpZRiYIg
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Probably not, because position: relative ALSO does not do what you think it does.

    If you want an element to be relative to other elements NO POSITIONING IS NEEDED AT ALL
     
  3. FrontPage97

    FrontPage97 New Member

    Messages:
    71
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    first of all (if you can get past the mind numbing soundtrack)
    all he has done is made an APdiv not an apdiv, yet it's still being "called" #apdiv1,
    for those that cant be bothered to watch the video this is his process
    1. insert > layout objects > AP div
    2. open the properties panel change the width to 950 height to 500
    3. open the css styles panel (window > css styles) and view the properties for #apdiv1
    4. change position absolute to position relative
    5. add new property margin with value auto
    6. then go to the pages properties panel and change bg colour of the page
    7. then using the properties panel again change the bg colour of apdiv#1
    8. save
    9. preview in browser.
    this being the result.
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #apDiv1 {
            position: relative;
            width: 950px;
            height: 500px;
            z-index: 1;
            margin: auto;
            background-color: #FFFFFF;
    }
    body { background-color: #000; }
    </style>
    </head>
    
    <body>
    <div id="apDiv1"></div>
    </body>
    </html>
    
    I'm going to ignore the fact that apdivs are added to the <head> of the document and fantasise for one minute that it's automagically added it to a separate css document. in which case it hasn't strayed too far off the mark however a few things DW has "done" which I wouldn't.
    1. our newly created "box" is called a non-semantic nothing name (apdiv1) I know this may seem pedantic but by following this approach pretty soon you'll have style names apdiv46, apdiv172, etc etc.
    2. because of the order of operations we now have the body after the apdiv in the css. again you might see this as pedantic, but css (cascading style sheets) are a lot easier to maintain running in the order of the cascade, and your stylesheet is going to run in the order you create the boxes, so in theory you might have a apdiv which is a parent container and it's child is found a further 25 selectors away. that is simply NOT maintainable....
    3. z-index has been left in our css even though we don't need it, by applying position:relative; you are in essence "activating" the z-index, which means further apdivs created can have odd and unforseen overlapping effects, particularly if the z-index is increased on any of the apdivs.
    4. by adding a height value the apbox may "appear" correct on the screen but the content will simply overflow out of it once it reaches the height value.

    so that's 4 things (for the addition of just one div) that he does that I wouldn't do.

    if using that technique you then added (in this order) a box for the header, a box for the navigation, a box for the content of the body, then a box for the logo (which is an image) IN the header box, then a footer, then 5 menu items in the nav this is what the resultant html would look like. (for brevity i'll keep it to just the <body>.
    HTML:
    <body>
    <div id="apDiv1">
    <div id="apDiv2">
    <div id="apDiv5">
    <img src="#" alt="image"/>
    </div>
    </div>
    <div id="apDiv3">
    <div id="apDiv7">
    </div>
    <div  id="apDiv8">
    </div>
    <div id="apDiv9">
    </div>
    <div  id="apDiv10">
    </div>
    <div  id="apDiv11">
    </div>
    </div>
    <div id="apDiv4"></div>
    <div id="apDiv6"></div>
    </div>
    </body>
    
    now tell me which one is the 2nd navigation item?
    (apDiv8)

    so... assuming you had a blank html page and a blank css page (linked) both open in DW here's how you would do the same thing (but in the code instead)

    1. open the html file, click "code view"
    and find where is says
    <body>
    </body>
    (there will be about 8 lines so it'll not be hard to spot)
    2. insert a new line type in the body.
    HTML:
    <body>
    <div id="wrapper"></div>
    </body>
    
    2. open the css file.
    type the following
    Code:
    body {
    background-color:black;
    }
    
    #wrapper {
    background-color:white;
    width:950px;
    margin:0 auto;
    }
    
    if you intend on having floated content within the wrapper I'd also add
    overflow:hidden to it so it clears the floats. I wouldn't add a height as that would result in overflowing text/images/elements once it reaches the max height set.

    3. file > save all
    4. preview in browser

    Now expanding the previous example i'll add to my html a header, a nav, a content section, a logo, a footer and 5 navigational items.
    HTML:
    <body>
    <div id="wrapper">
    <header>
    <img class="logo" src="#" alt="image" />
    </header>
    <nav>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </nav>
    <div id="content"></div>
    <footer></footer>
    </body>
    
    now can you guess which is the second nav item in this one?
    (the 2nd <li>)

    mind you neither navigation item had the link in it so it made it a bit more difficult, but can you see the difference? thats with 11 items. imagine what DW would "do" for you if you made a complete website in that fashion (and yes we haven't even touched on the fact that the styles are not automatically added to a separate sheet but in the <head>)
     
    Last edited: Apr 22, 2013
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    I've not even going to watch it, because whomever made it is WRONG.

    AP divs cannot be truly "centered". Absolute positioning removes the element from the document flow so they do NOT affect any other elements, neither are they affected by other elements around them.
    They will be EXACTLY at the point where the position offsets put them, REGARDLESS of screen size or browser window size

    Sure you can "fudge it" with a relative positioned, fixed size parent, but it will only work correctly at ONE resolution or screen size, and no matter what arguments you present in favour of absolute postion it should ONLY be used in circumstances where an element is required to be ABOVE or below all elements in the vertical plane, ie: a 'drop down' menu. That is really the ONLY legitimate use for positioning that 95% of layout developers will EVER need.
     
  6. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    Thanks for the demonstration.
    Right now I just got done reading my 2nd training course on using Dreamweaver. Unfortunately I'm going to just try to learn the hard way and find out the limitations first hand for myself unless I can find a course on developing basic sites with code.
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    There is HUNDREDS of them.

    And the first thing to know and fully comprehend is that you are not coding an entire website, it's only ONE document that you have to code
     
  8. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Sure thing. There are 1000's of how to code tutorials out there, probably more than there is dw tutorials.

    Come back and ask qs when you get stuck...
    :p
     
  9. junery00

    junery00 New Member

    Messages:
    39
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Who knows???
     
  11. FrontPage97

    FrontPage97 New Member

    Messages:
    71
  12. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    the issue (apart from the code it creates being less than ideal) is design view does not give you an accurate representation of what the website will look like, and if you have to jump to the code view each time to "pay attention to whats being written in code" why don't you just stay in code view and write the code???

    and by the way each time you push the space bar in Design view you're probably adding those &nbsp; ...

    maybe maybe not, but if it was I can guarantee it wasn't in design view.
     
  13. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    I'll try. A lot of learning right now.
     
  14. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
  15. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    yep, but I thought I'd just let that one slide :p

    BTW I also answered the question on the youtube page you posted as well, as I figured the guy who did that video probably didnt know. He didn't seem too knowledgeable... (for the record body {margin:0;padding:0;} will get rid of that pesky space.)

    I'm still waiting on his reply to your other question though :D
     
    Last edited: Apr 27, 2013

Share This Page