راکت
راکت
بازگشت به پرسش و پاسخ‌ها
حل شده

طراحی سایت

5 پاسخ

سلام من یه سوالی داشتم تصویر

نمیتونم اینهارو به وسط راست بیارم ممنون میشم کمکم کنید

htmlCss

html_css
مهدی عبدلیان
مهدی عبدلیان
@madmin
ثبت پرسش جدید

پاسخ‌ها

5
مهدی عبدلیان
مهدی عبدلیان
@madmin

تخصص: طراحی سایت - برنامه نویسی تحت ویندوز- برنامه نویسی تحت اندروید-بازی ساز یونیتی

بهترین پاسخ

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>دوره ها</title>
    <style>
        .form{

        }
        #form{
            border: solid;
            border-width:1px;
            font-family: B koodak;
            font-size: 15px;
            text-align: center;
        }
        #form h4{
            font-size: 20px;
            text-align: center;
        }
        #form p{
            margin-right: 5px;
        }
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            cursor: pointer;
            text-align: center;
          }

          .dropdown {
            position: relative;
            display: inline-block;
          }

          .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
          }

          .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
          }

          .dropdown-content a:hover {background-color: #f1f1f1;}

          .dropdown:hover .dropdown-content {
            display: block;
          }

          .dropdown:hover .dropbtn {
            background-color: #3e8e41;
          }
          #fform{
    border: solid;
    margin-left: 37px;
    border-width: 1px;
    font-family: B koodak;
    font-size: 15px;
    text-align: center;
    margin-top: 5px;
          }
          #fform h4{
            font-size: 20px;
            text-align: center;
        }
        #fform p{
        /**/
        }
    #rokhany{
    border: solid;
    margin-left: 77px;
    border-width: 1px;
    font-family: B koodak;
    font-size: 15px;
    text-align: center;
    margin-top: 5px;
            }
        #rokhany h4{
        font-size:20px;
        }
        #rokhany p{
        font-size:15px;
        }
        #tajvid{
        border: solid;
        margin-left: 69px;
        border-width: 1px;
        font-family: B koodak;
        font-size: 15px;
        text-align: center;
        margin-top: 5px;
        }
        #tajvid h4{
        font-size:20px;
        }
        #tajvid p{
        font-size:15px;
        }
        .footer{
        text-align:center;
        background-color:gray;
        font-family:B koodak;
        font-size:14px;

        }
        .classsp{
        text-align:center;
        padding-top:10px;

        }
    </style>
</head>
<body>
    <div class="form">
        <div id="form" class="dropdown">
            <h4>آموزش حفظ قرآن کریم </h4>
            <p>آموزش حفظ قران کریم آسون نیست اما باما راحت میشه </p>

                <button class="dropbtn">بیشتر</button>
                <div class="dropdown-content" style="left:0;">
                <p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;">انتخاب استاد</p>
                <a href="#">استاد حاجی کریم</a>
                <a href="#">---</a>
                <a href="#">---</a>
        </div>
    </div>
    <div></div>
    <div id="fform" class="dropdown">
        <h4> آموزش صوت و لحن</h4>
        <p>صوت لحن کار آسونیه اما استاد خودشو داره</p>
        <button class="dropbtn">بیشتر</button>
        <div class="dropdown-content" style="left:0;">
        <p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;">انتخاب استاد</p>
        <a href="#">استاد جعفری</a>
        <a href="#" style="background-color: gold;color:white;">استاد پور عاشوری</a>
        <a href="#">---</a>
    </div>
    </div>
        <div>
        <div id="tajvid" class="dropdown">
        <h4>تجوید</h4>
        <P>تجوید کنار روان خوانی باید باشه تا</P>
        <p>خواندنمون قوی بشه</p>
        <button class="dropbtn">بیشتر</button>
        <div class="dropdown-content" style="left:0;">
        <p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;">انتخاب استاد</p>
        <a href="#">استاد علیجانی</a>
        <a href="#">استاد کریمی</a>
        <a href="#">---</a>
    </div>
    </div>
        <div>
        <div id="rokhany" class="dropdown">
        <h4>روان خوانی </h4>
        <P>روان خوانی اصول خودشو داره و</P>
        <p>باید با قواد آن آشنا باشیم</p>
        <button class="dropbtn">بیشتر</button>
        <div class="dropdown-content" style="left:0;">
        <p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;">انتخاب استاد</p>
        <a href="#">استاد علیجانی</a>
        <a href="#">استاد کریمی</a>
        <a href="#">---</a>
    </div>
    </div>
    <div class="classsp">
    <h4> </h4>

    </div>
    <footer class="footer">این صفحه اطلاعات کلاس های آقایان هست</footer>
