0

لدى مشكلة فى تصميم موقع

السلام عليكم لدى مشكلة فى تصميم نموزج معين فى موقعى وهى كالتالى

لدى ديف كبير وهذا الديف الكبير يحتوى على 2 ديف اريد انجعل الديفين فوق بعض اكتب الاكواد صحيحةولاكن لا تعمل

الكود

.margin

{

    border:6px solid cornflowerblue;

    width:100%;

    height:200px;

    margin:20px;

}

.my-cards

{

    border:3px solid red;

}

.take

{

    border:3px solid black;

    position:relative !important;

    height:400px;

    width:100%;

}

.imgg

{

    border:5px solid green;

    width:100%;

    height:200px;

    overflow:hidden;

   

}

.content

{

    padding:20px;

    text-align:center;

}

.nav

{

    background-color:red;

    padding:3px;

    position:absolute !important;

    top:0px;

    border:5px solid orange;

}

.....................................................................................

<!DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8"/>

<meta name="keywords" content="ahmed,pahr"/>

<title>test</title>

<!-- google fonts -->

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://fonts.googleapis.co..." rel="stylesheet"/>

<!-- end -->

<script src="https://ajax.googleapis.com..."></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.co..." integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" type="text/css" href="style/style.css"/>

</head>

<body>

<div class="margin">

margin

</div>

<div class="headd">

<div class="cont">

<div class="head-std">

<div class="my-cards">

<div class="nav">

    mynav par

</div>

<div class="take">

<div class="imgg">

<img src="/images/bac.png"/>

</div>

<div class="content">

    ahmed elpahr

    </div>

</div>

</div>

</sdiv>

</div>

</div>

<script src="js/main.js"></script>

</body>

</html>

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
waelaljamal أضف ردا

عليك رفع صورة للمكشلمة و رفع الملفات على Google drive مثلا ليستطيع أحد حل المشكلة

0
Elsaidy أضف ردا

<div class="headd">

<div class="imgg">

اعتقد ان الاخطاء فى هذا السطرين غيرهم بهذا

<div class="head">

<div class="img">

0
Osamas أضف ردا

الكود به بعض الأخطاء

جرب هذا الكود الان بعد التعديل عليه

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8"/>
<meta name="keywords" content="ahmed,pahr"/>
<title>test</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet"/>
<!-- end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="style/style.css"/>
</head>
<body>
<style>
.margin {


    border:6px solid cornflowerblue;
    width:100%;
    height:200px;
}


.take{
    border:6px solid red;
    position:relative !important;
    height:425px;
    width:100%;
}


.imgg{
    border:6px solid green;
    width:100%;
    height:200px;
}
.content{
    padding:20px;
    text-align:center;
}
.nav{
    background-color:red;
    padding:3px;
    position:absolute !important;
    top:0px;
    border:5px solid orange;
}
</style>


<div class="content">
<div class="headd">
<div class="cont">
<div class="head-std">
<div class="my-cards">
<div class="nav">
    mynav par
</div>
<div class="take">
<div class="imgg">
<img src="https://avatars.hsoubcdn.com/218c2a7e990cbb5517b11405c2e896d3?s=128"/>
</div>
<div class="margin">
margin
</div>
    </div>
</div>
</div>
</sdiv>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>