Issue
So I'm totally new to HTML/CSS. I'm designing a fun project now to learn web development. I created a search bar and wanted to add the famous round corners with border-radius. So far it works good. The problem is that the white background shines through the edges now, since the search bar is located in the menu bar. I will post a screenshot and the code below. I'm not 100% familiar with the CSS box-model. I guess there lies the problem. Maybe I can fill the void with my menu background image? Hope someone can guide me where to fix this problem.
Screenshot: https://picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #EAEDF5;
}
.headerMenu {
background-image: url("../img/menu_bg.png");
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url("../img/menu_bg.png");
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url("../img/menu_bg.png");
width: 125px;
}
.logo img {
width: 150px;
height: 100%;
}
.search_box {
position: absolute;
top: 17px;
margin-left: 150px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 10px 6px #D8D8D8;
outline: none;
border: 0 none;
border-radius: 100px;
font: bold 12px Arial, Helvetica, Sans-serif;
width: 300px;
padding: 5px 15px 5px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6pc #fcfcfc;
color: #6a6f75;
width: 300px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
/*...*/<!DOCTYPE html>
<html>
<head>
<title>facefuck</title>
<link rel="stylesheet" href="./css/style.css" type="text/css"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/face_logo.jpg" />
</div>
<div class="search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Search..." />
</form>
</div>
<div id="menu">
<a href="#" />Home</a>
<a href="#" />About</a>
<a href="#" />Sign Up</a>
<a href="#" />Sign In</a>
</div>
</div>
</div>
</body>
</html>Solution
It is caused by
* {
background-color: #EAEDF5;
}
This will make your .search_box and form have that background color too. You can override it by using:
.search_box, form {
background-color: transparent;
}
I'd recommend removing the first rule, though, and only apply the #EAEDF5 background color to the body instead of all elements.
To visualize this with a concrete example:
* {
background-color: gray;
}
#a {
padding: 20px;
background-color: pink;
}
#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>In the above example, the * selector will target all elements (all divs and the body), thus setting the background color of every div to gray. The two divs with ids a and c will override this background color, while b does not and get the background color it should use from the * selector, so it'll have a gray background color instead of the initial value of transparent, which would've let the pink shine through.
To fix the issue, either forcing the #b div to have a transparent background works or by changing the *-selector to body, which will then only color the background color of the page instead of every single element (unless overridden).
See my recommended fix in action here:
body {
background-color: gray;
}
#a {
padding: 20px;
background-color: pink;
}
#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>Answered By - Tgys
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.