So I am trying to make an input field which is a search bar and I want to place a search icon on the left of the input field. I tried making this with setting the background-image property of the input field but it didn't work for me.
I've already read some other questions like this on Stackoverflow but these solutions didn't work for me.
I tried setting the display property of the input field as well but that didn't solve the problem for me.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/style.css">
<title>Google</title>
</head>
<body>
<div id="header">
<div>
Gmail
Képek
<img src="images/squares.png" alt="">
<img class="profile" src="images/profile.png" alt="">
</div>
</div>
<div id="body">
<img src="images/google.gif" alt="">
<div id="sbcontainer">
<div id="searchbar">
<input type="text">
</div>
</div>
</div>
</body>
</html>
body {
font-family: arial, sans-serif;
}
#header {
text-align: right;
margin: 15px 15px;
padding: 0 15px 0 15px;
word-spacing: 10px;
}
.profile {
border-radius: 50%;
}
a {
display: inline;
color: rgba(0,0,0,0.87);
text-decoration: none;
font-size: 13px;
line-height: 24px;
}
a:hover {
text-decoration: underline;
}
#body {
padding-top: 47px;
text-align: center;
}
#searchbar {
padding-top: 20px;
}
input {
background: url(images/searchicon.png) no-repeat left center;
line-height: 34px;
padding-left: 30px;
border: 1px solid rgb(216, 216, 216);
padding-top: 5px;
padding-bottom: 5px;
width: 30%;
border-radius: 40px;
}
With background-image. Your code is fine, your issue lies in your image path.
input{
background-image: url("https://via.placeholder.com/50");
height: 50px;
width: 50px;
}
<input>
Here, the same exact thing but with your code.
body {
font-family: arial, sans-serif;
}
#header {
text-align: right;
margin: 15px 15px;
padding: 0 15px 0 15px;
word-spacing: 10px;
}
.profile {
border-radius: 50%;
}
a {
display: inline;
color: rgba(0,0,0,0.87);
text-decoration: none;
font-size: 13px;
line-height: 24px;
}
a:hover {
text-decoration: underline;
}
#body {
padding-top: 47px;
text-align: center;
}
#searchbar {
padding-top: 20px;
}
input {
background: url("https://via.placeholder.com/30") no-repeat left center;
line-height: 34px;
padding-left: 30px;
border: 1px solid rgb(216, 216, 216);
padding-top: 5px;
padding-bottom: 5px;
width: 30%;
border-radius: 40px;
}
<!DOCTYPE html>
<html>
<body>
<div id="header">
<div>
Gmail
Képek
<img src="images/squares.png" alt="">
<img class="profile" src="images/profile.png" alt="">
</div>
</div>
<div id="body">
<img src="images/google.gif" alt="">
<div id="sbcontainer">
<div id="searchbar">
<input type="text">
</div>
</div>
</div>
</body>
</html>
I used your code and was able to put a picture of an apple to the left inside of the search bar, so im not sure what trouble you are having.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/style.css">
<title>Google</title>
</head>
<body>
<div id="header">
<div>
Gmail
Képek
<img src="images/squares.png" alt="">
<img class="profile" src="images/profile.png" alt="">
</div>
</div>
<div id="body">
<img src="images/google.gif" alt="">
<div id="sbcontainer">
<div id="searchbar">
<input type="text">
</div>
</div>
</div>
</body>
</html>
body {
font-family: arial, sans-serif;
}
#header {
text-align: right;
margin: 15px 15px;
padding: 0 15px 0 15px;
word-spacing: 10px;
}
.profile {
border-radius: 50%;
}
a {
display: inline;
color: rgba(0,0,0,0.87);
text-decoration: none;
font-size: 13px;
line-height: 24px;
}
a:hover {
text-decoration: underline;
}
#body {
padding-top: 47px;
text-align: center;
}
#searchbar {
padding-top: 20px;
}
input {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgfZeQfcPa39Zodu_eXAUs9xYjmRk5lBry4TWh5nCWiWLf7dka-g&s) no-repeat left center;
background-size: 20px;
line-height: 34px;
padding-left: 30px;
border: 1px solid rgb(216, 216, 216);
padding-top: 5px;
padding-bottom: 5px;
width: 30%;
border-radius: 40px;
}
Here is a fiddle: https://jsfiddle.net/p8jb0r7s/
Related
html/css newbie here.
I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.
I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.
Here's my code:
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user / Sign up</li>
</ul>
</body>
</html>
I have seem this question but what was suggested didn't work for me.
My question is: how do I center the logo div?
A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.
here a solution for your problem.
In CSS, flex is very usefull, take a look at:
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My CSS
I have used flexbox for centered verically divs and set the right div.
For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.
Enjoy
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
display: flex;
align-items:center;
position:absolute;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
/**padding: 0 38px 0px 4px;**/
}
.logo {
position:absolute;
height:100%;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.logo-container {
display:flex;
align-items:center;
pointer-events:all;
}
.logo-container .ka-logo {
width: 24px;
}
.left, .right {
display:flex;
align-items:center;
}
.left {
margin:0 10px;
}
.right {
justify-content:right;
margin:0 10px 0 auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="logo">
<div class="logo-container">
<img class="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</div>
<div class="right">
<li class="navbar-text">New user / Sign up</li>
</div>
</div>
<!--<ul class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="center">
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
</div>
<div class="right">
<li id="sign" class="navbar-text">New user / Sign up</li>
</div>
</ul>-->
</body>
</html>
I just recently fixed, thanks to you guys, how to get my header to not overlap my content when the size of page changes. Now, I was told to group my nav bar, with my h1 header, so that they can be in a fixed position together, but when I do that, it messes everything up. So now I'm looking to get some help into making my nav bar stay right under my header in a fixed position without overlapping content. It can be seen when you view my website, in a full page, how I want it. You can also see how the nav bar gets messed up when you change the size of the webpage.
first of my webpage is hosted here: https://knox-enterprise-inc.herokuapp.com/About.html
second here is my code for this page:
<!DOCTYPE html>
<html lang="en-us">
<link rel="stylesheet" href="normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
Home
About
Contact
</div>
</header>
<div class="content">
<div class="home">
<div class="home-pictures">
<img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
<img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
<img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Riveredge, NJ</h5>
<h5>Date Completed: June 2014</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_5.jpg" width="300px" height="225px">
<img src="home_6.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_7.jpg" width="300px" height="225px">
<img src="home_8.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Teaneck, NJ</h5>
<h5>Date Completed: March 2015</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_9.jpg" width="300px" height="225px">
<img src="home_10.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_11.jpg" width="300px" height="225px">
<img src="home_12.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Tenafly, NJ</h5>
<h5>Date Completed: August 2016</h5>
</ul>
</div>
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
background-image:url("backround.jpg");
background-repeat: repeat-y;
}
header {
height: 220px;
}
#about-header{
height: 100px;
}
#contact-header{
height: 100px;
}
/*Knox Header*/
h1 {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
/*Nav Menu/Home Page*/
.nav {
position: fixed;
top: 78px;
background-image:#606060;
overflow: hidden;
}
.nav a {
font-family: Helvetica;
background-color:black;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 12px;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-top: 2px solid orange;
letter-spacing: 2px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.home {
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.home-pictures, .home-pictures2{
height:auto;
width:auto;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.home img {
border: 1px solid white;
}
.home-description {
line-height: 0px;
color: white;
letter-spacing: 2px;
font-family: Helvetica;
font-size: 18px;
}
/*About Page*/
.about, .about-description {
text-align: center;
color: white;
font-family: helvetica;
letter-spacing: 2px;
}
.about-description {
padding-top:100px;
}
.about-description p {
font-family: helvetica;
letter-spacing: 2px;
margin:0 auto;
width: 40%;
color:white;
}
.about img {
position: relative;
top: 80px;
margin-left:0 auto;
margin-right:0 auto;
padding-top: 30px;
padding-bottom: 30px;
transform: rotate(90deg);
}
#last{
padding-bottom: 40px;
}
.contact {
text-align:center;
padding-top:125px;
color:white;
font-family: helvetica;
letter-spacing: 2px;
}
#phone-contact img{
border-radius:100%;
}
#email-contact img{
border-radius: 30%;
}
The main problem that your position: fixed is on your <h1> tag instead of your header itself. To rectify this, first shift all of your h1 styling to #about-header instead:
#about-header {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
}
Next, remove the pre-existing heights of 100px and 220px in #about-header and header respectively. These are set on lines 10 and 7 of style.css respectively.
Also remove top: -40px, and lower the font-size to 0.9em (you may want a media query to modify that font at different sizes).
Finally, you need to make use of z-index so that your header appears on top of any content that it scrolls over:
#about-header {
z-index: 1;
}
Your final #about-header should end up as:
#about-header {
position: fixed;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url(header.jpg);
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
This will cause the sub-header to 'attach` to main header for both desktops and mobiles, and both headers will overlap all other content on all resolutions.
Hope this helps! :)
Working on a page for my website and I'm trying to set up a series of profiles side-by-side.
The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.
I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img.center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.Gar{
padding-left: 300px;
}
.gar-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.gar-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
padding-left: 750px;
display: in-line;
}
.mayu-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
display: in-line;
}
.mayu-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
display: in-line;
}
<!doctype html>
<html>
<!--HEAD INFORMATION-->
<head>
<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<!--END: HEAD INFORMATION-->
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
<p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="gar-block1"><h3>"Gar"</h3></div>
<div class="gar-block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</p>
<!--CHARACTER PROFILE: MAYU-->
<div class="Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
<div class="mayu-block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</aside>
</p>
</body>
</html>
I'm not sure if i can understand you well here but did you mean that you want the profile to be centered?
If this is the case, i already made it for you.
Please also check your html code, there are lots of missing </> close tag
I also edit some of your codes, please check the codes below both HTML and CSS.
Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block
Hope it helps.
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img .center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.profile {
margin-left: 300px;
display: inline-block;
margin-bottom: 100px;
}
.block1 {
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.block2 {
background-color: #d9d9d9;
color: black;
font-family: "Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact</li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
</p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="block1">
<h3>"Gar"</h3>
</div>
<div class="block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</div>
</p>
</div>
<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="block1">
<h3>Mayumi Mori</h3>
</div>
<div class="block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</div>
</aside>
</p>
</div>
Use float:left; in your css style sheets.
#a{
float:left;
}
#b{
float:left;
}
this two divs whith id : a , b will be side by side but you need to use clear:both; in next div;Remember about closing tags .I hope it helps
HTML
<body>
<div class="header">
<div class="header-logo"><u>MMH</u></div>
<div class="header-inner">Miami Max Hydro</div>
<nav class="header-nav">
About
Contact
</nav>
</div>
<div class="homepage">
<div class="content">
<div class="images">
<div class="column">
<div class="profile-large">
<div class="column1">
<div class="profile-overlay">
<div class="column1">
<img src=data:image/jpeg;base64,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 />
<div class="column2">
<p>Cell2</p>
</div>
<div class="column3">
<p>Cell3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
background-image: url(http://weknowyourdreamz.com/images/sea/sea-08.jpg);
background-size: cover;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
back
}
.header {
text-align: center;
padding: 10px;
background: #D2F0C6;
overflow: auto;
position: fixed;
top: 1px;
right: 1px;
left: 1px;
border: 6px solid #80bc80;
}
.header-inner {
Margin-top: 10px;
}
.images {
padding: 20px;
}
.header-inner a {
text-decoration: none;
color: #000000;
font-size: 24px;
font-weight: bold;
line-height: 20px;
}
.header-logo {
font-size: 32px;
Font-weight: bold;
line-height: 28px;
}
.header-logo a {
text-decoration: none;
color: #000000;
}
.header-nav a {
text-decoration: none;
color: #295f6f;
margin-right: 5px;
margin-left: 5px;
line-height: 25px;
font-weight: bold;
}
.header-nav {
margin-right: 5px;
margin-left: 5px;
}
..images {
padding: 20px 0;
}
.column {
width: 33%;
height: 33%;
font-weight: bold;
line-height: 30;
float: left;
text-align: center;
}
.profile-overlay {
float: left;
border: 6px solid #80bc80;
width: 255px;
height: 245px;
}
My Issue:
Basically, No matter what I do to get a border around my image, I get
Basically the top border extends behind the header.
I've tried margin-top with no success, it just keeps the picture in the same spot relative to the border while pushing the top of the border down.
line-height won't work either. Even line-height 1 will instantly make the picture match the top border but go away from the bottom and hide under the header.
I do have an idea in mind, doing line-height 1 then doing some command to move the whole border/picture down relative to the body, but I don't know any code that does that.
JSFiddle.
Remove border: 6px solid #80bc80; for .profile-overlay and add it to .column1 img.
.column1 img {
border: 6px solid #80bc80;
}
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">