1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design arranging pics

Discussion in 'Web Design' started by thedressdiva, Jan 27, 2009.

  1. thedressdiva

    thedressdiva New Member

    I downloaded the fashion template. When i add my pics, they end up in a long row, one on top of the other. How do I make "rows" of pics side by side? Many thanx in advance.
     
    thedressdiva, Jan 27, 2009
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    post your code so we don't have to guess..................
     
    ishkey, Jan 29, 2009
    #2
  3. thedressdiva

    thedressdiva New Member

    </div>
    </div>
    <div id="collection">
    <div class="inner">
    <div id="minigal">
    <div><img src="images/pic_4.jpg" width="150" height="200" alt="Pic 4" /></div>
    <div><img src="images/pic_5.jpg" width="150" height="200" alt="Pic 5" /></div>
    <div><img src="images/pic_6.jpg" width="150" height="200" alt="Pic 6" /></div>
    <div><img src="images/pic_7.jpg" width="150" height="200" alt="Pic 7" /></div>
    <div><img src="images/pic_8.jpg" width="150" height="200" alt="Pic 8" /></div>
    <div><img src="images/pic_9.jpg" width="150" height="200" alt="Pic 9" /></div>
    </div>
     
    thedressdiva, Feb 6, 2009
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    First you have to understand that the style.css file is setting layout for the page and as such you have a limited space to work with. See the code in the index.html file, this calls code from the style.css file.
    Code:
    [B][SIZE=1]<div[/SIZE][/B][SIZE=1] id=[B]"minigal">[/B][/SIZE]
[B][SIZE=1][B][SIZE=1]<div><[/SIZE][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_4.jpg"[/B] width=[B]"57"[/B] height=[B]"53"[/B] alt=[B]"Pic"[/B] [B]/></div>[/B][/SIZE][/SIZE][/B]
    Now look at the style.css file where the code resides and it's settings.
    Code:
    #minigal {
  float: right;
  [COLOR=red]width: 222px;[/COLOR] [COLOR=dimgray]/* This is how wide the box is */[/COLOR]
  margin-top: 1em;
  margin-bottom: 1em;
}
    The code in the original file has a smaller size.
    Code:
    [B][SIZE=1]<div><[/SIZE][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_4.jpg"[/B] [COLOR=red]width=[/COLOR][B]"57"[/B] [COLOR=red]height=[/COLOR][B]"53"[/B] alt=[B]"Pic"[/B] [B]/></div>[/B][/SIZE]
    Your code size is to big.
    Code:
    [B][SIZE=1]<div><[/SIZE][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_4.jpg"[/B] [COLOR=red]width=[/COLOR][B]"150"[/B] [COLOR=red]height=[/COLOR][B]"200"[/B] alt=[B]"Pic 6"[/B] [B]/></div>[/B][/SIZE]
    Hope this clears things up.
     
    ishkey, Feb 6, 2009
    #4
  5. thedressdiva

    thedressdiva New Member

    okay!! duh... so when i change the pic sizes, i have to go back and tweak the css file. i forgot that step! Thanx so much. that was a quick fix to a massive headache! :) u da bomb ishkey!
     
    thedressdiva, Feb 6, 2009
    #5
  6. tailender1

    tailender1 New Member

    alternatively you can use tables to display pics.. but it might be too restricted
     
    tailender1, Feb 19, 2009
    #6
  7. The SSL Store

    The SSL Store Banned

    Good information sharing. This information solve my issue. Thanks.
     
    The SSL Store, Feb 20, 2009
    #7