amin7x
چهارشنبه 24 مهر 1392, 13:17 عصر
سلام
من یک مشکلی توی چیدمان عناصر دارم.
الان میخوام اون input سرچ بیاد بالا و هم تراز لینک ها بشه و در کنار لوگو قرار بگیره.
اگه میشه راهنماییم کنید.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="application/javascript" language="javascript" src="js/js.js"></script>
</head>
<body>
<header>
<div id="top-header">
<p class="header-p-one">Welcome Thomas.</p>
<p class="header-p-two">[Manage Account]</p>
<p class="header-p-three">Sign out</p>
</div>
<nav>
<ul>
<li><a href="">Categories</a></li>
<li><a href="">Top Product</a></li>
<li><a href="">Carts</a></li>
</ul>
</nav>
<div id="logo"></div>
<div class="search">
<input type="search" name="search" value="Search anything in store">
<input type="button" name="click" value="Search">
</div>
</header>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'pacifico';
src: url('css/fonts/pacifico.woff') format('woff');
}
@font-face {
font-family: 'ptsans';
src: url('css/fonts/ptsans.woff') format('woff');
}
::selection {
color: #fff;
background-color: #de0017;
}
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAnCAIAAAA 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);
background-repeat: repeat;
}
#top-header {
background-color: #222222;
width: 1280px;
height: 30px;
}
#top-header p {
display: inline-block;
}
#top-header .header-p-one {
color: #fff;
padding: 5px 0 0 154px;
}
#top-header .header-p-two {
color: #808080;
padding: 5px 0 0 30px;
}
#top-header .header-p-three {
color: #808080;
padding: 5px 0 0 650px;
}
nav ul {
list-style: none;
padding: 70px 0 0 120px;
position: absolute;
}
nav ul li {
display: inline;
padding-left: 60px;
}
nav ul li a {
color: #de0017;
font-family: 'pacifico', Geneva, sans-serif;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
#logo {
width: 100px;
height: 90px;
background: url(../img/Logo.png) no-repeat center;
padding: 44px 1150px 0 0;
}
.search{
padding-left: 900px;
}
.search input[type="search"] {
width: 200px;
padding: 3px 5px 3px 5px;
color: #acacac;
background-color: transparent;
font-style:italic;
}
.search input[type="button"] {
padding: 5px;
border: 1px solid #e9e9e9;
background-color:transparent;
color: #808080;
font-weight: bold;
}
ممنون
من یک مشکلی توی چیدمان عناصر دارم.
الان میخوام اون input سرچ بیاد بالا و هم تراز لینک ها بشه و در کنار لوگو قرار بگیره.
اگه میشه راهنماییم کنید.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="application/javascript" language="javascript" src="js/js.js"></script>
</head>
<body>
<header>
<div id="top-header">
<p class="header-p-one">Welcome Thomas.</p>
<p class="header-p-two">[Manage Account]</p>
<p class="header-p-three">Sign out</p>
</div>
<nav>
<ul>
<li><a href="">Categories</a></li>
<li><a href="">Top Product</a></li>
<li><a href="">Carts</a></li>
</ul>
</nav>
<div id="logo"></div>
<div class="search">
<input type="search" name="search" value="Search anything in store">
<input type="button" name="click" value="Search">
</div>
</header>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'pacifico';
src: url('css/fonts/pacifico.woff') format('woff');
}
@font-face {
font-family: 'ptsans';
src: url('css/fonts/ptsans.woff') format('woff');
}
::selection {
color: #fff;
background-color: #de0017;
}
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAnCAIAAAA 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);
background-repeat: repeat;
}
#top-header {
background-color: #222222;
width: 1280px;
height: 30px;
}
#top-header p {
display: inline-block;
}
#top-header .header-p-one {
color: #fff;
padding: 5px 0 0 154px;
}
#top-header .header-p-two {
color: #808080;
padding: 5px 0 0 30px;
}
#top-header .header-p-three {
color: #808080;
padding: 5px 0 0 650px;
}
nav ul {
list-style: none;
padding: 70px 0 0 120px;
position: absolute;
}
nav ul li {
display: inline;
padding-left: 60px;
}
nav ul li a {
color: #de0017;
font-family: 'pacifico', Geneva, sans-serif;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
#logo {
width: 100px;
height: 90px;
background: url(../img/Logo.png) no-repeat center;
padding: 44px 1150px 0 0;
}
.search{
padding-left: 900px;
}
.search input[type="search"] {
width: 200px;
padding: 3px 5px 3px 5px;
color: #acacac;
background-color: transparent;
font-style:italic;
}
.search input[type="button"] {
padding: 5px;
border: 1px solid #e9e9e9;
background-color:transparent;
color: #808080;
font-weight: bold;
}
ممنون