Grow your CSS skills. Land your dream job.

Search Results Alignment

  • # June 28, 2013 at 6:30 pm

    Next to each search result title I have an image appearing (see the image at the bottom). Problem is, when the line breaks the second line doesn’t respect the height of that image – which I’ve doubled hoping it would cut into the second line and force it to indent.

    What I want: I want the first line of text and all subsequent lines of text to left align identically.

    Here’s my HTML:

    http://tannercampbell.net/hnsy-html.png

    Here’s my CSS:

    .searchResults {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    li.searchResultTitle {
    color: #115643;
    font-weight: bold;
    font-size: 1.1em;
    padding-bottom: 7px;
    padding-top: 12px;
    padding-left: 20px;
    }

    li.searchResultDescription {
    color: #7A7A7A;
    font-size: .8em;
    text-align: justify;
    padding-bottom: 20px;
    padding-left: 25px;
    }

    .searchResults a[href$=’.pdf’] {
    padding-left: 25px;
    background: transparent url(/resources/images/pdf-search-icon.png) top left no-repeat;
    }

    .searchResults a[href$=’.fs’] {
    padding-left: 25px;
    background: transparent url(/resources/images/page-search-icon.png) top left no-repeat;
    }

    li.searchResultDescription {
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    }

    Any help would be greatly appreciated. Sorry I can’t give you a link but a screenshot is below. Thanks.

    http://tannercampbell.net/hnsy-search.png

    # June 28, 2013 at 9:09 pm

    I don’t see an image…

    # July 1, 2013 at 10:03 am

    had to link them @ChrisBurton.

    Unless you mean in the code, in which case:

    .searchResults a[href$=’.pdf’] {
    padding-left: 25px;
    background: transparent url(/resources/images/pdf-search-icon.png) top left no-repeat;
    }

    .searchResults a[href$=’.fs’] {
    padding-left: 25px;
    background: transparent url(/resources/images/page-search-icon.png) top left no-repeat;
    }

    # July 1, 2013 at 10:52 am

    You could put the search results image and descriptions within span tags inside an li:

    ul>
    li>
    span class=”searchResultsImage”>
    span class=”searchResultDescription”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas tincidunt rhoncus. Sed ultrices sagittis fringilla. Donec placerat auctor justo bibendum bibendum. Quisque nec lacinia arcu, eu malesuada massa. Nulla a arcu mollis, euismod nulla sed, porta ligula.

    Display the spans as block.

    Float the_ image_ span to the left. Give it a width.

    Give the _description_ span a margin-left => the width of the image span.

    here’s a simplified example.
    http://codepen.io/waylaid/pen/uHzIB

    Edit: I had to remove brackets so code would show above… I must learn how that works…

    # July 1, 2013 at 10:56 am

    Here’s the link as a proper link…
    http://codepen.io/waylaid/pen/uHzIB

    # July 1, 2013 at 11:02 am

    @Waylaid – I had tried that initially but the image that appears is based on the extension of the link:

    .searchResults a[href$=’.pdf’] {
    padding-left: 25px;
    background: transparent url(/resources/images/pdf-search-icon.png) top left no-repeat;
    }

    .searchResults a[href$=’.fs’] {
    padding-left: 25px;
    background: transparent url(/resources/images/page-search-icon.png) top left no-repeat;
    }

    So I can’t span the image, it necessarily needs to be a background image. :(

    # July 1, 2013 at 11:12 am

    It should work the same when you put proper links in and have the CSS for links as you had it, shouldn’t it?

    http://codepen.io/waylaid/pen/CafhB

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".