How Can I get my DL to style properly?


Tags: css,list

Problem :

I'm just wonderfin if anyone can tell me if I am on the right track to styling this properly? with my CSS and HTML like this

#bulletsBox{
    position: relative;
    height: 382px;
    width: 736px;
    padding-top: 40px;
    padding-bottom: 48px;
    padding-right: 102px;
    padding-left: 102px;
}
dl#Bullets,#Bullets2, #Bullets3, #Bullets4, #Bullets5, #Bullets6{
    position: relative;
    height: 210px;
    width: 210px;
    display: inline;
    margin-right: 50px;
    list-style-type: none;
}
#Bullets dt,#Bullets2 dt,#Bullets3 dt, #Bullets4 dt,#Bullets5 dt,#Bullets6 dt{
    font-family: Arial, Helvetica, sans-serif;
    list-style-type: none;
    font-size: 14px;
    color: #969b94;
    text-transform: uppercase;
    padding-bottom: 12px;
    }
#Bullets dd,#Bullets2 dd ,#Bullets3 dd, #Bullets4 dd,#Bullets5 dd,#Bullets6 dd{
    font-family: Arial, Helvetica, sans-serif;
    list-style-type: none;
    font-size: 12px;
    color: #686869;
    margin: 0px;
    line-height: 18px;
    }



<div id="bulletsBox">
                <dl id="Bullets">
                    <dt>web standards</dt>
                    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
                </dl>

                <dl id="Bullets2">
                <dt>web standards</dt>
                    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
              </dl>

              <dl id="Bullets3" style="margin:0px">
                <dt>web standards</dt>
                    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
              </dl>

              <dl id="Bullets4">
                  <dt>web standards</dt>
                    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
              </dl>

              <dl id="Bullets5">
                <dt>web standards</dt>
                    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
              </dl>

              <dl id="Bullets6" style="margin:0px">
                <dt>web standards</dt>
                    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
              </dl>

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

it displays how I want it to in Dreamweaver like this

but when I veiw it in a browser it looks like this



Solution :

You can get rid of the display:inline on #Bullets dt,#Bullets2 dt,#Bullets3 dt, #Bullets4 dt,#Bullets5 dt,#Bullets6 dt and just put float:left instead.

You'll also want to correct the inline style of margin:0px on #Bullets3 and #Bullets6 and replace it with margin-right:0px since I think that's really the only margin value you want to override.

Finally, just use #bulletsBox dl to refer to all the #Bullets elements inside of it. Easier to read and write :)


    CSS Howto..

    How to stop CSS element style from getting into my class style?

    How to get rid of hidden space HTML/CSS [closed]

    Table: how to change pictures on mouseover on single rows?

    How do I get the codes of creating the sidebar from this website? [closed]

    how to place last div into right top corner of parent div? (css)

    How to remove spacing between the top of a border and a div [closed]

    How do you change the background opacity in CSS?

    How do I solve this IE7 margin issue?

    How to reference another selector in css

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    How to use anchor links to scroll within a div without scrolling the main page

    How to select by CSS styles in jQuery?

    How to use external css for a background image with gedit

    How to transform (move whole child dives) div to max width with css?

    How to change inline css using jquery in joomla

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    how to make animated 404 gears?

    How to add new fonts in CSS for local testing

    Remove oval border-radius when 2 digit numbers show up

    How to truncate text in select box using CSS only

    How to Change blue background selection color from image using css

    how i can select some attribute value from in line css

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    Why is my text not showing in my DIV?

    How to access an element's class value via CSS

    How to make Flexbox span multiple lines?

    How can I remove “border-top-width” css style?

    How to Get Fixed Children to Play Nicely with their Parents

    How can I transcend my confusion over CSS?

    why is the space (shown in image) is added below when using vertical-align? How to fix it?