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

0 امتیاز
90 بازدید
سوال شده مهر 19, 1394 توسط pl.mahdi  
با سلام خدمت استاد عزیز

تو یک سری از دیدگاه ها دیم که شما گفتین طراحی وب بلدین منم یک سوال در این زمینه دارم

من یک قالب در فتوشاپ طراحی و با زبون سی اس اس و اچ تی ام ال کدنویسی کردم به خطر این که اشکال زیاد و هندسی خاصی داشت بیشتر از دستور پزیشن استفاده کردم و وقتی مرورگر رو کوچیک و بزرگ میکنم قالب به هم میریزه چطوری می تونم کاری کنم که وقتی مرورگر رو کوچیک میکنم به جایه اینکه قالب به هم بریزه اسکرول بخوره؟

تو یک جا شنیدم که میگن بخاطر دستور پزیشن هست ولی با چه دستوری میتونم کار پزیشن رو بکنم ولی قالب اسکرول بخوره در اندازه های مختلف نه اینکه بهم بریزه

با تشکر
این مطلب را به اشتراک بگذارید
دارای دیدگاه مهر 19, 1394 توسط pl.mahdi  
اگه خدا بخواد می تونم تا 30 دقیقه دیگه رو هاست اپلود کنم
دارای دیدگاه مهر 19, 1394 توسط hadi.es  
منم ببینم سورس رو آفرین

مرسی
دارای دیدگاه مهر 20, 1394 توسط pl.mahdi  
demo.emeraldstar.ir

رو view page source بزنید می تونید سرسش رو ببینید
دارای دیدگاه مهر 20, 1394 توسط hadi.es  
این باید رسپانسیو بشه
دارای دیدگاه مهر 20, 1394 توسط pl.mahdi  
تا 2 3 روز اینده این کارو میکنم

البته اطلاعاتی زیادی از نحوه رسپانسیو کردن قالب ندارم

در واقع اولین تجربه طراحی سایتم هست

فتوشاپ , سی اس اس , اچ تی ام ال , جاوا اسکریپت همرو تو یک هفته یاد گرفتم

البته js کامل نیست

اگه چند نمونه کد رسپانسیو کردن بهم نشون بدین ممنون میشم

5 پاسخ

+1 امتیاز
پاسخ داده شده مهر 19, 1394 توسط hadi.es  
سلام دوست من

قالبتو رسپانسیو کن
+1 امتیاز
پاسخ داده شده مهر 19, 1394 توسط ASHKARAN  

با عرض سلام

همونطور که دوستمون گفتن شما باید وبسایتتون رو واکنشگرا (Responsive) کنید.

برای این منظور می تونید با استفاده از کد زیر تعیین کنید که اگر عرض صفحه از 700 پیکسل کمتر بود خصوصیات دیگری به کلاس هاتون بدین...

برای مثال من یک کلاس تعریف می کنم با عرض 300 پیکسل و رنگ زمینه آبی:

 .myclass{
    background-color:blue;
    width:300px;    
}

حالا می تونم با کد زیر تعیین کنم که اگر عرض کمتر از 700 پیکسل بود عرض 200 پیکسل بشه و رنگ زمینه هم تبدیل به قرمز بشه:

@media screen and (max-width:700px){

    .myclass{
        background-color:red;
        width:200px;
    }
}

 

0 امتیاز
پاسخ داده شده مهر 19, 1394 توسط Amir Hossein  

سلام، دوست عزیز اگه میخواید با کوچک شدن صفحه مرورگر اسکرول صفحه نشون داده بشه میتونید از کد زیر استفاده کنید:

html,body{
  min-width:300px
  overflow:auto;
}

با کد بالا اگه عرض صفحه مرورگر کوچکتر از 300 پیکسل باشه/بشه اسکرول صفحه ضاهر میشه.

ولی با توجه به فرمایش آقا هادی و علی آقا بهترین راه حل ریسپانسیو کردن سایت هست که میتونید از فریمورک های مختلف از جمله Bootstrap استفاده کنید.

