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

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0

    CSS Positioning Definition Lists


    I am trying to use a definition list to develop a listing of employees that includes each Employees' Name (dt), an image of each Employee (dd) and a Job Title (dd) for each employee. I am trying to float each image to the left and I want each employees' name and job title to butt up against the top right corner of the image with the name above the job title. I am wanting to use classes instead of divs, because I would like to reuse the markup in another part of the website (for members instead of employees). The following is the styling and html.

    .dlformat{
    float: left;
    margin: 0;
    padding: 0;
    }

    .dtformat{
    float:right;
    margin: 0;
    padding: 0;
    }

    .ddformat{
    margin: 0;
    padding: 0;
    }

    .ddimgformat{
    float: left;
    margin: 0;
    padding: 0;
    }

    <dl class="dlformat">

    <dt class="dtformat">Employee1Name</dt>
    <dd class="ddimgformat"><src="img/Employee1Pic.jpg"/></dd>
    <dd class="ddformat">Employee1JobTitle</dd>

    </dl>

    <dl class="dlformat">

    <dt class="dtformat">Employee2Name</dt>
    <dd class="ddimgformat"><src="img/Employee2Pic.jpg"/></dd>
    <dd class="ddformat">Employee2JobTitle</dd>

    </dl>

    etc...

    The pics lineup nicely on the left side of the page as they should. The Names and titles are to the right of the page but in disarray, not aligning with the appropriate image. I've tried a number of clearing hacks without any luck.

    I chose to use definition lists, because I eventually (if I can get this to work) want to alternate every other dl to the right, with the image floated to the right and the Name and Title butted against the top left of the image with the name over the title. Thanks.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Based on your code, this is what I would do (very quick and may need tweaking):

    Code:
    .dlformat{
    display: block;
    margin: 0;
    padding: 0;
    clear: both;
    }
    
    .info{
    float:left;
    }
    
    .ddimgformat{
    float: left;
    margin-right: 10px;
    }
    .ddformat {
    	margin: 0;
    }
    </style>
    </head>
    <body>
    <dl class="dlformat">
    <dd class="ddimgformat"><img src="graphics/envelope-logo.jpg"/></dd>
    <div class="info">
    <dt class="dtformat">Employee1Name</dt>
    <dd class="ddformat">Employee1JobTitle</dd>
    </div>
    
    </dl>
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    simplypixie, <dl> elements may only have <dt> and <dd> elements as direct children.

    http://www.w3.org/TR/html-markup/dl.html
    http://www.w3.org/TR/html401/struct/lists.html#edef-DL

    If you're going to move the <dd> for the image before the <dt> anyway, why do the the <dt> and other <dd> need to be (indirectly) floated?


    scottmccullough, welcome to DevShed Forums.

    Will the photo for each person have the same dimensions? If so, I would suggest giving the <dl>s "position:relative" (to create a new positioning context) and a large left (or right) padding and then absolutely positioning ".ddimgformat" over the padding.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo