dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Making my divs inline.

  1. #1
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10

    resolved [RESOLVED] Making my divs inline.

    I have a selection of divs that are displaying properly except that they are under one another. I'm assuming this is because they are block elements. So, I try to switch them to inline but they and their content don't display properly.

    here is my index: I'm sorry my formatting is terrible

    <div class="midline">

    <img src="images/latest.gif" id="latest"><img src="images/kam.jpg" class="smallimages">
    <img src="images/rvvally.jpg" class="smallimages"><img src="images/blog.jpg" class="smallimages">
    <img src="images/saladfingers.jpg" class="smallimages"><img src="images/poolbuilders01.jpg" class="smallimages">
    <img src="images/lionsyell.jpg" class="smallimages"><img src="images/poolbuilders02.jpg" class="smallimages">

    <div class="img"><img src="images/evato.jpg" alt="Evato Site Design" width="141" height="96" />
    <div class="desc">web design and development.</div></div><div class="img">
    <img src="images/tevaclean.jpg" alt="Teva Clean Flyer Design" width="141" height="96" />
    <div class="desc">Graphic design and print.</div></div><div class="img">
    <img src="images/vehl.jpg" alt="Character Illustration" width="141" height="96" /><div class="desc">
    Illustration and character design.</div></div><div class="img">
    <img src="images/branding.jpg" alt="Branding Package Sample" width="141" height="96" /><div class="desc">
    Branding and documentation</div></div><div class="img">
    <img src="images/other.jpg" alt="Texture Map Sample" width="141" height="96" /><div class="desc">Other.</div></div>

    </div>
    Here is my external CSS:

    div.midline {background-color: #181717;
    z-index:2;
    padding-top:15px;
    padding-bottom:15px;
    padding-right:0px;
    padding-left:0px;}

    div.img {margin: 2px;
    border: 7px solid #232222;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color:#1b1a1a;
    width: 170px;
    margin-top:15px;
    margin-bottom:0px;
    margin-right:15px;
    margin-left:15px;
    z-index:3;}

    div.img img {display: inline;
    margin-top:10px;
    margin-bottom:10px;
    margin-right:15px;
    margin-left:15px;
    border: 0px;
    z-index:4;}

    div.desc {text-align: left;
    width: 141px;
    margin-top:0px;
    margin-bottom:10px;
    margin-right:15px;
    margin-left:15px;
    z-index:4;}
    When like this, this is how the page displays:

    If I add {display:inline;} to my div.img this is how it displays

    I'm also having issues with the contents of a div inheriting an opacity that I only want to apply to the background. But that one I haven't tried too hard to figure out on my own honestly ;P. Anyway, I'm new to developing so I'm probably missing something silly. It's driving me bananas though so... thanks if anyone can give me a nudge.

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Check this:
    HTML Code:
    <div style="float:left;">
        Hey girl!
    </div>
    <div style="float:left;">
        Wanna go for a dinner tonight?
    </div>

  3. #3
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10
    yeah, it was my float and overflow that was killing me lol. Got it though....
    still trying to sort the opacity inheritance out.
    looking at iframes, attribute selectors, RGBa colors... just changing the child elements.
    nothing seems to be working. got some insight on that?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles