#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    2
    Rep Power
    0

    Newby - 2 Qs - tag & box


    Q1

    The header has two images (left & right) and two lines of text (h1 & h3). The left image tag says

    <body.twoColFixLtHdr><div#container><div#header><p><img.fltlft> and the right is similar.

    What is that <p> doing in there? I know <p> means paragraph text but the image ought to be in <div#header> not under <p>.

    Q2 I had a tough time positioning the images vertically. They showed up above or half out below. Is the box model looking to position the images? How do I set border and padding to zero?



    Thanks for your help

    Frank
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    #1
    This must be some sort of abbreviated code, probably interpreted by some script.

    for instance
    Code:
    <div#container>
    should be
    Code:
    <div id="container">
    What the <p> is doing there, I have no idea. except that it's missing an endtag. Maybe its (mis)used for layout purposes

    Where did you get this code from?

    #2
    Second the boxmodel doesn't do anything with positioning. Its pretty much deals with the dimensional layers of 1 object.
    object+padding+border+margin (google images of the boxmodel)

    To position images vertically without seeying the case I would say have a look in the properties Float and Clear (or use an unordered list (<ul>).

    #3 (answer to third question)
    Code:
    selector{padding:0;margin:0;}
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    2
    Rep Power
    0
    Aeternus,

    Thank you for your help.

    Originally Posted by aeternus
    #1
    This must be some sort of abbreviated code, probably interpreted by some script.

    for instance
    Code:
    <div#container>
    should be
    Code:
    <div id="container">
    What the <p> is doing there, I have no idea. except that it's missing an endtag. Maybe its (mis)used for layout purposes

    Where did you get this code from?

    I use Dreamweaver to create the code. I could not delete the <p>

    #2
    Second the boxmodel doesn't do anything with positioning. Its pretty much deals with the dimensional layers of 1 object.
    object+padding+border+margin (google images of the boxmodel)

    I set up the header with text only. object + padding +border Then I try to insert the image which is bigger than the object+padding+margin. So either the image can't fit or the object gets bigger. The images are stuck to the top edge of Header. Could that be the cause of my problems?

    To position images vertically without seeying the case I would say have a look in the properties Float and Clear (or use an unordered list (<ul>).

    I am using float. What does Clear do?


    #3 (answer to third question)
    Code:
    selector{padding:0;margin:0;}
    I will try to do that using Dreamweaver.
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    If dreamweaver produces this:
    Code:
    <body.twoColFixLtHdr><div#container><div#header><p><img.fltlft>
    and that is also outputed to the browser than that is wrong. It's invalid code , which as far as I see is used by a different program to interpret it and make it valid html.


    As far as the property Clear. Did you try to google it?
    I can tell that float and clear are like brother and sister, but it would be wise to google it and read about it, unless you like me to paste the w3c manual here.
    I set up the header with text only. object + padding +border Then I try to insert the image which is bigger than the object+padding+margin. So either the image can't fit or the object gets bigger. The images are stuck to the top edge of Header. Could that be the cause of my problems?
    I would suggest you show us some valid html and css.
    The basics look like this
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    
    </body>
    
    </html>
    They all have a begin and endtag (unlike your code).

IMN logo majestic logo threadwatch logo seochat tools logo