So I have my header with a background image set and I want to create a div underneath it so I can write text there, but when I create the new div, the text I write inside of it appears on top of the already created header. I think it is due to the background image I have set. This is one of my first projects made all by my own so if you guys could help me it will be really appreciated.
These are the HTML and CSS files:
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Упражнение</title>
<link rel="stylesheet"
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBc
</head>
<body>
<header>
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
</header>
<br>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
</body>
</html>
You positioned your .main absolutely:
.main {
position: absolute;
}
With this styling you take .main out of the normal document flow and it is positioned in the top left corner. The other elements stay in regular flow and are right above it. Just get rid of this positioning and you are good to go.
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('https://picsum.photos/200/300?image=15');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
/* position: absolute; <-- do not position this absolutely */
font-family: 'Montserrat', sans-serif;
background-image: url('https://picsum.photos/1920/1080?image=10')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" >
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
Your .main css class has an absolute position. Disabling that fixes the issue
Remove some position property from your css.
.development {
// remove
//position: relative;
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
// remove
// position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url(nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg);
}
Changing to above would work but your body is floated towards left so remove that too.
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
// remove
// float: left;
}
Related
My website is bigger than I wanted it. It created a scroll bar on the bottom to scroll left and right but I want it only as big as my screen, something went wrong while doing CSS.
* body {
margin: 0;
padding: 0;
font-family: Arial;
}
nav {
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #fff;
margin: 0;
padding: 10px 90px;
top: 0;
left: 0;
box-sizing: border-box;
position: fixed;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a:hover {
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
/* pri hoveri spraví z ostrého rámčeka okolo položky menu oblý */
}
section {
width: 100%;
height: 100vh;
background: url(background.jpg);
background-size: cover;
background-position: center;
}
.container {
width: 100%;
height: 100vh;
padding: 0 8%;
}
.container h1 {
text-align: center;
padding-top: 10%;
margin-bottom: 60px;
font-weight: 800;
position: relative;
}
.container h1::after {
content: '';
background: #303ef7;
width: 100px;
height: 5px;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* zoradí jednotlivé services vedla seba*/
grid-gap: 30px;
}
.service {
text-align: center;
padding: 25px 10px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background: transparent;
transition: transform 0.5s, background 0.5s;
}
.service i {
font-size: 40px;
margin-bottom: 10px;
color: #303ef7;
}
.service h2 {
font-weight: 600;
margin-bottom: 8px;
}
.service:hover {
background: #303ef7;
color: #fff;
transform: scale(1.05);
}
.service:hover i {
color: #fff;
}
<html>
<head>
<title>WEBTERAZ Prvy Pokus</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/227b5da2e1.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">Webteraz.sk</div>
<ul>
<li>O nás</li>
<li>Portfólio</li>
<li>Kontakt</li>
</ul>
</nav>
<section></section>
<div class="container">
<h1>Our Services</h1>
<div class="row">
<div class="service">
<i class="fa-solid fa-code"></i>
<!--Ikona </> z font awesome -->
<h2>Web Design</h2>
<p> Lorem ipsum WEB DESIGN sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-palette"></i>
<!--Ikona palety z font awesome -->
<h2>Logo pre firmu</h2>
<p> Lorem ipsum LOGO sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-screwdriver-wrench"></i>
<!--Ikona kluča a šrobovaku z font awesome -->
<h2>Údržba vašej stránky</h2>
<p> Lorem ipsum ÚDRŽBA sit amet, consectetur adipisciring.</p>
</div>
</div>
</div>
</body>
<!--Video koniec na 3:34-->
</html>
Your issue here is that the container is 100% + 8% padding each side, so 116% of total screen width. That creates a scrollbar on the X axis.
To overcome this you've got two solutions:
add box-sizing: border-box to the .container. Read more about box-sizing here.
calculate the total width of the .container to be 100% - 16%, because padding takes 16%. You could use width: calc(100% - 16%) to do that.
I prefer the box-sizing solution myself. It's actually not a bad idea to put that into the * selector so it matches every element you create.
So I have a school project due and my website will not display my text properly. Does anybody know the problem?
Here is the code
body {
background-image: image();
}
* {
box-sizing: border-box;
}
header {
background-color: navy;
padding: 34px;
}
.homestyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.concertstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.sportstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Receptenstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Contactstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.foto_zwolle {
width: 150px;
float: right;
}
.knopanimatie a::after {
content: '';
width: 0%;
height: 2px;
background: #fff;
margin: auto;
transition: 0.5s;
display: block;
}
.knopanimatie a:hover::after {
width: 100%;
}
.footer {
color: white;
font-family: 'Prompt', sans-serif;
background-color: rgb(21, 108, 179);
text-align: center;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 0%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: 0px;
z-index: 10;
}
.sticky {
top: 0;
padding: 0px;
font-size: 20px;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header' 'zwolle zwolle zwolle' 'tekstlinks tekstmidden tekstrechts ' 'footer footer footer';
gap: 10px;
padding: 10px;
}
.tekstlinks {
grid-area: tekstlinks;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
display: inline-block;
}
.tekstmidden {
grid-area: tekstmidden;
height: 100px;
display: inline-block;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
}
.zwolle {
grid-area: zwolle;
font-family: 'Prompt', sans-serif;
padding: 30px;
}
.tekstrechts {
grid-area: tekstrechts;
font-family: 'Prompt', sans-serif;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
display: inline-block;
}
<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="stylejustin.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght#1,100&display=swap" rel="stylesheet">
<title> Document </title>
</head>
<img class="foto_zwolle" src="logo_rechtop_klein.png" alt="tekst">
<body>
<header>
<div class="knopanimatie">
<a class="homestyle" href="home.html"> Home </a>
<a class="concertstyle" href="concerten.html"> Concerten </a>
<a class="sportstyle" href="sport.html"> Sport </a>
<a class="Receptenstyle" href="Recepten.html"> Recepten </a>
<a class="Contactstyle" href="contact.html"> Contact </a>
</div>
</header>
<div class="grid-container">
<div class="zwolle">
<h1> Nieuws uit Zwolle </h1>
</div>
<div class="tekstlinks">
<p> sapien et ligula ullamcorper. In aliquam sem fringilla ut morbius.</p>
</div>
<div class="tekstmidden">
<img src="/mainPags/Zwolle+op+hoogte.jpg" width="250px" style="z-index: 20;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</p>
<div class="tekstrechts">
<p>
In aliquam sem fringilla ut morbius.</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="sticky">
<footer class="footer">
<h3> Footer </h3>
<p>Footerinfo</p>
<p> infovanfooter </p>
</footer>
</div>
</body>
</html>
```
Please note that some of this has been written in dutch, so don't pay attention to it. That is just my main language.
I tried messing with the padding, margin and even the gridbox but nothing helped. Please help me.
I am trying to put a logo image in the top left were SYLK is. It keeps going to the center of the page. I need the image to go where sylk is on the page. I tried just adding the img into it but it goes right to the center. Any help is much appreciated. The logo is going to act as a home button.
HTML
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
sylk
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection of 9,999 Yetis</h2>
<p>A Colorful, Engaging and Inovating Community. The Sweti Yeti's, a community focused club.
</p>
<h2>Yeti Trip</h2>
<div class="container">
<div class="timeline">
<ul>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9999 unique Sweti Yeti's will be created.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre Jan 22nd, Pre Feb 12, Full Feb 14</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is SWETI?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share With Everyone To Inspire. Our goal is to make it easier for guys like us, who have big visions but little support in execution. Also relates to kid charity shtuff.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
CSS
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 3.5em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 1.2em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat";
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
background-color: #1c0522;
}
.timeline {
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.timeline ul {
list-style: none;
}
.timeline ul li {
padding: 20px;
background-color: #655ee1;
color: white;
border-radius: 10px;
margin-bottom: 20px;
}
.timeline ul li:last-child {
margin-bottom: 0;
}
.timeline-content h1 {
font-weight: 500;
font-size: 25px;
line-height: 30px;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
.timeline-content .date {
font-size: 12px;
font-weight: 300;
margin-bottom: 10px;
letter-spacing: 2px;
}
#media only screen and (min-width: 768px) {
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: gray;
}
.timeline ul li {
width: 50%;
position: relative;
margin-bottom: 50px;
}
.timeline ul li:nth-child(odd) {
float: left;
clear: right;
transform: translateX(-30px);
border-radius: 20px 0px 20px 20px;
}
.timeline ul li:nth-child(even) {
float: right;
clear: left;
transform: translateX(30px);
border-radius: 0px 20px 20px 20px;
}
.timeline ul li::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: gray;
top: 0px;
}
.timeline ul li:nth-child(odd)::before {
transform: translate(50%, -50%);
right: -30px;
}
.timeline ul li:nth-child(even)::before {
transform: translate(-50%, -50%);
left: -30px;
}
.timeline-content .date {
position: absolute;
top: -30px;
}
.timeline ul li:hover::before {
background-color: aqua;
}
}
Thanks in advance for any and all help.
Try adding to the header .logoclass
float:left;
margin-top:0;
I copied your code and added a small image I had that is only about 75x39 pixels respectively and it shows even with your menu and about 2" in on my monitor. It's not dead left on my laptop monitor but it should be in the ball park. I add a a bigger image 246x205 and it looks okay.
One thing I noticed when I copied your html and css down, I can't see your entire page. You man need some other modifications. The Mint Now is centered.
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
float:left;
margin-top:0;
position:fixed;
}
Note: I also added a position-fixed at the bottom. This will scroll your logo with the page. If you don't want to do that with your page, just remove the position tag.
If your logo still goes to the center, you may have something else conflicting with the positioning. I just used these two files you posted here.
<header>
<img src="sam.jpg">
:root {
--clr-primary: #0F052F;
--clr-secondary: #43D9B8;
--clr-light: #EEEEEE;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
}
* {
margin: 0;
box-sizing: border-box;
background-color: #FFFFFF;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
/* Header - Navigation */
.desktop-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 1240px;
position: fixed;
z-index: 200;
top: 44px;
padding-right: 0;
}
.desktop-nav .menu-items {
display: flex;
list-style: none;
}
.desktop-nav .menu-items li {
margin: 0 27.5px;
}
.desktop-nav .menu-items li:nth-last-of-type(1) {
margin-right: 0;
}
.desktop-nav .menu-items li a {
text-decoration: none;
color: var(--clr-primary);
font-size: 16px;
font-weight: var(--fw-medium);
position: relative;
}
.desktop-nav .menu-items li a.active::after {
content: "";
position: absolute;
height: 3px;
width: 100%;
background-color: var(--clr-secondary);
left: 0;
bottom: -2px;
}
.desktop-nav .menu-items li a.btn {
color: white;
background-color: var(--clr-primary);
border-radius: 10px;
padding: 10px 23px;
}
/* BIA section */
.bia-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.bia-container .left h1 {
font-size: 80px;
font-weight: var(--fw-bold);
margin: 60px 190px 18px 105px;
}
.bia-container .left p {
font-size: 18px;
font-weight: var(--fw-regular);
margin: 18px 195px 57px 105px;
}
.bia-container .left a.btn {
text-decoration: none;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 10px 23px;
border: 1px solid #43D9B8;
margin: 0 0 0 105px;
}
.bia-container .right {
padding-right: 105px;
}
/* Background header */
.bia-bg {
position: absolute;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<nav class="desktop-nav">
<div class="logo">
<a href="#">
<img src="Images/bia-logo.svg" alt="">
</div>
<ul class="menu-items">
<li>
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Neem contact op
</li>
</ul>
</nav>
<!-- End of desktop navigation -->
<header class="bia-container">
<div class="left">
<h1>Make data work for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
purus. Libero pharetra tortor.</p>
Neem contact op header
</div>
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
<img class="bia-bg" src="Images/header-background.svg" alt="">
<!-- End of header section -->
</header>
</div>
<script src="main.js"></script>
</body>
</html>
I have a problem. I have a background image that I want to display, however when I give the image a z-index of -1, it becomes invisible and isn't displayed in the background. Does anyone have an idea why this might be happening?
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
.bia-bg {
position: absolute;
z-index: -1;
}
The class and image I'm talking about is found on line 56 (HTML) and the class and image is on line 117 (CSS).
For your reference, the code can be found here: JSFiddle.
Any help would be much appreciated!
What it's supposed to look like:
Design
To put a background on a div or other element you only need to use this on CSS:
background-image: url("./your_image.png");
Getting like this
html
<div class="bg_img">
<!-- something -->
</div>
css
.bg_img{
background-image: url("Images/header-analytics.svg");
}
You have given absolutely everything a default white background.
This means that something with z index -1 cannot be seen at all because elements with default 0 z index cover it in white.
Try removing that blanket setting.
Site: http://tripleo.biz/test/index.html
Please shrink browser to mobile view.
Header:
I have problems with the alignment. They don't seem to align all to the middle of the header. The Android logo seems ot be the only thing aligned. The text and dash image aren't. :/
Navigation:
The Navigation Drop Down is in effect when you mouse-over "ALL" but the links after Link 2 are hidden behind the image. I tried to use z-index to fix this issue but nothing still.
Content Area:
Another problem with Vertical align. For some reason there is more space at the bottom of the content.
Index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="css/styled.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<div class="image_carousel">
<img src="images/menu.png" style="width: 15px; height: 22px;" />
<img src="images/android_icon.png" style="margin-top: 10px; width: 26px; height: 46px;" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>
</body>
</html>
CSS
img {
width: 100%;
}
header {
background: #83aa01;
width: 100%;
height: 76px;
/*position: fixed;*/
top: 0;
left: 0;
vertical-align:middle;
}
.image_carousel {
padding: 5px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
.image_carousel img {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
}
.clearfix {
float: none;
clear: both;
}
div.bround {
background-color: #FFF;
color: #000;
padding: 20px;
margin-top: 10px;
margin-right: 0px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
img.imgleft {
position:relative;
float: left;
margin: 0px 5px 5px 0px;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83aa01;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
font-size: 20px;
}
div.nav {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
color: #FFF;
}
div.nav ul, div.nav:active ul {
display: none;
position: absolute;
padding: 0px;
background: #444;
color: #FFF;
top: 50px;
width: 20%;
border-radius: 4px 0 4px 4px;
}
div.nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0px;
border-bottom: 1px dotted #FFF;
z-index:1000;
}
div.nav:hover ul {
display: block;
}
div.nav ul, div.nav a {
color: #FFF;
font-size: 17px;
font-weight: normal;
letter-spacing:2px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
-
Please Help!
Thanks.
For Header :
set your .image_carousel padding-top value to 15px and remove margin-top from your android icon. which looks like this
.image_carousel {
padding: 15px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
Content Area :
You have Given margin-bottom :20px to your p tag Just remove that .
Regarding the Navigation issue, You need to add z-index for the dropdown menu. Update your css like below it will resolve.
div.nav ul, div.nav a
{
color:#fff;
font-size:17px;
font-weight:normal;
letter-spacing:2px;
z-index:10;
}
Regarding the Content Area padding is coming from the following class
section
{
margin:80px auto 40px;
max-width:980px;
position:relative;
padding:20px;
}
If you remove the margin bottom 40px, it will work fine in mobile. But the problem is you wont get enough space on bigger screens. So you can use media query and apply this class only on mobile versions.
#media all and (max-width: 399px)
{
section
{
margin-bottom:0px;
}
}
Test css copy code
header {
background: none repeat scroll 0 0 #83AA01;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
}
.image_carousel {
text-align: center;
vertical-align: middle;
}
.image_carousel img, .image_carousel > .nav {
border: 1px solid #DDDDDD;
display: inline-block;
height: 74px;
line-height: 74px;
padding: 0 30px;
position: relative;
vertical-align: middle;
}
.image_carousel > .nav:hover {
background-color: #FF0000;
}
.image_carousel > .nav ul li {
line-height: normal;
}
.clearfix {
clear: both;
float: none;
}
div.bround {
background-color: #FFFFFF;
border-radius: 15px;
color: #000000;
margin-right: 0;
padding: 20px;
}
img.imgleft {
float: left;
margin: 0 5px 5px 0;
position: relative;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83AA01;
}
#menu-icon {
display: inline-block;
font-size: 20px;
height: 40px;
width: 40px;
}
div.nav ul, div.nav:active ul {
background: none repeat scroll 0 0 #444444;
border-radius: 4px 0 4px 4px;
color: #FFFFFF;
display: none;
left: 0;
padding: 0;
position: absolute;
width: 100px;
margin-top:30px;
}
div.nav li {
border-bottom: 1px dotted #FFFFFF;
margin: 0;
padding: 5px 0;
text-align: center;
width: 100%;
z-index: 1000;
}
div.nav li:hover{
background-color:red;
}
div.nav:hover ul {
display: block;
top: 43px;
}
div.nav ul, div.nav a {
color: #FFFFFF;
font-size: 17px;
font-weight: normal;
letter-spacing: 2px;
}
ul {
list-style: none outside none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
//yes test html
<header>
<div class="image_carousel">
<img src="images/menu.png" />
<img src="images/android_icon.png" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>