Recently I have started development on my website and when I add this header element to a div with the id "Product" the text wraps into a box like shape and not go straight? How do I fix this?
I need the text to fill the whole top of the box but whatever I do just doesn't work. This only wraps into a box when I add other elements to the div even if the other text is an absolute position.
body {
background-color: rgb(36, 36, 36);
}
#BestProfit {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 30px;
color: #ffbc82;
position: absolute;
left: 50px;
top: 60px;
}
#BestProfitDescription {
font-family: 'Segoe UI';
font-weight: bold;
font-style: italic;
font-size: 20px;
color: #ffffff;
position: absolute;
left: 50px;
top: 100px;
}
.ProductList {
width: 640px;
height: 780px;
padding-top: 100px;
padding-right: 20px;
position: absolute;
top: 40px;
}
.Product {
display: inline-flex;
background-color: rgb(44, 44, 44);
width: 300px;
height: 240px;
margin-left: 5px;
margin-top: 5px;
border-radius: 5px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.075),0 4px 6px -2px rgba(0,0,0,.05);
}
#NameText {
position: relative;
font-weight: 600;
top: -15px;
left: 10px;
font-family: Montserrat,system-ui;
font-size: 22px;
color: #ffbc82;
}
#ProfitText {
position: relative;
top: 50px;
font-family: Montserrat,system-ui;
font-size: 18px;
color: white;
}
<html>
<head>
<link rel="icon" href="../Images/Other/Stonk.gif" id="Icon">
<title id="Title">stonks.in | Bazzar Tracker</title>
</head>
<body>
<script type="text/javascript" src="../JS/Request.js"></script>
<div id="TopBar">
<img id="Logo" src="../Images/Other/Logo.png">
<div id="Pages">
<a id="OverviewLink" href="../HTML/Overview.html">
<img id="Icon" src="../Images/Icons/Overview.png">Overview
</a>
<a id="ProfitLink" href="../HTML/Profit.html">
<img id="Icon" src="../Images/Icons/Profit.png">Profit
</a>
<a id="SmartLink" href="../HTML/Smart.html">
<img id="Icon" src="../Images/Icons/Smart.png">Smart
</a>
<a id="DemandLink" href="../HTML/Demand.html">
<img id="Icon" src="../Images/Icons/Demand.png">Demand
</a>
<a id="SupplyLink" href="../HTML/Supply.html">
<img id="Icon" src="../Images/Icons/Supply.png">Supply
</a>
<a id="BrokerLink" href="../HTML/Broker.html">
<img id="Icon" src="../Images/Icons/Broker.png">Broker
</a>
<a id="DiscordLink" href="https://discord.gg/pKpw3Bk">
<img id="Icon" src="../Images/Icons/Discord.png">Discord
</a>
</div>
</div>
<h1 id="BestProfit">Best Profit</h1>
<h2 id="BestProfitDescription">These products have the highest profit gap.</h2>
<ul id="TopProfit" class="ProductList">
</ul>
</body>
<script type="text/javascript" src="../JS/Request.js"></script><script>RequestProducts("TopProfit", "Profit", 6)</script>
<link rel="stylesheet" type="text/css" href="../CSS/Topbar.css">
<link rel="stylesheet" type="text/css" href="../CSS/Overview.css">
</html>
add css:
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
body {
background-color: rgb(36, 36, 36);
}
#BestProfit {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 30px;
color: #ffbc82;
position: absolute;
left: 50px;
top: 60px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#BestProfitDescription {
font-family: 'Segoe UI';
font-weight: bold;
font-style: italic;
font-size: 20px;
color: #ffffff;
position: absolute;
left: 50px;
top: 100px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ProductList {
width: 640px;
height: 780px;
padding-top: 100px;
padding-right: 20px;
position: absolute;
top: 40px;
}
.Product {
display: inline-flex;
background-color: rgb(44, 44, 44);
width: 300px;
height: 240px;
margin-left: 5px;
margin-top: 5px;
border-radius: 5px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.075),0 4px 6px -2px rgba(0,0,0,.05);
}
#NameText {
position: relative;
font-weight: 600;
top: -15px;
left: 10px;
font-family: Montserrat,system-ui;
font-size: 22px;
color: #ffbc82;
}
#ProfitText {
position: relative;
top: 50px;
font-family: Montserrat,system-ui;
font-size: 18px;
color: white;
}
<html>
<head>
<link rel="icon" href="../Images/Other/Stonk.gif" id="Icon">
<title id="Title">stonks.in | Bazzar Tracker</title>
</head>
<body>
<script type="text/javascript" src="../JS/Request.js"></script>
<div id="TopBar">
<img id="Logo" src="../Images/Other/Logo.png">
<div id="Pages">
<a id="OverviewLink" href="../HTML/Overview.html">
<img id="Icon" src="../Images/Icons/Overview.png">Overview
</a>
<a id="ProfitLink" href="../HTML/Profit.html">
<img id="Icon" src="../Images/Icons/Profit.png">Profit
</a>
<a id="SmartLink" href="../HTML/Smart.html">
<img id="Icon" src="../Images/Icons/Smart.png">Smart
</a>
<a id="DemandLink" href="../HTML/Demand.html">
<img id="Icon" src="../Images/Icons/Demand.png">Demand
</a>
<a id="SupplyLink" href="../HTML/Supply.html">
<img id="Icon" src="../Images/Icons/Supply.png">Supply
</a>
<a id="BrokerLink" href="../HTML/Broker.html">
<img id="Icon" src="../Images/Icons/Broker.png">Broker
</a>
<a id="DiscordLink" href="https://discord.gg/pKpw3Bk">
<img id="Icon" src="../Images/Icons/Discord.png">Discord
</a>
</div>
</div>
<h1 id="BestProfit">Best Profit</h1>
<h2 id="BestProfitDescription">These products have the highest profit gap.</h2>
<ul id="TopProfit" class="ProductList">
</ul>
</body>
<script type="text/javascript" src="../JS/Request.js"></script><script>RequestProducts("TopProfit", "Profit", 6)</script>
<link rel="stylesheet" type="text/css" href="../CSS/Topbar.css">
<link rel="stylesheet" type="text/css" href="../CSS/Overview.css">
</html>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to make my navbar hide when I scroll down without using anything other than html and css with minimal js if possible. I can't provide code until later tonight because of project rules.
I figured out that it is very simple, applied in the code below.
<!DOCTYPE html>
<html>
<head>
<!--these are links to the css and little verticle bar icons and also the device width so the navbarand text can work properally at a smaller device width (to an extent)-->
<title>Parker Aucoin</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="a">
<div id="home">
<div id="navbar">
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
} </script>
<div id="navlinks">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>StackOverflow</li>
</ul>
</div>
</div>
<div class="content">
<div class="header">
<p>Parker</p>
</div>
<div class="header2">
<p><span>Aucoin</span></p>
</div>
<div class="header3">
<p>Software Developer</p>
</div>
<div class="gallery-header">
<div id="portfolio">
<h1>Portfolio</h1>
<h3>My GitHub
<a class="github-btn" href="https://github.com/ParkerAucoin/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</h3>
</div>
</div>
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio1.jpg">
<img src="images/portfolio1.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio5.jpg">
<img src="images/portfolio5.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio6.jpg">
<img src="images/portfolio6.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
<div class="spacer">
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio2.jpg">
<img src="images/portfolio2.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio3.jpg">
<img src="images/portfolio3.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio4.jpg">
<img src="images/portfolio4.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
</div>
<div id="contact">
<h1 id="contact-header">Contact</h1>
<table>
<tr>
<th>
<div id="slideshow">
<div class="slider">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<div class="slide first">
<img src="images/portfolio1.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio2.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio3.jpg" alt="image1">
</div>
<div class="navigarion-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
</div>
</div>
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if (counter > 3){
counter = 1;
}
}, 5000);
</script>
</th>
</tr>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
*{
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(images/background.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fugaz One', cursive;
}
#navbar{
transition: .3s;
z-index: 1;
top: 0;
position: sticky;
width: 100%;
overflow: hidden;
display: inline-block;
padding-top: 40px;
font-family: 'Fugaz One', cursive;
}
#navlinks{
float: center;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
flex: 1;
font-family: 'Fugaz One', cursive;
}
#navlinks ul{
margin-left: 0px;
display: inline-block;
}
#navlinks ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
#navlinks ul a{
color: #fff;
text-decoration: none;
font-size: 15px;
}
#navlinks ul li::after{
content: '';
width: 0;
height: 2px;
background: rgb(255, 100, 52);
display: block;
margin: auto;
transition: .3s;
}
#navlinks ul li:hover::after{
width: 100%;
}
.header{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
padding-top: 1500px;
color: #fff;
text-align: center;
margin: 0;
}
.header p{
font-size: 100px;
}
.header2{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
top: -65px;
margin: 0;
color: #fff;
text-align: center;
padding-top: -30px;
}
.header2 p{
font-size: 100px;
}
.header2 span{
color: rgb(255, 100, 52);
}
.header3{
font-family: 'Fugaz One', cursive;
margin: 0;
position: relative;
color: rgb(163, 163, 163);
font-size: 20px;
text-align: center;
top: -100px;
padding-bottom: 250px;
}
#contact{
position: relative;
color: #fff;
text-align: center;
float: center;
margin: 0;
top: 100px;
}
#slideshow{
top: 20px;
align-items: center;
justify-content: center;
position: relative;
margin: 0;
padding-bottom: 20px;
}
.slider{
width: 200px;
height: 300;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 400px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 200px;
height: 500px;
}
.navigation-manual{
position: absolute;
width: 200px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: .3s;
}
.manual-btn:not(:last-child){
margin-right: 10px;
}
.manual-btn:hover{
background: rgb(255, 100, 52);
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
.navigation-auto{
position: absolute;
display: flex;
width: 400px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
background: rgb(255, 100, 52);
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background: rgb(255, 100, 52);
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background: rgb(255, 100, 52);
}
.gallery-header{
font-family: 'Fugaz One', cursive;
text-align: center;
justify-content: center;
align-items: center;
margin: 0;
padding: 20;
}
#portfolio{
color: #fff;
padding-bottom: 50px;
}
#portfolio h3{
color: rgb(163, 163, 163);
}
h3 a{
color: rgb(255, 100, 52);
}
h3 a:hover{
color: rgb(252, 154, 125);
}
#gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 300px;
}
#gallery:hover {
border: 1px solid #777;
}
#gallery img {
width: 180px;
height: 300px;
}
div.desc {
padding: 15px;
text-align: center;
}
th.contact-form{
padding: 16px;
position: relative;
margin: 0;
float: center;
}
I have an image that I am trying to scale as the screen size reduces. On desktop it work fine for resolution 1336 x 625 but as soon as the screen reduces to 500 X 625 the image does not scale properly and edges are cut down. I tried putting max-width and the position. Still it doesn't work. What I need to change to make it work.
Css code
* {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat",sans-serif;
background-color: #CCC;
}
.card-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
.card {
width: 650px;
height: 400px;
background-color: #fff;
transform-style: preserve-3d;
position: relative;
border-radius: 15px;
transition: transform 1s;
}
.card-wrapper:hover .card {
transform: rotateY(180deg);
box-shadow: 1 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card-front{
width: 100%;
height: 100%;
border-radius: 15px;
backface-visibility: hidden;
background: linear-gradient(white,white);
}
.up {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
}
.up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.up span {
text-transform: uppercase;
color: #0d5692;
}
.down {
position: absolute;
width: 70%;
height: 30%;
color: black;
top: 170px;
left: 5px;
}
.down-content {
display: flex;
align-items: center;
margin: 10px 0;
}
.person {
font-family: "Yu Gothic",UI-Semibold;
font-size: 12px;
color: rgb(102, 0, 51);
padding-left: 20px;
}
.designation {
font-family: "Yu Gothic",UI-Semibold;
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.address {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.phone {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
background: linear-gradient(white,white);
}
.back-up {
width: 40%;
height: 40%;
}
.back-up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.back-down {
position: absolute;
width: 100%;
height: 60%;
color: black;
top: 140px;
left: 5px;
}
.back-designation {
font-family: "Meiryo";
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-person {
font-family: "Meiryo UI";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-address {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-phone {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
/>
<link rel="stylesheet" href="style-Origional.css" />
<title>Business Card</title>
</head>
<body>
<div class="card-wrapper">
<div class="card">
<div class="card-front">
<div class="up">
<img src="images/logo.png" />
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="down">
<div class="person down-content">
<div>
<h2> Jarich Vansteenberge </h2>
</div>
</div>
<div class="designation down-content">
<div>
<h2> Manager </h2>
<h2> Technology & Innovation </h2>
<h2> Information & Digital Solutions </h2>
</div>
</div>
<div class="address down-content">
<div>
<p> Astrazeneca K.K. </p>
<p> Grand Front Osaka Tower B 3-1,</p>
<p> Ofuka-chu, Kita-ku, Osaka 530-0011, Japan </p>
</div>
</div>
<div class="phone down-content">
<div>
<p> Mobile +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
<div class="card-back" >
<div class="back-up">
<img src="images/logo.png" width="150"/>
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="back-down">
<div class="back-designation down-content">
<div>
<h2> インフォメーション＆デジタルソリューションズ本部 </h2>
<h2> テクノロジーとイノベーション </h2>
<h2> マネージャー </h2>
</div>
</div>
<div class="back-person down-content">
<div>
<h2> バンステーンベルグ ジャリコ </h2>
</div>
</div>
<div class="back-address down-content">
<div>
<p> アストラゼネカ </p>
<p> グランフロント大阪タワーB 3-1,</p>
<p> 大阪市北区大深法律事務所530-0011 </p>
</div>
</div>
<div class="back-phone down-content">
<div>
<p> 携帯電話番号 +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.responsive {
width:100%;
height:auto;
}
you can add these class to the image and it will work fine
At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
I 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'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.