Jak zrobić box ręcznie?

0

Jest takie narzędzie pod kombajn Adobe FlexiPanels fajnie robi boxy itd., ale nie mam akurat tego kombajnu a chcę uzyskać taki efekt:

user image

No to wyciągnąłem sobie kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>

<title>Android Forum for Mobile Phones, Tablets, Watches & Android App Development - XDA Forums</title>


<!-- CSS Stylesheet -->
<link type='text/css' rel='stylesheet' href="css.css" />


</head>
<body>



      <div id="rssbox">
       <h3><div style="margin-top:2px; margin-left: 10px; float: left;">POSTY </div><img style="float: right; margin-right: 5px;" src="//cdn2.xda-developers.com/images/XDA2013/forum/portal.png" /></h3> 
            <div class="articleBox">
                <img class="newsImage" src="http://cdn.www.xda-developers.com/wp-content/uploads/2014/07/keep-calm-and-victory-is-our-s-150x150.png" />
                <h4 class="newsTitle"><a href="http://www.xda-developers.com/feature/cell-phone-sim-unlock-bill-just-steps-away-from-presidents-desk/" onclick="_gaq.push(['_link','http://www.onet.pl/']); return false;">Moje linki</a></h4>
                <div class="newsItem">For all those who believe that Cinderella stories don&#8217;t actually &hellip; <a href="http://www.xda-developers.com/feature/cell-phone-sim-unlock-bill-just-steps-away-from-presidents-desk/" onclick="_gaq.push(['_link','http://www.xda-developers.com/feature/cell-phone-sim-unlock-bill-just-steps-away-from-presidents-desk/']); return false;">more</a></div>
            </div>
            <div class="articleBox">
                <img class="newsImage" src="http://cdn.www.xda-developers.com/wp-content/uploads/2014/07/Jordan0728-150x150.jpg" />
                <h4 class="newsTitle"><a href="http://www.xda-developers.com/android/twrp-toolkits-android-wear-xda-developer-tv/" onclick="_gaq.push(['_link','http://www.xda-developers.com/android/twrp-toolkits-android-wear-xda-developer-tv/']); return false;">TWRP and Toolkits for Android Wear Devices, Gear Live Firmware Pulled and Temp Rooted &ndash; XDA Developer TV</a></h4>
                <div class="newsItem">TWRP has been released for &hellip; <a href="http://www.xda-developers.com/android/twrp-toolkits-android-wear-xda-developer-tv/" onclick="_gaq.push(['_link','http://www.xda-developers.com/android/twrp-toolkits-android-wear-xda-developer-tv/']); return false;">more</a></div>
            </div>
            <div class="articleBox">
                <img class="newsImage" src="http://cdn.www.xda-developers.com/wp-content/uploads/2014/07/4x4-Military-Operations-150x150.jpg" />
                <h4 class="newsTitle"><a href="http://www.xda-developers.com/android/4x4-military-operations-reborn-game/" onclick="_gaq.push(['_link','http://www.xda-developers.com/android/4x4-military-operations-reborn-game/']); return false;">Get Your Cargo to its Destination in 4&times;4 Military Operations Reborn</a></h4>
                <div class="newsItem">Racing games have evolved quite a bit since the days of Pole &hellip; <a href="http://www.xda-developers.com/android/4x4-military-operations-reborn-game/" onclick="_gaq.push(['_link','http://www.xda-developers.com/android/4x4-military-operations-reborn-game/']); return false;">more</a></div>
            </div>
            <div class="articleBox">
                <img class="newsImage" src="http://cdn.www.xda-developers.com/wp-content/uploads/2014/07/Sven_Support-150x150.gif" />
                <h4 class="newsTitle"><a href="http://www.xda-developers.com/android/sfen-device-automation/" onclick="_gaq.push(['_link','http://www.xda-developers.com/android/sfen-device-automation/']); return false;">Automate Your Device with Sfen</a></h4>
                <div class="newsItem">Changing the profile of yourdevice manually is now long forgotten. Since the advent of Android automation &hellip; <a href="http://www.xda-developers.com/android/sfen-device-automation/" onclick="_gaq.push(['_link','http://www.xda-developers.com/android/sfen-device-automation/']); return false;">more</a></div>
            </div>
      <!-- / close RSS news box -->
    </div>
</body>

#rssbox  { 
position : relative; 
font-size : 90%; 
margin : 14px 0 5px 0; 
width : 302px; 
} 

 #rssbox .articleBox  { 
display : block; 
border-bottom : 1px solid #c9c9c9; 
border-right : 1px solid #c0c0c0; 
border-left : 1px solid #c0c0c0; 
background-color : white; 
margin : 0; 
padding : 0 5px 0 0; 
clear : both; 
height : 100px; 
overflow : hidden; 
} 

 #rssbox .articleBox:hover  { 
background-color : #eee; 
} 

 #rssbox .newsImage  { 
display : inline-block; 
width : 100px; 
height : 100px; 
float : left; 
margin : 0 5px 0 0; 
} 

 #rssbox .newsTitle, #rssbox h4, #rssbox .newsItem  { 
width : 189px; 
} 

 #rssbox .newsTitle, #rssbox h4  { 
margin : 2px 0; 
padding : 0; 
font-weight : bold; 
float : right; 
} 

#rssbox .newsItem  { 
float : right; 
}

I wyszło mi takie coś:

user image

Nie mogę rozgryźć czemu ta góra mi nie wychodzi w FlexiPanels miałbym prosty box kilkoma kliknięciami wygenerowany więc muszę się zmagać ręcznie, ale nie wiem jak zrobić aby to samo uzyskać?
Może ktoś rzuci okiem i mi wskaże co mi jeszcze brakuje.

dodanie znaczników <code class="html"> i <code class="css">, dodanie tagów i poprawienie tytułu wątku - furious programming

0

bo ta gora to mja jako tlo jakis obrazek ktorego nie dociagnales gdy pobrales same style. dociagnij obrazek jeszcze

1 użytkowników online, w tym zalogowanych: 0, gości: 1