مشکل درکد

2 ماه پیش
توسط میلاد آپدیت شد
اسماعیل ( 1720 تجربه )
2 ماه پیش

سلام من تازه کارم و تازه ی صفحه به شکل زیر درست کردم
m'lady
اما بعدش که یک مقاله میزارم اینطوری میشه
m'lady
و همچنین کد html

<DOCTYPE html>  
<html dir="rtl">  
<head>  
<title>تمرین</title>  
<link rel="stylesheet" href="./examplec.css">  
</head>  
<body id="body">  
<header>  
<div class="title">  
<h1><span class="h title">ساخت وبسایت تمرین</span></h1>  
<p><span class="p title">این وبسایت برای تمرین اینجانب میباشد</span></p>  
</div>  
<nav id="nav">  
<div>  
<ul>  
<li><a href="./exampleh.html">صفحه اصلی</a></li>  
<li><a href="#">آرشیومطالب</a></li>  
<li><a href="#">تماس باما</a></li>  
<li><a href="#">پروفایل</a></li>  
</ul>  
</div>  
</nav>  
</header>  
<aside>  
<div class="Advertising">  
<label><span class="lbl Advertising">تبلیغات</span></label>  
<div class="img Advertising">  
<div class="image"><img src="./Advertising.jpg" alt="" rel="nofollow"></div>  
</div>  
</div>  
<div class="Advertising">  
<label><span class="lbl Advertising">ارتباط باما</span></label>  
<div class="img Advertising">  
<ul>  
<li><a href="tel:+989170454760" rel="nofollow">تلفن</a></li>  
<li><a href="email to:em1378sm[@gmail.com](https://roocket.ir/@gmail.com)" rel="nofollow">ایمیل</a></li>  
<li><a href="<https://www.telegram.me/haepe>" rel="nofollow">تلگرام</a></li>  
</ul>  
</div>  
</div>  
\<!--  
<div class="Advertising">  
<label><span class="lbl Advertising">تبلیغات</span></label>  
<div class="img Advertising">  
</div>  
</div>  
\-->  
</aside>  
<article>  
<div class="article">  
<label>خواستگاری</label>  
<div class="particle">  
<p>ﻋﻤﻮ ﮐﻠﯿﭙﺲ ﻓﺮﻭﺵ ! ﺑﻠﻪ<br> !  
ﮐﻠﯿﭙﺲ ﮐﻢ ﻓﺮﻭﺵ ! ﺑﻠﻪ <br>!  
ﮐﻠﯿﭙﺴﺖ ﺟﺎ ﺩﺍﺭﻩ ؟ ﺑﻠﻪ <br>!  
ﺩﻭﺭِﺵ ﭘَﺮ ﺩﺍﺭﻩ ؟ ﺑﻠﻪ <br>!  
ﻋﻤﻮ ﮐﻠﯿﭙﺲ ﻓﺮﻭﺵ ! ﺑﻠﻪ <br>!  
ﻣﻦ ﮐﻠﯿﭙﺲ ﻣﯽ ﺧﻮﺍﻡ !! ﺑﻠﻪ <br>!  
ﻭﺍﺳﻪ ﯾﻪ ﺷﺐ ﻣﯽ ﺧﻮﺍﻡ !! ﺑﻠﻪ <br>!  
ﻋﻤﻮ ﭼﮑﻤﻪ ﻓﺮﻭﺵ !! ﺑﻠﻪ <br>!  
ﭼﮑﻤﻪ ﮐﻢ ﻓﺮﻭﺵ ! ﺑﻠﻪ <br>!  
ﭼَﮑﻤﺖ ﻋُﻤﻖ ﺩﺍﺭﻩ ؟ ﺑﻠﻪ <br>!  
ﺍﺭﺗﻔﺎﻉ ﺩﺍﺭﻩ ؟؟ ﺑﻠﻪ <br>!  
ﻋﻤﻮ ﭼﮑﻤﻪ ﻓﺮﻭﺵ !! ﺑﻠﻪ <br>!  
ﻣﻦ ﭼﮑﻤﻪ ﻣﯿﺨﻮﺍﻡ ! ﺑﺎﺷﻪ <br>!  
ﻭﺍﺳﻪ ﯾﻪ ﺭُﺏ ﻣﯽ ﺧﻮﺍﻡ !!! ﺑﺎﺷﻪ</p>  
</div>  
</div>  
</article>  
<footer>  
</footer>  
</body>  
</html>