</body>
</html>
```اینم از کد هاش
0
ارسال پاسخ
امیرمهدی رحیمی
امیرمهدی رحیمی
@AmirMahdiAmirMahdi

تخصص: front-end

میتونی از flex استفاده کنی
همه را در یک div قرار دهید با یه کلاس دلخواه برای مثال .a-random-div

بعد تو css 

.a-random-div{
    display: flex;
    flex-direction: column;
    align-content: center;
}
0
ارسال پاسخ
مهدی عبدلیان
مهدی عبدلیان
@madmin

تخصص: طراحی سایت - برنامه نویسی تحت ویندوز- برنامه نویسی تحت اندروید-بازی ساز یونیتی

ممنون میشه کد هایی که ارسال کردم رو اصلاح کنید چون کار که گفتید رو انجام دادم نشد

0
ارسال پاسخ

گفتگوهای مرتبط

شاید پاسخ شما همین‌جا باشد

طراحی سایت

4 پاسخ

طراحی سایت

حل شده

طراحی سایت

2 پاسخ

طراحی سایت

6 پاسخ
دانا امین زاده
دانا امین زاده
@dana87

فقط کافی همشونو داخل یک دیو قرار بدی

&lt;!DOCTYPE html&gt;  
&lt;html lang="fa"&gt;  
&lt;head&gt;  
&lt;meta charset="UTF-8"&gt;  
&lt;title&gt;دوره ها&lt;/title&gt;  
&lt;style&gt;  
.center {  
text-align: center;  
}  
.form{

}
#form{
    border: solid;
    border-width:1px;
    font-family: B koodak;
    font-size: 15px;
    text-align: center;
}
#form h4{
    font-size: 20px;
    text-align: center;
}
#form p{
    margin-right: 5px;
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: center;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {background-color: #f1f1f1;}

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
  #fform{

border: solid;  
margin-left: 37px;  
border-width: 1px;  
font-family: B koodak;  
font-size: 15px;  
text-align: center;  
margin-top: 5px;  
}

# fform h4{

    font-size: 20px;
    text-align: center;
}
#fform p{
/**/
}

# rokhany{

border: solid;  
margin-left: 77px;  
border-width: 1px;  
font-family: B koodak;  
font-size: 15px;  
text-align: center;  
margin-top: 5px;  
}

# rokhany h4{

font-size:20px;
}
#rokhany p{
font-size:15px;
}
#tajvid{
border: solid;
margin-left: 69px;
border-width: 1px;
font-family: B koodak;
font-size: 15px;
text-align: center;
margin-top: 5px;
}
#tajvid h4{
font-size:20px;
}
#tajvid p{
font-size:15px;
}
.footer{
text-align:center;
background-color:gray;
font-family:B koodak;
font-size:14px;

}
.classsp{
text-align:center;
padding-top:10px;

}

&lt;/style&gt;

&lt;/head&gt;  
&lt;body&gt;  
&lt;div class="center"&gt;  
&lt;div class="form"&gt;  
&lt;div id="form" class="dropdown"&gt;  
&lt;h4&gt;آموزش حفظ قرآن کریم &lt;/h4&gt;  
&lt;p&gt;آموزش حفظ قران کریم آسون نیست اما باما راحت میشه &lt;/p&gt;

        <button class="dropbtn">بیشتر</button>
        <div class="dropdown-content" style="left:0;">
        <p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;">انتخاب استاد</p>
        <a href="#">استاد حاجی کریم</a>
        <a href="#">---</a>
        <a href="#">---</a>
</div>

&lt;/div&gt;  
&lt;div&gt;&lt;/div&gt;  
&lt;div id="fform" class="dropdown"&gt;  
&lt;h4&gt; آموزش صوت و لحن&lt;/h4&gt;  
&lt;p&gt;صوت لحن کار آسونیه اما استاد خودشو داره&lt;/p&gt;  
&lt;button class="dropbtn"&gt;بیشتر&lt;/button&gt;  
&lt;div class="dropdown-content" style="left:0;"&gt;  
&lt;p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;"&gt;انتخاب استاد&lt;/p&gt;  
&lt;a href="#"&gt;استاد جعفری&lt;/a&gt;  
&lt;a href="#" style="background-color: gold;color:white;"&gt;استاد پور عاشوری&lt;/a&gt;  
&lt;a href="#"&gt;---&lt;/a&gt;  
&lt;/div&gt;  
&lt;/div&gt;  
&lt;div&gt;  
&lt;div id="tajvid" class="dropdown"&gt;  
&lt;h4&gt;تجوید&lt;/h4&gt;  
&lt;P&gt;تجوید کنار روان خوانی باید باشه تا&lt;/P&gt;  
&lt;p&gt;خواندنمون قوی بشه&lt;/p&gt;  
&lt;button class="dropbtn"&gt;بیشتر&lt;/button&gt;  
&lt;div class="dropdown-content" style="left:0;"&gt;  
&lt;p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;"&gt;انتخاب استاد&lt;/p&gt;  
&lt;a href="#"&gt;استاد علیجانی&lt;/a&gt;  
&lt;a href="#"&gt;استاد کریمی&lt;/a&gt;  
&lt;a href="#"&gt;---&lt;/a&gt;  
&lt;/div&gt;  
&lt;/div&gt;  
&lt;div&gt;  
&lt;div id="rokhany" class="dropdown"&gt;  
&lt;h4&gt;روان خوانی &lt;/h4&gt;  
&lt;P&gt;روان خوانی اصول خودشو داره و&lt;/P&gt;  
&lt;p&gt;باید با قواد آن آشنا باشیم&lt;/p&gt;  
&lt;button class="dropbtn"&gt;بیشتر&lt;/button&gt;  
&lt;div class="dropdown-content" style="left:0;"&gt;  
&lt;p style="color: rgb(255, 255, 255);background-color:blue;text-align:center;"&gt;انتخاب استاد&lt;/p&gt;  
&lt;a href="#"&gt;استاد علیجانی&lt;/a&gt;  
&lt;a href="#"&gt;استاد کریمی&lt;/a&gt;  
&lt;a href="#"&gt;---&lt;/a&gt;  
&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;  
&lt;div class="classsp"&gt;  
&lt;h4&gt; &lt;/h4&gt;

</div>
<footer class="footer">این صفحه اطلاعات کلاس های آقایان هست</footer>

&lt;/body&gt;  
&lt;/html&gt;

اینم از کد هاش

0
ارسال پاسخ
مهدی عبدلیان
مهدی عبدلیان
@madmin

تخصص: طراحی سایت - برنامه نویسی تحت ویندوز- برنامه نویسی تحت اندروید-بازی ساز یونیتی

فقط یه سوال چطوری بغل هم قرارشون بزارم

0
ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام