Achieving a specific design goal with HTML and CSS -


i have problem regards achieving specific design goal, , hope can me out here.

i made picture in ps hope explains want:

example 1

every part of picture should in individual tag (for example div), , placed this. logo should placed on top of big picture, little bit of space between edges. name placed on level bottom of picture or in middle (whatever looks best).

the headline (new 911) placed along top of big picture, description in middle (always middle, length of text vary) , footer (info info) aligned bottom of picture.

is me with?


i have code, doesn't work planned. here's html:

<div class="content">   <div class="left">     <div class="poster">       <div class="poster_img">         <img src="https://lh6.googleusercontent.com/-cc6wk7fox_g/aaaaaaaaaai/aaaaaaaaaaa/qq41pwu9uuq/s100-c-k/photo.jpg" height="50" />       </div>       <div class="poster_name">porsche</div>     </div>     <div class="img">       <img src="http://i1.ytimg.com/vi/k7desmcfffw/mqdefault.jpg" width="220" />     </div>   </div>   <div class="right">     <div class="header">the new porsche 911 turbo. breaking new ground.</div>     <div class="main">with new porsche 911 turbo, have once again questioned , started scratch. pushed boundaries...</div>     <div class="footer">     <div class="info1">info</div>     <div class="info2">info</div>   </div> </div> 

here's css:

.content {   position: relative;   clear: all;   margin: 5px;   margin-top: 10px; }     .left {   display: table-cell; }  .poster {   position: relative;   margin-bottom: -50px;   height: 50px; }  .poster_img {   display: table-cell;   position: absolute;    }  .poster_name {   display: table-cell;   padding-left: 52px;   font-size: 15px; }  .img {}  .right {   display: table-cell;   padding-left: 10px; }  .header {}  .main {}  .footer {}  .info1 {   display: table-cell; }  .info2 {   display:table-cell;   padding-left: 25px; } 

hope can me out here! :)

  • aleksander.

positioning elements css not complicated seems (if design concept good).

i using grids cleanly position elements. of time position: absolute; position: relative; on parent element suffice.

read on here: absolute positioning inside relative positioning

also try find site has similar design , explore source. looks porsche place start. there lots of "design inspiration" sites might find you're looking for.

good luck.


Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

VBA function to include CDATA -