Hallo zusammen
Da ich erst vor ein paar Tagen angefangen habe, mich mit dem Thema auseinander zusetzen, bitte ich um etwas Geduld.
Ich habe eine Searchbox erstellt, nun möchte ich die Searchbox neben mein Logo setzen und die Box ein bisschen vergrössern, jedoch ohne Erfolg.
Könnt ihr mir sagen wo das Problem liegt? Was muss ich verändern?
PHP
<!doctype html>
<hmtl>
<head>
<title>Kebab</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/kebab_logo.png" />
</div>
<div class"search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Search..." />
</div>
<div id="menu">
<a href="#" />Home</a>
<a href="#" />About</a>
<a href="#" />Sign Up</a>
<a href="#" />Sign In</a>
</div>
</div>
</body>
</html>CSS
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 8px;
}
.headerMenu {
background-image : url(../img/menu_bg.png);
height : 56px;
border-bottom : 0;
width : 100%;
}
#wrapper {
background-image : url(../img/menu_bg.png);
margin-left : auto;
margin-right : auto;
width : 1000px;
padding-top : 0;
padding-bottom : 0;
}
.logo {
background-image : url(../img/menu_bg.png);
width : 125px;
}
.logo img {
background-image : url(../img/menu_bg.png);
width : 150px;
height : 38px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 50px;
margin-left : 8000px;
}
}
.search_box #search input[type="text"] {
background : url(../img/search-white.png) 10px 6px no-repeat #267BB6;
outline : none;
border : 0 none ;
font : bold 12px Arial;
width : 400px;
padding : 6px 15px 6px 35px;
text-shadow : 0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
transiation : all 0.7s 0s ease;
}
.search_box #search input[type="text"]:focus {
background : url(../img/search-dark.png) 10px 6px no-repeat #FCFCFC;
color : #6A6F75;
width : 350px;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
@media screen and (max-width: 1920px){
#menu {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 0px;
right : 0px;
height : 37px;
padding-top : 19px;
margin-right : 25%;
}
}
@media screen and (min-width: 1280px){
#menu {
background-image: url(../img/menu_bg.png);
position : absolute;
top : 0px;
right : 0px;
height : 37px;
padding-top : 19px;
margin-right : 6%;
}
}
#menu a {
color : #FFFFFF;
text-decoration : none;
font-size : 14px;
background-image : url(../img/menu_bg.png);
background-repeat : no-repeat;
padding-top : 19px;
padding-bottom : 22px;
padding-left : 10px;
padding-right : 10px;
}
#menu a:hover {
background-image : url(../img/menu_bg_hover_mouse_over.png);
}Vielen Dank
Kebab
