منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.


انشاء منتدى مجاني شبيه بهذا المنتدى

الكتابه ووضع الصور لصفحة html

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

تم الحل الكتابه ووضع الصور لصفحة html

مُساهمة من طرف noon21 في الأحد 30 يوليو 2017 - 11:30

السلام عليكم ورحمة الله وبركاته
..  Cool
أبدأ موضوعي بختصر  المشكله عندي أو بالأصح هي مو مشكله أنا ابي منكم التوجيه الصحيح او الحل ..  Sad
الا وهي :
Question
فتحت انا صفحة html وكنت ابي احط خلفيه What a Face  وصوره بالأعلى مثل الهيدر بس ما ابي يكون بين اعلى الصفحه والهيدر مسافه  Like a Star @ heaven
زي بالمنتدى يعني Neutral  اذكر فيه اكواد تسوي هيدر للمنتدى بورقة css كود يشمل صورة الهيدر وصورة على اليمين واليسار مع صور الاطار مكرر 
وصوره اسفل المندى من اليسار واليمين والوسط .. ! تتت444  وان كان بالأمكان ابي الكود ذا بعد pig  ، اما صفحة الـ html


ابي احط لصفحه كود خلفيه للنص فقط بالوسط مثل خلفيات المواضيع بالمنتدى واسوي هيدر للصفحه 
والخلفيه ذي بحيث أستطيع الكتابه عليها ووضع الصور بداخلها .. Rolling Eyes
جربت كم كود ولكن للأسف بعضها ظبط والبعض الأخر ما ظبط أو مو مثل الي ببالي مثل كود كخلفيه  بس كان تكرار
وجانب الصفحه مو بالوسط ، وبحثت بمنتداكم كثير فـ قلت يمكن أنا ما بحثت زين 
وبعد خلني أشوف أهل الخبره طولت بالموضوع بس صدق محتاجه  ارجو1842
اتمنى تفيدوني بأسرع وقت ممكن و  Cool شاكره لكم .. ونا  جيت لأهل الخبره لأني متأكده انكم بتفيدوني Wink .
avatar
noon21



انثى
عدد المساهمات : 6
معدل النشاط : 31
السُمعة : 0

http://asda.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف noon21 في الأحد 30 يوليو 2017 - 14:28

.... Neutral
avatar
noon21



انثى
عدد المساهمات : 6
معدل النشاط : 31
السُمعة : 0

http://asda.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف noon21 في الإثنين 31 يوليو 2017 - 18:02

احد يرد لو سمحتو ،،
avatar
noon21



انثى
عدد المساهمات : 6
معدل النشاط : 31
السُمعة : 0

http://asda.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف omarpop23 في الإثنين 31 يوليو 2017 - 18:31

طيب ممكن تحط الاكواد HTML المستخدمة لتظبيطها بال CSS
avatar
omarpop23
 
 

ذكر
عدد المساهمات : 775
معدل النشاط : 2751
السُمعة : 77

http://cocss.arab.st

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف noon21 في الخميس 3 أغسطس 2017 - 1:15

@omarpop23 كتب:طيب ممكن تحط الاكواد HTML المستخدمة لتظبيطها بال CSS

احط الأكواد لك هنا ؟ وتعدلها ولا كيف تقصد ..
avatar
noon21



انثى
عدد المساهمات : 6
معدل النشاط : 31
السُمعة : 0

http://asda.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف omarpop23 في الخميس 3 أغسطس 2017 - 1:18

اكواد الصفحه اللي انت صممتها و انا هحذف لك الفراغ
avatar
omarpop23
 
 

ذكر
عدد المساهمات : 775
معدل النشاط : 2751
السُمعة : 77

http://cocss.arab.st

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف noon21 في الخميس 3 أغسطس 2017 - 1:50

ما حطيت اكواد حطيت صور لان ما عرفت اظبط كود خلفيه بس بحط الاكواد الي معي

كود خلفيه :
الكود:
<body background="هنا رابط صورة الخلفية">

هذا كود خلفية مواضيع بس زمان كان يصلح لصفحات الـ html لكن الحين ما يظبط مادري ليه ~


