مشکل در margin در css
با سلام
لطفا راهنمایی بفرمایید چطور میتونم لوگوی سایت که یک عکس است به سمت چپ هدر و فرم سرچ که یک input است را به سمت راست هدر منتقل کنم و این دو تا دقیقا روبروی هم باشن.
فایل html و css رو پیوست کردم.تو تاپیک هم گذاشتم.
کد 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"> <!--start header--> <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> <!--end header--> </body> </html>
/*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;
}
سپاس
پاسخ با نقل قول
