Search Results Alignment

[tannercampbell]

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

[chrisburton]

I don’t see an image…

[tannercampbell]

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;
}

[waylaid]

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…

[waylaid]

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

[tannercampbell]

@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. :(

[waylaid]

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

[Author]

Posts