الكود:
[table style="width: 700px; height: 700px;" align="center" background="الخلفية هنا" border="0" bordercolor="#4880af" cellpadding="0" cellspacing="0"][tr][td valign="top"][center]


[color=black][img]المقدمممة[/img][/color]

[/center]
[/td][/tr][/table]




انا ابي كود خلفيه زي  الكود الي فوق حق خلفيات المواضيع لكن لصفحة الـ html
ويكون بالنص وتكرار   ويكون فيه عرض للخلفيه  محدد برقم 
بحيث يكون خلفيه للكتابه او الصور مثل المواضيع ان شاءالله شرحي واضح *^*
avatar
noon21



انثى
عدد المساهمات : 6
معدل النشاط : 31
السُمعة : 0

http://asda.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف omarpop23 في الخميس 3 أغسطس 2017 - 6:44



صورة توضيحية للتصميم
اسف ع التأخير في كتابة صفحة HTML اعذرني إن كان بها أخطاء فقد قمت بكتابة اﻷكواد من خلال الهاتف
الكود:
<html dir="rtl" lang="ar">
  
  <head>
    <meta charset="utf-8" />
    <title>Page Title</title>  <!-- ادخل هنا اسم الصفحة -->
    <style type="text/css">
      body {
       margin: 0;
        paddinh: 0;
        box-sizing: border-box;
        background-color: #2e3133;
      }
      a {
       text-decoration: none;
      }
      .omar-page-header img, .omar-page-header span {
       display:inline-block;
       vertical-align: middle;
       color: #333;
      }
      .omar-page-header img {
       padding: 15px;
      }
      .omar-page-header, .page-content {
       background: #fff;
      }
      #tabs {
        height:45px;
        padding-left:40px;
        background-color:#369fcf;
      }
    #tabs ul {
        margin:0;
        list-style:none;
      }
    #tabs ul {
        margin:0 15px;
    }
    #tabs li {
        display:inline-block;
        height:45px;
        font-weight:bold;
        height:45px;
        float:right;
    }
    #tabs a {
        text-decoration:none;
        color:#FFFFFF;
        height:45px;
        display:inline-block;
    }
    #tabs a span {
        box-sizing:border-box;
        display:block;
        font-family:"Helvetica";
        height:45px;
        line-height:45px;
        padding:0 30px;
        transition-duration:300ms;
    }
    #tabs a:hover span,#tabs #activetab a span {
        background-color: rgba( 255,255,255,0.2 );
    }
      .page-content {
       background: #fafafa;
       border: 1px solid #ccc;
       width: 90%;
      margin: 0 auto;
       padding: 15px;
        text-align: center;
      }
      .page-content h1 {
       margin-top: 0;
      }
      .content-block {
       background: #fff;
       padding: 10px;
     width: 90%;
       min-height: 500px;
       border: 1px solid #39c;
       border-radius: 5px;
        display:inline-block;
      }
      #page-footer {
        background-color: #2e3133;
        box-sizing: border-box;
        clear: both;
        color: #a3aaae;
        font-size: 1em;
       height: auto;
        padding: 20px;
        text-align: center;
     }
    </style>
  </head>
  
  <body class="omarpop23">
    <div class="omar-page-header">
      <a href="رابط المنتدى">
       <img src="https://redcdn.net/frmste/images/sigle.png" />
        <span>اسم الموقع</span>
      </a>
    </div>
    <div id="tabs">
      <ul>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
      </ul>
    </div>
  <div style="background: #fff; padding-bottom: 50px;">  
    <div class="page-content">
      <h1 class="content-title">عنوان الموضوع</h1>
 
      <div class="content-block">
       المقدددمممة
      </div>
    
    </div>
  </div>
    <div id="page-footer">
      <a class="help-link" href="/#" target="_blank">
        <img src="https://redcdn.net/frmste/images/free-hosting-forum.png" alt="" />
      </a>
    </div>
  
    
  </body>

</html>
avatar
omarpop23
 
 

ذكر
عدد المساهمات : 775
معدل النشاط : 2751
السُمعة : 77

