Edit: I realized what I asked was very vague. I;m trying to move a paragraph to the right-center of the site. It is a landing page that I am trying to make, I am not sure what's causing the paragraph block to not move from its original spot. Below is the HTMl/CSS that I am using.
I've tried using margins, float, text-align
#test {
background-color: #000;
background: url(https://res.cloudinary.com/dod6u4bjy/image/upload/v1557191977/matteo-kutufa-1135337-unsplash.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
}
#testnav {
margin: 50px 220px;
list-style: none;
}
#wrapper {
margin: 165px 50px;
}
#testnav a:hover {
text-decoration: underline;
}
#testnav a {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
width: 100px;
}
li {
margin: 4px 0;
}
#socialnav li{
display:inline;
color: pink;
}
#socialwrap {
margin: 0 220px;
}
#socialwrap a:hover{
opacity: 0.7;
color: pink;
}
#logo {
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
}
.paragraph{
border: solid black 1px;
color: pink;
font-size: 24px;
text-align: center;
width:100%;
}
#intro {
border: solid red 1px;
display: inline-block;
width: 80%;
}
</style>
<body id="test">
<div id="wrapper">
<img src="https://res.cloudinary.com/dod6u4bjy/image/upload/v1557197589/geisha.png" id="logo" alt="">
<ul id="testnav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="socialwrap">
<ul id="socialnav">
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<div class="paragraph">
<div id="intro">This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</div>
</div>
</body>
</html>
It is unclear what you mean by "at the top", but the following will center your text in the middle. To do this you need to set the inner block both have a width and set it to display as inline-block. Then set the outer div to have text-align of center.
.paragraph{
border: solid black 1px;
color: pink;
font-size: 24px;
text-align: center;
width:100%;
}
#intro {
border: solid red 1px;
display: inline-block;
width: 80%;
}
<div class="paragraph">
<div id="intro">This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</div>
</div>
Note: When dealing with alignment it is often good to use a border to test where the blocks actually start and end. I have put a sample border in the above code. You can adjust the code and then remove the border when you are happy with it.
I have used the flexbox method to make the paragraph top center. Try the demo.
.paragraph {
Color: pink;
font-size: 24px;
margin: 0 auto;
width:100%;
display: flex;
flex-wrap: wrap;
}
.paragraph p {
align-items: center;
}
<div class="paragraph">
<p>This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>
Center Center aligned paragraph below snippet.
.paragraph {
Color: pink;
font-size: 24px;
display: flex;
flex-wrap: wrap;
height:500px; /*optional */
}
.paragraph p {
align-self: center;
text-align: center;
display: block;
width: 100%;
}
<div class="paragraph">
<p>This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>
Your problem is unclear. If you want the text at the top right try this:
.paragraph{
Color: pink;
font-size: 24px;
position:absolute;
top:0;
right:0;
}
<div class="paragraph">
<p >This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>
Related
Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me.
screenshot of issue: https://i.imgur.com/tJhbKS1.jpg
If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down
My main focus for this post is to make the text in the centre body box to basically have the title test to be in the centre and then the
test to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.
I also want it so the box is fixed to where it is and it doesn't ever move.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right; ">Login</li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.
Have a look into this Codepen.
https://codepen.io/dmnktoe/pen/wOyxor
(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)
I tried this and worked:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
I always use margin: 0 auto; and it works almost all the times
I am trying to make some sort of a "2 option choice game" by using two circles as buttons. Within the circle there should be a text, which is centered and does not stick out from the circle. But, when the text is too large, it sticks out underneath the circle.
HTML:
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bycicle with friends</li>
</ul>
</body>
CSS:
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul{
text-align: center;
padding: 0;
}
ul li{
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin:15px 20px;
color: black;
font-size: 26px;
text-align: center;
height: 300px;
width: 300px;
line-height: 300px;
-moz-border-radius: 50%;
border-radius:50%;
background-color: blue;
}
https://jsfiddle.net/sf3dquLs/
It's because of the value of the line-height to vertically center content. It works when there's one line but with two or more lines, it apply the 300px line-height and it is too much.
You can use display:table-cell combined with vertical-align: middle to make it works instead.
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul{
text-align: center;
padding: 0;
display: table;
margin: auto;
border-spacing: 30px;
}
ul li{
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin:15px 20px;
color: black;
font-size: 26px;
text-align: center;
display: table-cell;
height: 300px;
width: 300px;
-moz-border-radius: 50%;
border-radius:50%;
vertical-align: middle;
background-color: blue;
}
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bycicle with friends</li>
</ul>
</body>
The problem you are facing is due to the line-height:300px. The effect of this is that every line (also after word-wrapping) will occupy 300px. I see that you added this property to center your text. So if we remove the line we must find another way to accomplish the centering. Another possible way is to use a :before element and giving it a certain height.
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul {
text-align: center;
padding: 0;
}
ul li {
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin: 15px 20px;
color: black;
font-size: 26px;
text-align: center;
height: 300px;
width: 300px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
word-wrap: break-word;
}
ul li:before {
display: block;
height: 120px;
content: "";
}
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bicycle with friends</li>
</ul>
</body>
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.
I'm trying to get 3 divs to all be side by side below another div (that contains a h1 and a piece of small text below it). I'm having some trouble doing it.
What I am aiming for is something like this:
I've tried to put a div (that encompasses the 3 other divs) below the main title div.
I've tried this CSS:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
}
Here is a JSFiddle of what I've got so far: http://jsfiddle.net/4zx9gxgL/
Any suggestions/ideas?
You can use display:table-row and display:table-cell to make it work similar to a table.
For example:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
display: table-row;
}
.content-info div {
width:300px;
padding:25px;
margin: 25px;
display: table-cell;
}
And you can remove the .one{}, .two{}, .three{} in your css
There are several ways to go about this. CSS table, float and position offer three possible solutions. Depending on your overall objectives, here's a solution featuring inline-block (no table, no float, no position). This solution is very simple, stable, responsive, and easy-to-customize.
DEMO: http://jsfiddle.net/nayztL4y/2/
HTML
<div class="container">
<h1>H1 Header</h1>
</div>
<div class="container">
<div class="boxes"><h2>Box 1</h2></div>
<div class="boxes"><h2>Box 2</h2></div>
<div class="boxes"><h2>Box 3</h2></div>
</div>
CSS
.container {
width: 90%;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
text-align: center;
background-color: #ff0;
}
.boxes {
width: 25%;
height: 180px;
border: 2px dashed red;
margin: 8px 10px;
display: inline-block;
}
UPDATE
I've updated your fiddle demo, as well.
http://jsfiddle.net/4zx9gxgL/33/
so you want to put all thre divs side by side. i think it's that .
.main-content {
text-align: center;
font-family:'Montserrat', sans-serif;
position: relative;
}
.content-info {
position: relative;
width: 100%;
height: 110px;
top: 0px;
}
.yo{
display: inline-block;
width: 33%;
margin-right: -2px;
text-align:center;
}
https://jsfiddle.net/4zx9gxgL/30/
I had a go aswell ...
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
background: url("http://pre15.deviantart.net/52ce/th/pre/i/2011/174/b/c/candy_blur_abstract_hd_by_ivereor-d3jsglw.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
.yx {
text-align: center;
}
.main-content {
text-align: center;
font-family: 'Montserrat', sans-serif;
display: block;
position: relative;
top: 20%;
left: 50%;
margin-top: 100px;
height: auto;
margin-bottom: -100px;
/* bring your own prefixes*/
transform: translate(-50%, -50%);
}
.main-content h1 {
font-size: 62px;
}
.main-content h2 {
font-size: 32px;
}
.content-info {
text-align: center;
font-family: 'Montserrat', sans-serif;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.content-info div {
width: 300px;
padding: 25px;
margin: 25px;
}
.one {
display: inline-block;
max-width: 33%;
}
.two {
display: inline-block;
max-width: 33%;
}
.three {
display: inline-block;
max-width: 33%;
}
<body>
<div class="main-content yx">
<h1>Name Here</h1>
<h2>Hi, I'm Name.</h2>
</div>
<div class="content-info">
<div class="one">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="two">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="three">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
</div>
<footer></footer>
</body>
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
float:left;
width:100%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
float:left;
}
If the 3 bottom divs don't align correctly remove the margin settings, or adjust accordingly.
Having trouble centering some text links on my nav bar, margin left and right auto aren't working and i've tried setting display types to block/inline-block to no avail. The solution is probably staring me in the face I know but I really can't find it.
CSS:
.navmenu {
background-color: #1e1e1e;
background-image: url("../images/NavBar.gif");
background-position: top;
border-top: 1px solid #383838;
margin-bottom: 5px;
z-index:105;
}
.navlink {
margin-left:auto;
margin-right: auto;
width: 100%;
font-size: 28px;
text-transform: uppercase;
}
HTML:
<div class="navmenu">
<div class="navlink">
Home
Twitch
YouTube
Twitter
Facebook
Teamspeak
Forum
</div>
</div>
Use flex to it get more flexible:
.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }
Looks like you are setting .navlink width to 100%. Reduce it to the width of the rest of your content. I tried 800px and it worked well.
.nav-menu{ width: 100%; text-align: center; }
This worked for me.
You following CSS on .navlink
.navlink {
display: flex;
justify-content: center;
}
.navmenu {
background-color: #1e1e1e;
border-top: 1px solid #383838;
margin-bottom: 5px;
z-index:105;
}
.navlink {
font-size: 14px;
text-transform: uppercase;
display: flex;
justify-content: center;
}
.navlink a {
color: #fff;
}
<div class="navmenu">
<div class="navlink">
Home
Twitch
YouTube
Twitter
Facebook
Teamspeak
Forum
</div>
</div>
i have a another very good solution for you
<div id="nav">
<span>Twitter</span>
<span>Facebook</span>
<span>YouTube</span>
</div>
<!--Css style sheet for above code-->
#nav{
width:100%;
text-align:center;
}
#nav span a{
text-decoration:none;
padding:10px;
}
Try:
.navlink { text-align:center }
The top logo is centered because it has a fixed width. The nav bar is not centered because it is 100% of the screen width. If you make this a lower percent or use the same fixed width as the logo image, then it will work be centered.
.navlink {
margin-left:auto;
margin-right: auto;
width: 1024px;
font-size: 28px;
text-transform: uppercase;
}
Add text-align:center; to your nav-link class
.nav-link
{
text-align:center;
}