وکدcss

# body {background : MistyRose;}

.title { background : pink;}  
.h.title { margin : 80px 350px; background:blue}  
.p.title{ font-size : 25px;margin : 0px 300px; background:blue}

# nav { background : orange;}

a\[href\] {color : black;}

.Advertising {background : yellow; width : 130px; height : auto;}  
.lbl.Advertising {margin : 0px 30px; /*font-size : 20px*/}  
.img.Advertising {background : orange;}  
.image {margin : 10px 10px 10px 10px}

.article {background : blue; width : 700px; height : auto; margin : -370px 160px;}  
.particle {background : green; height : auto;}  

لطفا بفرمایید که مشکل از کجاست؟

میلاد ( 114680 تجربه )
2 ماه پیش
تخصص : طراح رابط کاربری - Front-End

کدهاتون رو درست قرار بدین.
https://roocket.ir/faq پرسش 9

Alimotreb ( 186332 تجربه )
2 ماه پیش
تخصص : کانفیگ سرور و برنامه نویس

سلام
@em1378sm

شما نیاز به تمرین بیشتر روی CSS دارید که بتونید یه چهره ی بهتری از سندتون نشون بدید
موارد مربوط به سایز المان ها
رنگ ها ، فونت ها ، سایز ها....
اینا رو بیشتر کار کنید

اسماعیل ( 1720 تجربه )
2 ماه پیش

@milad
تشکر

اسماعیل ( 1720 تجربه )
2 ماه پیش

@Alimotreb
درست ولی در همین حد که بلدم و نوشتم دلیل تغییرش چیه

میلاد ( 114680 تجربه )
2 ماه پیش
تخصص : طراح رابط کاربری - Front-End

@em1378sm
کدهای شما به صورت کلی یک مسئله ای توش رعایت نشده و اونم نحوه ی چیدمان عناصر صفحه هستش.
چیدمان عناصر و بخش های مختلف رو در قدیم با float و در روش های جدید با کمک خصوصیت flexbox صورت میدیم.
مطلب دیگه هم اینکه عرض بخش ها رو بهتره با درصد مقداردهی کنیم، مثلا عرض بخش کناری سایت رو 30% بدیم و بخش مقاله رو 70%.
در کل توصیه اصلی که می تونم خدمت شما برای کدنویسی بهتر برای موارد بالا کنم اینه که:
یک نمونه کار که مدرس سایتی رو طراحی می کنه رو تماشا کنید و در هر گام باهاش پیش برید، رونویسی کنید از مدرس. یا اینکه یک جلسه از کار مدرس رو ببینید و سپس سعی کنید خودتون اقدام به نوشتن کدها کنید (بدون نگاه کردن به کدهای مدرس در این زمان). اینجوری نحوه ی ایجاد چیدمان اصلی سایت رو یاد خواهید گرفت.

من کدهاتون رو به صورت کلی نگاه کردم، درست متوجه سوالتون نشدم.
از خط فارسی در پروژه تون استفاده کنید، خیلی بهتر نمایش داده میشه.

میلاد ( 114680 تجربه )
2 ماه پیش
تخصص : طراح رابط کاربری - Front-End

HTML:

