Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    20
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Trying to display images side by side in CSS

    I'm trying to make a custom Tumblr theme. I know HTML as well as CSS. I want my images and text postings to be displayed side by side, no spaces in between them with each posting a width of 200px and a height of 200px. I have some of the code completed, but my images are not displaying correctly. I have tried awhile and this is the end result: http://testingmyborders.tumblr.com/

    I have tried to fix this for 2 days and realize I cant do this alone. All suggestions and tips will be taken into consideration and tested. I appreciate you taking the time to read this.You can email me with coding corrections and suggestions here:twoguanine@yahoo.com

    Once again, I thank you for reading this.

    Here is my unfinished theme code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>{Title}</title>
    <style type="text/css">
    .grid
    {
    margin-left:30px;
    margin-right:30px;
    height:200px;
    width:200px;
    float:left;
    text-align:center;
    display:inline;
    }

    body
    {
    color:#fff;
    background-color:#000;
    margin-left:5px;
    margin-bottom:5px;
    margin-right:5px;
    margin-top:5px;
    width:500px;
    height:500px;
    }

    </style>
    </head>
    <body>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
    <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    </head>
    <body>
    <h1>{Title}</h1>

    {block:Description}
    <p id="description">{Description}</p>
    {/block:Description}

    <div class="grid">
    {block:Posts}
    {block:Text}
    <div class="grid">
    {block:Title}
    <h3><a href="{Permalink}">{Title}</a></h3>
    {/block:Title}

    {Body}
    </li>
    {/block:Text}

    {block:Photo}
    <div class="grid">
    <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
    </div>
    {/block:Photo}
    </div>
    </body>
    </html>
    Last edited by tai chi; 10-18-2011 at 06:54 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Just viewing your code above briefly, you have several coding errors. You should run your html through the validator and fix those coding errors.
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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