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

Post a Comment

Popular posts from this blog

c++ - Creating new partition disk winapi -

-
i'am trying create new partition , mount volume new, thought createfile let me this, code : lpctstr lpfilename=l"\\\\.\\device\\harddisk0\\partition3"; handle handl=createfile( lpfilename, generic_read | generic_write, file_share_read | file_share_write, null, create_always, file_attribute_normal, null ); if (handl==invalid_handle_value) { qdebug()<<"handl invalid"<<" error"<<getlasterror();} bool success = definedosdevice(ddd_raw_target_path,l"i:",l"\\device\\harddisk0\\partition3"); if(!success) qdebug()<<" definedosdevice failed "<<getlasterror(); bflag = getvolumenameforvolumemountpoint( l"i:\\", // input volume mount point or directory /** u in dir
Read more

Android Prevent Bluetooth Pairing Dialog -

-
i'm developing internal application uses bluetooth printing. want bluetooth pairing occur without user input. have managed working trapping android.bluetooth.device.action.pairing_request broadcast. in broadcast receiver call setpin method, , pairing works ok, bluetoothpairingdialog displayed second or two, disappears - see link below. https://github.com/android/platform_packages_apps_settings/blob/master/src/com/android/settings/bluetooth/bluetoothpairingdialog.java since broadcast non-ordered, can't call abortbroadcast() , , wondering if there other way prevent pairing dialog appearing. can hook window manager in way? i haven't been able come way without modifying sdk. if you're oem, it's easy (i'm on 4.3): in packages/apps/settings/androidmanifest.xml, comment intent filter pairing dialog: <activity android:name=".bluetooth.bluetoothpairingdialog" android:label="@string/bluetooth_pairing_request"
Read more

php - joomla get content in onBeforeCompileHead function -

-
i'm developing joomla system plugin. need add javascript , css files if [myshortcode] shortcode found in content. how can content in onbeforecompilehead function function onbeforecompilehead() { $document = jfactory::getdocument(); //add scripts if shortcode found ... $document->addstylesheet($cssfile, 'text/css', null, array()); the $content = jresponse::getbody(); not work. thanks try this, for style sheet, $document = jfactory::getdocument(); $document->addstylesheet('http://domain.com/templates/css/style.css'); for javascript file $document = jfactory::getdocument(); $document->addscript('full url'); also can this, $document = jfactory::getdocument(); // add javascript $document->addscriptdeclaration(' window.event("domready", function() { alert("an inline javascript declaration"); }); '); // add styles $style = 'body {'
Read more