Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member madeaux's Avatar
    Join Date
    Nov 2008
    Location
    Asheville, NC
    Posts
    11
    Member #
    17712
    I am having an issue that I would love some feedback on. I am creating a site where navigation links are in a column and each one is preceded by a small image (each image is different, but they are all the same size). Some of the nav links are only one word, while others are several words and wrap onto a new line.

    I have not been able to figure out an elegant way of getting the center of the image to align with the center of the navigation link. I have tried lots of different ways to format this, including making the images be the background with css and having them in the html. Having the images in the actual html and styling them with vertical-align: center; works fine when the text is only on one line, but when the text wraps, it pushes the text all the way to the bottom. Similarly, when I use the image as a background, the spacing between the links is off.

    So can any of you rock stars think of a way to get my images and the center of the text links to align vertically, no matter how many lines the links take up without going in and entering different padding and margins for each, which #1 is inefficient and #2 is imprecise because I will have to eye it and I do love the mathematical precision of well thought out code.

    I have looked this up online as it seems like something that would come up frequently, but could not find any article that solves the whole text-wrap issue.

    thanks!

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hello madeaux, welcome to WDF.

    Your post was very detailed, but just to be sure, you are trying to have an image and a text link appear vertically centered in a <li> regardless of the link text's size?

    If that is correct, then try the following:

    HTML
    HTML Code:
    <ol id="mainNav">
    	<li><img src="arrow.jpg" alt="li image" width="15" height="13" /><a href="#">Link-1</a></li>
    	<li><img src="arrow.jpg" alt="li image" width="15" height="13" /><a href="#">Link-2-goes-on-a-little-bit</a></li>
    	<li><img src="arrow.jpg" alt="li image" width="15" height="13" /><a href="#">Link-3</a></li>
    	<li><img src="arrow.jpg" alt="li image" width="15" height="13" /><a href="#">Link-4-goes-on-and-on-and-on-and-on-and-on</a></li>
    </ol>
    CSS
    Code:
    #mainNav
    {
    	width: 150px;
    }
    
    #mainNav li
    {
    	border: 1px solid blue;
    	list-style-type: none;
    }
    
    #mainNav li a
    {
    	display: block;
    	text-align: center;
    }
    
    #mainNav li img
    {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    There may be a solution out there that puts the image in the CSS declarations rather than the HTML, but this works for me (if I understand your post).

  4. #3
    Junior Member madeaux's Avatar
    Join Date
    Nov 2008
    Location
    Asheville, NC
    Posts
    11
    Member #
    17712
    bfsog--thanks so much for your reply and welcome.

    I guess I wasn't as clear as I thought with my question, my apologies--

    I meant that I need the image and the link vertically aligned with each other to the center. So the center of the link is lined up with the center of the image, next to each other, not overlapping or stacked on top of each other.

    Here is a link to the layout:

    http://www.mydesigngarden.com/images...cupuncture.jpg

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Show us the URL to the actual website ...
    That way, I can experiment.

    I'm actually thinking that in your case you should use <table>s to do this.
    <td valign="center"> to vertically center the text.

    As long as each graphic icon is the same dimensions,
    the spacing will be good between them.

    One step further, if that navigation section ("table") is saved as a
    separate PHP file, you could use <?php include("nav.php")?> to
    insert that navigation section into your page.

    Then, in "nav.php" you have coding that does different things to
    that navigatioin depending on the page that is displayed.
    image swapping, color changes, etc.


  6. #5
    Junior Member madeaux's Avatar
    Join Date
    Nov 2008
    Location
    Asheville, NC
    Posts
    11
    Member #
    17712
    I don't have the actual website up yet, I was waiting to upload it until I got this navigation issue fixed. I will upload what I have as soon as I am able.

    I am really hoping for a simple, elegant xhtml/css way to do this without tables. I suppose I can do that as a last resort, but if anyone knows how to do it without them, I'm all ears (eyes?)

  7. #6
    Junior Member madeaux's Avatar
    Join Date
    Nov 2008
    Location
    Asheville, NC
    Posts
    11
    Member #
    17712
    Anyone? Surely this has come up before...

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    There's nothing wrong with tables if you are displaying tabular data,
    such as a grid of photos and text. Just one section of your layout
    needs to be a table.

    Too hard to tell without seeing your page online.
    We have no idea what sizes any of your graphics are or anything about it.


  9. #8
    Junior Member madeaux's Avatar
    Join Date
    Nov 2008
    Location
    Asheville, NC
    Posts
    11
    Member #
    17712
    I finally got the hosting working (took a week!)
    http://www.harmonicacupuncture.com

    Hope this helps.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com