css positioning i am having a problem with positioning
0
i am new to web development, I have a small problem with positioning i placed a
element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>javascript html css
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
add a comment |
0
i am new to web development, I have a small problem with positioning i placed a
element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>javascript html css
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
1
Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line
– Julian Espinosa
Nov 20 '18 at 19:44
2
You should read aboutposition: absoluteand what it actually does. It is almost certainly the wrong thing to be using here.
– Turnip
Nov 20 '18 at 19:47
add a comment |
0
0
0
i am new to web development, I have a small problem with positioning i placed a
element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>javascript html css
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
i am new to web development, I have a small problem with positioning i placed a
element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>javascript html css
javascript html css
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
edited Nov 20 '18 at 23:20
jeanpaulxiao
1635
1635
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
asked Nov 20 '18 at 19:39
Ross LintonRoss Linton
123
123
1
Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line
– Julian Espinosa
Nov 20 '18 at 19:44
2
You should read aboutposition: absoluteand what it actually does. It is almost certainly the wrong thing to be using here.
– Turnip
Nov 20 '18 at 19:47
add a comment |
1
Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line
– Julian Espinosa
Nov 20 '18 at 19:44
2
You should read aboutposition: absoluteand what it actually does. It is almost certainly the wrong thing to be using here.
– Turnip
Nov 20 '18 at 19:47
1
1
Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line
– Julian Espinosa
Nov 20 '18 at 19:44
Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line
– Julian Espinosa
Nov 20 '18 at 19:44
2
2
You should read about
position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.– Turnip
Nov 20 '18 at 19:47
You should read about
position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.– Turnip
Nov 20 '18 at 19:47
add a comment |
2 Answers
2
active
oldest
votes
0
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
1
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
add a comment |
1
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
answered Nov 20 '18 at 20:03
EhsanEhsan
111
w3school position property
– Ehsan
Nov 20 '18 at 20:05
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%2f53400360%2fcss-positioning-i-am-having-a-problem-with-positioning%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
1
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
add a comment |
0
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
1
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
add a comment |
0
0
0
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
answered Nov 20 '18 at 19:53
jeanpaulxiaojeanpaulxiao
1635
1635
1
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
add a comment |
1
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
1
1
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
it worked thank you for your suggestion.
– Ross Linton
Nov 20 '18 at 20:27
add a comment |
1
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
answered Nov 20 '18 at 20:03
EhsanEhsan
111
w3school position property
– Ehsan
Nov 20 '18 at 20:05
add a comment |
1
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
answered Nov 20 '18 at 20:03
EhsanEhsan
111
w3school position property
– Ehsan
Nov 20 '18 at 20:05
add a comment |
1
1
1
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
answered Nov 20 '18 at 20:03
EhsanEhsan
111
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
answered Nov 20 '18 at 20:03
EhsanEhsan
111
answered Nov 20 '18 at 20:03
EhsanEhsan
111
answered Nov 20 '18 at 20:03
EhsanEhsan
111
answered Nov 20 '18 at 20:03
EhsanEhsan
111
111
w3school position property
– Ehsan
Nov 20 '18 at 20:05
add a comment |
w3school position property
– Ehsan
Nov 20 '18 at 20:05
w3school position property
– Ehsan
Nov 20 '18 at 20:05
w3school position property
– Ehsan
Nov 20 '18 at 20:05
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%2f53400360%2fcss-positioning-i-am-having-a-problem-with-positioning%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
1
Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line
– Julian Espinosa
Nov 20 '18 at 19:44
2
You should read about
position: absoluteand what it actually does. It is almost certainly the wrong thing to be using here.– Turnip
Nov 20 '18 at 19:47