http://cocss.arab.st

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف noon21 في الجمعة 4 أغسطس 2017 - 1:06

@omarpop23 كتب:


صورة توضيحية للتصميم
اسف ع التأخير في كتابة صفحة HTML اعذرني إن كان بها أخطاء فقد قمت بكتابة اﻷكواد من خلال الهاتف
الكود:
<html dir="rtl" lang="ar">
  
  <head>
    <meta charset="utf-8" />
    <title>Page Title</title>  <!-- ادخل هنا اسم الصفحة -->
    <style type="text/css">
      body {
       margin: 0;
        paddinh: 0;
        box-sizing: border-box;
        background-color: #2e3133;
      }
      a {
       text-decoration: none;
      }
      .omar-page-header img, .omar-page-header span {
       display:inline-block;
       vertical-align: middle;
       color: #333;
      }
      .omar-page-header img {
       padding: 15px;
      }
      .omar-page-header, .page-content {
       background: #fff;
      }
      #tabs {
        height:45px;
        padding-left:40px;
        background-color:#369fcf;
      }
    #tabs ul {
        margin:0;
        list-style:none;
      }
    #tabs ul {
        margin:0 15px;
    }
    #tabs li {
        display:inline-block;
        height:45px;
        font-weight:bold;
        height:45px;
        float:right;
    }
    #tabs a {
        text-decoration:none;
        color:#FFFFFF;
        height:45px;
        display:inline-block;
    }
    #tabs a span {
        box-sizing:border-box;
        display:block;
        font-family:"Helvetica";
        height:45px;
        line-height:45px;
        padding:0 30px;
        transition-duration:300ms;
    }
    #tabs a:hover span,#tabs #activetab a span {
        background-color: rgba( 255,255,255,0.2 );
    }
      .page-content {
       background: #fafafa;
       border: 1px solid #ccc;
       width: 90%;
      margin: 0 auto;
       padding: 15px;
        text-align: center;
      }
      .page-content h1 {
       margin-top: 0;
      }
      .content-block {
       background: #fff;
       padding: 10px;
     width: 90%;
       min-height: 500px;
       border: 1px solid #39c;
       border-radius: 5px;
        display:inline-block;
      }
      #page-footer {
        background-color: #2e3133;
        box-sizing: border-box;
        clear: both;
        color: #a3aaae;
        font-size: 1em;
       height: auto;
        padding: 20px;
        text-align: center;
     }
    </style>
  </head>
  
  <body class="omarpop23">
    <div class="omar-page-header">
      <a href="رابط المنتدى">
       <img src="https://redcdn.net/frmste/images/sigle.png" />
        <span>اسم الموقع</span>
      </a>
    </div>
    <div id="tabs">
      <ul>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
      </ul>
    </div>
  <div style="background: #fff; padding-bottom: 50px;">  
    <div class="page-content">
      <h1 class="content-title">عنوان الموضوع</h1>
 
      <div class="content-block">
       المقدددمممة
      </div>
    
    </div>
  </div>
    <div id="page-footer">
      <a class="help-link" href="/#" target="_blank">
        <img src="https://redcdn.net/frmste/images/free-hosting-forum.png" alt="" />
      </a>
    </div>
  
    
  </body>

</html>



الكود رائع جداً  ، لكن كيف اضيف صوره بالمقدمه 
وكيف احط خلفيه  للصفحه تكون صوره ليس لون .؟
avatar
noon21



انثى
عدد المساهمات : 6
معدل النشاط : 31
السُمعة : 0

http://asda.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف omarpop23 في الجمعة 4 أغسطس 2017 - 2:31

