CODEWITHSUNDEEP
htmlcsscss-tables
David Flynn
David Flynn

Reputation: 11

Converting HTML table over to Divs

I have had a good start at geting my codeded table turned over from a table to Div setup but some where in this part right here it seems to be having a problem. This is what the site should look like: http://db.tt/YeUZiiBy.

Here is the code and CSS Link: http://jsfiddle.net/8WKR9/1/.

Here is my HTML `

<div id="container">
    <article>
        <div class="item">
            <img src="4-cute-cats.jpg" class="centerImage" width="300" height="300"
            />
            <p class="centerText">They hunt in packs.</p>
        </div>
        <div class="item">
            <img src="cat_sniping.jpg" class="centerImage" width="256" height="192"
            />
            <p class="centerText">Sniper Cat</p>
            </a>
        </div>
        <div class="item">
            <img src="LOL1.jpg" class="centerImage" width="300" height="298" />
            <p class="centerText">Sneaking Cat</p>
        </div>
        <div class="item">
            <img src="hammercat.jpg" class="centerImage" width="300" height="163"
            />
            <p class="centerText">80s Cat</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
            <p class="centerText">It's a trap!</p>
        </div>
        <div class="item">
            <img src="chop-cats.jpg" class="centerImage" width="300" height="140"
            />
            <p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
        </div>
        <div class="item">
            <img src="smartkat.jpg" class="centerImage" width="200" height="338" />
            <p class="centerText">Intelligent cat.</p>
            </a>
        </div>
        <div class="item">
            <img src="narniacat.jpg" class="centerImage" width="200" height="337"
            />
            <p class="centerText">Once a cat of Narnia always a cat of Narnia.</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="lolcats3.jpg" class="centerImage" width="300" height="108" />
            <p class="centerText">Tired cat.</p>
        </div>
        <div class="item">
            <img src="lol_cats_1.jpg" class="centerImage" width="300" height="142"
            />
            <p class="centerText">Gollum Cat.</p>
        </div>
        <div class="item">
            <img src="Magical-Kitty.png" class="centerImage" width="300" height="180"
            />
            <p class="centerText">Super Cat.</p>
        </div>
        <div class="item">
            <img src="sad-kitty.jpg" class="centerImage" width="300" height="188"
            />
            <p class="centerText">Sad Kitty.</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="cat-in-your-wallpaper.jpg" class="centerImage" width="300" height="200"
            />
            <p class="centerText">Wallpaper cat.</div>
        <div class="item">
            <img src="thinking-cat.jpg" class="centerImage" width="300" height="475"
            />
            <p class="centerText">Thinking cat.</p>
        </div>
        <div class="item">
            <img src="http://3.bp.blogspot.com/_znuneBeHigk/TSOOr5DuoQI/AAAAAAAABFY/-Rpe8S1uRo8/s1600/000.jpg&w=823&h=618&ei=_A4VUfP7L4Gy2QXJ-oHIDQ&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72"
            class="centerImage" width="300" height="225" />
            <p class="centerText">Gamer Kitty.</p>
        </div>
        <div class="item">
            <img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg"
            class="centerImage" width="300" height="504" />
            <p class="centerText">Couch cat.</p>
        </div>
    </article>
    </article>
    <article>
        <div class="item">  <a href="morekitties.html">More Kitties</a>

        </div>
    </article>
</div>`

Upvotes: 0

Views: 427

Answers (4)

GeNyaa
GeNyaa

Reputation: 113

you could use max-width and/or max-height on your img tags to make sure they keep ratio instead of transforming.

Upvotes: 0

pacmora
pacmora

Reputation: 17

Try setup height in tag img

.item > img {
width: 100%;
height: 100%;    
}

Upvotes: 1

lukek
lukek

Reputation: 478

I think you had the right idea with the mark up but needed some work on the CSS side of things. The key is to clear your floats or else it the item will go to the next available place. I suggest doing a bit more reading on floating and how they effect block elements and the parent element.

I've done a quick 'bare bones' example for you that you should be able to adapt.

http://jsfiddle.net/ZbfXU/2/

<html></html>

Upvotes: 1

woolm110
woolm110

Reputation: 1204

Go through your code and tidy it up, you've got the right idea of separating into rows then using divs within each row.

Here's one I very quickly mocked up, http://jsfiddle.net/8WKR9/5/ 1st and 3rd height are the same and 2nd and 4th are the same, i'm not getting any display errors so probably best going through your HTML & CSS and tidying it up, that way you can see what each part is doing and work out where it's going wrong, rather than try and find a quick fix, it'll also make your code cleaner and easier to read. 

<html></html>

Upvotes: -1

Related Questions