Improve Look?

http://notecorner.com/search.php
Just enter a search query for "test"

I just don't like the way I have the search results set up, does anyone have a way I could style them to make them look better?

 

you can display them as a list or as grid width 3 elements per line.
make subject font bigger, author smaller move subject to note name and notename to subject place, and you can even place the stats under the note, right next to it and put some stars for rating.

 

The result appearance is the LEAST of your problems with that site. The trifecta of /FAIL/ at web design would be the first thing I'd try getting rid of before worrying about that -- those being the inaccessible fixed width layout, the illegible fixed metric fonts, and the few spots of illegible color contrasts. (though the absurdly undersized fixed fonts may be making what should be good colors end up being useless)

Much of the code on said site is similarly afflicted with some of the biggest 'evils' in development -- which is contributing to making your styling seem a bit wonky. Extra DIV for nothing, presentational markup, classes for nothing, false simplicity thanks to crapping javascript into the form to do that placeholder nonsense, incomplete forms with missing semantic elements, static style inlined in the markup, breaks doing padding's job, using the same ID's more than once, nothing even remotely resembling semantic markup or separation of presentation from content, much less logical heading orders (or headings for that matter!), presentational images in the markup... It's no wonder a search for 'test' returns a ridiculously massive 21k of markup for 1.9k of plaintext... easily two to four times as much code as such a simple page should need!

REALLY if you don't know what's wrong with this:

<div id='searchResult'><div style='height: 40px; line-height:40px;'><span style='float:left; margin-left: 10px; text-overflow: ellipsis; width: 275px; overflow: hidden; text-align: left;'><a id='search_title' href='viewNote.php?id=10001'>Test Note 1 (TXT)</a></span><span style='font-size: 15px; font-weight: bolder; float:right; margin-right: 10px;'>By: NoteCorner on 11-2-13</span></div><div style='border-bottom: 1px solid #215c73; height: 20px; line-height:20px; font-family: Calibri;'><span style='font-size: 14px; font-weight: bolder; font-family: Calibri;'>Subject: Astrology</div><br />This is test note number one submitted through the contents of a text box with no formatting. Blah blah blah, insert text here. Insert text here. Insert text here. Insert text here. Insert text here. ...<br /><br /><div style='font-size: 12px; align:center; margin-bottom: 3px; border-top: 1px solid #215c73; color: #215c73; height: 16px; line-height: 21px;'><span style='font-weight: bolder;'>40 Views</span> | <span style='font-weight: bolder;'>2 Favorites</span> | <span style='font-weight:bolder;'>Rated 3.0/5.0</span></div></div><br /><br />

Code (markup):

You might want to back away from the keyboard until you grasp semantic markup, separation of presentation from content, and the entire point of using HTML in the first place.

Just to show you what I mean, this is how that SHOULD be written:

<!-- using h3 assuming h2 is "Search Notes" and H1 is "NOTE CORNER" -->
<div class="searchResult">
	<h3>
		<a href="viewNote.php?id=10001">Test Note 1 (TXT)</a>
		By: NoteCorner on 11-2-13
	</h3>
	<div class="subject">Subject: Astrology</div>
	<p>
		This is test note number one submitted through the contents of a text box with no formatting. Blah blah blah, insert text here. Insert text here. Insert text here. Insert text here. Insert text here...
	</p>
	<ul class="info">
		<li>40 Views</li>
		<li>2 Favorites</li>
		<li>Rated 3.0/5.0</li>
	</ul>
<!-- .searchResult --></div>

Code (markup):

With EVERYTHING else in your external stylesheet so it's cached across page-loads... and 99% of what you were doing in the inlined style being redundant to itself. At 522 bytes it's effectively HALF the code.

Of course in that style you should NOT be declaring fonts in PX, you should NOT be using incomplete font-stacks, you should NOT be shoe-horned into a crappy little stripe fixed width, you should NOT be using the poorly supported 'bolder' property, etc, etc...

Really that whole site needs to be thrown out and started over from scratch, there's little if anything I'd try to salvage from that mess.

 

Regarding the OP's original question: I agree with (some of) Bogdanel suggestions, but maybe keeping the Note title and Subject in the top line and putting the date where the subject currently is. Also for notes that aren't txt make it so when a user clicks on the icon it takes them to the note. As a user its first nature to click on the image for navigation instead of the text.

Sidenote: Great idea for a site! Good luck!

 

I was actually just considering the same thing, I stopped coding for quite a while (quite a while being about 3 years) and decided to come back starting coding again with this and did it rather quickly and messily without using a lot of what I had learned in the past. I appreciate you taking the long amount of time to point this out to me though. It was actually really what I needed to realize maybe I do just need to start again from scratch.