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

3 مشترك

اذهب الى الأسفل

تم الحل الكتابه ووضع الصور لصفحة 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 .
noon21
noon21

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

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

http://asda.yoo7.com/

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

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

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

.... Neutral
noon21
noon21

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

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

http://asda.yoo7.com/

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

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

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

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

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

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

http://asda.yoo7.com/

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

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

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

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

ذكر
عدد المساهمات : 1522
معدل النشاط : 6530
السُمعة : 218

http://www.best-devs.net

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

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

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

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

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

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

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

http://asda.yoo7.com/

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

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

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

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

ذكر
عدد المساهمات : 1522
معدل النشاط : 6530
السُمعة : 218

http://www.best-devs.net

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

تم الحل رد: الكتابه ووضع الصور لصفحة 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
ويكون بالنص وتكرار   ويكون فيه عرض للخلفيه  محدد برقم 
بحيث يكون خلفيه للكتابه او الصور مثل المواضيع ان شاءالله شرحي واضح *^*
noon21
noon21

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

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

http://asda.yoo7.com/

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

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

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


الكتابه ووضع الصور لصفحة html 2017-010
صورة توضيحية للتصميم
اسف ع التأخير في كتابة صفحة 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://2img.net/r/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://2img.net/r/frmste/images/free-hosting-forum.png" alt="" />
      </a>
    </div>
  
    
  </body>

</html>
omarpop23
omarpop23
 
 

ذكر
عدد المساهمات : 1522
معدل النشاط : 6530
السُمعة : 218

http://www.best-devs.net

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

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

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

omarpop23 كتب:

الكتابه ووضع الصور لصفحة html 2017-010
صورة توضيحية للتصميم
اسف ع التأخير في كتابة صفحة 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://2img.net/r/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://2img.net/r/frmste/images/free-hosting-forum.png" alt="" />
      </a>
    </div>
  
    
  </body>

</html>



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

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

انثى
عدد المساهمات : 6
معدل النشاط : 2441
السُمعة : 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://2img.net/r/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://2img.net/r/frmste/images/free-hosting-forum.png" alt="" />
      </a>
    </div>
  
    
  </body>

</html>

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

ذكر
عدد المساهمات : 1522
معدل النشاط : 6530
السُمعة : 218

http://www.best-devs.net

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

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

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

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

ذكر
عدد المساهمات : 3029
معدل النشاط : 9745
السُمعة : 294

https://3thab.rigala.net/

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

الرجوع الى أعلى الصفحة


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