i making list similar sample
i tried make css code build list style above. however, output not it. me @ css , html , me obtain it?
this current output 
this tried. can see online demo @ here
<!doctype html> <html> <head> <title>html5, css3 , javascript demo</title> </head> <body> <div id="view"> <div id="container"> <ul> <!-- row 01 --> <a href="#"><li class="clearfix"> <h2>wordpress desiger</h2> <p class="desc">wordpress , beyond </p> <p class="location">ny.</p> <p class="time">jan.</p> <span class="jobtype">part time</span> </li></a> <!-- row 02 --> <a href="#"><li class="clearfix"> <h2>ceo</h2> <p class="desc">think different</p> <p class="location">denver</p> <p class="time">feb.</p> <span class="jobtype">contract</span> </li></a> <!-- row 03 --> <a href="#"><li class="clearfix"> <h2>interactive desiger</h2> <p class="desc">designer.</p> <p class="location">ny.</p> <p class="time">may</p> <span class="jobtype">full time</span> </li></a> </ul> </div> </div> </div> </body> </html> my css code is
body{ font-family: 'arial', sans-serif; font-size: 12px; overflow-x: hidden; } body.is-ontop{ margin-top: 53px; } h1{ font-size: 44px; } h2{ font-size: 20px; } h3{ font-size: 18px; } a{ color: #666; } a:hover{ color: #ff3366; text-decoration: none; transition: 0.25s; } a:focus{ text-decoration: none; } .bold{ font-weight: bold; } { text-decoration: none; } /** content display **/ #view { display: block; padding: 0; margin: 0; height:600px; overflow:hidden; overflow-y:scroll;} #container { display: block; margin-top: 10px; } #container ul { } #container ul li { display: block; width: 100%; border-bottom: 1px solid #b9b9b9; border-top: 1px solid #f7f7f7; background: #fff; } #container ul { display: block; position: relative; width: 100%; } #container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; } #container ul li p.desc { color: #555; font-family: arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; } #container ul li p.location { color: #555; font-family: arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; } #container ul li p.time { color: #555; font-family: arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; } }#container ul li .jobtype { position: absolute; bottom: 0px; left: 0px; font-size: 1.2em; font-weight: bold; color: #6ea247; } #container ul a:hover li h2 { color: #7287b1; } #container ul a:hover li p.desc { color: #757575; } #container ul a:hover li { background: #e8eaea; }
don't use tables. it's 2016. pointer, tags inside li tags.
ul { display: flex; flex-direction: column; justify-content: center; } ul .information { display: flex; flex-direction: row; justify-content: space-between; } h2, .job-type { margin-top: 15px; margin-bottom: 0; }<!doctype html> <html> <head> <title>html5, css3 , javascript demo</title> </head> <body> <div id="view"> <div id="container"> <ul> <!-- row 01 --> <a href="#"><li class="clearfix"> <h2>wordpress desiger</h2> <div class="information"> <p class="desc">wordpress , beyond </p> <p class="location">ny.</p> <p class="time">jan.</p> </div> <span class="jobtype">part time</span> </li></a> <!-- row 02 --> <a href="#"><li class="clearfix"> <h2>ceo</h2> <div class="information"> <p class="desc">think different</p> <p class="location">denver</p> <p class="time">feb.</p> </div> <span class="jobtype">contract</span> </li></a> <!-- row 03 --> <a href="#"><li class="clearfix"> <h2>interactive desiger</h2> <div class="information"> <p class="desc">designer.</p> <p class="location">ny.</p> <p class="time">may</p> </div> <span class="jobtype">full time</span> </li></a> </ul> </div> </div> </div> </body> </html>
Comments
Post a Comment