: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.
I'm trying to align my <div class="social-icons"> into bottom center of my sidebar.
Well icon is on bottom of the page, but on the left.
Screenshot of page: Page screenshot
My code:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*---------------------------------------------------------
1. Reset
-------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.blue {
color: #06C;
}
.green {
color: #090;
}
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
*overflow: visible;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]:-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
/*---------------------------------------------------------
2. Basic Style
-------------------------------------------------------- */
body {
font-size: 14px;
line-height: 24px;
color: #777777;
font-family: 'Verdana';
overflow-x: hidden;
}
a {
color: #006699;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
text-decoration: none !important;
}
a:hover {
color: #555555;
}
h1,
h2,
h3,
h4,
h5 {
color: #555555;
font-weight: bold;
}
::-webkit-input-placeholder {
color: #999999;
}
:-moz-placeholder {
/* Firefox 18- */
color: #999999;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}
.main-content,
.banner-bg {
float: right;
width: 87%;
}
#media screen and (max-width: 1290px) {
.main-content,
.banner-bg {
width: 70%;
}
}
#media screen and (max-width: 992px) {
.main-content,
.banner-bg {
width: 100%;
}
}
.content-wrapper {
padding: 0 80px;
}
#media screen and (max-width: 992px) {
.content-wrapper {
padding: 0 30px;
}
}
h4.widget-title {
font-size: 16px;
font-family: 'Verdana';
text-transform: uppercase;
margin-bottom: 40px;
}
hr {
position: relative;
outline: 0;
border: 0;
width: 100%;
height: 4px;
background: #dddddd;
margin-top: 40px;
margin-bottom: 0;
}
.page-section {
padding-top: 80px;
}
/*---------------------------------------------------------
3. Header
-------------------------------------------------------- */
.sidebar-menu {
float: left;
width: 13%;
height: 100%;
position: fixed;
background-color: #384553;
color: white;
overflow-y: hidden;
}
#media screen and (max-width: 1290px) {
.sidebar-menu {
overflow-y: scroll;
width: 30%;
}
}
.top-section {
padding: 40px;
}
.profile-image {
width: 150px;
height: 150px;
border: 4px solid white;
border-color: #505050;
-webkit-border-radius: 75px;
border-radius: 75px;
overflow: hidden;
margin-bottom: 20px;
margin: auto;
}
.profile-image img {
width: 100%;
}
h3.profile-title {
margin-bottom: 5px;
color: white;
font-size: 18px;
font-family: 'Verdana';
margin-top: 20px;
}
.main-navigation {
margin: 30px 0;
}
.main-navigation li {
display: block;
}
.main-navigation li a {
padding: 15px 40px;
display: block;
color: white;
font-size: 14px;
}
.main-navigation li a i {
margin-right: 15px;
font-size: 24px;
}
.main-navigation li a:hover {
background: #5b6878;
}
.main-navigation li a.active {
background: #495461;
}
.main-navigation li a.active:hover {
background: #495461;
}
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
}
/* .social-icons li {
display: inline-block;
margin-right: 20px;
} */
.social-icons a {
font-size: 18px;
color: white;
}
.social-icons a:hover {
color: #282e35;
}
.responsive-header {
background: #5f6d7e;
text-align: center;
}
#media screen and (max-width: 992px) {
.responsive-header .main-navigation {
margin-top: 10px;
display: none;
}
}
#media screen and (max-width: 992px) {
.responsive-header p {
color: white;
}
}
#media screen and (max-width: 992px) {
.responsive-header .profile-image {
float: left;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
border-radius: 50px;
overflow: hidden;
margin-right: 30px;
}
.responsive-header .profile-content {
text-align: left;
margin-top: 30px;
overflow: hidden;
}
}
#media screen and (max-width: 992px) {
.top-section {
padding-bottom: 0;
}
}
#media screen and (max-width: 992px) {
.main-navigation a {
padding: 10px;
}
.main-navigation a.active {
background: #5f6d7e !important;
}
.main-navigation a:hover {
background: #5f6d7e !important;
}
}
.toggle-menu {
width: 100%;
display: block;
padding: 20px;
margin-top: 30px;
background: #6cc0f7;
color: white;
font-size: 18px;
}
.toggle-menu:hover {
color: white;
}
/*---------------------------------------------------------
4. Main Content
-------------------------------------------------------- */
/*------ banner ------ */
.banner-bg {
padding: 180px 80px;
position: relative;
background: url("../img/7.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 2;
}
.banner-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(95, 109, 126, 0.4);
top: 0;
left: 0;
z-index: 3;
}
.welcome-text {
position: relative;
z-index: 4;
}
.welcome-text h2 {
font-size: 42px;
font-family: 'Verdana';
color: white;
margin-bottom: 30px;
}
.welcome-text h5 {
font-size: 22px;
color: white;
}
/*------ about us ------ */
.about-image {
overflow: hidden;
border: 4px solid #dddddd;
margin-bottom: 40px;
}
.about-image img {
width: 100%;
display: block;
}
/*------ projects ------ */
.projects-holder {
margin-right: 0;
margin-left: 0;
margin-top: 40px;
}
.projects-holder .col-md-4,
.projects-holder .col-md-4 {
padding-right: 1px;
padding-left: 1px;
}
.project-item {
width: 100%;
margin-bottom: 2px;
overflow: hidden;
position: relative;
}
.project-item img {
width: 100%;
display: block;
}
.project-item:hover .project-hover {
top: 0;
opacity: 1;
visibility: visible;
}
.project-hover {
position: absolute;
width: 100%;
height: 100%;
top: 40px;
left: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
visibility: 0;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
.project-hover .inside {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: 30px;
}
.project-hover h5 {
font-size: 16px;
margin-bottom: 15px;
}
.project-hover h5 a {
color: white;
}
.project-hover p {
color: white;
font-size: 13px;
line-height: 20px;
}
/*------ contact ------ */
.contact-form {
margin-top: 40px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
outline: 0;
border: 1px solid #aaaaaa;
padding: 12px;
color: #999999;
margin-bottom: 30px;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: 0;
}
.contact-form .button {
width: auto;
background: #5f6d7e;
color: white;
text-transform: uppercase;
border: 0;
}
/*---------------------------------------------------------
5. Footer
-------------------------------------------------------- */
#footer p.copyright-text {
margin: 40px 0;
font-size: 13px;
}
#footer p.copyright-text a {
color: #5f6d7e;
}
#footer p.copyright-text a:hover {
color: #6cc0f7;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Autoservis Jiří Baloun</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- SIDEBAR -->
<div class="sidebar-menu hidden-xs hidden-sm">
<div class="top-section">
<div class="profile-image">
<img src="img/profile.jpg">
</div>
<h3 class="profile-title" align="center">Autoservis Jiří Baloun</h3>
<!-- <p class="profile-description">Digital Photography</p> -->
</div>
<!-- top-section -->
<div class="main-navigation">
<ul class="navigation">
<li><i class="fa fa-globe"></i>O nás</li>
<li><i class="fa fa-pencil"></i>Služby</li>
<li><i class="fa fa-camera-retro"></i>Galerie</li>
<li><i class="fa fa-link"></i>Kontakt</li>
</ul>
</div>
<!-- .main-navigation -->
<div class="social-icons">
<i class="fa fa-facebook-square" style="font-size:36px"></i>
</div>
<!-- .social-icons -->
</div>
<!-- .sidebar-menu -->
<div class="banner-bg" id="top">
<div class="banner-overlay"></div>
<div class="welcome-text">
<h2>Autoservis Jiří Baloun</h2>
<h5>Servis osobních vozidel</h5>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="main-content">
<div class="fluid-container">
<div class="content-wrapper">
<!-- ABOUT -->
<div class="page-section" id="about">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">O nás</h4>
<!-- <div class="about-image">
<img src="img/8.jpg" alt="about me">
</div> -->
<p></p>
<hr>
</div>
</div>
<!-- #about -->
</div>
<!-- PROJECTS -->
<div class="page-section" id="projects">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">Náhled naší práce</h4>
<p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Maecenas et lorem molestie, maximus justo dignissim, cursus nisl. Nullam at ante quis ex pharetra
pulvinar quis id dolor. Integer lorem odio, euismod ut sem sit amet, imperdiet condimentum diam.</p>
</div>
</div>
<div class="row projects-holder">
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/1.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/2.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/3.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/4.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/5.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/6.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- .projects-holder -->
</div>
<hr>
<!-- CONTACT -->
<div class="page-section" id="contact">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">KONTAKTUJTE NÁS</h4>
<p>Máte-li jakékoliv dotazy ohledně nabízených služeb, cen a podobně, neváhejte nás kontaktovat telefonicky nebo prostřednictvím tohoto formuláře.</p>
</div>
</div>
<div class="row">
<form action="#" method="post" class="contact-form">
<fieldset class="col-md-4 col-sm-6">
<input type="text" id="your-name" placeholder="Vaše jméno">
</fieldset>
<fieldset class="col-md-4 col-sm-6">
<input type="email" id="email" placeholder="Váš email">
</fieldset>
<fieldset class="col-md-4 col-sm-12">
<input type="text" id="your-subject" placeholder="Předmět zprávy">
</fieldset>
<fieldset class="col-md-12 col-sm-12">
<textarea name="message" id="message" cols="30" rows="6" placeholder="Napište nám"></textarea>
</fieldset>
<fieldset class="col-md-12 col-sm-12">
<input type="submit" class="button big default" value="Odeslat">
</fieldset>
</form>
</div>
<!-- .contact-form -->
</div>
<hr>
<div class="row" id="footer">
<div class="col-md-12 text-center">
<p class="copyright-text">Copyright © 2021 Autoservis Jiří Baloun</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/min/plugins.min.js"></script>
<script src="js/min/main.min.js"></script>
</body>
</html>
Use this:
.social-icons {
padding: 30px 40px;
position: absolute;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
left: 0;
right: 0;
}
If you give width to your social-icons you can align your items to center.
like below;
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
}
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;
}
basically i have 3 images and a div.contact sitting next to each other contained in a Section.gallery. div.contact has been floated right and relatively positioned but not the images .
My problem is that i cant get the 'NEWSLETTER' in the footer to occupy the available space on the right, it keeps dropping down.
However when apply a clear:both to footer see what happens.It Creates a huge space between the footer and the Section.gallery ,but 'NEWSLETTER' takes up all the space
When i check with google chrome inspect element, there is a big margin that i did not apply.
The relevant code
the HTML part
<section class="gallery">
<div class="display-gallery">
<img src="images/picture.png" />
<img src="images/picture.png" />
<img src="images/picture.png">
</div>
<!--End gallery-->
<div class="contact">
<p>contact</p>
<h2>booking <br />
<span>0123.456.789</span><br />
<span>0123.456.789</span><br />
<span> contact#xidian.com</span>
</h2>
Find out more
</div>
<!--End-->
</section>
<!--End Section-->
<footer>
<div class="nav-wrapper">
<nav class="footer-nav">
<ul>
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
<ul class="second-nav">
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
</nav>
<div class="more-info">
<h3>some information here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipis ellt. Cras non nibh
sed vellt ultrices convallis eget vitae leo. Vestibulum porttitor dolor
sed is semper id consequat urna tristique vivamus sodales, nibh id comisam risti.
</p>
</div>
<div class="follow-me">
<h3>follow me </h3>
<a href="">
<img src="images/youtube.png">
</a>
<a href="">
<img src="images/fb.png">
</a>
<a href="">
<img src="images/twitter.png">
</a>
<a href="">
<img src="images/link.png">
</a>
</div>
<div class="newsletter">
<h3>newsletter</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br />adipiscing ellt. Cras non nibh sed.</p>
<input type="text" name="comment" ><br />
<input type="submit" value="Send" >
</div>
</div>
CSS:
.display-gallery img {
width: 215px ;
height:195px;
margin-right: 30px;
border: 1px solid #D9D9D9;
}
.display-gallery img:hover{
transition-duration: 0.5s ;
transform: scale(1.2);
}
.contact {
float: right;
width: 215px ;
height:195px;
position: relative;
top: -199px;
border: 1px solid #D9D9D9;
}
.contact h2 {
font-size: 16px;
text-transform: uppercase;
line-height: 20px;
padding-left: 12px;
}
.contact p {
text-transform: uppercase;
color: #8e3a17;
font-size: 16px;
padding-top: 20px;
padding-bottom: 18px;
padding-left: 12px;
}
.contact a {
margin-top: 10px;
margin-left: 12px;
}
.nav-wrapper {
outline: solid 1px greenyellow;
overflow: hidden;
border-top: 2px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding-top: 14px;
padding-bottom: 13px;
}
.footer-nav ul {
float: left;
margin-right: 25px;
}
.footer-nav ul li {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.second-nav {
margin-right: 25px;
}
.more-info {
border-left: dashed 1px #D9D9D9;
border-right: dashed 1px #D9D9D9;
float: left;
width: 245px;
padding-left: 20px;
padding-right: 20px;
}
.more-info h3 {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.more-info p {
font-size: 10px;
display: inline-block;
line-height: 13px ;
padding-top: 17px;
width: 210px;
word-break: break-all;
}
.follow-me {
padding: 0 25px 0 25px ;
float: left;
width: 245px;
border-right: 1px dashed #D9D9D9;
}
.follow-me h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
}
.follow-me img {
padding-top: 17px;
margin-right: 7px;
}
.newsletter {
float: right;
width: 205px;
}
.newsletter h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
padding-bottom: 7px;
}
.newsletter p {
font-size: 10px;
display: inline-block;
line-height: 13px;
padding-bottom: 6px;
}
input[type= text] {
width: 205px;
height: 20px;
border: 1px solid #D9D9D9;
}
input[type = submit] {
margin-top: 7px;
float: right;
display: inline-block;
background-color: #8e3a17;
font-size: 11px;
color: white;
width: 55px;
height: 20px;
line-height: 15px;
text-align: center;
box-shadow: 1px 1px 2px #8e3a17;
}
Ps:i did apply a css reset
Sorry about the long post
Update the css as follows:
.gallery {
overflow: hidden;
}
.display-gallery {
float: left;
}
.contact {
float: right;
width: 215px ;
height:195px;
/*position: relative;
top: -199px;*/
border: 1px solid #D9D9D9;
}
your first div "display-gallery" catches all the width of the screen. so your "contact" floating right div is added at the bottom of the div block. (remove the "top: -199px" from the second div "contact" and you'll see why when you add clear: both to footer you got this gap).
The margin you get right to the footer is a placeholder of the ".contact" div to which you apply "top: -199px"
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>