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

CSS Can't place images in the right place [noob question]

Discussion in 'Web Development' started by vovik ukr, Jan 5, 2013.

  1. vovik ukr

    vovik ukr New Member

    Okay so i got my template here [​IMG]

    and when ever i try to join wallpapers and videos together it moves the pictures down like so:

    [​IMG]

    how do i make it so it doesn't go down by two but by 4

    here's the original code:
    HTML:
                            <div>
                            <div>
                                <h3>wallpapers</h3>
                                <ul>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper1.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper2.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper3.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper4.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h3>videos</h3>
                                <ul>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video1.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video2.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video3.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video4.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                </ul>
                            </div>
                        </div>


    what i did:

    HTML:
                            <div>
                            <div>
                                <h3>videos</h3>
                                <ul>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video1.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video2.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video3.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/video4.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper1.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper2.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper3.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                    <li>
                                        <a href="#" class="figure"><img src="images/wallpaper4.jpg" alt=""></a>
                                        <span><a href="#">This is just a place holder</a></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
     
    vovik ukr, Jan 5, 2013
    #1
  2. Geoff Tyrer

    Geoff Tyrer Member

    If you could you provide all of the HTML for the page, plus the CSS, I'd take a look at it.
     
    Geoff Tyrer, Jan 6, 2013
    #2
  3. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    It's very easy to fix this—just change one value in the style.css from width: 450px; to width: 920px;
    The code line you need to change in the css is line 291.
    Here is the exact code snippet if you can't find it:

    Code:
    #body .media > div > div {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 10px;
    padding: 3px 0 0;
    width: 450px;
}
    change it to:

    Code:
    #body .media > div > div {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 10px;
    padding: 3px 0 0;
    width: 920px;
}
     
    Mimoun, Jan 7, 2013
    #3