I'm new in CSS and today I want to add search button to my navbar textbox,
So I try something like this:
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
.section-title{
color: #2ddf5c;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding: 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar_container {
display: flex;
width: 100%;
padding-left: 40px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
.main-nav__searchbar_container input.main-nav__searchbar{
width:100%;
height: 50px;
/* background: #2b303b; */
border: none;
font-size: 10pt;
float: left;
/* color: #fff; */
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #232833;
height: 50px;
width: 50px;
color: #4f5b66;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.main-nav__searchbar_container:hover button.icon,
.main-nav__searchbar_container:active button.icon,
.main-nav__searchbar_container:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.main-nav__searchbar_container:hover button.icon:hover{
background: red;
}
.main-nav__searchbar{
display: flex;
width: 100%;
margin: 8px;
padding: 8px;
border: 2px solid;
border-radius: 4px;
outline: none;
transition: .3s;
}
.main-nav{
display: flex;
width: 100%;
text-align: right;
margin: 0 10px;
}
.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
.main-nav__social{
display:block;
width: 20px;
height: 20px;
margin-left: 10px;
}
.another-container{
margin:auto;
width: 100%;
padding: 10px;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div><nav class="main-nav">
<div class="another-container">
<div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
<button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
</div>
<ul class="main-nav__items">
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
</li>
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
</li>
</ul>
</nav>
</header>
</body>
So my button appears when you hover the mouse over the textbox. Problem is my button element it's not aligned with my textbox even though they are in the same container, what am I doing wrong?
Another thing I want to add is to color the border of the textbox on my hover action to be part of the design and give the impression the textbox is active too something like this:
I try to use border-color: #232833; in hover css rule but that does not work,
Regards
---UPDATE---
I try to wrap all into a new container as comment bellow as:
.another-container
{
margin:auto;
width: 100%;
padding: 10px;
}
But result is the same.
For the button alignment, it needs to have the same margin as its sibling .main-nav__searchbar, or alternatively, you could apply a padding to the paren't .main-nav__searchbar_container instead of a margin to both children.
css for button alignment
.main-nav__searchbar_container button.icon {
margin-top: 8px;
}
css for adding border to input on hover
input.main-nav__searchbar:hover {
border: 2px solid blue;
}
Related
How can I keep the dropdown open on clicking pumpkin icon be able to type something and close the dropdown when clicking anywhere else on screen except dropdown?
I know that something needs to be done here:
.header-bar-mobile-drop-down__icon-button:focus
.header-bar-mobile-drop-down__item
Note: trying to avoid using JS.
I tried to use &:focus in the parent class but it didn't work
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
opacity: 0;
border: 1px solid orange;
}
.header-bar-mobile-drop-down__icon-button:focus
+ .header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button
class="header-bar-mobile-drop-down__icon-button"
tabindex="1"
>
🎃 1
</button>
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
Got the answer which involves using one of new css attributes :focus-within
And moving the dropdown code above to make it a child of the clickable tag, which in my case is button
NOTE: this solution will not work for IE 11
Here is the code:
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar {
min-height: 3.5rem;
box-shadow: none;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
border: 1px solid orange;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header-bar-mobile-drop-down__icon-button:focus-within
.header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
.header-bar__toggle-menu {
height: 100%;
padding: 0 1rem 0 0.5rem;
display: flex;
align-items: center;
background-color: transparent;
color: black;
border: none;
font-size: 1.5rem;
min-width: 0;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button class="header-bar-mobile-drop-down__icon-button">
🎃 1
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</button>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
I saw many people who have the same problem here but none of the solutions on their questions worked for me. I have a div with a button and an input text inside and their heights don't match, even when I set fixed px values to them. The button is always a bit "taller."
Here's my HTML & CSS https://jsfiddle.net/7yd0p5jk/
This is where I'm facing problems:
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
width: 100%;
font-size: 1.2rem;
padding: 0.4rem 1rem;
border: black 2px solid;
border-radius: 2px;
}
You have padding: 0.6rem; set on .show-btn, while you also have padding: 0.6rem 1rem; property on #search element
Fixing this, you will get the following result:
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
/* HEADER */
#header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 10rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
width: 100%;
font-size: 1.2rem;
padding: 0.6rem 1rem;
border: black 2px solid;
border-radius: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div id="logo-div">
<h1 id="logo">
Contact List
</h1>
</div>
<form id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</form>
</header>
<script src="js/main.js"></script>
</body>
</html>
Then, you maybe want to fix the height corrispondency of both the items, which can be done implementing margin-top: 2px property on .show-btn element, here's the result:
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
/* HEADER */
#header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 10rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
margin-top: 2px;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
width: 100%;
font-size: 1.2rem;
padding: 0.6rem 1rem;
border: black 2px solid;
border-radius: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div id="logo-div">
<h1 id="logo">
Contact List
</h1>
</div>
<form id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</form>
</header>
<script src="js/main.js"></script>
</body>
</html>
To urigolate the height of the components, you need to remove the height: 100% and add border: none in #search, and add an align-items: stretch to #search-div.
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
/* HEADER */
#header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 10rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
align-items: stretch; /*add*/
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
/*height: 100%;*/ /*remove*/
width: 100%;
font-size: 1.2rem;
padding: 0.4rem 1rem;
border: black 2px solid;
border-radius: 2px;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div id="logo-div">
<h1 id="logo">
Contact List
</h1>
</div>
<form id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</form>
</header>
<script src="js/main.js"></script>
</body>
</html>
I have a drop-down menu on a site that I have been working on I and I need to get rid of this gap above the drop-down menu. It is quite bothersome.
Figure A
So, in an attempt to fix it, I changed the li line-height from 50px to 47px and got this:
Figure B
Almost what I want, but not quite. The problem? The li is higher causing the little animation I have under the li to no longer touch the image.
Then, I tried giving the li a relative position. But now, the drop-down is the same width as the 'Patient Info' link.
Figure C
Here is my jsfiddle link if you would like to fiddle around with it. There is no rush. Thank you!
Code:
body {
font-family: 'Source Sans Pro', sans-serif;
max-width: 2500px;
margin: 0 auto 30px auto;
}
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img#profile {
width: 100%;
max-width: 64px;
border-radius: 100%;
}
.header,
.menu,
.hero,
.slider,
.img-display {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection {
background: #11b5e4;
color: white;
}
::-moz-selection {
background: #11b5e4;
color: white;
}
/* HEADER & MENU STYLE START */
.header {
height: 100px;
padding: 15px 10px 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.header h1 {
margin: 0px 25px 0px 25px;
}
.header img {
height: 100%;
pointer-events: none;
}
.header a i {
font-size: 30px;
margin: 0px 0px 0px 15px;
color: black;
transition: .15s color;
}
.header a i:hover {
color: #11b5e4;
}
.menu-wrapper {
height: 50px;
display: flex;
justify-content: center;
}
.menu li {
display: inline-block;
line-height: 50px;
}
.menu li a {
display: inline-block;
font-size: 23px;
margin: 0px 10px;
transition: .2s cubic-bezier(.5, 3, .5, .5) background;
color: black;
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 0px no-repeat;
text-decoration: none;
}
.menu li a:hover {
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 5px no-repeat;
}
.menu-wrapper #toggle-menu {
display: none;
}
/* FOR STACK OVERFLOW */
.menu li ul {
margin: 0;
padding: 0;
display: none;
background: white;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
li:hover ul {
display: flex;
flex-direction: column;
position: absolute;
}
/* END OF FOR STACK OVERFLOW */
#media only screen and (max-width: 1000px) {
.menu {
opacity: 0;
position: relative;
top: 50px;
transition: .25s opacity;
pointer-events: none;
}
.menu-wrapper #toggle-menu:checked~.menu {
opacity: 1;
pointer-events: all;
}
.menu li {
display: block;
text-align: center;
background-color: white;
padding: 0px 15px;
}
.menu-wrapper label {
align-self: center;
width: 32px;
height: 32px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.menu-wrapper label:hover {
cursor: pointer;
}
.menu-wrapper label#open-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-open-icon.png) center center/cover no-repeat;
}
.menu-wrapper label#close-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-close-icon.png) center center/cover no-repeat;
opacity: 0;
}
.menu-wrapper #toggle-menu:checked~label#open-menu {
opacity: 0;
transform: rotate(360deg);
}
.menu-wrapper #toggle-menu:checked~label#close-menu {
opacity: 1;
transform: rotate(360deg);
}
}
#media only screen and (max-width: 750px) {
.header {
height: 75px;
}
.header h1 {
margin: 0px 5px;
font-size: 20px;
}
.header a i {
font-size: 20px;
margin: 0px 0px 0px 5px;
}
}
/* HEADER & MENU STYLE END */
/* HERO START */
.hero {
display: flex;
justify-content: center;
height: calc(150px + 20vw);
width: 100%;
}
.hero h1 {
text-align: center;
font-size: 35px;
padding: 8px;
margin: 15px;
background: rgba(17, 181, 228, .75);
border-radius: 10px;
color: white;
font-weight: bolder;
}
.hero.a {
align-items: flex-end;
background: url(http://ianspence.us/stack/hero.a.jpg) center/cover no-repeat;
}
.hero.b {
align-items: flex-end;
background: url(media/hero.b.jpeg) center/cover no-repeat;
}
#media only screen and (max-width: 900px) {
.hero.a,
.hero.b {
height: 300px;
}
.hero.a h1,
.hero.b h1 {
font-size: 26px;
}
}
#media only screen and (max-width: 400px) {
.hero.a,
.hero.b {
height: 250px;
}
.hero.a h1,
.hero.b h1 {
font-size: 16px;
}
}
/* HERO END */
<!DOCTYPE html>
<html>
<head>
<title>#pfcainc | Home</title>
<link rel='shortcut icon' href='http://ianspence.us/stack/icon.png'>
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='media/fontawesome/css/fontawesome-all.css'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='robots' content='index, follow'>
<meta name='revisit-after' content='3 days'>
<meta name='viewport' content='initial-scale=1'>
</head>
<body>
<div class='header'>
<img src='http://ianspence.us/stack/icon.png'>
<h1>Panhandle Family Care Associates</h1>
<a href='https://facebook.com/panhandlefamilycareassociates/'><i class='fab fa-facebook-square'></i></a>
<a href='https://twitter.com/pfcainc'><i class='fab fa-twitter'></i></a>
</div>
<div class='menu-wrapper'>
<input type='checkbox' id='toggle-menu'>
<label for='toggle-menu' id='open-menu'></label>
<label for='toggle-menu' id='close-menu'></label>
<!--Start Menu Display-->
<div class='menu'>
<li><a href='=./'>Home</a></li>
<li><a href='services'>Services</a></li>
<li><a href='physicians'>Physicians</a></li>
<li>Patient Info
<ul>
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
</li>
<li><a href='office-info'>Office Info</a></li>
</div>
<!--End Menu Display-->
</div>
<div class='hero a'>
<h1>Treating your family like ours since 2002</h1>
</div>
</body>
</html>
Notes:
In jsfiddle, make sure you increase the width of the preview so that the
full menu is there, not the hamburger menu.
I am trying to avoid Javascript completely.
margin-top: -3px for submenu seems to fix the issue across all (major) browsers, however I'd recommend fix from my Codepen, with flex and defined height for li elements.
Fast & simple
HTML:
<ul class="submenu">
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
CSS:
.submenu {
margin-top: -3px !important;
}
More clean approach
Codepen
I am new to HTML and CSS and I have my own website.
The problem is that I don't know how to change the opacity when I hover over my text. I want it to become lighter if I'm hovering over my text in the menu on the right. Right now It's only changing when I hover over the image itself, the text changes too, but I want it to both change at the same time and on the same object, so I hover over the text; text changes and images opacity changes.
Here is my code:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://fonts.googleapis.com/css?family=Roboto:300);
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
background-image: url(lucafraserProject/images/backgroundImage.png);
background-repeat: repeat;
}
#container {
width: 100%;
height: 1000px;
}
#header {
width: 100%;
height: 200px;
background-position: 50% 50%;
background-color: #000;
color: #FFF;
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 45px;
box-shadow: 3px 3px 5px 3px #ccc;
}
#aboutMe {
width: 50%;
height: auto;
background-color: #FFF;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin-top: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
box-shadow: 3px 3px 5px 3px #ccc;
float: left;
}
#footer {
width: 100%;
color: #333333;
text-align: center;
display: block;
font-family: 'Roboto', sans-serif;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
padding-top: 10px;
float: left;
}
.aboutMe {
font-size: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
.h2AboutMe {
font-size: 40px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
.h1Header {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 40px;
padding-bottom: 50px;
}
#menuLinks {
background-color: #FFF;
height: auto;
width: 21%;
float: left;
padding: 25px 36px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin: auto;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
margin-top: 50px;
box-shadow: 3px 3px 5px 3px #ccc;
}
.h2Menu {
font-size: 40px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
#menuRechts {
background-color: #FFF;
height: auto;
width: 21%;
float: left;
overflow: hidden;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin: auto;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
margin-top: 50px;
box-shadow: 3px 3px 5px 3px #ccc;
}
li {
text-decoration: none;
list-style-type: none;
margin-left: -40px;
vertical-align: middle;
margin-top: 10px;
}
a {
text-decoration: none;
list-style: none;
color: #000;
}
a:hover {
text-decoration: none;
font-size: 40px;
font-family: 'Roboto', sans-serif;
margin-top: 0px;
margin-bottom: 0px;
color: #000;
font-weight: bold;
}
#menuLinks li ul {
text-decoration: none;
list-style: none;
}
.marginClassP {
margin-top: -50px;
}
.marginLeft {
margin-left: 10px;
font-size: 20px;
}
.mainMenu {
font-size: 20px;
}
#widespace {
width: 2%;
height: 500px;
float: left;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
}
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/*1210px = follow me lelijk = new css, tablet device, mobile width = */
.pic {
opacity: 1;
filter: alpha(opacity=100);;
}
.pic:hover {
opacity: 0.3;
filter: alpha(opacity=30);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lucafraser.nl</title>
<link href="indexCSS.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header">
<h1 class="h1Header">Welcome</h1>
</div>
<div id="widespace"></div>
<div id="menuLinks">
<h2 class="h2Menu">Menu</h2>
<ul>
<li><span class="mainMenu">Home</span></li>
<li><span class="mainMenu">About</span></li>
<li><span class="mainMenu">Portfolio</span></li>
<li><span class="mainMenu">Results</span></li>
<li><span class="mainMenu">News</span></li>
<li><span class="mainMenu">Blog</span></li>
<li><span class="mainMenu">Contact</span></li>
</ul>
</div>
<div id="widespace"></div>
<div id="aboutMe">
<h2 class="h2AboutMe">Home</h2>
<p class="aboutMe">I am trying to get this website to work on mobile devices. After that I will continue creating my website and I will be inserting pages with content. Also, I am trying to get the font-type I use to work for everyone so you don't see the ugly standard font-type. Thanks for your patience!<br />Update: The font is working now! I hope it's readable :D</p>
</div>
<div id="widespace"></div>
<div id="menuRechts">
<h2 class="h2Menu">Follow me</h2>
<ul>
<li><img src="lucafraserProject/images/48x48/facebook-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Facebook</span></li>
<li><img src="lucafraserProject/images/48x48/twitter-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Twitter</span></li>
<li><img src="lucafraserProject/images/48x48/googleplus-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Google+</span></li>
<li><img src="lucafraserProject/images/48x48/email-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Gmail</span></li>
<li><img src="lucafraserProject/images/48x48/instagram-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Instagram</span></li>
<li><img src="lucafraserProject/images/48x48/youtube-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">YouTube</span></li>
</ul>
</div>
<div id="widespace"></div>
<div id="footer">
<p>Copyright © Luca Fraser. Alle rechten voorbehouden.</p>
</div>
</div>
</body>
</html>
As you mentioned you know html and css please add class on links parent i.e ul see below example
<ul class="side-links">
then use below css in style file
.side-links li:hover{ opacity:0.3}
Done
It should go like this parent:hover child {opacity:0.3;}
here is the code example.
Instead of applying the hover effect when you hover over the a or the .pic apply it when you hover over their containing li element.
#menuRechts li:hover .pic{
opacity:0.3
}
#menuRechts li:hover a{
font-weight:bold;
}
you can always make us of css pseudo classes
img:hover{
opacity : 0.5;
}
this will decrease the opacity of every image by 50% , you can use any html element,css class or id instead of img
you can give any value between 0-1
1 being total visible and 0 being totally transparent
add this CSS:
#menuRechts li:hover {
opacity: 0.5;
}
and remove the .pic:hover code. This will make the entire LI element fade out, since it contains both the image and the text, theres no need to do both things separately.
Try to this code...
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for
the :hover selector to work on other elements than the a element.</p>
</body>
</html>
I was building a portfolio website purely out of html5 and css and I am stuck at sticking the footer at the bottom of the page.
Here are the codes:
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contact | sadman s.</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>sadman s.</h1>
</header>
<!--NAVIGATION BAR-->
<nav>
<ul>
<li>h o m e</li>
<li>b l o g</li>
<li>p o r t f o l i o</li>
<li>a b o u t</li>
<li>c o n t a c t</li>
</ul>
</nav>
<!--NAVIGATION BAR ENDS-->
<!--BODY STARTS HERE-->
<body>
<form>
<label>Name</label>
<input name="name" placeholder="Name">
<label>Email</label>
<input name="email" type="email" placeholder="Email">
<label>Message</label>
<textarea name="message" placeholder="Your message"></textarea>
<input id="submit" name="submit" type="submit" value="SEND">
</form>
</body>
<!--BODY ENDS HERE-->
<!--FOOTER STARTS HERE-->
<footer>
<div id="footer_line"></div>
<!--FOOTER LINKS BAR-->
<nav>
<ul>
<li><span id="footer_bar">t w i t t e r</span></li>
<li><span id="footer_bar">i n s t a g r a m</span></li>
<li><span id="footer_bar">g i t h u b</span></li>
</ul>
</nav>
<!--FOOTER BAR ENDS-->
<p>copyright © 2014 - <span id="footer_link">sadman.de</span>. all rights reserved.</p>
</footer>
</html>
stylesheet.css
* {
margin: 0;
padding: 0;
font-family: Droid Serif;
}
body {
font-family: Droid Serif;
}
header {
font-family: Droid Serif;
font-weight: lighter;
font-size: 1.8em;
text-align: center;
text-transform: uppercase;
margin-top: 25px;
}
/*NAVIGATION BAR*/
nav {
position: relative;
list-style: none;
margin: 25px 0 40px 0;
padding: auto;
text-align: center;
font-family: Droid Serif;
text-transform: uppercase;
}
nav > ul > li {
display: inline;
}
nav > ul > li > a {
display: inline-block;
padding: 0 32px 0 32px;
color: #000;
text-decoration: none;
}
a:hover {
color: #00d8a3;
text-decoration: none;
transition: color 0.5s ease;
}
a:active {
color: #00d8a3 !important;
text-decoration: none;
}
/*BODY*/
h2 {
font-weight: 100;
text-align: center;
font-family: Droid Serif;
}
table {
border: 2px;
margin: -10px auto 15px auto;
}
td {
padding: 20px;
}
table tr td img {
-webkit-font-smoothing: antialiased;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
table tr td img:hover {
opacity: 0.7;
}
/*FOOTER*/
footer {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 15px;
width: 100%;
clear: both;
}
#footer_line {
width: 90%;
border: 1px solid #696969;
margin: auto;
}
p {
margin-top: 0px;
text-align: center;
font-size: 0.6em;
}
#footer_bar {
text-transform: lowercase;
}
#footer_link {
color: #00d8a3;
text-decoration: none;
}
#footer_link:hover {
color: #000000;
text-decoration: none;
}
/*CONTACT FORM*/
label {
display: none;
margin-top: 20px;
letter-spacing: 2px;
}
form {
width: 437px;
margin: 0 auto;
}
#form-div {
background-color: e1e1e1;
padding: 35px 35px 50px 35px;
width: 450px;
float: left;
position: absolute;
margin-top: 20px;
margin-left: -260px;
}
input, textarea {
width: 400px;
height: 27px;
background-color: #ffffff;
border: 1px solid #efefef;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #696969;
}
textarea {
height: 100px;
}
input:focus, textarea:focus {
border: 3px solid #00d8a3;
}
#submit {
border-radius: 5px;
background-color: #00d8a3;
width: 400px;
height: 50px;
margin: 0 auto 56px auto;
font-size: 1.5em;
font-weight: bold;
}
Here is an image of my homepage, I want the footer to be at the bottom of the contact page like in the homepage. http://puu.sh/bzOUo/e1f2479945.jpg
Here is how it is showing up in the contact page right now: http://puu.sh/bzOWZ/ef02a73399.png
Also, if someone can help me align the "send" button in the contact page with the rest of the input boxes, it'd be really nice.
Try absolute position on footer
footer
{
position: absolute;
bottom: 0;
width: 100%;
}
Here is the Demo
hope this will work out. add this to your css code :
footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
}
footer * {
display:inline;
}