So... I have a image in a div and then setting it to text/align but it's not 100% centered... the same thing with the navigation... it's close but not perfect... everything else is working fine. Can someone please give me a hand with this cause I'm going crazy. Thank you for all your anwsers in advance.
HTML
<!doctype html>
<html>
<body>
<head>
<meta charset="utf-8">
<title>Projects</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<head>
<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>
<meta charset="utf-8">
<title>mt</title>
</head>
<body>
<nav>
<ul>
<li>PROJECTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="table" >
<table width="900" height="200" border="0" cellspacing="7" cellpadding="9">
<tbody>
<tr>
<td>
<div class="row" >
<li>
<a href="project1.html">
<div class="raste">
<img src="logos.jpg" alt="" width="300"/>
</div>
</a>
</li>
</div>
</td>
<td>
<li>
<a href="project2.html">
<div class="raste">
<img src="elite.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project3.html">
<div class="raste">
<img src="time.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
<tr>
<td>
<li>
<a href="project4.html">
<div class="raste">
<img src="booksrie.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project5.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project6.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</body>
</html>
CSS
#charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
table {
margin-left: auto;
margin-right: auto;
}
.raste img {
height: 190px;
width: 300px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.table {
display: table;
margin: 1em auto;
}
.row {
display: table-row;
}
.raste {
display: table-cell;
}
#font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
By using this jsfiddle https://jsfiddle.net/hayrugh0/
and inspecting the page, there is left-padding caused by ul element, its the default padding from the browser
attach this css rule and it should be centered
ul {
padding: 0;
}
hope that makes sense
All your images are contained in div tags so can you please define the image you want to center.Thanks
Related
I am trying to use overflow, but its not allowing me to scroll but it works as I need that popup on hover, is there any way so I can use overflow visible as well as scroll.
I tried position fixed too, for the span element inside server__list but it doesn't seems to work as well, rest of the elements going underneath, Is there any other property or a better way for doing this?
Here is my code
:root{
--blurple-color: #7289DA;
--lighter-color: #32363a;
--light-color: #2C2F33;
--white-color: #ffffff;
--dark-color: #23272A;
}
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
body, html{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
*{
font-family: 'Balsamiq Sans', cursive;
}
body{
background-color: var(--lighter-color);
}
.server__list{
position: fixed;
top: 0;
bottom: 0;
background-color: var(--dark-color);
width: 50px;
overflow-x: visible;
}
.server__list::-webkit-scrollbar {
display: none;
}
.channel__list{
position: fixed;
left: 50px;
width: 150px;
height: 100%;
background-color: var(--light-color);
}
.user__container{
position: fixed;
bottom: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: #26292c;
}
.user__container .profile{
display: flex;
margin: 10px;
}
.user__container .profile img{
width: 25px;
border-radius: 50%;
}
.user .user__name{
color: var(--white-color);
font-size: 10px;
padding: 0px 5px;
}
.user .user__discrim{
color: grey;
font-size: 8px;
padding: 0px 5px;
}
.profile #logout{
background: none;
outline: none;
border: none;
color: rgb(187, 55, 3);
margin-left: 40px;
transition: color;
transition-duration: 0.5s;
}
.profile #logout:hover{
cursor: pointer;
color: darkred;
}
/* Showing Servers */
.server__list .server{
margin: 10px;
}
.server__list .server img{
width: 32px;
border-radius: 50%;
}
.server:hover{
cursor: pointer;
}
.server span{
display: none;
background-color: #0f1011;
color: white;
border-radius: 4px;
font-size: 12px;
padding: 4px;
text-align: center;
}
.server:hover > span{
display: inline-block;
position: absolute;
margin-top: -40px;
width: 100px;
margin-left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web</title>
<link rel="icon" href="./static/assets/icon.png" id="header__icon">
<link rel="stylesheet" href="./static/css/style.css">
<script src="https://kit.fontawesome.com/1144a6771a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="server__list">
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
</div>
<div class="channel__list">
</div>
<div class="user__container">
<div class="profile">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<div class="user">
<div class="user__name">
WiperR
</div>
<div class="user__discrim">
#3131
</div>
</div>
<button id="logout"><i class="fa fa-sign-out" aria-hidden="true"></i></button>
</div>
</div>
<script src="./static/js/index.js"></script>
</body>
</html>
Try this css :
.server__list {
overflow-x: auto;
max-height: 100%;
}
I am not sure if this is what you want, but if you want to allow overflow as well as hide the scrollbar, you can use:-
#my-element::-webkit-scrollbar {display: none;}
and
#my-element {overflow: scroll;}
I have an existing Gmail signature that works fine. It was saved and implemented over a year ago. I tried copying/pasting the same signature, but even it breaks. It's almost like Gmail has changed the way they allow HTML signatures.
I wanted to ask if anyone had any tips for me. I tried changing all classes to inline styles but still no luck. To be clear, it breaks to a new line right after the logo image, but only after its sent.
When I'm composing and in the Drafts, the signature is fine. Only after sending does it break to a new line after the logo.
Any tips? Can anyone can offer any guidance into formatting this HTML to work as a Gmail signature?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
336-355-5575
<div class="social-icons">
<a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" /></a>
<a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" /></a>
<a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" /></a>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<img src="youtube.png" alt="YouTube" class="social-icon" />
<img src="google.png" alt="Google+" class="social-icon" />
-->
</div>
</div>
</div>
</section>
</body>
</html>
I see you were missing display block, borders on your images and you are using divs. I have added display block to images and borders. Also i placed a table around the social media icons.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" style="display: block;border:0px;" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
336-355-5575
<div class="social-icons">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" style="display: block;border:0px;" /></a></td>
</tr>
</tbody>
</table>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<img src="youtube.png" alt="YouTube" class="social-icon" />
<img src="google.png" alt="Google+" class="social-icon" />
-->
</div>
</div>
</div>
</section>
</body>
</html>
Let me know if this works for you ( i think it will)
I'm making my first website and I ran into some problems with tables and the background. Here's a screen pic I took with my phone.If I preview this on my computer screen it look's a bit better because I don't have the background problem but anyway I can't figure out what is wrong with tables (specifically the 4th pic) and is my background not responsive. Btw all the picture are the same size....
HTML
<html>
<body>
<head>
<meta charset="utf-8">
<title>Projects</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<head>
<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>
<meta charset="utf-8">
<title>mt</title>
</head>
<body>
<nav>
<ul>
<li>PROJECTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="box" >
<div class="table" >
<table width="900" height="200" border="0" cellspacing="7" cellpadding="9">
<tbody>
<tr>
<td>
<div class="row" >
<li>
<a href="project1.html">
<div class="raste">
<img src="logos.jpg" alt="" width="300"/>
</div>
</a>
</li>
</div>
</td>
<td>
<li>
<a href="project2.html">
<div class="raste">
<img src="elite.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project3.html">
<div class="raste">
<img src="time.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
<tr>
<td>
<li>
<a href="project4.html">
<div class="raste">
<img src="booksrie.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project5.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project6.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
#charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
table {
margin-left: auto;
margin-right: auto;
}
.raste img {
height: 190px;
width: 300px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
border-radius: 10px;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.table {
display: table;
margin: 1em auto;
}
.row {
display: table-row;
}
.raste {
display: table-cell;
}
#font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
ul {
padding: 0;
}
.box {
background:#000000;
width: 100%;
background-size: 0% auto;
margin-bottom: 5%;
border-radius: 10px;
padding-bottom: 1%;
padding-top: 1%;
}
Use bootstrap grid example fiddle
HTML
<div class="main pull-left">
<div class="col-sm-6 col-md-4 box">1</div>
<div class="col-sm-6 col-md-4 box">2</div>
<div class="col-sm-6 col-md-4 box">3</div>
<div class="col-sm-6 col-md-4 box">4</div>
<div class="col-sm-6 col-md-4 box">5</div>
<div class="col-sm-6 col-md-4 box">6</div>
</div>
CSS
body{padding:0px; margin:0px;}
.main{width:100%; background:#000; border-radius:10px; padding:10px;}
.main .box{background:#fff; color:#000; border:solid 4px #000; padding:20px 0px; text-align:center;}
You can clean up your html deleting all tags useless , so it is easier to style, to maintain and to validate.
example :
#charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
nav:before {
content: url(http://lorempixel.com/100/100/people/6);
border-radius: 50%;
overflow: hidden;
}
nav:before,
.table {
display: table;
margin: auto;
max-width: 1040px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
.raste img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
border-radius: 10px;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.box {
display: inline-flex;
flex-wrap: wrap;
justify-content:center;
}
.raste {
padding: 15px;
}
#font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
ul {
padding: 0;
}
.box {
background: #000000;
background-size: 0% auto;
margin-bottom: 5%;
border-radius: 10px;
padding: 16px;
}
<nav> PROJECTS ABOUT CONTACT
</nav>
<div class="table">
<div class="box">
<a href="project1.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/456&text=logo.jpg" alt="" />
</div>
</a>
<a href="project2.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/55f&text=elite.jpg" alt="" width="300" />
</div>
</a>
<a href="project3.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/fed&text=time.jpg" alt="" width="300" />
</div>
</a>
<a href="project4.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/bad&text=booksrie.jpg" alt="" width="300" />
</div>
</a>
<a href="project5.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/a55&text=log.jpg" alt="" width="300" />
</div>
</a>
<a href="project6.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/ef0&text=log.jpg" alt="" width="300" />
</div>
</a>
</div>
</div>
I'm new at html and css and i would appreciate if someone would give me a hand with this on. Thank you for all you anwsers in advance.
A strange thing happened when because i added the background and i can't figure out why my hover and active are disabled.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project1</title>
<link href="cssprojectgallery.css" rel="stylesheet" type="text/css">
<div class="logo" >
<img src="../MT portfolio/lg.png" alt="" width="180" height="178" class="logo"/>
</div>
</head>
<body>
<nav>
<li><a< href".html">Home</li></a>
<li><a< href"projects.html">Projects</li></a>
<li><a< href"about.html">About</li></a>
<li><a< href"contact.html">Contact</li></a>
</nav>
<div class="gal">
<img src="LOGOS/Ampire.jpg" width="800" alt=""/>
<img src="LOGOS/Pacakama.jpg" alt="" width="800"/>
<img src="LOGOS/Zoom.jpg" alt="" width="800"/>
<img src="LOGOS/Futura.jpg" alt=""width="800""/>
<img src="LOGOS/Soundgrounded.jpg" alt=""width="800""/>
<img src="LOGOS/Gams.jpg" alt=""width="800""/>
<img src="LOGOS/Bullseye.jpg" alt=""width="800""/>
<img src="LOGOS/Union.jpg" alt=""width="800""/>
<img src="LOGOS/Skylinq.jpg" alt=""width="800""/>
</div>
</body>
</html>
CSS
#charset "utf-8";
.logo {
padding-bottom: 30px;
text-align: center;
}
nav {
font-family: "Proxima Nova ScOsf ExCn Rg";
text-align: center;
font-size: 35px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 2%;
padding-left: 50px;
color: #000000; }
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-image: url(../mt/back.jpg);
background-sizce: cover;
}
.gal {
text-align: center;
background-color: #000000;
background-size: 0% auto;
margin-top: 0.5%;
padding-top: 2%;
padding-bottom: 0.5%;
border-top-left-radius: 0px;
margin-right: 20%;
margin-left: 20%;
margin-bottom: 5%;
}
.gal img {
vertical-align: middle;
padding-top: 1%;
padding-bottom: 2%;
}
Your markup is not valid that is why hover and active states are not responding. Please correct your HTML code as follows.
<nav>
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}