I want center text inside rounded rectangle (both vertically and horizontally), and also center this banner on page too, not sure how to make this correctly. The other elements need be centered too. Please advice how to make things correctly.
Here is code:
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
width: 450px;
height: 40px;
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';
font-size: 14px;
}
#rcorners {
font-family: 'Roboto';
font-size: 48px;
font-weight: 700;
font-style: normal;
Helvetica,
sans-serif;
}
p {
font-family: 'Roboto';
font-size: 32px;
Helvetica,
sans-serif;
}
.main {
margin-top: 20%;
//font-size: 35px;
}
footer {
font-size: 14px;
}
<head>
<title>centered construction</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div class="main">
<h1 id="rcorners">Centered Text No1</h1>
<p>LOREM IPSUM DOLOR </p>
</div>
<footer>
<div>© Lorem Ipsum Dolor </div>
</footer>
</div>
remove width: 450px; and height: 40px from #rcorners.
Otherwise, if you want to keep it 450px wide, you may add margin: auto to #rcorners. It will solve your problem.
#import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
/* width: 450px;
height: 40px; */
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';font-size: 14px;
}
#rcorners {
font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif;
}
.main {
margin-top: 20%;
//font-size: 35px;
}
footer {
font-size: 14px;
}
<div id="wrapper">
<div class="main">
<h1 id="rcorners">Centered Text No1</h1>
<p>LOREM IPSUM DOLOR </p>
</div>
<footer>
<div>© Lorem Ipsum Dolor </div>
</footer>
</div>
To center the button add margin: 0 auto and to center the text you can easily do it with flexbox I think. The code will look something like:
#rcorners {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
You can read more about centering with flexbox here: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I have edit your CSS. but i dont get why you gave height on your #rcorners element. Hope this will help you
CSS
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
width: 450px;
/*height: 40px; */ /*it is less height for 2 line text*/
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';font-size: 14px;
}
#rcorners {
font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif;
}
.main {
margin-top: 20%;
margin-left: auto;
margin-right: auto;
display: inline-block;
width: auto;
/*font-size: 35px; */
}
footer {
font-size: 14px;
}
Related
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
I'm trying to align my input sections in the center of the div, with the labels left aligned on the left of the input. I can't seem to get the input sections to align to the left of each other, in the center of the div. Bear with me, I'm incredibly new to coding of any sort so my code might not be the best.
Here is my html and css thus far:
This is what I would like it to look like. Label on the left, input field in the center. IMG
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent">Plot Name <input class="lpks-input"></div>
<div class="othercomponent">Other Name <input class="lpks-input"></div>
</body>
Here is a JSFiddle to show what I have now:
https://jsfiddle.net/h8vo2opv/
You can use width for div. And place <label> for your text in left section and put style float:left;
set width for label and input section also. check my code this will help you.
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width:100%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-size: medium; */
font-weight: bold;
display: block;
align-items: center;
background: wheat;
}
.othercomponent input {
width: 60%;
float:left;
}
.othercomponent lebel {
float: left;
width:30%;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent"><lebel>Plot Name </lebel><input class="lpks-input"></div>
<div class="othercomponent"><lebel>Other Name </lebel><input class="lpks-input"></div>
</body>
If i understood well :) you want them in center of white div :
HTML :
<body class="body">
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"><input class="lpks-input"></span></div>
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"> <input class="lpks-input"></span></div>
CSS:
.body {
background-color: #EDEDED;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
text-align:center;
font-weight: normal;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
.left{
float:left;
}
You can add a bit of markup and then style your form like a table. This will line up the inputs based on the label widths.
.form {
display: table;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
/* display: block; */
display: table-row;
}
.lpks-input {
/* width: 35%; */
display: inline-block;
padding-right: 5px;
}
label,
.input-container {
display: table-cell;
vertical-align: middle;
}
<body class="body">
<form>
<div class="othercomponent"><label for="input1">Plot Name</label><div class="input-container"><input id="input1" class="lpks-input"></div></div>
<div class="othercomponent"><label for="input2">Other Name</label><div class="input-container"><input id="input2" class="lpks-input"></div></div>
</form>
</body>
I just finished doing HTML/CSS with Codecademy. One of the "projects" there is to make your own resume. I took the HTML/CSS from that project, and I'm tweaking it to make the resume look better. I'm currently trying to put one div - the part of the resume where text about my career objective will go - under another div, the header. It is, however, not working. The div for the "objective" is currently behind the div for the header. How on earth do I get that second div for the objective to go underneath the first div?
I read something about how I should float the header div to the left and then put clear:both; in the div for the objective, but that's not working.
HTML
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div id="objective"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
CSS
div {
border-radius: 5px;
}
#header {
z-index:1;
position: fixed;
width: 98%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
float:left;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
For example:
<div class="div1">KSD;JSFAJ;SSD;</div>
<div class="div2">KSD;JSFAJ;SSdfaD;</div>
Css with float:
.div1 {
float: none;
}
.div2 {
float: none;
}
Css with display:
.div1 {
display: inline;
}
.div2 {
display: inline;
}
Here is the updated HTML :
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div style="height:50px;width:98%;">
</div>
<div id="objective">Objective goes here</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
This will show the objective div underneath header div.
Also this is a link for your reference.
Here is update CSS, This show the responsive your html
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border-radius: 5px;
}
#header {
width: 98%;
margin: 0 auto;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
Don't ever forget to add this code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
So that you won't have empty space on your div
DEMO
I think its easier using bootstrap, here is the link http://getbootstrap.com/css/
What bootstrap does is that it creates containers that wrap the content of your site. It divides the site in rows. To do that you need and . With this bootstrap you can divide your rows in 12 cells.
Here is an example of how I divided my portfolio in 3 columns of 4 spaces
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<h3 class="text-body"><u>Block vs Inline</u>
</h3>
<p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
<span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Selectors</u></h3>
<p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Responsive Layout</u></h3>
<p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
</div>
</div>