WordPress.org

Forums

Twenty Eleven
[resolved] How to code a row of three image-links? (3 posts)

  1. domdomdom
    Member
    Posted 2 years ago #

    Hello,

    I've been trying to work things out but as a newbie and I've just hit the wall where my brain refuses to work out the problems.. so... hello helpers :)

    The website I'm working on is:
    http://51stokescroft.com.gridhosted.co.uk/

    In my Home page, I want to have only a row of three large-ish images (adjusting with the screen size) in line- each of them a link to bar, restaurant & party bookings pages.
    I wrote the code below, and css pasted in below the code, but it doesn't seem to work..

    <div id="home-links" class="homelinks">
    	<a class="Restaurant" href="http://51stokescroft.com.gridhosted.co.uk/Restaurant">Restaurant</a>
      	<a class="Bar" href="http://51stokescroft.com.gridhosted.co.uk/bar">Bar</a>
      	<a class="Party-Bookings" href="http://51stokescroft.com.gridhosted.co.uk/Party-Bookings/">Party Bookings</a>
    </div>

    #home-links {
    display: inline;
    float: left;
    margin-top: 5em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: auto;
    }

    .Restaurant {
    width: 320px;
    height: 220px;
    padding-right: 5%;
    background-image: url(http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/restaurant.jpg);
    }

    .Bar {
    width: 320px;
    height: 220px;
    padding-right: 5%;
    background-image: url(http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/bar11.jpg);
    }

    .Party-Bookings {
    width: 320px;
    height: 220px;
    padding-right: 0%;
    background-image: url(http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/party.jpg);
    }

    Before this I tried writing a code for a ul instead of the code above-

    <div id="home-links" class="homelinks">
           <ul id="menu-images">
          <li class="Bar"><a href="http://51stokescroft.com.gridhosted.co.uk/bar"><img src="http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/bar11.jpg" alt="Bar" height="220" width="320"></a>
           <li class="Restaurant"><a href="http://51stokescroft.com.gridhosted.co.uk/Restaurant/"><img src="http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/restaurant.jpg" alt="Restaurant" height="220" width="320"></a>
    
          <li class="Party-Bookings"><a href="http://51stokescroft.com.gridhosted.co.uk/Party-Bookings/"><img src="http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/party.jpg" alt="Party Bookings" height="220" width="320"></a>
        </ul>
    </div>

    And styled css accordingly, but was having trouble to get a hover image on top of the link image so tried to do it differently, but still having problems...

    And I'm working on twenty eleven theme..

    Would really appreciate your help!

    Thanks,
    Dom

  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    You should continue your second example and structure your links in a list. With that you could get the images in a row, yes?

  3. domdomdom
    Member
    Posted 2 years ago #

    Yea I will continue with the list as I started. I got a bit confused.. :)
    Will go back to the list now and will be back to the forum when I stumble across my problem with the hover :)

    Thanks a lot Andrew :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic