So I have looked into code for my website that would changes the css and even the html of certain sections of my code when the screen size changes. What I am looking into as a start is when I put my website into split screen on Windows 10, or on a Mac, I want the header "Some Title" to move to the left side of the header section. I hope that this will help me with changing certain aspects of my website when the screen size changes. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
Media queries can help you to define different styles for different screen sizes. Also, I'd recommend a different accomodation of HTML items, e.g.:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
background-color: black;
text-align: right;
}
.socialmedia {
transform: translate(0, -50%);
align-items: center;
}
.socialmedia a{
display:inline;
}
h1 {
color:white;
font-family: Verdana;
font-style: italic;
font-size: x-large;
text-align: center; padding-top: 20px;
}
#media (max-width:700px){
.headerLogo h1 {
text-align:left;
}
}
#media (min-width:1000px){
.socialmedia {
margin-right:100px;
}
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class="headerLogo" href="file:///C:/Noah's%20stuff/Home.html" ><h1>Some Title</h1></a>
<div class="socialmedia">
<a class="Facebook" href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
<a class="Instagram" href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
<a class="Youtube" href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
<button style = "background-color: white;">Pre-Order</button>
</div>
</div>
</body>
</html>
When screen size < 700px then text will align to the left, and when screen size is >= 1000 then social media box will add a margin to the right.
Well we can do this in two ways:-
1) Using media queries. please refer here
2) You can also achieve this using simple JavaScript. See Below:-
$(window).on('resize', function() {
if($(window).width() > 600) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}
else {
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
.limit400 h1 { font-size:12px; }
.limit1200 h1 { font-size:50px; }
<div id="body" class="limit400">
<h1>Hello :Professor</h1>
<span>[ change the screen width to understant the effect ]</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have also created a demo on codepen. See This
Thanks for bearing with me.
Example
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
.seged{position: relative;}
#lab{border-right: 0px;}
}
As mentioned in the comments, you want media queries:
#media (max-width: 800px) {
h1 {
text-align: left !important;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:blue; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
Related
I've built a simple image slider using html, css and jquery. You basically switch between images using arrows, however, the real trouble came when I tried to make it responsive. The arrows always break and display either above or under the image.
in normal browser window
when making the browser window smaller, this happens
Any idea on how to make them responsive? Thanks in advance.
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index',10);
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index',10);
}
});
});
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
max-width: 1200px;
height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 1200px;
height: 675Px;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
position: relative;
z-index: 100;
margin-right: -2.8125em;
}
.next {
position: relative;
margin-left: -2.8125em;
z-index: 100;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!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">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="">
<img src="img-slider/butterflies-jpg.jpg" alt="">
<img src="img-slider/andrew-jpg.jpg" alt="">
<img src="img-slider/taylor-jpg.jpg" alt="">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
You use can position:absolute and left:0 or right:0 for prev and next selector.
EDIT:
Good for you to use with this:
.slider-outer {
position:relative;
}
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index',10);
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index',10);
}
});
});
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
max-width: 1200px;
height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 1200px;
height: 675Px;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
/*float: left; remove */
cursor: pointer;
width: 60px;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position:absolute;
left:0;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position:absolute;
right:0;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
.slider-outer {
position:relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!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">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" class="active" alt="">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" alt="">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</div>
<img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
I need help formatting the footer for my website. I am new to CSS and I cannot figure out how to get the text for the Copyright to sit underneath of the icons. I tried tweaking by altering the height of the footer and the best I can get is the text to the left or right of the icons. Any help would be appreciated.
CSS Style Sheet:
body {
margin: 0;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50px;
height: 50px;
margin-top: 11px;
}
.navBar {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
margin-top: 61px;
text-align: center;
}
.navBar a {
display: inline-block;
width: 10%;
color: black;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
body.services a.services,
body.ourstory a.ourstory {
border-bottom: 1.5px solid black;
}
.header {
position: fixed;
background-color: white;
width: 100%;
height: 80px;
}
.p3 {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 105%;
font-weight: 300;
line-height: 1.8em;
}
.p4 {
color: black;
text-align: center;
padding-left: 200px;
font-family: 'Poppins';
font-size: 100%;
font-weight: 300;
line-height: 1.8em;
}
HTML Document:
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
margin-bottom: 100px;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
Code change on .copyright and .navbarSocialMedia CSS. Mainly to change the position on .copyright and align the bottom of .navbarSocialMedia.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
/* display: block;*/
/* Add fixed position */
position: fixed;
bottom: 0;
left: 50%;
/* margin-bottom: 100px; */
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
bottom: 2.5em; /* Change to 2.5em for the copyright space */
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
The reason the copyright div is not visible is because your <div class="navbarSocialMedia"> has a position fixed, so it is displayed on top of the footer (that also has a fixed position).
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
w3
I set bottom: 0; left: 0; right: 0; footer's attributes so it's displayed on the bottom of the window and with full width.
Also I would suggest to remove the margin-bottom: 100px from the <p class="copyright"> as it takes too much space from the window.
And last but not least, I noticed that for the <div class="navbarSocialMedia"> you had set text-align: center (so I'm assuming you want the icons to be centered) but as it has the property display: flex. It's better to use align-items: center instead.
Hope this helps you out.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
width: 100%;
align-items: center;
}
.newFooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
width: 100%;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
added red background to footer just to identify footer element. You can change later.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: red;
bottom: 0;
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
.try {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom: 0;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="footer">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com" target="_blank">
<i class="fa fa-linkedin"></i> </a>
<a href="//www.google.com" target="_blank">
<i class="fa fa-google"></i></a>
<a href="https://www.facebook.com " target="_blank">
<i class="fa fa-facebook"></i> </a>
</div>
<p class=" copyright ">Copyright ©. </p>
</div>
</body>
</html>
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
On my website my header is linked back to itself and works fine, but when I put my mouse over it, an unwanted underline shows up underneath it and I do not want that. I already set the header's text decoration to none so I am not sure how to fix this. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
<style>
a{text-decoration: none}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
inspect anchor text decoration is located in a:hover , so add
a:hover{
text-decoration:none;
}
There might be a CSS for hover specifically. try: a:hover {text-decoration:none;}
This CSS is what's creating the underline, and it comes from bootstrap
a:focus, a:hover {
color: #014c8c;
text-decoration: underline;
}
You can overwrite it by adding this to your CSS
.Header a:hover, .Header a:focus {
text-decoration: none;
}
You need to put your CSS styles before the HTML. Best place is inside one single style block at the top of your HTML. Your style tag currently is below the link and that's why it's not applied.
You can remove the underline on hover by styling the :hover state specifically. However note that it's not ideal for accessibility.
There are few other issues with your HTML and CSS. It's best practice to avoid inline styles inside of the HTML tags. And you've linked to your home page with a file:// protocol, use http:// as its a webpage. If you're linking to the default home page then you can just do /Home.html too.
You're missing the closing </body></html> tags also.
I've fixed those below as well.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body { margin:0 }
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
.Header a:hover { text-decoration:none }
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
</body>
</html>
you can either use:
a:hover{
text-decoration:none;
}
or use an inline CSS to explicitly specify the text-decoration for that particular anchor element.
<a href="file:///C:/Noah's%20stuff/Home.html" style="text-decoration: none;"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
the snippet below uses the first suggestion as that would be better, however, the latter does work aswell.
snippet:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
a:hover{
text-decoration:none;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
To add to Ousmane's answer:
You want to change the CSS that affects links at a default status (if any of your CSS does that), from "name", to "name:link" (this will matter if and when more pseudo selectors are added to links styles).
Also, the order for the pseudo selectors is:
"LoVe For HAte".
So:
a:link, a:visited, a:focus, a:hover, a:active
The easy answer to this question was to change the hover attribute of the anchor tag. I am answering my own question so that when someone else looks at this question they will know that this is the correct answer that should work.
a:hover{
text-decoration:none;
}
In my case the container was a <a> element and all the children had their own underline.
I just set text-decoration: none; on the a container.
The website is done and looks good when the browser is in maximized state but when I minimize the page, the heading and the footer changes its format and looks really bad. I need some help to fix this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: white;">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: white;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
Here is how I have a ton of my pages setup. This one uses Bootstrap components. I have a cutom.css page to override the Bootstrap css.
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
p {
font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px;
}
h1 {
text-align: center; font-family: Verdana; font-size: x-large; font-style: italic;
}
a {
text-decoration: none;
color: white;
}
.Coming Soon {
color: white;
}
.Logo {
width: 130px; height: 80px; margin-right: 100px;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WEBSITE TITLE HERE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="ADD DESCRIPTION.">
<meta name="Keywords" content="ADD KEYWORDS">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<body>
<div class="container">
<div class="Coming Soon">
<h1>Some Header</h1>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p>Some Paragraph</p>
<div class="footer">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div></div></div>
</body>
</html>