New Section going above Previous Section
1
Trying to understand why my element seems to be placed on top of the previous section (right under the nav bar) instead of underneath it all as a new section. I'm trying to understand more about positioning in CSS so that may be what it is or simply an error in my HTML (but I can't seem to find it). I'm hoping someone can take a look real quick as to why that is.
Example:
Header Image
Nav Bar
(Quote that is misplaced is here instead of the bottom)
Section
New Section
(Where I want the quote to be)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="css/resets-copy.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<!-- <script src="script.js" type="text/javascript"></script> -->
<title>Drifting</title>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<h1>drifting</h1>
</section>
<!-- <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".1s">
<a class="btn" href="#">Get Started</a>
</section> -->
</div>
</div>
</section>
<header id="myHeader">
<div class="logo" id="myMenu">
drifting in the fall
</div>
<div class="menu">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">journal</a>
<a href="#">contact</a>
</div>
</header>
<br>
<div class="container">
<div class="left-side">
<div class="info-container">
<h1>text title<br>
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nemo quo rem, unde deleniti natus eligendi a temporibus mollitia vero tempora voluptatem adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nihil omnis, repudiandae explicabo natus nam earum quidem vero libero beatae rem iste quisquam. Cumque tempore magni officia, ipsa veritatis voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloremque modi natus sapiente, sed assumenda fuga esse, voluptates unde, dolorem vero dolore, quibusdam ex a placeat ducimus amet iusto numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur suscipit enim! Debitis, ad, nam. Quisquam ullam facilis, tempore nisi nemo enim provident, ab dicta iusto animi obcaecati incidunt sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corporis aperiam voluptas excepturi laborum nobis, nam ipsa aliquid commodi voluptatum illum, temporibus, beatae enim et totam. Enim similique officiis voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita aut amet saepe, repellat beatae! Illum natus autem obcaecati a, corporis vero, itaque ratione enim dolore aut ducimus quod, qui ut.
</p>
</div>
</div>
<div class="right-side">
<img src="IMG/GP1.jpg">
</div>
</div>
<section>
<div>
<h2>A creative man is motivated
by the desire to achieve, not by the desire
to beat others - Ayn Rand
</h2>
</div>
</section>
</body>
</html>
CSS
@import url('https//fonts.googleapis.com/css?family=Raleway');
@import url('https//fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Open+Sans:300,400,600,700');
@import "resets.css";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url('https://image.ibb.co/bF7T1L/site.jpg') no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-bottom: 3%;
}
.content h1 {
font-family: 'Crimson';
color: white;
font-size: 600%;
font-style: italic;
}
/*.btn {
font-size: 150%;
font-family: 'Crimson';
text-decoration: none;
border: 2px solid white;
padding: 10px 20px;
border-radius: 5px;
}
.btn:hover {
color: lightblue;
border: 2px solid lightblue;
}*/
header {
padding: 10px 10px;
/*background: lightblue;*/
}
header .logo {
display: inline-block;
float: left;
font-size: 25px;
font-weight: 600;
font-style: italic;
padding-left: 13px;
}
header .menu {
display: inline-block;
float: right;
font-size: 25px;
font-weight: 600;
font-style: italic;
}
header .menu a {
text-decoration: none;
margin-left: 20px;
color: inherit;
padding-right: 12px;
}
header:after {
content: "";
display: table;
clear: both;
}
p {
font-family: 'Crimson';
text-align: justify;
margin: 3%;
}
#myHeader {
background: white;
}
.grand-prix {
width: 400px;
display: inline-block;
}
.gp-image {
display: inline-block;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.container .left-side {
width: 30%;
display: inline-block;
float: left;
}
.container .right-side {
width: 60%;
display: inline-block;
float: right;
}
.container .right-side img {
width: 70%;
}
.info-container {
position: relative;
top: 450px;
left: 150px;
}
.info-container h1 {
font-size: 45px;
font-style: italic;
left: 10px;
position: relative;
bottom: 25px;
}
.right-side img {
position: relative;
top: 290px;
left: 130px;
}
.bottom h2 {
color: grey;
}
html css
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
add a comment |
1
Trying to understand why my element seems to be placed on top of the previous section (right under the nav bar) instead of underneath it all as a new section. I'm trying to understand more about positioning in CSS so that may be what it is or simply an error in my HTML (but I can't seem to find it). I'm hoping someone can take a look real quick as to why that is.
Example:
Header Image
Nav Bar
(Quote that is misplaced is here instead of the bottom)
Section
New Section
(Where I want the quote to be)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="css/resets-copy.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<!-- <script src="script.js" type="text/javascript"></script> -->
<title>Drifting</title>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<h1>drifting</h1>
</section>
<!-- <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".1s">
<a class="btn" href="#">Get Started</a>
</section> -->
</div>
</div>
</section>
<header id="myHeader">
<div class="logo" id="myMenu">
drifting in the fall
</div>
<div class="menu">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">journal</a>
<a href="#">contact</a>
</div>
</header>
<br>
<div class="container">
<div class="left-side">
<div class="info-container">
<h1>text title<br>
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nemo quo rem, unde deleniti natus eligendi a temporibus mollitia vero tempora voluptatem adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nihil omnis, repudiandae explicabo natus nam earum quidem vero libero beatae rem iste quisquam. Cumque tempore magni officia, ipsa veritatis voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloremque modi natus sapiente, sed assumenda fuga esse, voluptates unde, dolorem vero dolore, quibusdam ex a placeat ducimus amet iusto numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur suscipit enim! Debitis, ad, nam. Quisquam ullam facilis, tempore nisi nemo enim provident, ab dicta iusto animi obcaecati incidunt sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corporis aperiam voluptas excepturi laborum nobis, nam ipsa aliquid commodi voluptatum illum, temporibus, beatae enim et totam. Enim similique officiis voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita aut amet saepe, repellat beatae! Illum natus autem obcaecati a, corporis vero, itaque ratione enim dolore aut ducimus quod, qui ut.
</p>
</div>
</div>
<div class="right-side">
<img src="IMG/GP1.jpg">
</div>
</div>
<section>
<div>
<h2>A creative man is motivated
by the desire to achieve, not by the desire
to beat others - Ayn Rand
</h2>
</div>
</section>
</body>
</html>
CSS
@import url('https//fonts.googleapis.com/css?family=Raleway');
@import url('https//fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Open+Sans:300,400,600,700');
@import "resets.css";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url('https://image.ibb.co/bF7T1L/site.jpg') no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-bottom: 3%;
}
.content h1 {
font-family: 'Crimson';
color: white;
font-size: 600%;
font-style: italic;
}
/*.btn {
font-size: 150%;
font-family: 'Crimson';
text-decoration: none;
border: 2px solid white;
padding: 10px 20px;
border-radius: 5px;
}
.btn:hover {
color: lightblue;
border: 2px solid lightblue;
}*/
header {
padding: 10px 10px;
/*background: lightblue;*/
}
header .logo {
display: inline-block;
float: left;
font-size: 25px;
font-weight: 600;
font-style: italic;
padding-left: 13px;
}
header .menu {
display: inline-block;
float: right;
font-size: 25px;
font-weight: 600;
font-style: italic;
}
header .menu a {
text-decoration: none;
margin-left: 20px;
color: inherit;
padding-right: 12px;
}
header:after {
content: "";
display: table;
clear: both;
}
p {
font-family: 'Crimson';
text-align: justify;
margin: 3%;
}
#myHeader {
background: white;
}
.grand-prix {
width: 400px;
display: inline-block;
}
.gp-image {
display: inline-block;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.container .left-side {
width: 30%;
display: inline-block;
float: left;
}
.container .right-side {
width: 60%;
display: inline-block;
float: right;
}
.container .right-side img {
width: 70%;
}
.info-container {
position: relative;
top: 450px;
left: 150px;
}
.info-container h1 {
font-size: 45px;
font-style: italic;
left: 10px;
position: relative;
bottom: 25px;
}
.right-side img {
position: relative;
top: 290px;
left: 130px;
}
.bottom h2 {
color: grey;
}
html css
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
You should try to use bootstrap 4 in your code. getbootstrap.com/docs/4.0/components/navbar . Bootstrap navbars are easy to use and automatically fit with your browser.
– vidy
Nov 24 '18 at 4:40
add a comment |
1
1
1
Trying to understand why my element seems to be placed on top of the previous section (right under the nav bar) instead of underneath it all as a new section. I'm trying to understand more about positioning in CSS so that may be what it is or simply an error in my HTML (but I can't seem to find it). I'm hoping someone can take a look real quick as to why that is.
Example:
Header Image
Nav Bar
(Quote that is misplaced is here instead of the bottom)
Section
New Section
(Where I want the quote to be)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="css/resets-copy.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<!-- <script src="script.js" type="text/javascript"></script> -->
<title>Drifting</title>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<h1>drifting</h1>
</section>
<!-- <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".1s">
<a class="btn" href="#">Get Started</a>
</section> -->
</div>
</div>
</section>
<header id="myHeader">
<div class="logo" id="myMenu">
drifting in the fall
</div>
<div class="menu">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">journal</a>
<a href="#">contact</a>
</div>
</header>
<br>
<div class="container">
<div class="left-side">
<div class="info-container">
<h1>text title<br>
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nemo quo rem, unde deleniti natus eligendi a temporibus mollitia vero tempora voluptatem adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nihil omnis, repudiandae explicabo natus nam earum quidem vero libero beatae rem iste quisquam. Cumque tempore magni officia, ipsa veritatis voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloremque modi natus sapiente, sed assumenda fuga esse, voluptates unde, dolorem vero dolore, quibusdam ex a placeat ducimus amet iusto numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur suscipit enim! Debitis, ad, nam. Quisquam ullam facilis, tempore nisi nemo enim provident, ab dicta iusto animi obcaecati incidunt sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corporis aperiam voluptas excepturi laborum nobis, nam ipsa aliquid commodi voluptatum illum, temporibus, beatae enim et totam. Enim similique officiis voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita aut amet saepe, repellat beatae! Illum natus autem obcaecati a, corporis vero, itaque ratione enim dolore aut ducimus quod, qui ut.
</p>
</div>
</div>
<div class="right-side">
<img src="IMG/GP1.jpg">
</div>
</div>
<section>
<div>
<h2>A creative man is motivated
by the desire to achieve, not by the desire
to beat others - Ayn Rand
</h2>
</div>
</section>
</body>
</html>
CSS
@import url('https//fonts.googleapis.com/css?family=Raleway');
@import url('https//fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Open+Sans:300,400,600,700');
@import "resets.css";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url('https://image.ibb.co/bF7T1L/site.jpg') no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-bottom: 3%;
}
.content h1 {
font-family: 'Crimson';
color: white;
font-size: 600%;
font-style: italic;
}
/*.btn {
font-size: 150%;
font-family: 'Crimson';
text-decoration: none;
border: 2px solid white;
padding: 10px 20px;
border-radius: 5px;
}
.btn:hover {
color: lightblue;
border: 2px solid lightblue;
}*/
header {
padding: 10px 10px;
/*background: lightblue;*/
}
header .logo {
display: inline-block;
float: left;
font-size: 25px;
font-weight: 600;
font-style: italic;
padding-left: 13px;
}
header .menu {
display: inline-block;
float: right;
font-size: 25px;
font-weight: 600;
font-style: italic;
}
header .menu a {
text-decoration: none;
margin-left: 20px;
color: inherit;
padding-right: 12px;
}
header:after {
content: "";
display: table;
clear: both;
}
p {
font-family: 'Crimson';
text-align: justify;
margin: 3%;
}
#myHeader {
background: white;
}
.grand-prix {
width: 400px;
display: inline-block;
}
.gp-image {
display: inline-block;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.container .left-side {
width: 30%;
display: inline-block;
float: left;
}
.container .right-side {
width: 60%;
display: inline-block;
float: right;
}
.container .right-side img {
width: 70%;
}
.info-container {
position: relative;
top: 450px;
left: 150px;
}
.info-container h1 {
font-size: 45px;
font-style: italic;
left: 10px;
position: relative;
bottom: 25px;
}
.right-side img {
position: relative;
top: 290px;
left: 130px;
}
.bottom h2 {
color: grey;
}
html css
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
Trying to understand why my element seems to be placed on top of the previous section (right under the nav bar) instead of underneath it all as a new section. I'm trying to understand more about positioning in CSS so that may be what it is or simply an error in my HTML (but I can't seem to find it). I'm hoping someone can take a look real quick as to why that is.
Example:
Header Image
Nav Bar
(Quote that is misplaced is here instead of the bottom)
Section
New Section
(Where I want the quote to be)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="css/resets-copy.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<!-- <script src="script.js" type="text/javascript"></script> -->
<title>Drifting</title>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<h1>drifting</h1>
</section>
<!-- <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".1s">
<a class="btn" href="#">Get Started</a>
</section> -->
</div>
</div>
</section>
<header id="myHeader">
<div class="logo" id="myMenu">
drifting in the fall
</div>
<div class="menu">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">journal</a>
<a href="#">contact</a>
</div>
</header>
<br>
<div class="container">
<div class="left-side">
<div class="info-container">
<h1>text title<br>
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nemo quo rem, unde deleniti natus eligendi a temporibus mollitia vero tempora voluptatem adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nihil omnis, repudiandae explicabo natus nam earum quidem vero libero beatae rem iste quisquam. Cumque tempore magni officia, ipsa veritatis voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloremque modi natus sapiente, sed assumenda fuga esse, voluptates unde, dolorem vero dolore, quibusdam ex a placeat ducimus amet iusto numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur suscipit enim! Debitis, ad, nam. Quisquam ullam facilis, tempore nisi nemo enim provident, ab dicta iusto animi obcaecati incidunt sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corporis aperiam voluptas excepturi laborum nobis, nam ipsa aliquid commodi voluptatum illum, temporibus, beatae enim et totam. Enim similique officiis voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita aut amet saepe, repellat beatae! Illum natus autem obcaecati a, corporis vero, itaque ratione enim dolore aut ducimus quod, qui ut.
</p>
</div>
</div>
<div class="right-side">
<img src="IMG/GP1.jpg">
</div>
</div>
<section>
<div>
<h2>A creative man is motivated
by the desire to achieve, not by the desire
to beat others - Ayn Rand
</h2>
</div>
</section>
</body>
</html>
CSS
@import url('https//fonts.googleapis.com/css?family=Raleway');
@import url('https//fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Open+Sans:300,400,600,700');
@import "resets.css";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url('https://image.ibb.co/bF7T1L/site.jpg') no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-bottom: 3%;
}
.content h1 {
font-family: 'Crimson';
color: white;
font-size: 600%;
font-style: italic;
}
/*.btn {
font-size: 150%;
font-family: 'Crimson';
text-decoration: none;
border: 2px solid white;
padding: 10px 20px;
border-radius: 5px;
}
.btn:hover {
color: lightblue;
border: 2px solid lightblue;
}*/
header {
padding: 10px 10px;
/*background: lightblue;*/
}
header .logo {
display: inline-block;
float: left;
font-size: 25px;
font-weight: 600;
font-style: italic;
padding-left: 13px;
}
header .menu {
display: inline-block;
float: right;
font-size: 25px;
font-weight: 600;
font-style: italic;
}
header .menu a {
text-decoration: none;
margin-left: 20px;
color: inherit;
padding-right: 12px;
}
header:after {
content: "";
display: table;
clear: both;
}
p {
font-family: 'Crimson';
text-align: justify;
margin: 3%;
}
#myHeader {
background: white;
}
.grand-prix {
width: 400px;
display: inline-block;
}
.gp-image {
display: inline-block;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.container .left-side {
width: 30%;
display: inline-block;
float: left;
}
.container .right-side {
width: 60%;
display: inline-block;
float: right;
}
.container .right-side img {
width: 70%;
}
.info-container {
position: relative;
top: 450px;
left: 150px;
}
.info-container h1 {
font-size: 45px;
font-style: italic;
left: 10px;
position: relative;
bottom: 25px;
}
.right-side img {
position: relative;
top: 290px;
left: 130px;
}
.bottom h2 {
color: grey;
}
html css
html css
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
asked Nov 24 '18 at 4:34
SuedeheadSuedehead
112
112
You should try to use bootstrap 4 in your code. getbootstrap.com/docs/4.0/components/navbar . Bootstrap navbars are easy to use and automatically fit with your browser.
– vidy
Nov 24 '18 at 4:40
add a comment |
You should try to use bootstrap 4 in your code. getbootstrap.com/docs/4.0/components/navbar . Bootstrap navbars are easy to use and automatically fit with your browser.
– vidy
Nov 24 '18 at 4:40
You should try to use bootstrap 4 in your code. getbootstrap.com/docs/4.0/components/navbar . Bootstrap navbars are easy to use and automatically fit with your browser.
– vidy
Nov 24 '18 at 4:40
You should try to use bootstrap 4 in your code. getbootstrap.com/docs/4.0/components/navbar . Bootstrap navbars are easy to use and automatically fit with your browser.
– vidy
Nov 24 '18 at 4:40
add a comment |
1 Answer
1
active
oldest
votes
0
If I'm understanding the issue correctly, you got two main problems:
1) Remove the float: left from .container .left-side in your CSS. You don't need it since that container is already to the left. This is also what appears to be causing the quote to jump to the top.
2) In .info-container you need to drastically lower the top: 450px; to something like top: 10px so that the text from the .left-side container isn't overlapping the quote that you want at the bottom of the page.
So for those two it should look like this:
.container .left-side {
width: 30%;
display: inline-block;
}
.info-container {
position: relative;
top: 10px;
left: 150px;
}
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455160%2fnew-section-going-above-previous-section%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If I'm understanding the issue correctly, you got two main problems:
1) Remove the float: left from .container .left-side in your CSS. You don't need it since that container is already to the left. This is also what appears to be causing the quote to jump to the top.
2) In .info-container you need to drastically lower the top: 450px; to something like top: 10px so that the text from the .left-side container isn't overlapping the quote that you want at the bottom of the page.
So for those two it should look like this:
.container .left-side {
width: 30%;
display: inline-block;
}
.info-container {
position: relative;
top: 10px;
left: 150px;
}
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
add a comment |
0
If I'm understanding the issue correctly, you got two main problems:
1) Remove the float: left from .container .left-side in your CSS. You don't need it since that container is already to the left. This is also what appears to be causing the quote to jump to the top.
2) In .info-container you need to drastically lower the top: 450px; to something like top: 10px so that the text from the .left-side container isn't overlapping the quote that you want at the bottom of the page.
So for those two it should look like this:
.container .left-side {
width: 30%;
display: inline-block;
}
.info-container {
position: relative;
top: 10px;
left: 150px;
}
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
add a comment |
0
0
0
If I'm understanding the issue correctly, you got two main problems:
1) Remove the float: left from .container .left-side in your CSS. You don't need it since that container is already to the left. This is also what appears to be causing the quote to jump to the top.
2) In .info-container you need to drastically lower the top: 450px; to something like top: 10px so that the text from the .left-side container isn't overlapping the quote that you want at the bottom of the page.
So for those two it should look like this:
.container .left-side {
width: 30%;
display: inline-block;
}
.info-container {
position: relative;
top: 10px;
left: 150px;
}
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
If I'm understanding the issue correctly, you got two main problems:
1) Remove the float: left from .container .left-side in your CSS. You don't need it since that container is already to the left. This is also what appears to be causing the quote to jump to the top.
2) In .info-container you need to drastically lower the top: 450px; to something like top: 10px so that the text from the .left-side container isn't overlapping the quote that you want at the bottom of the page.
So for those two it should look like this:
.container .left-side {
width: 30%;
display: inline-block;
}
.info-container {
position: relative;
top: 10px;
left: 150px;
}
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 8:27
Christian LopezChristian Lopez
1189
1189
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
add a comment |
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
Hey Christian, thanks so much for your feedback! Doing that put the quote under the paragraph but not under the entire section (it's still within the section). I'm going to look into it more!
– Suedehead
Nov 24 '18 at 20:21
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455160%2fnew-section-going-above-previous-section%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You should try to use bootstrap 4 in your code. getbootstrap.com/docs/4.0/components/navbar . Bootstrap navbars are easy to use and automatically fit with your browser.
– vidy
Nov 24 '18 at 4:40