با سلام
لطفا راهنمایی بفرمایید چطور میتونم لوگوی سایت که یک عکس است به سمت چپ هدر و فرم سرچ که یک 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">
<!--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>
کد 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;
}
سپاس