Support » Themes and Templates » Twenty Eleven » How to code a row of three image-links?

  • Resolved domdomdom

    (@domdomdom)


    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Andrew Nevins

    (@anevins)


    Forum moderator


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

    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 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to code a row of three image-links?’ is closed to new replies.