مبتدی: مشکل در margin در css [بایگانی]

masouddousam

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

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

کد 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;
}
سپاس

TheLastAssassin

پنج شنبه 30 دی 1395, 18:21 عصر

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

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

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

masouddousam

پنج شنبه 30 دی 1395, 19:12 عصر

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

هر چند این مشکل نیست، اما معمولا توی انتخاب نام 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;
}

masouddousam

پنج شنبه 30 دی 1395, 19:18 عصر

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