0 امتیاز
پاسخ داده شده مهر 20, 1394 توسط ASHKARAN  

برای تعیین محل قرارگیری باکس هاتون از position:absolute استفاده کردید که در همه جا توصیه نمیشه !

مشکل شما با یک کد کوچیک حل میشه، کافیه یک DIV  در صفحتون قرار بدین و بقیه عناصر رو درونش بگذارین..... البته بنده این روش رو توصیه نمی کنم و بهتره کلا وبسایتتون رو واکنشگرا (Responsive) کنید ، مثل فرمایش دوستمون از BootStarp  استفاده کنید......

اما کدی که می تونید ازش استفاده کنید:

<div id="Container" 
    style="
    width: 100%; 
    top: 200px; 
    background-color: red;
    position: relative;
    min-width: 1500px; "
>
	

<div id="food" 
    style="
    position: relative;
    top: 0px; 
    left: 200px; "
>
    <a href="#"><img src="http://emeraldstar.ir/wp-content/uploads/2015/10/EM7-final_02.png" width="312"     height="221" alt=""></a>
</div>

<div id="food" 
    style="
    position: relative;
    top: 0px; 
    left: 200px; "
>
    <a href="#"><img src="http://emeraldstar.ir/wp-content/uploads/2015/10/EM7-final_02.png" width="312"     height="221" alt=""></a>
</div>

 <div id="food" 
    style="
    position: relative;
    top: 0px; 
    left: 200px; "
>
    <a href="#"><img src="http://emeraldstar.ir/wp-content/uploads/2015/10/EM7-final_02.png" width="312"     height="221" alt=""></a>
</div>

 

</div>

 

0 امتیاز
پاسخ داده شده مهر 21, 1394 توسط hadi.es  
<!DOCTYPE HTML>

<html>

<head>
    <title>Responsiv</title>
    <style>
    .box1 {
        width: 300px;
        height: 500px;
        background-color: #39CACC;
        transition: 1s;
    }

    .box2 {
        border: 2px solid red;
        width: 600px;
        padding: 20px;
        transition: 1s;
    }

    .responsive {
        width: 300px;
        height: 500px;
        font-size: 30px;
        display: none;
        transition: 1s;
    }
     /*شروع رسپانسیو*/
    @media screen and (max-width: 800px) and (max-width: 1000px) {

        .responsive {
            display: block;
            background-color: #898980;
        }

        .box1 {
            background-color: #dadada;
            color: blue;
            display: none;
        }

        .box2 {
            padding: 2px;
        }

    }
    /*پایان رسپانسیو*/

    </style>
</head>

<body>
     <div class="box1"></div>
     <p class="responsive">سایت واکنش پیدا کرد</p>
     <div class="box2">this is responsivethis is responsivethis is responsivethis is responsivethis is responsivethis is responsivethis is responsivethis is responsivethis is responsive</div>
</body>

</html>

 

برای رسپانسیو کردن با این دستور باید کار کنی ::

@media screen

و برای اینکه تعیین کنی که صفحه ات در چه ابعادی تغییر کنه با این کد میتونی اینکارو انجام بدی ::

@media screen and (min-width: 600px) and (max-width: 900px) {

    اینجا هم با کدهای css عناصر صفحه ات رو تغییر میدی

}

تموم شد

794 سوال

722 پاسخ

1,217 دیدگاه

443 کاربر

متاسفانه نیستم

این مطلب را به اشتراک بگذارید

ali.ashkaran@gmail
ما .....
  • سعی بر پاسخگویی به سوالات دیگران داریم.
  • به سوال و یا نظر دیگران احترام می گذاریم .
  • این وبسایت را به دیگران معرفی می کنیم.
  • همواره صمیمیت و ادب را رعایت می کنیم.
  • به سوالمان برچسب های مرتبط اضافه می کنیم.
  • در حین طرح سوال فرد خاصی را مخاطب قرار نمی دهیم .
...