اذهب إلى المحتوى
حول شغفك لإبداع حقيقي مع دورة تطوير الألعاب. اشترك الآن ×
  • 0

خطأ في توزيع أقسام ملف css and html

اريج الدخان

بواسطة اريج الدخان

 مشاركة

السؤال

اريج الدخان عضو نشيط

اريج الدخان

نشر
نشر

لدي مشكلة بلموقع:

1- الموقع يتغير شكله عندما افتحه بمحركات بحث مختلفة... كيف يمكن اضبطه ليكون مناسب لكل المحركات.

2- في عنوان الموقع لقد وضعت قائمة hébergement and activités

اريد بوضعية hover  عندما اضع الماوس ع الكلمة يظهر لي overline  لكن مبتعد أكثر عن الكلمة؟ كيف ممكن فعلها؟

html : 

<div class="title">

            <div class="premier-title">

                <img src="R/images/logo/Booki.png" alt="logo">

            </div>

            <div class="deuxieme-title">

                <ul>

                    <li><a href="#">Hébergement</a></li>

                    <li><a href="#">Activités</a></li>

                </ul>

            </div>

        </div>



css:


.title {

  display: flex;

  justify-content: space-between;

  padding-bottom: 30px;

}



.title .premier-title {

  display: flex;

  justify-content: flex-start;

}



.title .deuxieme-title {

  display: flex;

  justify-content: flex-end;

  justify-items: end;

}



.title .deuxieme-title ul li {

  list-style-type: none;

  display: inline-block;

  padding-left: 55px;

}



.title .deuxieme-title ul li a {

  text-decoration: none;

}

.title .deuxieme-title ul li a:hover {

  text-decoration: overline;

}

3-بقسم les plus populaires  يوجد نجوم التقييم اريد وضعها في الأسفل متباعده قليلا عن العنوان والسعر؟ 

html:



 <div class="troisieme-partie">

            <div class="plus-populaire">

                <div class="titre">

                    <h2>Les plus populaires</h2>

                    <div class="icones">

                        <i class="fa-solid fa-chart-line-up"></i>

                    </div>

                </div>

                <div class="proposition">

                    <img src="image/1.jpg" alt="chambre-hotel">

                    <div class="groupe-elements">

                        <div class="titre">

                            <h3>Hôtel Le soleil du matin</h3>

                        </div>

                        <span>Nuit à partir de 128<strong> € </strong></span>

                        <div class="photostars">

                            <i class="fa-solid fa-star"></i>

                            <i class="fa-solid fa-star"></i>

                            <i class="fa-solid fa-star"></i>

                            <i class="fa-solid fa-star"></i>

                            <i class="fa-solid fa-star"></i>

                        </div>

                    </div>

                </div>

css:

.troisieme-partie .plus-populaire .proposition {

  border: 1px solid silver;

  border-radius: 15px;

  background-color: white;

  margin-bottom: 56px;

  display: flex;

  justify-content: flex-start;

}

.troisieme-partie .plus-populaire .proposition img {

  width: 120px;

  height: 120px;

  border-top-left-radius: 15px;

  border-bottom-left-radius: 15px;

  background-color: white;

  padding: 5px;

  margin-bottom: 5px;

}

.troisieme-partie .plus-populaire .proposition .groupe-elements {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  padding: 15px;

}

.troisieme-partie .plus-populaire .proposition .groupe-elements .photostars {

  align-self: flex-end;

}

.troisieme-partie .plus-populaire .proposition .photostars {

  color: blue;

}

4-اخيرا لدي قسم الfooter ملتصق بلقسم الاخير لاني استخدمت خاصية float ... وضعت بعدها clear:both لكن لم يتغير شيء.... 

.troisieme-partie {

  width: 27%;

  float: right;

  margin-top: -40.5%;

}

.troisieme-partie .plus-populaire {

  padding: 20px;

  border: 2px solid silver;

  border-radius: 15px;

  background-color: #dbdbd7;

}

.troisieme-partie .plus-populaire .titre h2 {

  margin-bottom: 20px;

}

.troisieme-partie .plus-populaire .proposition {

  border: 1px solid silver;

  border-radius: 15px;

  background-color: white;

  margin-bottom: 56px;

  display: flex;

  justify-content: flex-start;

}

.troisieme-partie .plus-populaire .proposition img {

  width: 120px;

  height: 120px;

  border-top-left-radius: 15px;

  border-bottom-left-radius: 15px;

  background-color: white;

  padding: 5px;

  margin-bottom: 5px;

}

.troisieme-partie .plus-populaire .proposition .groupe-elements {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  padding: 15px;

}

.troisieme-partie .plus-populaire .proposition .groupe-elements .photostars {

  align-self: flex-end;

}

.troisieme-partie .plus-populaire .proposition .photostars {

  color: blue;

}

strong {

  color: black;

}

/*-------------------clear-----------*/

.clear {

  clear: both;

}

.footer {

  background-color: "#dbdbd7";

}
.container {

  max-width: 1170px;

  background-color: #dbdbd7;

}

 

  • أعجبني 1

5 أجوبة على هذا السؤال

Recommended Posts

  • 0
أسامة زيادة عضو نشيط

أسامة زيادة

نشر
نشر

جواب سؤالك الأول ،يمكنك هنا من استخدام إطارات العمل مثل Bootstrap فهي مساعدة في جعل الموقع متجاوب مع مختلف أحجام الشاشات . 

جواب السؤال الثاني ، لقد حاولت أن أقوم بعمل ما تريدينه هنا ، لكن من الواضح أنه لا تضبط مع أي تنسيقات ، فهي مصممة لتظهر مقاربة للكلمة، لكن يمكنك فعل التالي وسوف يظهر الخط أبعد بقليل عن السابق وسوف يظهر كإطار من الأعلى للوسم a. 

.title .deuxieme-title ul li a:hover {
  padding: 20px;
  border-top: 1px solid red;
}

جواب السؤال الثالث يمكنك استخدام الخاصية padding في جعل حواشي داخلية بين العناصر ، كالتالي  

.photostars {
  padding: 20px;
}

جواب السؤال الرابع ، هل يمكنك إرفاق شيفرة HTML الخاصة بقسم footer حتى أستطيع المساعدة واكتشاف المشكلة .

  • أعجبني 1
  • 0
اريج الدخان عضو نشيط

اريج الدخان

نشر
  • الكاتب
نشر
بتاريخ 1 ساعة قال أسامة زيادة:

جواب السؤال الرابع ، هل يمكنك إرفاق شيفرة HTML الخاصة بقسم footer حتى أستطيع المساعدة واكتشاف المشكلة

شكرا كتير الك...انا بدي بس انقل العنصر plus populaire ليكون بجانب ال hébergement à Marseille هل ممكن بخاصية flex 

 <div class="deuxieme-partie">
    <div class="titre">
    <h2>Hébergements à Marseille</h2>
    </div>
    <div class="hébergement">
    <div class="proposition">
    <img src="image/auberge.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Auberge La Cannebière</h3>
    </div>
    <span>Nuit à partir de <strong>25€</strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    </div>
    </div>
    </div>

    <div class="proposition">
    <img src="image/hotel du port.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <h3>Hôtel du port</h3>
    <span>Nuit à partir de 52<strong>€</strong></span>

    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    </div>
    </div>
    </div>
    <div class="proposition">
    <img src="image/hotel les mouettes.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Hôtelle les mouettes</h3>
    </div>
    <span> à partir de 76<strong>€</strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    </div>
    </div>
    </div>

    <div class="proposition">
    <img src="image/Hotel de la mer.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Hôtel de la mer</h3>
    </div>
    <span> Nuit à partir de 46<strong>€</strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    </div>
    </div>
    </div>

    <div class="proposition">
    <img src="image/Auberge le panier.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Auberge Le Panier</h3>
    </div>
    <span>Nuit à partir de <strong>23€</strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    </div>
    </div>
    </div>

    <div class="proposition">
    <img src="image/hotel chez amina.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Hôtel chez Amina</h3>
    </div>Nuit à partir de 96<strong>€</strong>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    </div>
    </div>
    </div>
    <div class="fin-proposition">
    <a href="#">Afficher Plus</a>
    </div>
    </div>
    </div>

    <!----------------Troisieme partie------------------------>

    <div class="troisieme-partie">
    <div class="plus-populaire">
    <div class="titre">
    <h2>Les plus populaires</h2>
    <div class="icones">
    <i class="fa-solid fa-chart-line-up"></i>
    </div>
    </div>
    <div class="proposition">
    <img src="image/1.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Hôtel Le soleil du matin</h3>
    </div>
    <span>Nuit à partir de 128<strong> € </strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    </div>
    </div>
    </div>

    <div class="proposition">
    <img src="image/2.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Au coeur de l'eau</h3>
    </div>
    <span>Nuit à partir de 71<strong> € </strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    </div>
    </div>
    </div>

    <div class="proposition">
    <img src="image/Hôtel tout bleu et Blanc.jpg" alt="chambre-hotel">
    <div class="groupe-elements">
    <div class="titre">
    <h3>Hôtel Tout bleu et Blanc</h3>
    </div>
    <span>Nuit à partir de 68 <strong>€</strong></span>
    <div class="photostars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star" style="color: #eee;"></i>
    </div>
    </div>
    </div>
    </div>

CSS 

.deuxieme-partie {
  width: 70%;
  margin-top: 25px;
  border: 2px solid silver;
  border-radius: 15px;
  background-color: #dbdbd7;
}
.deuxieme-partie .titre h2 {
  margin-top: 10px;
  margin-left: 65px;
}

.deuxieme-partie .hébergement {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.deuxieme-partie .hébergement .proposition {
  margin-top: 35px;
  margin-left: 70px;
  margin-bottom: 10px;
  border: 1px solid silver;
  border-radius: 15px;
  background-color: white;
  padding: 5px;
}
.deuxieme-partie .hébergement .proposition img {
  width: 270px;
  height: 150px;
  border-radius: 15px;
  background-color: white;
}
.deuxieme-partie .hébergement .proposition .groupe-elements {
  padding-left: 10px;
}
.deuxieme-partie .hébergement .proposition .photostars {
 color: blue;
}
.deuxieme-partie .hébergement .fin-proposition {
  margin-left: 75px;
  margin-top: 15px;
  margin-bottom: 25px;
  font-weight: bold;
}
.deuxieme-partie .hébergement .fin-proposition a {
  color: black;
  text-decoration: none;
}
/*----------------plus populaire-------------------------*/
.troisieme-partie {
  width: 27%;
}

.troisieme-partie .plus-populaire {
  padding: 20px;
  border: 2px solid silver;
  border-radius: 15px;
  background-color: #dbdbd7;
}
.troisieme-partie .plus-populaire .titre h2 {
  margin-bottom: 20px;
}
.troisieme-partie .plus-populaire .proposition {
  border: 1px solid silver;
  border-radius: 15px;
  background-color: white;
  margin-bottom: 56px;
  display: flex;
  justify-content: flex-start;
}
.troisieme-partie .plus-populaire .proposition img {
  width: 120px;
  height: 120px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: white;
  padding: 5px;
  margin-bottom: 5px;
}
.troisieme-partie .plus-populaire .proposition .groupe-elements {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.troisieme-partie .plus-populaire .proposition .groupe-elements .photostars {
  padding-top: 28px;
}
.troisieme-partie .plus-populaire .proposition .photostars {
  color: blue;
}
strong {
  color: black;
}

 

  • أعجبني 1
  • 0
اريج الدخان عضو نشيط

اريج الدخان

نشر
  • الكاتب
نشر
بتاريخ 21 دقائق مضت قال أسامة زيادة:

يمكنك تنفيذ التالي ، أن تقومي بإضافة وسم aside ويكون شريط جانبي لصفحة وبجانب القائمة ، مع تصغير حجم القائمة إلى 80$ وإعطاء الوسم aside حجم 20%  ونقل الكلاس plus populaire داخل الوسم aside  . 

لم افهم ....المشكلة ان الفقرة التالية وضعتها بأسم aside ..هل ممكن ان ارسل لك الموقع لتراه وتخبرني ماذا يجب ان اعدل عليه 

  • 0
أسامة زيادة عضو نشيط

أسامة زيادة

نشر
نشر
بتاريخ 30 دقائق مضت قال اريج الدخان:

لم افهم ....المشكلة ان الفقرة التالية وضعتها بأسم aside ..هل ممكن ان ارسل لك الموقع لتراه وتخبرني ماذا يجب ان اعدل عليه 

ما عليكي عمله هو التالي :- 

أولاً قومي بإعطاء الكلاس deuxieme-partie الخاصية التالية والأفضل لو تقومي بتغير اسمه ، ونقل الكلاس plus-populaire إلى داخله .  

.deuxieme-partie {
  width: 100%;
  background-color: #ffffff;
}

ثانياً قومي بإعطاء بالكلاس hébergement  والكلاس plus-populaire هذه الخواص  

.hébergement {
  width: 70%;
  float: left;
}

.plus-populaire {
  width: 30%;
  float: right;
}

وهكذا سوف يأتي الكلاس plus-populaire على اليمين والكلاس hébergement  على الشمال ، أرجوا منك مراعاة التنسيقات عند النقل ، هذه أفضل طريقة لحل المشكلة لديكِ 

أو بدون الدمج يمكنك إعطاء الكلاس deuxieme-partie الخاصية ، على الخواص التي لديه . 

.deuxieme-partie {
  float: left;  
}

وإعطاء الكلاس troisieme-partie الخاصية 

.troisieme-partie {
  float: right;
}

أيضاً قومي بمراعاة التنسيقات 

  • أعجبني 1

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...