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
HTML Code:
<!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="Put your dick here" />
</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>
CSS Code:
* {
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);
}
...
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>
Related
I have a few divs one on top of the other that present a progress bar.
I got the css from sketch (graphic artist program).
In sketch the divs blend into each other, but when I take the css and put it in a html page it doesn't look as good.
Any idea what it can be?
I am attaching the css and screenshots:
.bar-bg {
width: 256px;
height: 10px;
opacity: 0.2;
border-radius: 5px;
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.9);
border: solid 1px $white;
background-color: $dark-blue;
}
.oval {
width: 24px;
height: 24px;
opacity: 0.9;
mix-blend-mode: color-dodge;
background-image: radial-gradient(circle at 52% 50%, #cf2d8e, #000000);
margin-top: -16px;
}
.progress {
height: 8px;
opacity: 0.9;
border-radius: 4px;
box-shadow: 0 0 6px 5px rgba(44, 146, 255, 0.7), inset 0 0 0 1px $icons;
border: solid 1px $blue;
background-color: $primary-1;
margin-top: -9px;
margin-left: 1px;
}
<div id="progressContainer">
<div id="bar" class="bar-bg"></div>
<div id="progress" class="progress" [style.width.px]="getProgress()"></div>
<div id="currentValue" class="oval" [style.margin-left.px]="getOvalLocation()"></div>
</div>
when I run it it looks like this:
trying to get it to look like this:
As you can see in image2 the divs blend into each other better than in image1.
I am trying to figure out why it can not align correctly. I have tried: display, align changing the margins, changing the padding, changing the position. event the top or doing a float on it.
Photo of what it looks like
.headerMenu {
background-color: #272626;
Height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
padding-top: 9px;
padding-bottom: 9px;
width: 38px;
transition-timing-function: linear;
transition: all 2s;
}
.logo .img {
background-image: url(../img/logo-white-p.png);
width: 38px;
height: 38px;
transition-timing-function: linear;
transition: all 0.5s;
}
.logo:hover {
background-color: rgba(255, 255, 255, 1.00);
}
.logo .img:hover {
background-image: url(../img/logo-black-p.png);
}
.search_box {
position: absolute;
top: 13px;
margin-left: 155px;
}
#search input[type="text"] {
background: url(../img/search-icon-white.png) no-repeat 10px 6px #000;
outline: none;
border: 0 none;
font: bold 12px;
color: #fff;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(255, 255, 255, 0.30);
-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-icon.png) no-repeat 10px 6px #fff;
color: #6a6f75;
width: 350px;
-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);
}
#media screen and (max-width: 1280px) {
#menu {
postion: absolute;
top: 0px;
right0px;
height: 37px;
padding-top: 19px;
}
}
#menu a {
color: #000;
text-decoration: none;
font-size: 14px;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
border-bottom: 2px solid #000000;
}
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<div class="img"></div>
</div>
<div class="serch_box">
<form action="serch.php" method="get" id="search">
<input type="text" name="q" size="60px" placeholder="Search..." />
</form>
</div>
<div id="menu">
Home
About
Login
Register
</div>
</div>
</div>
Your problem lies in the fact that a div element is a block element and therefore forces itself to a new line.
If we tell the system to make each div under the #wrapper to be an inline element, then it will all line up as expected.
It also requires vertical-align: middle to make everything align to the middle of the header. If this isn't present then it sets it to the bottom of the header element.
.headerMenu {
background-color: #272626;
Height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
div#wrapper > div {
display: inline-block;
vertical-align: middle;
}
.logo {
padding-top: 9px;
padding-bottom: 9px;
width: 38px;
transition-timing-function: linear;
transition: all 2s;
}
.logo .img {
background-image: url(../img/logo-white-p.png);
width: 38px;
height: 38px;
transition-timing-function: linear;
transition: all 0.5s;
}
.logo:hover {
background-color: rgba(255, 255, 255, 1.00);
}
.logo .img:hover {
background-image: url(../img/logo-black-p.png);
}
.search_box {
position: absolute;
top: 13px;
margin-left: 155px;
}
#search input[type="text"] {
background: url(../img/search-icon-white.png) no-repeat 10px 6px #000;
outline: none;
border: 0 none;
font: bold 12px;
color: #fff;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(255, 255, 255, 0.30);
-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-icon.png) no-repeat 10px 6px #fff;
color: #6a6f75;
width: 350px;
-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);
}
#media screen and (max-width: 1280px) {
#menu {
postion: absolute;
top: 0px;
right0px;
height: 37px;
padding-top: 19px;
}
}
#menu a {
color: white;
text-decoration: none;
font-size: 14px;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
border-bottom: 2px solid #000000;
}
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<div class="img"></div>
</div>
<div class="serch_box">
<form action="serch.php" method="get" id="search">
<input type="text" name="q" size="60px" placeholder="Search..." />
</form>
</div>
<div id="menu">
Home
About
Login
Register
</div>
</div>
</div>
I tried to design a progress bar using css3 but when I load the html in my google chrome it is blank.
What is wrong with this mark up? Please help me to fix it
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
</style>
</head>
<body>
<div class="progress_bar blue stripes"> <!--stripes defines the animation type for the current progrss bar,the blue class adds a blue style for the progress bar-->
<span style="width:40%"></span> <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
</div>
</body>
</html>
The problem is in your css you are using class progress-bar but in HTML you are using class with different name progress_bar see the difference between these 2 classes.
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
--your HTML code is--
<div class="progress-bar blue stripes"> <!--stripes defines the animation type for the current progrss bar,the blue class adds a blue style for the progress bar-->
<span style="width:40%"></span> <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
</div>
Here is the Demo
Try changing progress-bar to progress_bar
JSBIN
You are using wrong class in css. Check out the above JSBin for working code.
.progress_bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress_bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
I´m trying to put an icon font inside my search input at the right side.
I´m putting the icon font <i class="fa fa-search-plus"></i> inside my <button> tag, but the icon font is appearing at the right of my search input and not inside the input at right.
Somebody there can see what is happening?
My jsfiddle with the problem:
http://jsfiddle.net/ritz/ZNb5r/ (I try to link the "font-awesome.min.css" into the jsfiddle but I think its not working)
My html:
<li style="float:right; list-style:none; height:20px;">
<form id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
<button type="submit"><i class="fa fa-search-plus"></i></button>
</form>
</li>
My css:
#search
{
margin-top:8x;
margin-top:8px;
outline:none ;
border:none ;
}
#search input[type="text"]
{
border: 0 none;
font: 12px 'verdana';
background: brown;
text-indent: 0;
width:110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
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: #141d22;
color: #fff;
width: 170px;
outline:none;
color:000;
-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);
}
button[type="submit"]>i:hover
{
color: #fff;
}
button[type="submit"]>i
{
background:none;
color:#ccc;
font-size:1.5em;
}
The icon will not appear inside your input, because your button is not and can not be nested inside an input.
To make your button appear inside the input, try this:
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#search input[type="text"] {
padding-right: 20px;
}
#search button[type="submit"] {
margin-left: -20px;
width: 20px;
}
</style>
You may have to tweak margins and paddings to get it to work properly. To eliminate some trouble, I've added box sizing. Why?
[By default] The width and height properties are measured including only the content, but not the border, margin, or padding.
When you use border-box, however,
The width and height properties include the padding and border, but not the margin.
(See MDN's article on box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
You just aren't linking to the font-awesome css file correctly. Here is my fiddle with it working properly.
To make it work all I did was link it to the CDN by adding this http://www.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css to external resources.
Put some height and width in the button tag should sholve your issue. Then make an icon as background-image. You may not have to put i tag on it, see my Fiddle using an input tag and background-image as icon.
how do i make the search box in the center of the nav bar? you will see what i mean below with the image.. ill post my css code for the search box below the image ..
#advsearch {
}
#advsearch input[type="text"] {
background: url(/images/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial, Helvetica, Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
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;
}
#advsearch input[type="text"]:focus {
width: 200px;
}
thanks so much in advance :) if u want maybe we can work on my website together?
also here is a Js Fiddle just incase you need it dont mind the images not being there it should not make a diffrence
Here you need to modify some css code.
#cssmenu > ul > li > a {
color: #A0A0A0;
font-family: Verdana,'Lucida Grande';
font-size: 15px;
/*line-height: 70px;
padding: 0;*/
position: relative;
top: 7px;
transition: color 0.15s ease 0s;
}
Demo: http://jsfiddle.net/y5Fhc/8/
anchor in not needed in the li of search box and I have added a class in the li of search box to make it center of the nav bar.
css
li.search{
line-height:40px;
}
html
<li class='active search'><span>
<form method="get" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</li>
jsFiddle File