تم التعديل علي الاكواد و تبسيطها لسهولة تغير الخلفيات كما يحلو لك
الكود:
<html dir="rtl" lang="ar">
  
  <head>
    <meta charset="utf-8" />
    <title>Page Title</title>  <!-- ادخل هنا اسم الصفحة -->
    <style type="text/css">
      
    
      
      
      /* خلفية اعلى الصفحة */
      .omar-page-header {
         background: #fff;  
      }
      
      /* خلفية الروابط */
      #tabs {
        background: #369fcf;
      }
      
      /* خلفية الصفحة */
      .page-background {
         background: #fff;
      }
      
      /* خلفية محتوى الصفحة */
      .page-content {
        background: #fafafa;  
      }
      
      /* خلفية الموضوع */
      .content-block {
        background: #fff;
      }
      
      /* خلفية اسفل الصفحة */
      #page-footer {
        background: #2e3133;
      }
      
      body {
       margin: 0;
        paddinh: 0;
        box-sizing: border-box;
        background-color: #2e3133;
      }
      a {
       text-decoration: none;
      }
      .omar-page-header img, .omar-page-header span {
       display:inline-block;
       vertical-align: middle;
       color: #333;
      }
      .omar-page-header img {
       padding: 15px;
      }
      #tabs {
        height:45px;
        padding-left:40px;
      }
    #tabs ul {
        margin:0;
        list-style:none;
      }
    #tabs ul {
        margin:0 15px;
    }
    #tabs li {
        display:inline-block;
        height:45px;
        font-weight:bold;
        height:45px;
        float:right;
    }
    #tabs a {
        text-decoration:none;
        color:#FFFFFF;
        height:45px;
        display:inline-block;
    }
    #tabs a span {
        box-sizing:border-box;
        display:block;
        font-family:"Helvetica";
        height:45px;
        line-height:45px;
        padding:0 30px;
        transition-duration:300ms;
    }
    #tabs a:hover span,#tabs #activetab a span {
        background-color: rgba( 255,255,255,0.2 );
    }
      .page-content {
       border: 1px solid #ccc;
       width: 90%;
       padding: 15px;
       margin: 0 auto;
       text-align: center;
      }
      .page-content h1 {
       margin-top: 0;
      }
      .content-block {
       padding: 10px;
       width: 90%;
       min-height: 500px;
       border: 1px solid #39c;
       border-radius: 5px;
        display:inline-block;
      }
      #page-footer {
        box-sizing: border-box;
        clear: both;
        color: #a3aaae;
        font-size: 1em;
       height: auto;
        padding: 20px;
        text-align: center;
     }
    </style>
  </head>
  
  <body class="omarpop23">
    <div class="omar-page-header">
      <a href="رابط المنتدى">
       <img src="https://redcdn.net/frmste/images/sigle.png" />
        <span>اسم الموقع</span>
      </a>
    </div>
    <div id="tabs">
      <ul>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
       <li><a id="short-link" href="/#"><span>رابط نصي</span></a></li>
      </ul>
    </div>
  <div class="page-background" style="padding-bottom: 50px">  
    <div class="page-content">
      <h1 class="content-title">عنوان الموضوع</h1>
 
      <div class="content-block">
       المقدددمممة
      </div>
    
    </div>
  </div>
    <div id="page-footer">
      <a class="help-link" href="/#" target="_blank">
        <img src="https://redcdn.net/frmste/images/free-hosting-forum.png" alt="" />
      </a>
    </div>
  
    
  </body>

</html>

اذا كنت تريد وضع صورة بدل اللون يمكنك تغيرة عن طريق استبدال كود اللون بكود الصورة مثااااال
كود اللون:
#fff
كود الصورة:
url(رابط الصورة)
avatar
omarpop23
 
 

ذكر
عدد المساهمات : 775
معدل النشاط : 2751
السُمعة : 77

http://cocss.arab.st

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: الكتابه ووضع الصور لصفحة html

مُساهمة من طرف {عذآب} في السبت 12 أغسطس 2017 - 23:43

مر على الموضوع اسبوع تقريباً , هذه يعني ان الموضوع تم حلة او أهملت من صاحب المشكلة رجاء في حال كانت لديك المشكلة مستمر او اي استفسار اخر قم بفتح موضوع جديد سيتم غلق الموضوع & يرسل الى الأرشيف
يرجى مراجعة : قوانين منتدى الدعم
avatar
{عذآب}
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 3802
معدل النشاط : 7311
السُمعة : 289

http://www.quran-jed.net/index.php/component/muscol/Z/97-/85-/14

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى