I believe my understanding of positioning is causing me multiple issues:
'Donate' in the navigation header keeps overflowing and not staying inline. I have experimented with display:inline-block, but it still is not working. I am trying to ensure that the navbar elements are responsive to different-sized pages and stay in the same line.
'Our work' section will not center in the middle of the page, even when I tried margin:auto
Unable to align the elements in the problem section correctly. I would like row2 to be 10% below row1, so it's like a 2x2 table configurement.
I've been struggling with this for a while, so if anyone has any ideas on how to solve any of these and suggestions moving forward - it would be well appreciated!
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#FFFFFF;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
}
.logo{
width:30%;
float: left;
text-align:left;
line-height: 122px;
}
nav{
float: center;
line-height: 122px;
}
nav a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 50%;
padding:10px;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%
}
.row2{
position: relative;
display: inline-block;
top:10%;
}
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%";>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section>
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the problem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
padding-top: 122px;
}
/* Header */
header {
position: fixed;
width: 100%;
height: 122px;
background: #FFFFFF;
z-index: 1;
text-align: center;
top: 0;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
}
.logo {
width: 200px;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: right;
line-height: 122px;
width: calc(100% - 200px);
text-align: right;
}
nav a {
font-family: 'Ubuntu';
font-weight: 500;
font-size: calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color: #616161;
padding: 20px 20px;
}
.links:hover {
background: #F3EA65;
}
.CTA {
padding: 15px 50px;
border: none;
background: #F28A31;
border-radius: 15px;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
main,
section {
float: left;
width: 100%;
}
/*Our work*/
.ourworksec {
background: #fff;
padding: 100px 25px;
}
#ourwork {
width: 100%;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
/*Problem section */
h2#theproblem {
padding: 20px;
}
#problembackground {
width: 100%;
float: left;
padding: 100px 20px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent {
position: relative;
}
.row1 {
position: relative;
display: inline-block;
padding: 20px;
float: left;
width: 50%;
}
.row2 {
position: relative;
float: left;
margin-top: 50px;
padding: 20px;
width: 50%;
}
#media only screen and (max-width: 1200px) {
.logo {
width: 80px;
}
nav {
width: calc(100% - 80px);
}
nav a {
padding: 15px 10px;
}
.CTA {
padding: 15px 30px;
}
}
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%" ;>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section class="ourworksec">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="theproblem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</section>
</main>
Regarding this one you simply don't have enough space at certain window widths to display them all, so you need to make their sizes responsive. #media queries at certain widths is one option.
"Our work" is absolutely positioned, which messes with things like margin: 0 auto to center things. In general you use position: absolute WAY too often. Honestly you could avoid it all together looking at your page so far. position: absolute is a pain to work with when you come back to your project at a later stage too.
Here your problem is that the third element is still on the same line because you set display: inline-block. You could wrap both rows each in another div (which are display: block by default). Also work with margin-bottom here in my opinion. You are making it way harder with the way you use several position properties.
Here: I removed the floats and used flexbox and grid
Quick note: This website is not responsive, so pls open it in the full window not hte mini window. If you want a responsive site, dang man, that's a big request
Code:
<body>
<style>
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#ffffff;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
text-align:left;
line-height: 100px;
height: fit-content;
display: inline-block;
width: fit-content;
padding: 30px;
margin: 0px;
}
.logo image {
width: 200px;
height: 200px;
}
.wrapper a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 300px;
padding:10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#work{
display: flex;
justify-content: center;
align-items: center ;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
#the-problem{
margin: auto;
width: 300px;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%;
margin: auto;
}
.row2{
position: relative;
display: inline-block;
top:10%;
margin: auto;
}
.problem{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
li{
list-style: none;
}
</style>
<header>
<ul class="wrapper">
<div class="logo">
<a href="....">
<img src="/logo.png" alt="Logo" width="25%";>
</a>
</div>
<li> <a class="links" href="#">about</a> </li>
<li> <a class="links" href="#">our team</a> </li>
<li> <a class="links" href="#">who we help</a> </li>
<li> <a class="links" href="#">get involved</a> </li>
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</ul>
</header>
<main>
<section id="work">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the-problem">the problem</h2><br>
<div class="problem">
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</div>
Related
I’m currently working on a project from Frontend mentor, while developing the mobile version an issue arose where the main section is overflowing onto the footer section.
:root {
--DarkViolet: hsl(256, 26%, 20%);
--Grayish-Blue: hsl(216, 30%, 68%);
--VeryLight-Gray: hsl(0, 0%, 98%);
--Dark-Grayish-Violet: hsl(273, 4%, 51%);
--Very-Dark-Violet: hsl(270, 9%, 17%);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.hide {
display: none;
}
.content-container {
width: 100%;
padding: 10px 0;
margin: auto;
}
main {
border: 10px dashed red;
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.purple {
background-color: var(--DarkViolet);
color: #fff;
}
button {
background-color: var(--DarkViolet);
color: #fff;
border: 2px solid;
padding: 5px 20px;
font-size: .8em;
width: 200px;
}
#media only screen and (min-width: 214px) {
* {
overflow-x: hidden;
}
.content-container {
width: 90%;
}
header {
position: fixed;
background-color: white;
width: 100%;
z-index: 15;
}
header .flex {
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
header>* {
padding: 20px;
justify-content: space-between;
}
.menu {
position: fixed;
top: 0;
right: 0;
margin-top: 60px;
background-color: var(--Very-Dark-Violet);
padding: 50px 0;
text-align: center;
height: 100%;
width: 100%;
transform: translateY(-800px);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.menu img {
width: inherit;
position: absolute;
right: 0;
bottom: 0;
}
.menu.open {
overflow: hidden;
opacity: 1;
font-size: 1.3em;
transform: translateY(0px);
transition: all 0.5s ease-in-out;
background-image: url(images/bg-pattern-mobile-nav.svg);
background-position: bottom;
background-repeat: no-repeat;
}
.menu .navLinks {
border: 1px solid gray;
display: block;
list-style: none;
background-color: inherit;
color: #000;
}
.menu .navLinks li {
color: white;
margin: auto;
margin-bottom: 40px;
margin-left: 0;
width: 100%;
}
.menu .navLinks li a {
color: white;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.menu .navLinks button {
width: 80%;
font-size: 1.2em;
text-transform: uppercase;
}
main {
transform: translateY(70px);
}
.mobile-intro-img {
width: 100%;
object-fit: fill;
margin-bottom: 0;
}
.purple-big-banner {
border: 3px solid red;
margin: 0;
background-color: var( --Very-Dark-Violet);
color: white;
position: relative;
overflow: hidden;
background-image: url(images/bg-pattern-intro-left-mobile.svg);
background-repeat: no-repeat;
}
.purple-big-banner .mobile-intro-img-left {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.purple-big-banner .mobile-intro-img-right {
position: absolute;
bottom: -50%;
z-index: 100;
right: 0;
}
.purple-big-banner .content-container {
border: 3px dashed white;
}
.purple-big-banner .content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
gap: 2em;
margin: auto;
padding-top: 60px;
padding-bottom: 60px;
border: 1px solid red;
}
.purple-big-banner button {
margin: auto;
width: 60%;
}
.content-container>.mobile-intro-img-right-continued {
position: absolute;
top: 35%;
right: 0;
}
h1 {
overflow: hidden;
text-align: center;
font-size: 2em;
line-height: .85;
font-family: 'DM Serif Display', serif;
}
.purple-big-banner p {
line-height: 1.4em;
margin: 10px 0;
font-size: 1.1em;
}
hr {
width: 100px;
margin: auto;
margin-top: 40px;
margin-bottom: 20px;
}
.flex {
flex-direction: column;
margin-top: 40px;
align-items: center;
justify-content: center;
}
.box {
margin-bottom: 40px;
border: 1px solid rgb(31, 31, 31);
}
.box img {
padding: auto;
border: 1px solid red;
}
.box>* {
margin-bottom: 20px;
text-align: center;
}
.box p {
color: var(--Grayish-Blue);
}
.small-banner {
border: 5px solid red;
text-align: center;
background-image: url(images/bg-pattern-how-we-work-mobile.svg);
background-color: var( --Very-Dark-Violet);
color: white;
}
.small-banner .content {
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px 0;
}
.small-banner button {
margin: auto;
width: 65%;
}
footer {
background-color: var(--VeryLight-Gray);
background-image: url(images/bg-pattern-footer-mobile.svg);
background-repeat: no-repeat;
border: 3px solid blue;
}
}
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
<header>
<div class="content-container flex">
<img src="images/logo.svg" alt="" srcset="">
<nav class="menu">
<ul class="navLinks">
<li><a class="menuItem" href="#">How we work</a></li>
<li><a class="menuItem" href="#">Blog</a></li>
<li><a class="menuItem" href="#">Account</a></li>
<li><button class="menuItem">View plans</button></li>
</ul>
</nav>
<div class="hamburger ">
<img class="menuIcon" src="images/icon-hamburger.svg " alt="">
<img class="closeIcon hide" src="images/icon-close.svg" alt="">
</div>
</div>
</header>
<main class="flex-main">
<img src="images/image-intro-mobile.jpg" alt="" class="mobile-intro-img-left">
<div class="purple-big-banner">
<div class="content-container">
<div class="content">
<hr class="hide">
<div>
<h1> Humanizing your insurance.</h1>
</div>
<div>
<p>
Get your life insurance coverage easier and faster. We blend our expertise blank and technology to help you find the plan that’s right for you. Ensure you and your loved ones are protected.
</p>
</div>
<div>
<button class="upper">View plans</button>
</div>
</div>
</div>
<img src="images/bg-pattern-intro-right-desktop.svg" class="pattern-right hide" alt="" srcset="">
<img src="images/bg-pattern-intro-left-desktop.svg" class="pattern-left hide" alt="" srcset="">
</div>
<div class="content-container">
<img src="images/bg-pattern-intro-right-mobile.svg" alt="" class="mobile-intro-img-right-continued">
<div class="content">
<hr>
<h1>We’re different</h1>
<div class="flex">
<div class="box">
<div>
<img src="images/icon-snappy-process.svg" alt="">
</div>
<h2>Snappy Process</h2>
<p> Our application process can be completed in minutes, not hours. Don’t get stuck filling in tedious forms.</p>
</div>
<div class="box">
<div>
<img src="images/icon-affordable-prices.svg" alt="">
</div>
<h2> Affordable Prices</h2>
<p> We don’t want you worrying about high monthly costs. Our prices may be low, but we still offer the best coverage possible.</p>
</div>
<div class="box">
<div>
<img src="images/icon-people-first.svg" alt="">
</div>
<h2>People First</h2>
<p> Our plans aren’t full of conditions and clauses to prevent payouts. We make sure you’re covered when you need it.</p>
</div>
</div>
</div>
</div>
<div class="content-container small-banner">
<div class="content">
<div>
<h2>Find out more <br> about how we work</h2>
</div>
<button class="upper">How we work</button>
</div>
</div>
</main>
<footer>
<div class="footer-top">
<div class="content-container flex">
<div class="logo">
<img src="images/logo.svg" alt="" srcset="">
</div>
<div class="flex social">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-pinterest"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
</div>
</div>
<hr class="content-container">
</div>
<div class="footer-bottom content-container flex">
<div>
<p class="title upper">Our company</p>
<ul>
<li>How we work</li>
<li>Why Insure?</li>
<li>View plans</li>
<li>Reviews</li>
</ul>
</div>
<div>
<p class="title upper">Help me</p>
<ul>
<li>FAQ</li>
<li>Terms of use</li>
<li>Privacy policy</li>
<li>Cookies</li>
</ul>
</div>
<div>
<p class="title upper">Contact</p>
<ul>
<li>Sales</li>
<li>Support</li>
<li>Live chat</li>
</ul>
</div>
<div>
<p class="title upper">Others</p>
<ul>
<li>Careers</li>
<li>Press</li>
<li>Licenses</li>
</ul>
</div>
<div></div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Your Name Here.
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
It seems like this is probably your issue:
main {
transform: translateY(70px);
}
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
Could someone explain me how do I center my text on bottom of the div container?
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
Im trying to get "Learn more about what i do" at the bottom of "welcome-header" row.
CSS :
#welcome-div {
min-height: 100%;
position: relative;
}
.page-scroll {
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
Sorry guys u get me wrong. I want the string to stick to bottom like bottom: 0px;
http://codepen.io/anon/pen/jBLaBX
Add position: relative to #welcome-header then position: absolute; bottom: 0; left: 0; right: 0 to .page-scroll to position the element at the bottom of #welcome-header, and your text-align: center rule will center the text horizontally.
#import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
width: 100%;
height: 100vh;
background-image: url(img/background.jpg);
position: relative;
}
.welcome-text,
.welcome-text-animation {
font-family: Sansita;
text-align: center;
color: aliceblue;
font-size: 50px;
padding-top: 90px;
}
.home-logo {
display: block;
text-align: center;
}
.home-logo img {
display: inline-block;
padding: 2.5%;
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
display: block;
}
.hire-button {
text-align: center;
padding-top: 90px;
}
.hire-button a {
font-family: Sansita;
text-decoration: none;
color: aliceblue;
font-size: 25px;
border: 2px solid #FDCD3B;
border-radius: 50px;
padding: 1.2%;
transition: all 0.2s linear;
}
.hire-button a:hover {
background-color: #FDCD3B;
color: #2A3A3F;
padding-left: 3%;
padding-right: 3%;
}
#welcome-div {}
.page-scroll {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: black;
}
<body>
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
<section id="about" class="row">
ABOUT CONTENT
</section>
<section id="skills" class="row">
SKILLS CONTENT
</section>
<section id="portfolio" class="row">
PORTFOLIO CONTENT
</section>
<section id="contact" class="row">
CONTACT CONTENT HERE
</section>
</div>
</body>
.page-scroll {
text-align:center;
}
I have a main page of my site
And I have been trying to get the images to be even spaced and centered on the page but have been failing.
{
padding: 50px;
font-family: sans-serif;
color: #666;
line-height: 18px;
font-size: 12px;
}
a
{
color: #06f;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.button
{
background-color: #eaeaea;
padding: 5px 9px;
display: inline-block;
color: #06f;
font-weight: normal;
border-radius: 2px;
cursor: pointer;
border: none;
font-family: sans-serif;
font-size: 12px;
text-decoration: none;
}
.button:hover
{
background-color: #06f;
color: #fff;
}
.headline
{
font-size: 12px;
color: #333;
margin-bottom: 10px;
}
.content
{
max-width: 650px;
}
.grid-wrapper
{
float: left;
margin-top: 30px;
padding-left: 125px;
}
.grid-item
{
display: block;
float: left;
width: 100%;
padding-top: 25%;
max-width: 250px;
}
.grid-content
{
padding: 10px;
}
.grid-image-link
{
display: block;
height: 290px;
}
.grid-image
{
display: block;
width: 100%;
height: 290px;
}
#albumView{
text-align: center;
background-color: #000000;
}
#indexMain{
text-align: center;
}
<body>
<div>
<ul class="grid-wrapper">
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="triangulation/triangulation.html">
<img class="grid-image" src="http://placehold.it/290x290"/>
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="distort-grid/distort-grid.html">
<img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="contrastdistort/contrastdistort.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
</ul>
</div>
</body>
I have attempted to use % to get it just right, but it never seems to adjust correctly.
I am stumped and could use some help, is there anything I am missing?
Thanks
you can use display:flex and to evenly space it justify-content:space-between and to center it use margin:auto
check this snippet
body {
padding: 50px;
font-family: sans-serif;
color: #666;
line-height: 18px;
font-size: 12px;
}
div {
width: 300px;
margin: auto;
}
ul {
display: flex;
justify-content: space-between;
list-style-type: none;
}
<body>
<div>
<ul class="grid-wrapper">
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="triangulation/triangulation.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="distort-grid/distort-grid.html">
<img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="contrastdistort/contrastdistort.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
</ul>
</div>
</body>
Hope it helps
Remove float:left from both ul and li and add padding:0; in ul
body
{
padding: 50px;
font-family: sans-serif;
color: #666;
line-height: 18px;
font-size: 12px;
}
a
{
color: #06f;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.button
{
background-color: #eaeaea;
padding: 5px 9px;
display: inline-block;
color: #06f;
font-weight: normal;
border-radius: 2px;
cursor: pointer;
border: none;
font-family: sans-serif;
font-size: 12px;
text-decoration: none;
}
.button:hover
{
background-color: #06f;
color: #fff;
}
.headline
{
font-size: 12px;
color: #333;
margin-bottom: 10px;
}
.content
{
max-width: 650px;
}
.grid-wrapper
{/*
float: left;*/
padding:0;
margin-top: 30px;
padding-left: 125px;
}
.grid-item
{
display: block;/*
float: left;*/
width: 100%;
padding-top: 25%;
max-width: 250px;
}
.grid-content
{
padding: 10px;
}
.grid-image-link
{
display: block;
height: 290px;
}
.grid-image
{
display: block;
width: 100%;
height: 290px;
}
#albumView{
text-align: center;
background-color: #000000;
}
#indexMain{
text-align: center;
}
<body>
<div>
<ul class="grid-wrapper">
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="triangulation/triangulation.html">
<img class="grid-image" src="http://placehold.it/290x290"/>
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="distort-grid/distort-grid.html">
<img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="contrastdistort/contrastdistort.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
</ul>
</div>
</body>
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">