I'm have a school project that I'm working on and I'm baffled by the fact that after a dozen searches, I can't get the CSS to render on the master page. The other pages work fine without any issues, but for some reason I can't find a solution to my issue.
I've tried using
<link href="~/Content/Master.css" rel="stylesheet" type="text/css" runat="server"/>
as well as
<link href="../../Content/Master.css" rel="stylesheet" type="text/css"/>
Yet they yield no result
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Auth.master.cs" Inherits="Task_3.User.Auth.Auth" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title><%: Page.Title %> || Course Manager</title>
<link href="~/Content/Master.css" rel="stylesheet" type="text/css" runat="server"/>
</head>
<body>
<form runat="server">
<div>
<div id="mySidenav" class="sidenav">
<span>Course Manager</span>
<div class="container">
Dashboard
Add Modules
View Modules
<a class="logout" href="#">Log Out</a>
</div>
</div>
<asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Master.css file
* {
margin: 0;
padding: 0;
font-family: 'Microsoft Yahei';
}
body {
background-color: #EEF2F5;
}
/* The side navigation menu */
.sidenav {
height: 100%;
width: 249px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #FFFFFF;
overflow-x: hidden;
padding-top: 20px;
}
/* The navigation menu links */
.sidenav .container a {
width: 100%;
padding: 8px 20px 8px 0px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav span {
width: 100%;
padding: 8px 8px 8px 15px;
text-decoration: none;
font-size: 25px;
display: block;
font-family: 'Microsoft Yahei';
font-weight: bold;
}
/* When you mouse over the navigation links, change their color */
.sidenav .container a:hover {
color: #343434;
}
.main .topbar {
width: 80%;
height: 210px;
background: transparent;
margin: 25px auto;
border-radius: 5px;
}
.sidenav .container a:focus {
border-left: 5px solid #563c5c;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.sidenav .container {
width: 100%;
margin: 150px auto;
text-align: center;
}
.sidenav .container .logout {
margin: 85px auto;
}
#Content {
margin-left: 250px;
}
Login page where styling works
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<link href="../Content/Site.css" rel="stylesheet" type="text/css"/>
<div id="form">
<div class="login">
<div class="login col1">
<div class="login icon">
<asp:Image runat="server" ImageUrl="~/Img/studying.png" />
</div>
<h2>Login</h2>
<div class="login stack">
<asp:TextBox type="email" ID="txtEmail" runat="server" placeholder="Email" />
<br />
<asp:TextBox type="password" runat="server" ID="txtPassword" placeholder="Password" />
<br>
<p class="login forgot-pas">Forgot Password?</p>
<asp:Button ID="btnLogin" CssClass="button" Text="Login" OnClick="btnLogin_Click" runat="server"></asp:Button>
<div id="error" runat="server"></div>
<div class="login no_account">
<p runat="server">Don't Have An Account Yet?</p>
<p runat="server" class="link">Create one!</p>
</div>
</div>
</div>
<div class="login col2">
<div class="login icon">
<asp:Image runat="server" ImageUrl="~/Img/studying.png" />
</div>
<h2>Course Manager</h2>
<h3>Course Management Made Easy!</h3>
<div class="login info">
<ul>
<li><span>Manage Study information</span></li>
<li><span>Store Module Information</span></li>
<li><span>Auto Self Study Calculations</span></li>
</ul>
</div>
</div>
</div>
</div>
</asp:Content>
Login Styling
#import url(https://fonts.googleapis.com/css?family=Roboto:700);
* {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
body {
background-image: url("../Img/background.png");
}
#form {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1280px;
height: 750px;
border-radius: 8px 8px 8px 8px;
background-color: #252B35;
}
.login .col1 {
background-color: transparent;
float: right;
width: 730px;
height: 750px;
justify-items: self-start;
text-align: center;
}
.login .col1 img {
display: none;
}
.login .col2 {
float: left;
width: 548px;
height: 750px;
text-align: center;
color: #fff;
}
.login .col2 img {
width: 150px;
height: 150px;
margin: 85px auto;
object-fit: cover;
}
.login .col2 .icon {
width: 150px;
height: 150px;
margin: 85px auto;
}
.login .col1 .icon {
width: 150px;
height: 50px;
margin: 0px auto;
}
.login .col1 h2, p, a, label {
color: #fff;
text-decoration: none;
}
.login .col1 .stack {
margin: 25px auto;
height: 450px;
width: 500px;
justify-content: center;
align-items: center;
}
.login .col1 .stack .error {
color: red;
font-size: 14px;
margin: 15px 0px 0px 0px;
text-align: left;
}
.login .col1 .stack input[type=email], input[type=password] {
width: 350px;
height: 35px;
color: #0c0c0c;
margin: 10px 0px 0px 0px;
padding: 7px 15px 7px 5px;
border-radius: 8px;
Font-size: 16px;
outline: none;
border: none;
}
.login .col1 .stack .button {
width: 250px;
height: 45px;
margin: 15px auto;
cursor: pointer;
background-color: transparent;
border: none;
color: #fff;
outline: none;
transition: all 0.3s;
position: relative;
}
.login .col1 .stack .button::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(0.1, 1);
}
.login .col1 .stack .button:hover {
background-color: rgba(255,255,255,0.1);
color: #fff;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
width: 250px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.login .col1 .stack .button:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.login .col1 .stack .button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255,255,255,0.1);
}
.login .col1 .stack .forgot-pas {
margin-top: 25px;
cursor: pointer;
}
.login .col1 h2 {
Font-Size: 36px;
margin: 125px 0px 55px 0px;
}
.login .col2 .info {
text-align: center;
margin: 85px auto;
display: inline-table;
font-size: 22px;
Font-weight: bold;
}
/* Allow Responsive design on Login */
#media screen and (max-width: 375px) {
.login .col2 {
display: none;
}
#form {
width: 90%;
height: 90%;
}
.login .col1 {
width: auto;
height: 100%;
margin: auto;
}
.login .col1 img {
width: 80px;
display: inline;
Height: 80px;
margin: 45px auto;
}
.login .col1 {
background-color: transparent;
width: 100%;
height: auto;
justify-items: center;
text-align: center;
margin: auto;
}
.login .col1 h2 {
Font-Size: 26px;
margin: 85px 0px 55px 0px;
}
.login .col1 .stack input[type=email], input[type=password] {
width: 200px;
height: 25px;
color: #0c0c0c;
margin: 10px 0px 0px 0px;
padding: 7px 15px 7px 5px;
border-radius: 8px;
Font-size: 14px;
outline: none;
border: none;
}
.login .col1 .stack {
margin: auto;
height: auto;
width: 100%;
text-align: center;
}
.login .col1 .stack .btn {
margin: 55px 0px 0px;
}
.login .col1 .no_account {
margin: 55px 0px 0px 0px;
}
}
Try using "~/Content/Master.css" without runat="server" attribute.
Related
I have two big problems:
The first trouble I have encountered is that when I am testing the responsivity of my website in the contact section I always meet a reappearing problem: There is a white space (.2 rem - 1.2rem width) on the right side of the body when I try to display the whole page under 400px width device.
My second problem is that I have social media icons in the footer. They appear properly in all other sections (multipage website), but only here does something prevent them to be displayed properly. I tried resizing their main divs to 100% width and 100% max-width, but an element is probably still longer than the others, which should obviously cause this kind of problem.
So about the white blank area, I think it is important to know that I have a specially styled scrollbar, which might also cause this little mischief. I am unsure, so I have also tried removing it, but it did not help. In the beginning, I also encountered the same problem with the footer, but somehow I managed to get by and was able to solve it by correcting the width of the .footer-container. Since then the white space appeared and my second problem with social media icons not being displayed properly just arose.
Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="contacts.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<div class="floating-btn show-btn" aria-label="up button" role="button">
<img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
</div>
<header>
<!--NAVBAR-->
<nav>
<ul class="menu" id="desktop-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
<!--HAMBURGER ICON-->
<div class="header-right-gap">
<button class="hamburger" aria-label="hamburger button">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
</nav>
<!--MOBILE MENU-->
<div class="mobile-menu">
<ul class="m-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
</div>
</header>
<main>
<!--CONTACT FORM-->
<div class="container">
<form>
<h1>Kapcsolat</h1>
<input type="text" id="firstName" placeholder="Családnév" required>
<input type="text" id="lastName" placeholder="Keresztnév" required>
<input type="email" id="email" placeholder="Email" required>
<input type="text" id="mobile" placeholder="Telefonszám" required>
<h4 class="contactus">Lépjen velünk kapcsolatba!</h4>
<textarea id="texti" required></textarea>
<input type="submit" value="Elküldés" id="button">
</form>
</div>
</main>
<footer>
<div class="footer-container">
<!--COMPANY INFORMATION, CONTATCTS-->
<div class="footer-top">
<div>
<article>
<h2>Elérhetőségeink</h2>
<div class="cellphone">
<img src="assets/png/telephone.png" alt="phone-icon">
<h3><span>Telefonszám:</span> +36709424298</h3>
</div>
<div class="internet">
<img src="assets/png/mail.png" alt="email-icon">
<h3><span>E-mail:</span> eckertmuvek#gmail.com</h3>
</div>
<div class="headquarter">
<img src="assets/png/location.png" alt="company-icon">
<h3><span>Telephely:</span> Budapest, 1182 Török Bálint u. 16/b</h3>
</div>
<div class="opening-hours">
<img src="assets/png/clock.png" alt="op-icon">
<h3><span>Nyitvatartási idő:</span> hétfő - péntek(7:00 - 17:30)</h3>
</div>
</article>
</div>
<!--TEXT-->
<div class="text-container">
<h4>Céginformációk</h4>
<p>
<ol>
<li>
<h5>Cégjegyzékszám: </h5>
<p> 01 09 996342</p>
</li>
<li>
<h5>Adószám: </h5>
<p>24222716243</p>
</li>
<li>
<h5>Számlaszám: </h5>
<p>112131423-43242142-432412421</p>
</li>
<li>
<h5>Cégnév: </h5>
<p>Eckert Művek Korlátolt Felelősségű Társaság</p>
</li>
</ol>
</p>
</div>
<!--
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
-->
<!--POLICIES-->
<div class="policies">
Impresszum
GDPR Tájékoztató
Süti Tájékoztató
</div>
</div>
<!--MAP-->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2699.366130757782!2d19.217992451587673!3d47.42430370844346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741c1f21fa88e89%3A0x44673b68b84b51c9!2zQnVkYXBlc3QsIFTDtnLDtmsgQsOhbGludCB1LiAxNmIsIDExODI!5e0!3m2!1shu!2shu!4v1672662477180!5m2!1shu!2shu"
height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!--SOCIAL MEDIA ICONS-->
<div class="social-media-icons">
<div class="sm-container" id="insta">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="github">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="facebook">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="linkedin">
<div class="sm-icon">
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Eckert Művek Kft. Minden jog fenntartva.</p>
</div>
</div>
</footer>
<script src="contacts.js"></script>
</body>
</html>
And here is my CSS code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--nav-height: 100px; /*80%*/
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
width: 100%;
font-size: 12px;
font-family: sans-serif;
}
.floating-btn {
position: fixed;
bottom: 3.5vh;
right: 0;
width: 50px;
height: 50px;
z-index: 100;
background-color: yellow;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5));
cursor: pointer;
margin-right: 1rem;
border: 1px solid #000;
}
.show-btn {
display: block;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 100;
background-color: #000;
}
/*Srcollbar*/
::-webkit-scrollbar{
width: 15px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: yellow;
border-radius: 10px;
border: 1px solid black;
}
::-webkit-scrollbar-thumb:active {
background: orangered;
}
nav {
display: flex;
width: min(90%, 1200px);
height: inherit;
align-items: center;
justify-content: flex-start;
margin-inline: unset;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
left: 2.5rem;
gap: 1rem;
/*margin-top: -2.5rem;*/
}
nav a {
max-height: var(--nav-height);
align-items: center;
margin-inline: auto;
font-size: 20px;
position: relative;
height: 100%;
}
nav ul {
display: flex;
gap: 1rem;
width: 100%;
list-style: none;
margin-top: 3rem;
}
.nav-item a {
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 20px;
height: 100%;
margin: .5em .8em;
padding: 10px;
}
.nav-item a::before,
.nav-item a::after {
content: '';
height: 14px;
width: 14px;
position: absolute;
transition: all .35s ease;
opacity: 0;
}
nav a::before {
content: '';
right: 0;
top: 0;
border-top: 3px solid #ffed4b;
border-right: 3px solid #fdcd3b;
transform: translate(-100%, 50%); /*-100%, 50%*/
}
.nav-item a:after {
content: '';
left: 0;
bottom: 0;
border-bottom: 3px solid #fdcd3b;
border-left: 3px solid #ffed4b;
transform: translate(100%, -50%); /*100%, -50%*/
}
.nav-item a:hover:before,
.nav-item a:hover:after{
transform: translate(0,0);
opacity: 1;
}
.nav-item a:hover {
text-decoration: underline;
color:yellow;
}
.container{
min-height: 100vh;
width: 99.vw;
background: #08071d;
display: flex;
justify-content: center;
align-items: center;
background: url("assets/images/mainpage/106811484-1608045351058-gettyimages-1126750618-dsc_1540.jpeg") no-repeat center center/cover;
}
.container form{
width: 670px; /*670px*/
height: 450px;
display: flex;
justify-content: center;
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
overflow-x: hidden;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
outline: none;
border: none;
font-size: 25px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
}
.container form input::placeholder{
color: #ddd;
}
.container form #lastName,
.container form #mobile{
margin-left: 20px;
}
.container form h4{
color: #fff;
font-weight: 300;
width: 600px;
margin-top: 20px;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-weight: 200;
font-size: 25px;
padding: 10px;
outline: none;
min-width: 600px;
max-width: 600px;
min-height: 80px;
max-height: 80px;
}
.contactus {
font-size: 18px;
}
input[type="text"]:focus, input[type="email"]:focus, #texti:focus {
border-bottom: 3px solid #fdcd3b;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.container form #button{
border: 1px solid;
background: transparent;
border-radius: 50px;
margin-top: 20px;
font-weight: 600;
font-size: 20px;
color: #fff;
width: 100px;
padding: 0;
margin-right: 500px;
margin-bottom: 30px;
transition: 0.3s;
}
.container form #button:hover{
opacity: 0.9;
transform: scale(1.2);
background-color: black;
color: yellow;
}
/*FOOTER*/
footer {
width: 100%;
background-color: #000;
padding-block: 4rem;
color: white;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-inline: auto;
width: min(90%, 1200px);
}
.footer-top {
width: 100%;
height: 100%;
color: #fff;
font-size: 10px;
display: flex;
justify-content: space-around;
}
.footer-top h2 {
text-align: center;
justify-content: center;
align-items: center;
}
.footer-top article div {
line-height: 2.5rem;
}
.footer-top article div:first-of-type {
margin-top: 1rem;
}
.footer-top img {
height: 64px;
}
.text-container p {
margin-top: 2rem;
}
.text-container ol li {
line-height: 1.5rem;
}
/*CONTACT ICONS*/
.cellphone img, .internet img, .headquarter img, .opening-hours img{
background-color: yellow;
border-radius: 50px;
transition: all 0.3s linear;
}
footer img:hover {
background-color: orangered;
border-radius: 40px;
transform: rotate(-360deg);
}
.footer-bottom {
text-align: center;
margin-top: 2rem;
}
span {
color: yellow;
}
.text-container {
justify-content: space-between;
width: 20vw;;
font-size: 0.8rem;
}
/*POLICIES LINKS*/
.policies {
display: flex;
flex-direction: column;
font-size: 14px;
text-transform: uppercase;
}
.policies a {
color: yellow;
font-size: 10px;
line-height: 2rem;
}
.policies a:hover {
color: orangered;
}
/*MAP*/
.map {
margin-inline: auto;
}
/*SOCIAL MEDIA ICONS*/
.social-media-icons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sm-container {
display: flex;
justify-content: center;
gap: 2rem;
padding:1rem;
border: 1px black;
width: 100%;
height: 100%;
}
.sm-container a:active {
color: yellow;
}
.fa {
border-radius: 50%;
width: 100%;
height: 100%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
/**/
}
.fa-instagram {
background: #125688;
color: white;
padding: 1rem;
}
.fa-github {
background: white;
color: black;
padding: 1rem;
}
.fa-facebook {
background: #4267B2;
color: white;
padding: 1rem;
}
.fa-linkedin {
background: #3B5998;
color: white;
padding: 1rem;
}
.sm-icon {
transition: all 0.3s linear;
}
.sm-icon:hover {
transform: scale(1.2);
}
.fa:hover {
background-color: #fdcd3b;
}
/*MOBILE MENU*/
.mobile-menu {
display: none;
}
.mobile-menu {
display: flex;
width: 100%; /*.line a szülő tehát 40px a width*/
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
position: absolute;
top: 80px;
left: 0;
background-color: black;
transform: translate(-100%);
transition: all 0.4s ease;
z-index: 100;
}
.mobile-menu-on {
display: flex; /**/
transform: translate(0);
}
.m-menu {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
font-size: 1.4rem;
}
/*hamburger icon*/
.header-right-gap {
width: 100px;
margin-left: 2rem;
}
.hamburger {
display: none;
position: fixed;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
top: 0;
left: 1;
margin-top: 1.5rem;
}
.hamburger:hover {
border: 6px solid;
border-color: yellow;
width: 43px;
margin-left: 4px;
transform: scale(1.2);
}
.hamburger:hover .line.line-1 {
/*display: none;*/
transform: rotate(45deg) translateY(7.5px);
background-color: yellow;
}
.hamburger:hover .line.line-2 {
display: none;
}
.hamburger:hover .line.line-3 {
/*display: none;*/
transform: rotate(-45deg) translateY(-7.5px);
background-color: yellow;
}
.line {
transition: all .4s ease;
width: 40px;
height: 5px;
background-color: white;
margin-block: 5px;
border-radius: 10px;
}
/*Media query*/
#media (max-width: 1200px) {
.hamburger {
display: block;
}
#desktop-menu {
display: none;
}
}
#media (max-width: 900px) {
footer nav ul {
flex-direction: column;
}
footer nav ul li a {
font-size: 15px;
/*padding: 15px;*/
}
}
#media (max-width: 750px) {
.footer-container {
display: flex;
flex-wrap: wrap;
}
footer nav ul li a {
font-size: 10px;
padding: 15px;
}
.text-container p {
font-size: 10px;
}
}
#media (max-width: 600px) {
.container form {
width: 470px;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
min-width: 300px;
max-width: 300px;
}
}
#media (max-width: 400px) {
.container {
max-width: 100%;
height: 100%;
overflow: hidden;
}
.container form {
max-width: 100%;
padding-top: 40px;
padding-bottom: 10px;
}
.container form input, h4 {
text-align: center;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
align-items: center;
min-width: 300px;
max-width: 300px;
}
.text-container {
width: 70vw;
}
.container form #button {
display: flex;
flex-direction: column;
}
footer {
width: 400px;
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
}
}
I once had a similar problem and it was due to margin of one element being bigger than it should be, and it just made that div bigger and pushed it out of viewport, so you could check your margins, I can see that you have quite a lot of margins, inline and to margin-right as well.
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>
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
I have a big bar of white space below my footer and cant figure out how to remove it. Basically I want everything below the footer to be gone.
Any help appreciated, just learning code so new to this.
https://jsfiddle.net/ptgL5pv6/1/
function active() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == 'Search') {
search_bar.value = '';
search_bar.placeholder = 'Search';
}
}
function inactive() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == '') {
search_bar.value = 'Search';
search_bar.placeholder = '';
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana, Arial, sans-serif;
}
.container {}
.top_section {
background: #000;
padding: 20px;
}
.first_image {
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a {
position: relative;
color: #fff;
Text-decoration: none;
padding: 20px;
}
.nav_bar a:hover {
color: #fff;
Text-decoration: underline;
}
.third_bar {
background: #000;
position: relative;
height: 350px;
}
.second_image {
position: relative;
text-align: center;
height: 370px;
}
#search_bar {
position: relative;
bottom: 50px;
height: 150px;
border: 1px solid #000;
border-right: none;
font-size: 36px;
padding: 10px;
outline: none;
width: 800px;
-webkit-border-top-left-radius: 10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 110px;
}
#search_button {
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover {
background: #f6e049;
}
.form {
width: 200px;
margin-top: -220px;
padding-left: 280px;
}
.footer {
position: relative;
background: #000;
color: #fff;
bottom: -10px;
}
.copyright {
position: relative;
bottom: -8px;
left: 0;
overflow: hidden;
}
.footer_notes {
position: relative;
text-align: center;
bottom: 10px;
left: 100px;
overflow: hidden;
}
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png" />
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
<img src="whisky.png">
</div>
<div class="form">
<form action="search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();" />
<input type="submit" id="search_button" value="Go!" />
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
Firt of all, edit this .footer-notes css and remove left:100px; from it. It is making your page width greater then 100%
.footer_notes{
position: relative;
text-align: center;
bottom: 10px;
padding-left: 100px;
overflow: hidden;
max-width:100%;
}
then dont declare height on .third-bar this makes your footer come up even if their is content above the footer
.third_bar{
background:#000000;
position: relative;
}
Even after doing this your footer will have maybe 20px or so space below it because their is not enough content above it. If you want your footer to always stay at bottom in any device then add this to your footer's css.
.footer{
position:fixed;
background: #000000;
color: #ffffff;
bottom:0px;
width:100%;
}
If you go through with all three changes this is what your page will look like :
function active(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == 'Search'){
search_bar.value=''
search_bar.placeholder= 'Search'
}
}
function inactive(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == ''){
search_bar.value='Search'
search_bar.placeholder= ''
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana,Arial,sans-serif;
}
#container{
display:flex;
flex-direction:column;
height:100vh;
overflow:hidden;
background-color:black
}
.top_section {
background:#000000;
padding: 20px;
}
.first_image{
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px; solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a{
position: relative;
color:#ffffff;
text-decoration:none;
padding: 20px;
}
.nav_bar a:hover{
color: #ffffff;
text-decoration:underline;
}
.third_bar{
background:#000000;
position: relative;
}
.second_image{
position: relative;
text-align: center;
height:80vh;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#search_bar
{
position: relative;
bottom: 50px;
height: 150px;
border:1px solid #000000;
border-right: none;
font-size: 36px;
padding: 10px;
outline:none;
width: 800px;
-webkit-border-top-left-radius:10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right:110px;
}
#search_button
{
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius:10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover
{
background:#f6e049;
}
.form{
width:200px;
margin-top: -300px;
padding-left:280px;
}
.footer
{
position: fixed;
background: #000000;
color: #ffffff;
bottom: 0px;
width:100%;
}
.copyright
{
position: relative;
bottom: -8px;
left: 0px;
overflow: hidden;
}
.footer_notes
{
position: relative;
text-align: center;
bottom: 10px;
margin-left: 100px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png"/>
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
</div>
<div class="form"><form action= "search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="search_button" value="Go!"/>
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}