- This topic is empty.
-
AuthorPosts
-
June 28, 2013 at 6:30 pm #45945
tannercampbell
ParticipantNext 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.
June 28, 2013 at 9:09 pm #140904chrisburton
ParticipantI don’t see an image…
July 1, 2013 at 10:03 am #141131tannercampbell
Participanthad 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 #141137waylaid
MemberYou 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/uHzIBEdit: I had to remove brackets so code would show above… I must learn how that works…
July 1, 2013 at 10:56 am #141138waylaid
MemberHere’s the link as a proper link…
http://codepen.io/waylaid/pen/uHzIBJuly 1, 2013 at 11:02 am #141139tannercampbell
Participant@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 #141140waylaid
MemberIt should work the same when you put proper links in and have the CSS for links as you had it, shouldn’t it?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.