1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

clearfix

Dieses Thema im Forum "CSS" wurde erstellt von tsbmusic, 18. April 2011.

  1. tsbmusic

    tsbmusic Erfahrenes Mitglied

    Moin moin,

    hab mal wieder ein CSS-Problem... Also es geht darum das meine .clearfix-Elemente sich irgendwie nicht so richtig vertragen weil irgendwie macht das einen ungewollten Abstand den ich auch nicht wegbekomme. Hier für euch der Code:

    HTML:
    Code (Text):
    1.                                                                                                                                    
    2.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3.     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    4.     <head>
    5.         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    6.         <meta http-equiv="Content-language" content="de" />
    7.         <title>mywilke.de</title>
    8.         <link type="text/css" rel="stylesheet" href="http://localhost/mywilke/css/style.css" />
    9.  
    10.         <script type="text/javascript" src="http://localhost/mywilke/js/base.js"></script>
    11.  
    12.        
    13.     </head>
    14.     <body class="profile hasRightCol">
    15.         <div id="wrapper">
    16.  
    17.          <div id="header" class="clearfix">
    18.  
    19.                     <div class="uiNetwork">
    20.            <ul class="uiList">
    21.             <li class="uiListItem">
    22.              <a href="profile.php"><i class="uiImage_BIG profile"></i></a>
    23.  
    24.             </li>
    25.             <li class="uiListItem">
    26.              <a href="messages.php"><i class="uiImage_BIG messages"></i></a>
    27.             </li>
    28.             <li class="uiListItem">
    29.              <a href="notifications.php"><i class="uiImage_BIG notifications"></i></a>
    30.             </li>
    31.            </ul>
    32.           </div>
    33.  
    34.                    
    35.           <div class="uiLogo">
    36.            <a href="http://localhost/mywilke/"><img src="http://localhost/mywilke/images/logo.png" /></a>
    37.           </div>
    38.  
    39.          </div>
    40.  
    41.          <div id="layout" class="clearfix">
    42.          
    43.                     <div id="dashboard">
    44.            <div class="uiComponent welcome_box">
    45.             <div class="uiImageBlock clearfix">
    46.  
    47.              <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_50.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>             <div class="uiImageBlock_Content">
    48.               <h4 class="uiTitle"><a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a></h4>
    49.               <a href="editprofile.php">Mein Profil bearbeiten</a>
    50.              </div>
    51.             </div>
    52.            </div>
    53.            <hr class="uiComponentSpacer" />
    54.  
    55.            <div class="uiComponent">
    56.             <ul class="uiList menu">
    57.              <li class="uiListItem ">
    58.               <a class="item" href="index.php">
    59.                <span class="uiWrap">
    60.                 <span class="uiWrap_Image"><i class="uiImage home"></i></span>
    61.                 <span class="uiWrap_Content">Home</span>
    62.                </span>
    63.  
    64.               </a>
    65.              </li>
    66.              <li class="uiListItem active">
    67.               <a class="item" href="profile.php">
    68.                <span class="uiWrap">
    69.                 <span class="uiWrap_Image"><i class="uiImage profile"></i></span>
    70.                 <span class="uiWrap_Content">Profil</span>
    71.                </span>
    72.  
    73.               </a>
    74.               <ul class="uiSubList">
    75.                <li class="uiSubListItem active">
    76.                 <a class="subitem" href="profile.php?id=1&sk=wall">
    77.                  <span>Pinnwand</span>
    78.                 </a>
    79.                </li>
    80.                <li class="uiSubListItem ">
    81.  
    82.                 <a class="subitem" href="profile.php?id=1&sk=info">
    83.                  <span>Info</span>
    84.                 </a>
    85.                </li>
    86.                <li class="uiSubListItem ">
    87.                 <a class="subitem" href="profile.php?id=1&sk=photos">
    88.                  <span>Fotos</span>
    89.                 </a>
    90.  
    91.                </li>
    92.               </ul>
    93.              </li>
    94.              <li class="uiListItem ">
    95.               <a class="item" href="messages.php">
    96.                <span class="uiWrap">
    97.                 <span class="uiWrap_Image"><i class="uiImage messages"></i></span>
    98.                 <span class="uiWrap_Content">Nachrichten</span>
    99.  
    100.                </span>
    101.               </a>
    102.              </li>
    103.              <li class="uiListItem">
    104.               <a class="item" href="logout.php">
    105.                <span class="uiWrap">
    106.                 <span class="uiWrap_Image"><i class="uiImage logout"></i></span>
    107.                 <span class="uiWrap_Content">Logout</span>
    108.  
    109.                </span>
    110.               </a>
    111.              </li>
    112.             </ul>
    113.            </div>          
    114.           </div>
    115.          
    116.           <div id="main" class="clearfix">
    117.            <div id="content">
    118.  
    119. <div class="uiTop">
    120.  
    121.  <div class="uiTopHeader">
    122.  <div class="clearfix">
    123.  <div class="uiTopButtons">
    124.    <a class="button" rel="chat" href="#">
    125.     <span class="uiWrap">
    126.      <i class="uiImage chat"></i>
    127.      <span class="uiButtonText">Chat</span>
    128.     </span>
    129.  
    130.    </a>
    131.    <a class="button" rel="dialog" href="ajax/new_pm.php">
    132.      <i class="uiImage message"></i>
    133.      <span class="uiButtonText">Nachricht senden</span>
    134.    </a>
    135.  </div>
    136.  <h4 class="mfb">Jonathan</h4>
    137.  </div>
    138.  
    139.  </div>
    140.  <div class="uiImageBlock clearfix">
    141.   <div class="uiImageBlock_Image">
    142.    <img src="http://localhost/mywilke/uploads/avatars/avatar_1_180.png" alt="Jonathan" class="uiBlock" title="Jonathan" />  </div>
    143.   <div class="uiImageBlock_Content">
    144.    <span class="uiLastPost">
    145.     <b>vor 2 Stunden:</b>
    146.     blub... :D   </span>
    147.  
    148.    <div class="uiUserOverview">
    149.     <ul class="uiList">
    150.      <li class="uiListItem">
    151.       <span>
    152.        <b class="uiBlock">Letzter Login:</b>
    153.        vor 2 Stunden      </span>
    154.      </li>
    155.      <li class="uiListItem">
    156.  
    157.       <span>
    158.              </span>
    159.      </li>
    160.     </ul>
    161.    </div>
    162.   </div>
    163.  </div>
    164. </div>
    165. <div class="uiTop">
    166. <div class="uiComposer">
    167.  
    168.  <h4 class="mfb">Was machst du gerade?</h4>
    169.  <form class="uiForm" action="ajax/updatestatus.php" method="POST">
    170.   <input type="hidden" name="to_wall_id" value="1" />
    171.   <div class="clearfix">
    172.   <div class="inputContainer">
    173.    <textarea name="statusText" class="textBox textArea_BIG" onfocus="Live.setControl(this);"></textarea>
    174.   </div>
    175.   <ul class="uiControl uiActions">
    176.  
    177.    <li>
    178.     <input type="submit" class="uiBold" name="updateStatus" value="Posten" />
    179.    </li>
    180.   </ul>
    181.   </div>
    182.  </form>
    183. </div>
    184. </div><ul class="uiList uiStream"><li class="uiListItem uiWallPost storyContent">
    185.  <div class="clearfix uiImageBlock">
    186.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_50.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    187.  
    188.   <div class="uiImageBlock_Content">
    189.    <h6 class="uiWallPost_Text">
    190.         <div><label class="uiDeleteButton button hideButton"><a href=""></a></label></div>
    191.         <div class="uiActionHeader">
    192.      <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a> hat seinen Beziehungsstatus auf <span class='uiTitle'>solo</span> gesetzt
    193.     </div>
    194.     <span>
    195.  
    196.      
    197.     </span>
    198.    </h6>
    199.    <div class="uiSubtitle">
    200.     <span class="uiDate"><abbr title="Montag, 18. April 2011 um 13:55">vor 2 Stunden</abbr></span>
    201.    </div>
    202.    <form class="uiForm liveForm_1ae8da36367ef3a7d76a689509623530" action="ajax/modify.php" method="post">
    203.  <input type="hidden" name="post_form_id" value="1ae8da36367ef3a7d76a689509623530" />
    204.  <input type="hidden" name="post_form_type" value="3" />
    205.  
    206.  <ul class="uiList uiLive">
    207.   <li class="uiListItem uiBox uiLikeBox">
    208.     <button class="like_link" name="like" type="submit" title="Das find ich gut">
    209.   <span class="uiWrap">
    210.    <span class="uiWrap_Image"><i class="uiImage rate rate_up"></i></span>
    211.    <span class="uiWrap_Content">Find ich gut</span>
    212.   </span>
    213.  </button>
    214.  
    215. <span class="uiText"></span>
    216.  
    217.   </li>
    218.   <li class="uiListItem">
    219.    <ul class="uiList uiCommentList"></ul>
    220.   </li>
    221.   <li class="uiListItem uiBox">
    222.    <div class="uiImageBlock clearfix">
    223.     <span class="uiControl">
    224.     <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    225.  
    226.     </span>
    227.     <div class="uiImageBlock_Content">
    228.      <div class="commentBox">
    229.       <textarea onfocus="return Live.expand(this);" name="add_comment_text" class="textBox commentArea" placeholder="Schreib einen Kommentar"></textarea>
    230.      </div>
    231.      <ul class="uiActions uiControl">
    232.       <li>
    233.        <input type="submit" name="comment" value="Kommentieren" />
    234.  
    235.       </li>
    236.      </ul>
    237.     </div>
    238.    </div>
    239.   </li>
    240.  </ul>
    241. </form>
    242.   </div>
    243.  </div>
    244.  
    245. </li><li class="uiListItem uiWallPost storyContent">
    246.  <div class="clearfix uiImageBlock">
    247.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_50.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    248.   <div class="uiImageBlock_Content">
    249.    <h6 class="uiWallPost_Text">
    250.         <div><label class="uiDeleteButton button hideButton"><a href=""></a></label></div>
    251.         <div class="uiActionHeader">
    252.      <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a> an <a href="http://localhost/mywilke/profile.php?id=2">Justus</a>
    253.  
    254.     </div>
    255.     <span>
    256.      Ich schreib dir mal was auf die pinni :D
    257.     </span>
    258.    </h6>
    259.    <div class="uiSubtitle">
    260.     <span class="uiDate"><abbr title="Montag, 18. April 2011 um 13:56">vor 2 Stunden</abbr></span>
    261.    </div>
    262.    <form class="uiForm liveForm_8ddae40886be3ba9fbd32e32ccba7aa5" action="ajax/modify.php" method="post">
    263.  
    264.  <input type="hidden" name="post_form_id" value="8ddae40886be3ba9fbd32e32ccba7aa5" />
    265.  <input type="hidden" name="post_form_type" value="2" />
    266.  <ul class="uiList uiLive">
    267.   <li class="uiListItem uiBox uiLikeBox">
    268.     <button class="like_link" name="like" type="submit" title="Das find ich gut">
    269.   <span class="uiWrap">
    270.    <span class="uiWrap_Image"><i class="uiImage rate rate_up"></i></span>
    271.    <span class="uiWrap_Content">Find ich gut</span>
    272.  
    273.   </span>
    274.  </button>
    275. <span class="uiText"></span>
    276.  
    277.   </li>
    278.   <li class="uiListItem">
    279.    <ul class="uiList uiCommentList"></ul>
    280.   </li>
    281.   <li class="uiListItem uiBox">
    282.    <div class="uiImageBlock clearfix">
    283.  
    284.     <span class="uiControl">
    285.     <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    286.     </span>
    287.     <div class="uiImageBlock_Content">
    288.      <div class="commentBox">
    289.       <textarea onfocus="return Live.expand(this);" name="add_comment_text" class="textBox commentArea" placeholder="Schreib einen Kommentar"></textarea>
    290.      </div>
    291.      <ul class="uiActions uiControl">
    292.  
    293.       <li>
    294.        <input type="submit" name="comment" value="Kommentieren" />
    295.       </li>
    296.      </ul>
    297.     </div>
    298.    </div>
    299.   </li>
    300.  </ul>
    301. </form>
    302.  
    303.   </div>
    304.  </div>
    305. </li><li class="uiListItem uiWallPost storyContent">
    306.  <div class="clearfix uiImageBlock">
    307.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_50.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    308.   <div class="uiImageBlock_Content">
    309.    <h6 class="uiWallPost_Text">
    310.         <div><label class="uiDeleteButton button hideButton"><a href=""></a></label></div>
    311.         <div class="uiActionHeader">
    312.  
    313.      <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a>
    314.     </div>
    315.     <span>
    316.      blub... :D
    317.     </span>
    318.    </h6>
    319.    <div class="uiSubtitle">
    320.     <span class="uiDate"><abbr title="Montag, 18. April 2011 um 13:55">vor 2 Stunden</abbr></span>
    321.  
    322.    </div>
    323.    <form class="uiForm liveForm_95a1407bf009c2ab760dc13178d15bfa" action="ajax/modify.php" method="post">
    324.  <input type="hidden" name="post_form_id" value="95a1407bf009c2ab760dc13178d15bfa" />
    325.  <input type="hidden" name="post_form_type" value="1" />
    326.  <ul class="uiList uiLive">
    327.   <li class="uiListItem uiBox uiLikeBox">
    328.     <button class="like_link" name="unlike" type="submit" title="Das find ich nicht mehr gut">
    329.   <span class="uiWrap">
    330.    <span class="uiWrap_Image"><i class="uiImage rate rate_down"></i></span>
    331.  
    332.    <span class="uiWrap_Content">Find ich nicht mehr gut</span>
    333.   </span>
    334.  </button>
    335. <span class="uiText">Dir gef&auml;llt das</span>
    336.  
    337.   </li>
    338.   <li class="uiListItem">
    339.    <ul class="uiList uiCommentList"></ul>
    340.  
    341.   </li>
    342.   <li class="uiListItem uiBox">
    343.    <div class="uiImageBlock clearfix">
    344.     <span class="uiControl">
    345.     <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    346.     </span>
    347.     <div class="uiImageBlock_Content">
    348.      <div class="commentBox">
    349.       <textarea onfocus="return Live.expand(this);" name="add_comment_text" class="textBox commentArea" placeholder="Schreib einen Kommentar"></textarea>
    350.  
    351.      </div>
    352.      <ul class="uiActions uiControl">
    353.       <li>
    354.        <input type="submit" name="comment" value="Kommentieren" />
    355.       </li>
    356.      </ul>
    357.     </div>
    358.    </div>
    359.   </li>
    360.  
    361.  </ul>
    362. </form>
    363.   </div>
    364.  </div>
    365. </li><li class="uiListItem uiWallPost storyContent">
    366.  <div class="clearfix uiImageBlock">
    367.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_50.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    368.   <div class="uiImageBlock_Content">
    369.    <h6 class="uiWallPost_Text">
    370.         <div><label class="uiDeleteButton button hideButton"><a href=""></a></label></div>
    371.  
    372.         <div class="uiActionHeader">
    373.      <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a>
    374.     </div>
    375.     <span>
    376.      trainiert gerade ein bisschen.
    377.     </span>
    378.    </h6>
    379.    <div class="uiSubtitle">
    380.     <span class="uiDate"><abbr title="Donnerstag, 31. M&auml;rz 2011 um 21:44">vor 17 Tagen</abbr></span>
    381.  
    382.    </div>
    383.    <form class="uiForm liveForm_a14dd7d60d3d24ef94f6a9fa58d86a57" action="ajax/modify.php" method="post">
    384.  <input type="hidden" name="post_form_id" value="a14dd7d60d3d24ef94f6a9fa58d86a57" />
    385.  <input type="hidden" name="post_form_type" value="1" />
    386.  <ul class="uiList uiLive">
    387.   <li class="uiListItem uiBox uiLikeBox">
    388.     <button class="like_link" name="like" type="submit" title="Das find ich gut">
    389.   <span class="uiWrap">
    390.    <span class="uiWrap_Image"><i class="uiImage rate rate_up"></i></span>
    391.  
    392.    <span class="uiWrap_Content">Find ich gut</span>
    393.   </span>
    394.  </button>
    395. <span class="uiText"></span>
    396.  
    397.   </li>
    398.   <li class="uiListItem">
    399.    <ul class="uiList uiCommentList"><li class="uiListItem uiBox uiComment comment_117">
    400.  <div class="uiImageBlock clearfix">
    401.  
    402.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    403.   <div class="uiImageBlock_Content commentStoryContent">
    404.    <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a>
    405.       <label class="uiDeleteButton uiRight button"><input type="submit" name="delete_com" value="117" /></label>
    406.       <span>Geil. :D</span>
    407.    <div class="uiSubtitle">
    408.     <span class="uiDate"><abbr title="Samstag, 2. April 2011 um 17:54">vor 15 Tagen</abbr></span>
    409.  
    410.    </div>
    411.   </div>
    412.  </div>
    413. </li></ul>
    414.   </li>
    415.   <li class="uiListItem uiBox">
    416.    <div class="uiImageBlock clearfix">
    417.     <span class="uiControl">
    418.     <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    419.  
    420.     </span>
    421.     <div class="uiImageBlock_Content">
    422.      <div class="commentBox">
    423.       <textarea onfocus="return Live.expand(this);" name="add_comment_text" class="textBox commentArea" placeholder="Schreib einen Kommentar"></textarea>
    424.      </div>
    425.      <ul class="uiActions uiControl">
    426.       <li>
    427.        <input type="submit" name="comment" value="Kommentieren" />
    428.  
    429.       </li>
    430.      </ul>
    431.     </div>
    432.    </div>
    433.   </li>
    434.  </ul>
    435. </form>
    436.   </div>
    437.  </div>
    438.  
    439. </li><li class="uiListItem uiWallPost storyContent">
    440.  <div class="clearfix uiImageBlock">
    441.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_50.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    442.   <div class="uiImageBlock_Content">
    443.    <h6 class="uiWallPost_Text">
    444.         <div><label class="uiDeleteButton button hideButton"><a href=""></a></label></div>
    445.         <div class="uiActionHeader">
    446.      <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a>
    447.     </div>
    448.  
    449.     <span>
    450.      Kleiner Test hier. :P
    451.     </span>
    452.    </h6>
    453.    <div class="uiSubtitle">
    454.     <span class="uiDate"><abbr title="Donnerstag, 31. M&auml;rz 2011 um 21:44">vor 17 Tagen</abbr></span>
    455.    </div>
    456.    <form class="uiForm liveForm_5018d4ce2d13bd3efed8a213d4c5007e" action="ajax/modify.php" method="post">
    457.  <input type="hidden" name="post_form_id" value="5018d4ce2d13bd3efed8a213d4c5007e" />
    458.  
    459.  <input type="hidden" name="post_form_type" value="1" />
    460.  <ul class="uiList uiLive">
    461.   <li class="uiListItem uiBox uiLikeBox">
    462.     <button class="like_link" name="unlike" type="submit" title="Das find ich nicht mehr gut">
    463.   <span class="uiWrap">
    464.    <span class="uiWrap_Image"><i class="uiImage rate rate_down"></i></span>
    465.    <span class="uiWrap_Content">Find ich nicht mehr gut</span>
    466.   </span>
    467.  
    468.  </button>
    469. <span class="uiText">Dir gef&auml;llt das</span>
    470.  
    471.   </li>
    472.   <li class="uiListItem">
    473.    <ul class="uiList uiCommentList"><li class="uiListItem uiBox uiComment comment_130">
    474.  <div class="uiImageBlock clearfix">
    475.   <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    476.   <div class="uiImageBlock_Content commentStoryContent">
    477.  
    478.    <a href="http://localhost/mywilke/profile.php?id=1">Jonathan</a>
    479.       <label class="uiDeleteButton uiRight button"><input type="submit" name="delete_com" value="130" /></label>
    480.       <span>Alles klar :D</span>
    481.    <div class="uiSubtitle">
    482.     <span class="uiDate"><abbr title="Mittwoch, 13. April 2011 um 15:46">vor 5 Tagen</abbr></span>
    483.    </div>
    484.   </div>
    485.  
    486.  </div>
    487. </li></ul>
    488.   </li>
    489.   <li class="uiListItem uiBox">
    490.    <div class="uiImageBlock clearfix">
    491.     <span class="uiControl">
    492.     <a href="http://localhost/mywilke/profile.php?id=1" class="uiImageBlock_Image"><img src="http://localhost/mywilke/uploads/avatars/avatar_1_40.png" alt="Jonathan" class="uiBlock" title="Jonathan" /></a>
    493.     </span>
    494.     <div class="uiImageBlock_Content">
    495.  
    496.      <div class="commentBox">
    497.       <textarea onfocus="return Live.expand(this);" name="add_comment_text" class="textBox commentArea" placeholder="Schreib einen Kommentar"></textarea>
    498.      </div>
    499.      <ul class="uiActions uiControl">
    500.       <li>
    501.        <input type="submit" name="comment" value="Kommentieren" />
    502.       </li>
    503.      </ul>
    504.  
    505.     </div>
    506.    </div>
    507.   </li>
    508.  </ul>
    509. </form>
    510.   </div>
    511.  </div>
    512. </li></ul>           </div>
    513.           </div>
    514.  
    515.          </div>
    516.  
    517.         </div>
    518.  
    519.     </body>
    520.  
    Und CSS:
    Code (Text):
    1. body {
    2.     background: #C5DBF9;
    3.     color: #555;
    4.     font: 11px "lucida grande",tahoma,verdana,arial,sans-serif;
    5.     padding: 0;
    6.     margin: 0;
    7.     direction: ltr;
    8.     word-break: word-wrap;
    9. }
    10.  
    11. /* Allgemeines */
    12. a {
    13.     color: #395A7F;
    14.     outline: none;
    15.     text-decoration: none;
    16. }
    17. a:hover {
    18.     text-decoration: underline;
    19. }
    20.  
    21. img {
    22.     border: 0;
    23.     vertical-align: middle;
    24. }
    25.  
    26. h1,
    27. h2,
    28. h3,
    29. h4,
    30. h5,
    31. h6 {
    32.     font-weight: bold;
    33.     color: #999;
    34.     margin: 0;
    35.     padding: 0;
    36.     text-shadow: 0 1px #FFF;
    37. }
    38. h3 {
    39.     font-size: 16px;
    40. }
    41. h4 {
    42.     font-size: 14px;
    43. }
    44.  
    45. ul,
    46. li {
    47.     list-style-type: none;
    48.     padding: 0;
    49.     margin: 0;
    50. }
    51. b {
    52.     font-weight: bold;
    53. }
    54. input[type=text],
    55. input[type=password],
    56. input[type=checkbox],
    57. select,
    58. textarea {
    59.     padding: 3px;
    60.     border: 1px solid #D2D8E0;
    61.     background: #FFF;
    62.     font: inherit;
    63.     line-height: 11px;
    64.     -moz-border-radius: 3px;
    65.     -wekit-border-radius: 3px;
    66.     border-radius: 3px;
    67. }
    68. input:hover,
    69. select:hover,
    70. textarea:hover,
    71. input:focus,
    72. select:focus,
    73. textarea:focus {
    74.     border-color: #BACADD;
    75. }
    76. input[type=submit],
    77. input[type=button],
    78. button,
    79. .button {
    80.     display: inline-block;
    81.     background: #F9F9F9;
    82.     background: -webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#E3E3E3));
    83.     background:-moz-linear-gradient(top,#F9F9F9,#E3E3E3);
    84.     background:transparent\9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9',endColorstr='#E3E3E3');
    85.     border-color: #CCCCCC #BBBBBB #A0A0A0;
    86.     border-style: solid;
    87.     border-width: 1px;
    88.     vertical-align: middle;
    89.     color: #555;
    90.     cursor: pointer;
    91.     font: inherit;
    92.     padding: 3px 8px;
    93.     margin: 0 5px 0 0;
    94.     font-size: 11px;
    95.     -moz-border-radius: 3px;
    96.     -webkit-border-radius: 3px;
    97.     border-radius: 3px;
    98.     white-space: nowrap;
    99. }
    100. input[type=submit]:hover,
    101. input[type=button]:hover,
    102. button:hover,
    103. .button:hover,
    104. input[type=submit]:focus,
    105. input[type=button]:focus,
    106. button:focus,
    107. .button:focus {
    108.     border-color: #939393;
    109.     text-decoration: none;
    110. }
    111. input[type=submit][disabled=disabled] {
    112.     color: #999;
    113.     background: #F9F9F9;
    114.     outline: none;
    115.     cursor: default;
    116.     border-color: #BBBBBB;
    117. }
    118. input[type=submit][disabled=disabled]:hover,
    119. input[type=submit][disabled=disabled]:focus {
    120.     outline: none;
    121.     border-color: #BBBBBB;
    122. }
    123. input[type=submit].uiBold {
    124.     font-weight: bold;
    125. }
    126. .clearfix {
    127.     display: block;
    128. }
    129. .clearfix:after {
    130.     clear: both;
    131.     content: ".";
    132.     display: block;
    133.     font-size: 0;
    134.     height: 0;
    135.     line-height: 0;
    136.     visibility: hidden;
    137. }
    138. *:first-child+html .clearfix {
    139.     min-height: 0;
    140. }
    141. * html .clearfix {
    142.     height: 1%;
    143. }
    144. .uiLeftButton {
    145.     margin: 0;
    146.     float: left;
    147.     -moz-border-radius: 3px 0 0 3px;
    148.     -webkit-border-radius: 3px 0 0 3px;
    149.     border-radius: 3px 0 0 3px;
    150. }
    151. .uiRightButton {
    152.     margin: 0;
    153.     float: left;
    154.     border-width: 1px 1px 1px 0;
    155.     -moz-border-radius: 0 3px 3px 0;
    156.     -webkit-border-radius: 0 3px 3px 0;
    157.     border-radius: 0 3px 3px 0;
    158. }
    159. .uiRightButton:hover,
    160. .uiRightButton:focus {
    161.     border-width: 1px 1px 1px 1px;
    162.     margin-left: -1px;
    163. }
    164. .button i {
    165.     display: inline-block !important;
    166.     vertical-align: top;
    167.     margin-right: 5px;
    168. }
    169. .button .uiButtonText {
    170.     display: inline-block;
    171.     font-weight: bold;
    172.     color: #555;
    173.     padding: 1px 0 0;
    174. }
    175.  
    176. .dialog {
    177.     background: #777;
    178.     background: rgba(0, 0, 0, 0.5);
    179.     padding: 10px;
    180.     -moz-border-radius: 8px;
    181.     -webkit-border-radius: 8px;
    182.     border-radius: 8px;
    183.     width: 550px;
    184.     position: absolute;
    185.     top: 30%;
    186.     left: 50%;
    187.     margin-left: -280px;
    188. }
    189. .dialog .dialog_title {
    190.     padding: 3px 5px 7px;
    191.     position: relative;
    192.     background: #EBF1FA;
    193.     border-bottom: 1px solid #DEE4ED;
    194.     -moz-border-radius: 4px 4px 0 0;
    195. }
    196. .dialog .dialog_title h2 {
    197.     font-size: 16px;
    198. }
    199. .dialog .dialog_title .dialog_close {
    200.     color: #999;
    201.     font-size: 16px;
    202.     padding: 0 5px 3px;
    203.     background: #DEE4ED;
    204.     -moz-border-radius: 3px;
    205.     -webkit-border-radius: 3px;
    206.     border-radius: 3px;
    207.     position: absolute;
    208.     top: 3px;
    209.     right: 5px;
    210.     cursor: pointer;
    211. }
    212. .dialog .dialog_title .dialog_close:hover {
    213.     background: #999;
    214.     color: #FFF;
    215. }
    216. .dialog .dialog_body {
    217.     background: #FFF;
    218.     -moz-border-radius: 0 0 4px 4px;
    219.     -webkit-border-radius: 0 0 4px 4px;
    220.     border-radius: 0 0 4px 4px;
    221. }
    222. .dialog .dialog_body .dialog_content {
    223.     padding: 10px;
    224. }
    225.  
    226. #wrapper {
    227.     width: 1000px;
    228.     margin: auto;
    229. }
    230.  
    231. #wrapper #header {
    232.     background: #336698 url(../images/header.png);
    233.     -moz-border-radius: 5px 5px 0 0;
    234.     height: 35px;
    235.     margin: 10px 0 0 0;
    236.     border: 1px solid #063269;
    237. }
    238. #wrapper #header .uiNetwork {
    239.     float: right;
    240.     margin: 2px 10px;
    241.     padding: 2px;
    242.     background: url(../images/twhite.png);
    243.     border: 1px solid #063269;
    244.     -moz-border-radius: 5px;
    245. }
    246. #wrapper #header .uiNetwork ul li {
    247.     float: left;
    248. }
    249. #wrapper #header .uiNetwork ul li a {
    250.     display: block;
    251.     width: 24px;
    252.     height: 24px;
    253.     margin: 0 8px;
    254. }
    255. #wrapper #layout {
    256.     background: #DEE9F9;
    257.     border-width: 0 1px 1px 1px;
    258.     -moz-border-radius: 0 0 5px 5px;
    259.     -webkit-border-radius: 0 0 5px 5px;
    260.     border-radius: 0 0 5px 5px;
    261. }
    262. #wrapper #header .uiLogo {
    263.     margin: 0 0 0 10px;
    264. }
    265.  
    266. #wrapper #dashboard {
    267.     display: none;
    268.     float: right;
    269.     width: 420px;
    270.     padding: 20px;
    271. }
    272.  
    273. #wrapper #main {
    274.     min-height: 300px;
    275.     -moz-border-radius: 0 0 5px 5px;
    276.     -webkit-border-radius: 0 0 5px 5px;
    277.     border-radius: 0 0 5px 5px;
    278. }
    279.  
    280. .hasRightCol #wrapper #dashboard {
    281.     display: block;
    282. }
    283.  
    284. .hasRightCol #wrapper #main {
    285.     background: #FFF;
    286.     width: 538px;
    287.     border: 1px solid #C7D2E0;
    288.     border-width: 0 1px 1px;
    289. }
    290.  
    291. .uiRight {
    292.     float: right;
    293. }
    294. .uiLeft {
    295.     float: left;
    296. }
    297. .uiTitle {
    298.     font-size: 11px;
    299.     font-weight: bold;
    300.     color: #555;
    301.     text-shadow: none;
    302. }
    303. .uiBold {
    304.     font-weight: bold;
    305. }
    306. .uiSpacer {
    307.     margin: 0 2px;
    308. }
    309. .uiList {
    310. }
    311. .uiList .uiListItem {
    312.     display: block;
    313. }
    314. .uiList .uiListItem .uiSubList {
    315.     display: none;
    316. }
    317. .uiList .uiListItem .uiSubList .subitem {
    318.     padding-left: 36px;
    319. }
    320. .uiList .uiListItem .uiSubList .uiSubListItem.active .subitem {
    321.     font-weight: bold;
    322. }
    323. .uiList li:first-child {
    324.     border-top: 0;
    325. }
    326. .uiList.menu li a {
    327.     display: block;
    328.     margin-bottom: 1px;
    329.     color: #333;
    330.     padding: 3px 10px;
    331.     height: 16px;
    332. }
    333. .uiList.menu li a:hover {
    334.     background: #D1E3F9;
    335.     text-decoration: none;
    336. }
    337. .uiList.menu li.active .item {
    338.     background: #C5DBF9;
    339.     font-weight: bold;
    340. }
    341. .uiList.menu li.active .uiSubList {
    342.     display: block;
    343. }
    344. .uiComponent {
    345.  
    346. }
    347. .uiComponent.welcome_box {
    348.  
    349. }
    350. .uiComponentHeader {
    351.     border-bottom: 1px solid #D6D7D8;
    352.     margin-bottom: 5px;
    353. }
    354. .uiComponentHeader .uiTitle {
    355.     margin: 8px 5px 0;
    356. }
    357. .uiComponentBody {
    358.  
    359. }
    360. .uiComponentSpacer {
    361.     height: 0;
    362.     border: 0;
    363.     padding: 0;
    364.     margin: 10px 0;
    365.     border-top: 1px solid #D3DDED;
    366.     border-bottom: 1px solid #EBF1FA;
    367. }
    368. .uiBox,
    369. .uiBox_BIG {
    370.     padding: 10px;
    371.     background: #EBF1FA;
    372.     border-bottom: 1px solid #DEE4ED;
    373.     margin-top: 2px;
    374. }
    375. .uiBox {
    376.     width: 388px;
    377.     padding: 5px;
    378.  
    379. }
    380. .uiNub {
    381.     height: 5px;
    382.     width: 398px;
    383.     background: url(../images/arrow-up.png) no-repeat;
    384.     background-position: 15px 0;
    385.     margin-bottom: -1px;
    386.     padding: 0;
    387.     float: left;
    388. }
    389. .uiUserOverview {
    390.     padding-top: 5px;
    391.     line-height: 16px;
    392. }
    393. i.uiImage {
    394.     width: 16px;
    395.     height: 16px;
    396.     display: block;
    397.     background: url(../images/iSprite.png);
    398. }
    399. i.uiImage_BIG {
    400.     width: 24px;
    401.     height: 24px;
    402.     display: block;
    403.     background: url(../images/iSpriteBig.png);
    404. }
    405. i.uiImage_BIG.messages {
    406.     background-position: -24px 0;
    407. }
    408. i.uiImage_BIG.notifications {
    409.     background-position: -72px 0;
    410. }
    411. i.uiImage_BIG.profile {
    412.     background-position: -96px 0;
    413. }
    414. i.uiImage.wall {
    415.     background-position: 0 0;
    416. }
    417. i.uiImage.photos {
    418.     background-position: -16px 0;
    419. }
    420. i.uiImage.friends {
    421.     background-position: -32px 0;
    422. }
    423. i.uiImage.info {
    424.     background-position: -48px 0;
    425. }
    426. i.uiImage.messages {
    427.     background-position: -64px 0;
    428. }
    429. i.uiImage.logout {
    430.     background-position: -80px 0;
    431. }
    432. i.uiImage.home {
    433.     background-position: 0 -40px;
    434. }
    435. i.uiImage.birthday {
    436.     background-position: -16px -40px;
    437. }
    438. i.uiImage.love {
    439.     background-position: -48px -40px;
    440. }
    441. i.uiImage.message {
    442.     background-position: 0 -56px;
    443. }
    444. i.uiImage.chat {
    445.     background-position: -16px -56px;
    446. }
    447. i.uiImage.delete {
    448.     background-position: -16px -40px;
    449. }
    450. i.uiImage.edit {
    451.     background-position: 0px -40px;
    452. }
    453. i.uiImage.rate {
    454.     background: url(../images/rate.png);
    455. }
    456. i.uiImage.rate.rate_up {
    457.     background-position: 0 0;
    458. }
    459. button:hover i.uiImage.rate.rate_up {
    460.     background-position: 0 -16px;
    461. }
    462. i.uiImage.rate.rate_down {
    463.     background-position: -16px 0;
    464. }
    465. button:hover i.uiImage.rate.rate_down {
    466.     background-position: -16px -16px;
    467. }
    468. .uiWrap {
    469.     position: relative;
    470. }
    471. .uiWrap .uiWrap_Image {
    472.     float: left;
    473.     display: block;
    474.     position: absolute;
    475.     left: 0px;
    476. }
    477. .uiWrap .uiWrap_Content {
    478.     padding-left: 21px;
    479.     vertical-align: middle;
    480. }
    481. .uiImageBlock_Image {
    482.     float: left;
    483.     display: block;
    484.     margin-right: 10px;
    485. }
    486. .uiCommentImage {
    487.     margin-right: 8px;
    488. }
    489. .uiImageBlock_Content {
    490.     display: table-cell;
    491.     vertical-align: top;
    492.     width: 10000px;
    493. }
    494. h6.uiWallPost_Text {
    495.     font-weight: normal;
    496.     font-size: 11px;
    497.     text-shadow: none;
    498.     color: #555;
    499.  
    500. }
    501. .uiWallPost {
    502.     display: block;
    503.     border-top: 1px solid #EBEBEB;
    504.     padding: 20px;
    505. }
    506. .uiActionHeader {
    507.     margin-bottom: 5px;
    508.     font-weight: bold;
    509.     color: #777;
    510. }
    511. .uiSubtitle {
    512.     margin: 5px 0;
    513.     color: #777;
    514. }
    515. .uiSubtitle abbr {
    516.     border: none;
    517. }
    518. .uiTop {
    519.     background: #F7F8F9;
    520.     border-bottom: 1px solid #EAEBED;
    521.     padding: 20px 20px 0;
    522. }
    523. .uiTopButtons {
    524.     float: right;
    525. }
    526. .uiTop.profile {
    527.     padding-bottom: 0;
    528.     z-index: 99;
    529. }
    530. .uiTopMenu ul {
    531.     float: right;
    532.     padding-right: 10px;
    533. }
    534. .uiTopMenu ul li {
    535.     float: left;
    536. }
    537. .uiTopMenu ul li a {
    538.     display: block;
    539.     padding: 5px 10px 6px;
    540.     margin-left: 5px;
    541.     line-height: 16px;
    542.     color: #555;
    543.     -moz-border-radius: 3px 3px 0 0;
    544.     -webkit-border-radius: 3px 3px 0 0;
    545.     border-radius: 3px 3px 0 0;
    546. }
    547. .uiTopMenu ul li a:hover {
    548.     text-decoration: none;
    549.     background: #EBEBEB;
    550. }
    551. .uiTopMenu ul li.active a {
    552.     border: 1px solid #EBEBEB;
    553.     border-width: 1px 1px 0 1px;
    554.     padding: 4px 10px 7px;
    555.     background: #FFF;
    556.     font-weight: bold;
    557.     margin-bottom: -1px;
    558.     position: relative;
    559. }
    560. .uiComposer {
    561.     padding-bottom: 20px;
    562. }
    563. .uiTopHeader {
    564.     margin-bottom: 10px;
    565. }
    566. .uiTopHeader .button {
    567.     vertical-align: bottom;
    568. }
    569. .uiLogo {
    570.  
    571. }
    572. .commentBox, .inputContainer {
    573.     border: 1px solid #D2D8E0;
    574.     padding: 3px;
    575.     background: #FFF;
    576.     -moz-border-radius: 4px;
    577.     -webkit-border-radius: 4px;
    578.     border-radius: 4px;
    579. }
    580. .commentBox textarea, .inputContainer textarea {
    581.     padding: 0;
    582.     margin: 0;
    583.     border: 0;
    584.     background: transparent;
    585.     width: 100%;
    586.     overflow: hidden;
    587.     line-height: 13px;
    588.     height: 14px;
    589. }
    590. .inputContainer textarea {
    591.     min-height: 26px;
    592.     max-height: 150px;
    593. }
    594. .textArea_BIG {
    595.  
    596. }
    597. .uiControl {
    598.     display: none;
    599. }
    600. .uiActions {
    601.     float: right;
    602.     padding-top: 5px;
    603. }
    604. .uiActions .button,
    605. .uiActions button,
    606. .uiActions input[type=submit],
    607. .uiActions input[type=button] {
    608.     margin: 0 0 0 8px;
    609. }
    610. .uiHidden, .savingMessage {
    611.     display: none;
    612. }
    613. .uiLoadingBox {
    614.     background: #BEE2FA;
    615.     color: #999;
    616. }
    617.  
    618. /* Paddings */
    619. .pta {
    620.     padding: 10px;
    621. }
    622. .pfa {
    623.     padding: 5px;
    624. }
    625. .pft {
    626.     padding: 5px 0 0;
    627. }
    628. .pfb {
    629.     padding: 0 0 5px;
    630. }
    631.  
    632. /* Margins */
    633. .mta {
    634.     margin: 10px;
    635. }
    636. .mna {
    637.     margin: 0;
    638. }
    639. .mtb {
    640.     margin: 0 0 10px 0;
    641. }
    642. .mfb {
    643.     margin: 0 0 5px 0;
    644. }
    645.  
    646. /* Borders */
    647. .uiBorderBottom {
    648.     border-bottom: 1px solid #EBEBEB;
    649. }
    650. .uiBorderTop {
    651.     border-top: 1px solid #EBEBEB;
    652. }
    653.  
    654. /* Colors */
    655. .uiPlaceholder {
    656.     color: #999 !important;
    657. }
    658. /*match placeholder/watermark padding to border+padding for input element*/
    659. label.uiPlaceholder {
    660.     cursor: text;
    661.     padding: 5px;
    662.     color: #999999;
    663. }
    664. /* html5 placeholder support */
    665. input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    666.     color:#999999;
    667. }
    668. input:placeholder, textarea:placeholder {
    669.     color:#999999;
    670. }
    671.  
    672. .uiLive {
    673.  
    674. }
    675. .child_is_focused .uiControl {
    676.     display: block;
    677. }
    678. .uiDeleteButton {
    679.     margin: 0;
    680.     padding: 3px;
    681.     float: right;
    682.     opacity: 0;
    683.     filter: alpha(opacity=0);
    684. }
    685. .uiDeleteButton input, .uiDeleteButton a {
    686.     display: block;
    687.     background: transparent url(../images/close.png);
    688.     width: 16px;
    689.     height: 16px;
    690.     overflow: hidden;
    691.     padding: 0;
    692.     margin: 0;
    693.     text-indent: -5000px;
    694.     border: 0;
    695. }
    696. .storyContent:hover .hideButton,
    697. .commentStoryContent:hover .uiDeleteButton {
    698.     opacity: 1;
    699.     filter: alpha(opacity=1);
    700. }
    Und im Anhang hab ich noch ein Bild damit ihr wisst was ich meine. ;)

    Gruss
    tsbmusic

    Anhänge:

Diese Seite empfehlen