I want a sidebar which takes the full height of the screen and doesn't change when scrolling down.
So when I scroll only the contents changes but the navbar stays always the same.
I made a first example: http://jsfiddle.net/CwSD6/
But the none-scroll functionality is missing...
Regards
EDIT:
You need to use position: fixed, and top, bottom, left with value 0.
http://jsfiddle.net/CwSD6/1/
it can be done by doing position: fixed; in <aside>
see this fiddle jsfiddle
Try this:
aside
{
position: fixed;
width: 200px;
height: 100%;
top: 0;
left: 0;
border: 1px solid #111;
}
Hope this helps
I use the jQuery method as using fixed or absolute usually screws with my grid layout. In the example below my grid collapses when under 990px width so you would need to change this assuming you are doing responsive.
$(window).resize(function() {
var doc_height = $(document).height();
var doc_width = $(document).width()
if (doc_width > 990) {
$('#sidebar').css("height", doc_height);
} else {
$('#sidebar').css("height", 'auto');
}
});
Although this may not be the most efficient way, you don't need to set variables. I find it helps with readability.
Kind Regards,
M
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
p {
font-size: 1.125rem;
}
label {
display: flex;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
HTML code start here
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/adminhome.css">
<link href=”https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<link href="https://allfont.net/allfont.css?fonts=montserrat-bold" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<title>home</title>
</head>
<body>
<header>
<div class="tpe">
<p>Admin</p>
</div>
<div class="headbar">
<a href="adminallusers.html" class="allusers">
<i class="fas fa-users"></i>
<span class="users">All Users</span>
</a>
<a href="#" class="admin">
<i class="fas fa-user"></i>
<span class="user">Admin</span>
</a>
</div>
</header>
<nav>
<ul>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-item">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-ticket-alt"></i>
<span class="nav-item">Tickets</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-upload"></i>
<span class="nav-item">Upload</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-tasks"></i>
<span class="nav-item">Status</span>
</a>
</li>
<li>
<a href="#" class="logout">
<i class="fas fa-sign-out-alt"></i>
<span class="nav-item">Log out</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
HTML end here
CSS start from here
#import url('https://allfont.net/allfont.css?fonts=montserrat-bold');
*{
margin: 0;
padding:0;
outline: none;
border: none;
text-decoration: none;
box-sizing: border-box;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
body{
background-color: white;
}
header{
position: fixed;
background:#404258;
height: 45px;
width: 100%;
overflow: hidden;
transition: width 0.2s linear;
}
header .tpe p{
font-size: 28px;
font-weight:900;
float: left;
color:white;
text-transform: uppercase;
margin-left:130px;
}
header a{
position: relative;
color: white;
font-size: 15px;
font-weight: 600;
display: table;
width: 300px;
padding: 10px;
}
header:hover{
background-color: none;
}
.admin{
padding:1px;
background:none;
text-decoration: none;
float: right;
margin-top:0px;
width:10%;
margin-right:-10px;
font-size: 15px;
font-weight:550;
color: white;
}
.allusers{
padding:1px;
background:none;
text-decoration: none;
float: right;
width:20%;
margin-top:0px;
margin-right:-100px;
font-size: 15px;
font-weight:550;
color: white;
}
.user{
position:relative;
top:10px;
margin-right:-50px;
width: 250px;
}
.users{
position:relative;
top:10px;
margin-right:auto;
width: 250px;
}
nav{
position: fixed;
top:45px;
bottom:-60px;
height: 100%;
left: 0;
background:#404258;
width: 90px;
overflow: hidden;
transition: width 0.2s linear;
}
nav a{
position: relative;
color: white;
font-size: 14px;
font-weight:600;
display: table;
width: 300px;
padding: 10px;
}
.fas{
position: relative;
width: 70px;
height: 40px;
top: 14px;
font-size: 20px;
text-align: center;
}
.nav-item{
position:relative;
top:12px;
margin-left:10px;
}
nav a:hover{
background: #A6ADC2;
}
nav:hover{
width: 200px;
transition: all 0.5s ease;
}
.logout{
position: absolute;
bottom: -20;
}
CSS end here
Related
So I am creating a website for myself and am having a bit of an issue trying to hyperlink. I am aware that I need to wrap the entire text in an anchor element , however, despite doing this and having my contact page ready, I am unable to click on the hyperlink. Attached below is the main HTML code that I have been using and the CSS code as well in order to illustrate what I am doing.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fire Sans', sans-serif;
text-decoration: none;
list-style: none;
color: #FFF;
}
.app{
display: flex;
min-height: 100vh;
}
.sidebar{
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #051427;
}
.sidebar h3{
color: #707793;
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.sidebar .menu{
margin: 0 -1rem;
}
.sidebar .menu .menu-item{
display: block;
padding: 1rem;
color: #FFF;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active{
color #6f6d72;
border-right: 5px solid #6f6d72;
}
.content{
flex: 1 1 0;
padding: 2rem;
}
.content h1{
color: #D8BFD8;
font-size: 2.5rem;
font-family: papyrus;
margin-bottom: 1rem;
}
.content p{
color: #C8C8C8;
font-family: papyrus;
}
.menu-toggle{
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #051427;
cursor: pointer;
}
.hamburger{
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after{
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #FFF;
transition-duration: .25s;
}
.hamburger > span::before{
content: '';
top:-8px;
}
.hamburger > span:after{
content: '';
top: 8px;
}
.menu-toggle.is-active .hamburger > span{
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before{
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after{
top: 0;
transform: rotate(90deg);
}
#media (max-width: 1024px){
.sidebar{
max-width: 200px;
}
}
#media (max-width: 768px){
.menu-toggle{
display: block;
}
.content{
padding-top: 8rem;
}
.sidebar{
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear
}
.sidebar.is-active{
left: 0;
}
}
body{
font-family: papyrus;
background-image: url(AstroImg.jpg);
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE-edge">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/4767153995.js" crossorigin="anonymous"></script>
<title> MAP | Astrophotography </title>
</head>
<body>
<div class="app">
<div class= "menu-toggle">
<div class= "hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Menu</h3>
<nav class= "menu">
<i class="fa-solid fa-house"></i> Home
<i class="fa-solid fa-user"></i> About Me <i class="fa solid fa-gears"></i> My Equipment
<i class="fa-solid fa-star"></i> Image Gallery
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
</nav>
</aside>
<main class="content">
<h1> Mapping Astronomical Points </h1>
<p>Your guide to the sky</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
Below is the example I am struggling to fix. If I remove the class tag, the hyperlink works fine, but then it begins to distort the layout of the website, and if I keep the class tag, then hyperlink does not work at all. What can I do to fix this issue? Any help is appreciated.
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
Remove the nested anchor and add the class to the outer anchor.
<i class="fa-regular fa-address-book"></i>Contact
Change this line:
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
With this:
<i class="fa-regular fa-address-book"></i>Contact
EXPLANATION: You should not have an anchor tag inside an anchor tag.
At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!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">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.
I would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT
How to set hover of the block which contains icon with HTML or CSS?
<!doctype html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<a class="link1" href="www.facebook.com">
<div id="top_head">
<i class="fa fa-home">
</div>
</a>
<style>
.fa-home {
color: white;
font-size: 30px;
background-color: transparent;
}
#top_head {
background-color: blue;
display: block;
position: absolute;
top: 20px;
left: 300px;
height: 70px;
width: 100px;
}
link1:hover {
background-color: black;
width: 200px;
height: 200px;
}
</style>
</head>
</body>
</html>
Here's an example:
Try like this: Demo
.fa-home {
color: white;
font-size: 30px;
background-color: transparent;
vertical-align:middle; /* added this */
}
#top_head {
background-color: blue;
display: block;
position: absolute;
top: 20px;
left: 300px;
height: 40px; /* added this */
}
a.link1:link, a.link1:active, a.link1:visited { /* added this */
float:left;
display:block;
line-height:38px;
padding:0px 10px;
vertical-align:middle;
color:#fff;
}
a.link1:hover {
background-color: black;
}
HTML:
<div id="top_head"> <a class="link1" href="#"> <i class="fa fa-home"></i> </a>
<a class="link1" href="#"> home </a>
</div>
Please update your code as follows:
.fa-home {
color: white;
font-size: 30px;
background-color: transparent;
}
#top_head {
background-color: blue;
display: block;
position: absolute;
top: 20px;
left: 300px;
width: 600px;
}
.link1{padding:7px 9px; display:inline-block;}
.link1:hover {
background-color: black;
}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="top_head">
<a class="link1" href="www.facebook.com">
<i class="fa fa-home"></i>
</a>
</div>
First you need to add this to your code <html> and after closing head tag body starts. Make that correct
Check the snippet below..
.fa-home {
color: white;
font-size: 30px;
background-color: transparent;
}
#top_head {
background-color: blue;
display: block;
position: absolute;
top: 20px;
left: 300px;
width: 600px;
}
.link1:hover {
background-color: black;
}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="top_head">
<a class="link1" href="www.facebook.com">
<i class="fa fa-home"></i>
</a>
</div>
Seems like you were targeting the wrong element for hover.
Just check out this plunk: http://plnkr.co/edit/hdHKIN?p=preview
modified the link:hover to this:
#top_head:hover {
background-color: black;
width: 200px;
height: 200px;
}