مشکل در margin در css

Printable View

پنج شنبه 30 دی 1395, 17:25 عصر
masouddousam

1 ضمیمه

مشکل در margin در css
با سلام
لطفا راهنمایی بفرمایید چطور میتونم لوگوی سایت که یک عکس است به سمت چپ هدر و فرم سرچ که یک input است را به سمت راست هدر منتقل کنم و این دو تا دقیقا روبروی هم باشن.
فایل html و css رو پیوست کردم.تو تاپیک هم گذاشتم.

کد html:

کد HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my website</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="container">  <div id="header"> <div class="header-title"> <h1><a href="#">My Site</a></h1> <div class="search-input"> <h2>my first website design</h2> </div> <div class="site-logo"> <ul> <li><a href="#"><img src="Site-logo.png" alt="site-logo"></a></li> </ul> </div><form action="#" method="get"> <input type="search" name="search" title="search"> <button>search</button> </form> </div> </div>  </body> </html>

کد css:
```
/*General Styles*/

body{

    padding: 00px 00px 00px 00px;

    margin: 00px 00px 00px 00px;

    background-image: url("http://localhost/web-design/my_website/img/site-back-ground.png");

    background-repeat:inherit;

}

h1 , h2{

    padding: 00px;

    margin: 00px;

    font-weight: normal;

}

a{

    text-decoration: none;

    color: #3371bf;

}

a:hover{

    color: #2a4e6e;

}



/*Container Styles*/

#container{

    width: 900px;

    margin: 0 auto;

}



/*Header Styles*/

#header{

    background-color: #ffcb1d;

    border: 1px solid #aa7e1d;

    border-radius: 05px;

    padding: 5px;

    text-align: center;

}

#header h1{

    font-size: 36px;

}

#header h2 {

    font-size: 18px;

    color: #2a4e6e;

    margin-top: 02px;

}
```
سپاس
پنج شنبه 30 دی 1395, 18:21 عصر
TheLastAssassin

نقل قول: مشکل در margin در css
سلام برادر کدنویسیت یه سری مشکل داره که بد نیست بدونی:
1. هر چند این مشکل نیست، اما معمولا توی انتخاب نام Class های چند کلمه‌ای، حرف اول کلمه اول رو کوچیک و حرف اول کلمه دو به بعد رو بزرگ می نویسن و به هم می چسبونن.
2. شما چندین بار padding و margin رو صفر کردین. میتونستید یه سلکتور * تعریف کنید و این عناصر رو اونجا بنویسید. مطمئن باشید روی همه عناصر اعمال میشه چون سلکتور همگانیه و در صورت اینکه بخواید تغییر بدید استایل های یک کلاس مشخص رو، می تونید از استایل کلاس، اینکارو بکنید.
3. نیازی نبوده که از ul و li استفاده کنید برای تصویر لوگوتون.
حالا برای مشکلی که داری، میتونی از float استفاده کنی. اینجوری که به div که می خوای طرف راست باشه float:right میدی و به اونیکی float:left.
موفق باشی
پنج شنبه 30 دی 1395, 19:12 عصر
masouddousam

نقل قول: مشکل در margin در css
نقل قول:
نوشته شده توسط TheLastAssassin

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

هر چند این مشکل نیست، اما معمولا توی انتخاب نام Class های چند کلمه‌ای، حرف اول کلمه اول رو کوچیک و حرف اول کلمه دو به بعد رو بزرگ می نویسن و به هم می چسبونن.
شما چندین بار padding و margin رو صفر کردین. میتونستید یه سلکتور * تعریف کنید و این عناصر رو اونجا بنویسید. مطمئن باشید روی همه عناصر اعمال میشه چون سلکتور همگانیه و در صورت اینکه بخواید تغییر بدید استایل های یک کلاس مشخص رو، می تونید از استایل کلاس، اینکارو بکنید.
نیازی نبوده که از ul و li استفاده کنید برای تصویر لوگوتون.

حالا برای مشکلی که داری، میتونی از float استفاده کنی. اینجوری که به div که می خوای طرف راست باشه float:right میدی و به اونیکی float:left.
موفق باشی
سپاس از شما
اگه ممکنه این کد روهم بررسی کنید مشکلی نداشته باشه.
اگه ممکنه کد رو کپی کنید و فایل html رو کامل ببینید.

کد css جدید:

/*General Styles*/
body{
padding: 00px 00px 00px 00px;
margin: 00px 00px 00px 00px;
background-image: url("http://localhost/web-design/my_website/img/site-back-ground.png");
background-repeat:inherit;
}
h1 , h2{
padding: 00px;
margin: 00px;
font-weight: normal;
}
a{
text-decoration: none;
color: #7d501a;
}
a:hover{
color: #3b1d12;
}
li{
list-style: none;
}
/*Container Styles*/
#container{
width: 900px;
margin: 0 auto;
}

/*Header Styles*/
#container #header{
background-color: #ffcb1d;
border: 1px solid #aa7e1d;
border-radius: 05px;
padding-bottom: 50px;
text-align: center;
}
#header h1{
font-size: 36px;
}
#header h2 {
font-size: 18px;
color: #774b1d;
margin-top: 02px;
}
#container #header .site-logo{
float: right;
margin: -14px auto;
margin-right: 10px;
}
#container #header .search-input{
float: left;
margin: 14px auto;
margin-left: 10px;
}
#container #navigation-menu{
background-color: #ffcb1d;
border: 1px solid #aa7e1d;
border-radius: 05px;
}
#container #navigation-menu ul{
margin: 00px;
padding: 00px;
text-align: center;
}
#container #navigation-menu ul li{
display: inline-block;
padding: 05px;
margin: 00px;
}
#container #navigation-menu ul li a{
margin: 00px 19px;
border: 1px solid #ffcb1d;
}
#container #navigation-menu ul li a:hover{
border: 1px solid #e7b31d;
background-color: #e7b31d;
border-radius: 05px;
}
پنج شنبه 30 دی 1395, 19:18 عصر
masouddousam

1 ضمیمه

نقل قول: مشکل در margin در css

در نهایت به صورت تصویر پیوست شده در میاد:
ضمیمه 144188