<DOCTYPE html>
    <html dir="rtl">

    <head>
        <title>تمرین</title>
        <link rel="stylesheet" href="./examplec.css">
    </head>

    <body id="body">
        <header>
            <div class="title">
                <h1><span class="h title">ساخت وبسایت تمرین</span></h1>
                <p><span class="p title">این وبسایت برای تمرین اینجانب میباشد</span></p>
            </div>
            <nav id="nav">
                <div>
                    <ul>
                        <li><a href="./exampleh.html">صفحه اصلی</a></li>
                        <li><a href="#">آرشیومطالب</a></li>
                        <li><a href="#">تماس باما</a></li>
                        <li><a href="#">پروفایل</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        <aside>
            <div class="Advertising">
                <label><span class="lbl Advertising">تبلیغات</span></label>
                <div class="img Advertising">
                    <div class="image"><img src="./Advertising.jpg" alt="" rel="nofollow"></div>
                </div>
            </div>
            <div class="Advertising">
                <label><span class="lbl Advertising">ارتباط باما</span></label>
                <div class="img Advertising">
                    <ul>
                        <li><a href="tel:+989170454760" rel="nofollow">تلفن</a></li>
                        <li><a href="email to:em1378sm[@gmail.com](https://roocket.ir/@gmail.com)"
                                rel="nofollow">ایمیل</a></li>
                        <li><a href="<https://www.telegram.me/haepe>" rel="nofollow">تلگرام</a></li>
                    </ul>
                </div>
            </div>
        </aside>
        <article>
            <div class="article">
                <label>خواستگاری</label>
                <div class="particle">
                    <p>ﻋﻤﻮ ﮐﻠﯿﭙﺲ ﻓﺮﻭﺵ ! ﺑﻠﻪ<br> !
                        ﮐﻠﯿﭙﺲ ﮐﻢ ﻓﺮﻭﺵ ! ﺑﻠﻪ <br>!
                        ﮐﻠﯿﭙﺴﺖ ﺟﺎ ﺩﺍﺭﻩ ؟ ﺑﻠﻪ <br>!
                        ﺩﻭﺭِﺵ ﭘَﺮ ﺩﺍﺭﻩ ؟ ﺑﻠﻪ <br>!
                        ﻋﻤﻮ ﮐﻠﯿﭙﺲ ﻓﺮﻭﺵ ! ﺑﻠﻪ <br>!
                        ﻣﻦ ﮐﻠﯿﭙﺲ ﻣﯽ ﺧﻮﺍﻡ !! ﺑﻠﻪ <br>!
                        ﻭﺍﺳﻪ ﯾﻪ ﺷﺐ ﻣﯽ ﺧﻮﺍﻡ !! ﺑﻠﻪ <br>!
                        ﻋﻤﻮ ﭼﮑﻤﻪ ﻓﺮﻭﺵ !! ﺑﻠﻪ <br>!
                        ﭼﮑﻤﻪ ﮐﻢ ﻓﺮﻭﺵ ! ﺑﻠﻪ <br>!
                        ﭼَﮑﻤﺖ ﻋُﻤﻖ ﺩﺍﺭﻩ ؟ ﺑﻠﻪ <br>!
                        ﺍﺭﺗﻔﺎﻉ ﺩﺍﺭﻩ ؟؟ ﺑﻠﻪ <br>!
                        ﻋﻤﻮ ﭼﮑﻤﻪ ﻓﺮﻭﺵ !! ﺑﻠﻪ <br>!
                        ﻣﻦ ﭼﮑﻤﻪ ﻣﯿﺨﻮﺍﻡ ! ﺑﺎﺷﻪ <br>!
                        ﻭﺍﺳﻪ ﯾﻪ ﺭُﺏ ﻣﯽ ﺧﻮﺍﻡ !!! ﺑﺎﺷﻪ</p>
                </div>
            </div>
        </article>
        <footer>
        </footer>
    </body>

    </html>

CSS:

#body {
    background: MistyRose;
}

.title {
    background: pink;
}

.h.title {
    margin: 80px 350px;
    background: blue
}

.p.title {
    font-size: 25px;
    margin: 0px 300px;
    background: blue
}

#nav {
    background: orange;
}

a[href] {
    color: black;
}

.Advertising {
    background: yellow;
    width: 130px;
    height: auto;
}

.lbl.Advertising {
    margin: 0px 30px;
    /*font-size : 20px*/
}

.img.Advertising {
    background: orange;
}

.image {
    margin: 10px 10px 10px 10px
}

.article {
    background: blue;
    width: 700px;
    height: auto;
    margin: -370px 160px;
}

.particle {
    background: green;
    height: auto;
}
اسماعیل ( 1720 تجربه )
2 ماه پیش

@milad
اول تشکر ازراهنمایی
دوم تشکر بابت کد

میلاد ( 114680 تجربه )
2 ماه پیش
تخصص : طراح رابط کاربری - Front-End

@em1378sm
زنده باشید.
کدهای خودتون هستش، فقط مرتب کردم و مجدد قرار دادم برای شما و سایر دوستان

برای ارسال پاسخ باید وارد سایت شوید