I currently have a gap above my navigation bar and I'm not sure how to remove it. Any ideas? I would like to have a gap of about 5-10px above my navigation bar. I think new fresh eyes are needed to look at my code.
The HTML:
<body>
<!-- Naigation Code -->
<nav class="navigation-main">
<ul class="navigation-right">
<li>Contact</li>
<li>Store</li>
<li>Projects</li>
<li>Forum</li>
</ul>
</nav>
<div class="homepage-container">
<h2 class="navigation-logo">Code Depot</h2>
<br>
<i class="fa fa-angle-double-down" style="font-size: 40px; color: #FFFFFF; margin-top: 55px; margin-bottom: 20px;"></i>
The CSS:
li {
list-style-type: none;
text-decoration: none;
}
.navigation-main ul li {
display: inline;
padding: 10px;
border-radius: 2px;
float: right;
}
.navigation-main ul li a {
color: #ffffff;
}
.navigation-main ul li a:hover {
color: #ffffff;
}
.navigation-right {
float: right;
font-size: 18px;
}
/*Icon CSS*/
.large-icon {
font-size: 1.5em;
}
/*Logo CSS (15 inch display)*/
.navigation-logo {
font-family: 'Raleway', sans-serif;
font-weight: 100;
color: #FFFFFF;
font-size: 85px;
padding-top: 200px;
text-align: center;
}
/*
.button-logo{
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
font-size: 20px;
color: #ffffff;
padding: 18px;
border-radius: 8px;
border: solid #ffffff;
font-weight: 50;
}
.button-logo {
transition: all 0.25s ease-in-out; /* Hover off */
}/*
.button-logo:hover {
-moz-filter: blur(4px);
-webkit-filter: blur(4px);
filter: blur(4px);
transition: all 0.2s ease-in; /* On hover */
}
/*Footer CSS*/
.footer-main{
margin-top: 125px;
margin-left: 10px;
}
.footer-main-right{
float: right;
margin-right: 10px;
}
/*Content CSS*/
.homepage-container{
text-align:center;
margin:auto;
}
.white-info{
font-size: 20px;
text-align: center;
}
.white-info-title{
text-align: center;
margin-top: 80px;
}
.white-background {
position: relative;
background: white;
width: 100%;
height: 450px;
margin: 0 auto;
padding: 20px;
resize: both;
overflow: auto;
color: black;
font-size: 40px;
}
Help will be 100% appreciated guys.
Thanks for helping out :D
Just a guess but I think you haven't yet removed the standard margin around the entire page.
Try adding this:
*, body {
margin: 0px;
padding: 0px;
}
margin and padding to 0 will not help you. Use:
body { float: left; }
This should fix problem for you.
Here is an example: https://jsfiddle.net/77275ae9/
Related
I'm having trouble making a dropdown menu. My dropdown menu just won't show upon hover, but if I change my display from none to block in .submenu ul li, the dropdown is in the right place.
Can anyone please help me?
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'montserrat';
}
.container {
height: 80px;
width: 100%;
background: #34495e;
display: block;
float: right;
}
h1.logo {
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 40px;
line-height: 80px;
float: left;
width: auto;
/* border: 1px red solid; */
}
.logo span {
color: #3498db;
}
nav ul {
float: right;
margin-right: 40px;
/* border: 1px red solid; */
}
nav li {
display: inline-block;
margin: 0 5px;
line-height: 80px;
text-align: center;
/* border: 1px red solid; */
}
nav a {
color: white;
font-size: 18px;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 3px;
}
a.active,
a:hover {
border: 1px solid white;
transition: .5s ease-in;
}
nav #icon {
color: white;
font-size: 30px;
line-height: 80px;
float: right;
margin-right: 40px;
cursor: pointer;
background: #34495e;
border: none;
}
#media (min-width: 980px) {
h1.logo {
font-size: 32px;
padding-left: 60px;
}
nav ul {
margin-right: 20px;
}
nav a {
font-size: 17px;
}
nav #icon {
display: none;
}
div button {
display: none;
}
}
#media(max-width:980px) {
nav #icon {
display: block;
}
nav ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s ease-in;
}
.submenu ul {
top: 100%;
}
nav li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav a {
font-size: 20px;
text-align: center;
}
a.active,
a:hover {
border: none;
color: #3498db;
}
#btn1:hover {
border: none;
color: #3498db;
}
#btn2:hover {
border: none;
color: #3498db;
}
#btn3:hover {
border: none;
color: #3498db;
}
nav ul.show {
left: 0;
}
}
body {
background-image: url('../images/workout.jpg');
background-size: cover;
height: calc(100vh-80px);
}
div .connect {
background: #2f364e;
display: inline-block;
width: auto;
height: auto;
}
#btn1 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn2 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn3 {
background: #2f364e;
color: white;
padding: .5em .7em;
border: none;
font-size: 20px;
margin: 0 5px;
}
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
.submenu ul {
margin: 0;
padding: 0;
}
.submenu li a {
margin: 0;
padding: .5em;
}
.main-nav li :hover .submenu {
display: block;
}
<header>
<nav class="container">
<h1 class="logo">Fitness Fir<span>st</span></h1>
<nav class="navbar">
<div class="main-nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services
<div class="submenu">
<ul>
<li>Membership</li>
<li>Coaching</li>
</ul>
</div>
</li>
<li>Timetables</li>
<li>Contact</li>
<div class="connect" class="button">
<button id="btn1"><i class="fa fa-facebook"></i></button>
<button id="btn2"><i class="fa fa-instagram"></i></button>
<button id="btn3"><i class="fa fa-twitter"></i></button>
</div>
</ul>
<button id="icon"><i class="fa fa-bars" style="font-size:36px"></i></button>
</div>
</nav>
</nav>
</header>
Issue
In your CSS file, you have only hidden the li elements in your submenu:
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
But here, you're trying to display the .submenu class, rather than the lis inside. In addition, the :hover selector is not attached to the li
.main-nav li :hover .submenu {
display: block;
}
Fix
To fix this we can change the above selector to the below, so that it is now un-hiding the submenu's lis, when you hover over the parent li (Services button)
.main-nav li:hover .submenu li {
display: block;
}
I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I’m trying to move my text to the middle of my header on the image but as soon as I move it the whole header follows. Could someone try to help me solve this issue? As you see I’m trying to make it using margin-top but when I implement this the header follows. I have closed all the divs that affects the image.
html, body {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 400px;
background: url(/assets/image/tjanst.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 10;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
padding: 16px 40px;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.move-down h3{
margin-top: 200px;
max-width: 400px;
}
nav ul li a {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
a {
color: #fff;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 20px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo wow tada">
</div>
<div class="menu">
<ul>
<li>START</li>
<li>TJÄNSTER</li>
<li>OM OSS</li>
<li>KONTAKT</li>
</ul>
</div>
</nav>
<div class="move-down wow fadeInUp"><h3> VILL GÖRA KUNDEN NÖJD</h3>
<h3> tel: 070719763 </h3></div>
</header>
how it looks now
https://i.stack.imgur.com/vOQGa.png
Well remove 'margin-top: 200px;' in the '.move-down h3' and add 'padding: 200px 0px 0px 0px;' or 'padding-top: 200px;'
Yes, Simple solution is.
Add this CSS
h3{
maring:0;
}
Hope this helps.
Instead of adding margin-top add top value to relatively positioned element.
.move-down h3 {
max-width: 400px;
position: relative;
top: 205px;
}
https://jsfiddle.net/6uedrb89/12/
Hey I'm trying to create a web with a nav bar. However when I hover one a tag(link) all the others moves for some reason and I can't find a solution , guess some play with css which I'm still learning.... any help for what's wrong here?
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
appreciate any help, thanks guys!
You should add letter-spacing: 1.5px; in your header a class not on hover thats why its moving when you hover a li.
If you really want to show a little movement on hover you can try below method.
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
letter-spacing: 1.5px;
position: relative;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
right: 2px;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
I found a solution:
letter-spacing: 1.5px;
I forgot this line in the a tag
You're adding letting spacing to the header a:hover. This means whenever you hover over the link, letter spacing will be added.
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result: