[مشكلة] مشكلة عدم التفاف النص + الروابط داخل النص مع الـ css

السلام عليكم ورحمة الله وبركاته ،
اعاني من بعض المشاكل بكود css ، لست جيد بالـ css لذلك سأحاول التوضيح قدر ما استطيع
الكود كامل بالاسفل ، والصورة راح توضح المشاكل اللى اعاني منها




1 - عدم التفاف النص ، اريد النص عند بلوغ نهاية الخلية يلتف تلقائيا (تجدون بالسهم الاحمر فى اول سطر لا تظهر بقية الكلمات عند النهاية)
2 - عند وجود رابط فى نص (مشار اليه بالسهم الاصفر) ، تأتي تلقائياً بسطر جديد وانا اريدها بنفس السطر مع بقية الكلمات ويلتف النص بالكامل
3 - الايكونة (عليها دائرة) لا استطيع التحكم فى موضعها اريدها حرة الحركه بدون حيز من حولها ، بحيث استطيع وضعها بجانب اسم العضو مثلا ، اعتقد سبب المشكلة (display: block)
4 - هناك سهم ابيض (مشار اليه بسهم اسود) ، اريد ظبط اتجاهه مباشرة نحو الايكونة اعلاه ، يأتي على اليسار كثيراً
5 - الايكونة تفتح النافذة تلقائياً عند مرور الماوس ، ياليت لو يتم التوضيح لى كيف الغي هذا واجعلها عند الضغط بالفارة
وفقكم الله ،



رمز Code:

a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: 30px;
}
#menu a {
display: block;
width: 140px;
}


#menu ul {
list-style-type: none;
}


#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display:none;
}


#menu ul.sub-menu li {
text-align: right;
}


#menu li:hover ul.sub-menu {
display: block;
}
.egg{
padding: 10px;
margin: 5px 5px 5px 5px;
position:relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color:#fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body{border-top:1px solid #D1D8E7;color:#808080;}
.egg_Message{font-size:13px !important;font-weight:normal;overflow:hidden}


h3{font-size:13px;color:#333;margin:0;padding:0}
.comment_ui
{
border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;padd ing:6px 4px 3px 6px;width:331px; cursor:pointer;
}
.comment_ui:hover{
background-color: #F7F7F7;
}
.dddd
{
background-color:#f2f2f2;border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;marg in-bottom:2px;padding:6px 4px 3px 6px;width:331px;
}
.comment_text{padding:2px 0 4px; color:#333333}
.comment_actual_text{display:inline;padding-left:.4em}


ol {
list-style:none;
margin:0 auto;
width:500px;
margin-top: 20px;
}
#mes{
padding: 0px 3px;
border-radius: 2px 2px 2px 2px;
background-color: rgb(240, 61, 37);
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer{



background-image:url(top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 354px;
}
.clean { display:none}

• 
  
  
  $count
  
  • 
    
    
    
    
    
    
    
    
    
    
    
    
    
    مشاركة 1 من العضو فلان الفلاني مشاركة 1 من العضو فلان الفلاني مشاركة 1 من العضو فلان الفلاني
    
    
    
    
    
    
    
    
    
    
    
    مشاركة 1 من العضو فلان الفلاني مشاركة 1 من العضو فلان الفلاني مشاركة 1 من العضو فلان الفلاني
    
    
    
    
    
    
    
    
    
    
    
    مشاركة 1 من العضو فلان الفلاني
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    حذف جميع الاشعارات
    
    
    
    
    
    
    
  
  
  
  

او اذا هناك كود نظام إشعارات ،اريد فقط كود الـ(css+jquery) جاهز يكون أفضل (يكون مشابه لجوجل بلس او فيسبوك)



الصور المصغرة المرفقة








أكثر...