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.
Related
#import url('https://fonts.googleapis.com/css?family=Squada+One|Titillium+Web:400,700');
/*
font-family: 'Titillium Web', sans-serif;
font-family: 'Squada One', cursive;
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
min-height: 200px;
}
header {
padding: 0 10px 0 10px;
width: 1000px;
height: 65px;
float: left;
clear: both;
background-color: #090504;
}
#logo {
width: 500px;
height: 65px;
float: left;
}
h1 {
font-family: 'Squada One', cursive;
font-size: 57px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
}
nav {
width: 450px;
height: 65px;
float: right;
text-align: right;
}
nav p {
margin: 35px;
font-family: 'Titillium Web', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
word-spacing: 35px;
color: white;
}
#hero {
width: 1000px;
height: 473px;
float: left;
clear: both;
background-image: url(../assets/background-hero.jpg);
background-repeat: no-repeat;
}
#keymessage {
margin: 110px 0 0 10px;
/*top right bottom left*/
widows: 500px;
height: 200px;
float: left;
}
#keymessage h2 {
font-family: 'Titillium Web', sans-serif;
font-size: 36px;
font-weight: 200;
text-transform: uppercase;
color: white;
}
#keymessage h3 {
margin-top: -10px;
margin-bottom: 10px;
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
font-weight: 200;
text-transform: capitalize;
color: white;
}
#keymessage p {
margin-top: 50px;
padding: 5px 7px 5px 7px;
font-family: 'Titillium Web', sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
color: white;
background-color: #a31c1a;
display: inline;
border-radius: 5px;
border: 1px solid white;
}
#featured {
padding: 10px 0 0 10px;
width: 1000px;
height: 500px;
float: left;
clear: both;
}
.featured-item {
margin: 40px 5px 0 0;
width: 319px;
height: 500px;
float: left;
}
.featured-item h2 {
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
font-weight: 700px;
text-transform: uppercase;
}
.featured-item p {
margin-bottom: 10px;
font-family: 'Titillium Web', sans-serif;
font-size: 12px;
font-weight: 400;
}
.featured-button {
font-family: 'Titillium Web', sans-serif;
font-size: 10px;
font-weight: 200;
padding: 2px 5px 2px 5px;
color: white;
text-transform: uppercase;
background-color: #598527;
display: inline;
border-radius: 3px;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: right;
width: 25%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ozio Authentic Sushi</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
<h1>Ozio Authentic Sushi</h1>
</div> <!-- Logo ends -->
<nav>
<p>Menu SPECIALS LOCATIONS CONTACT</p>
</nav>
</header>
<section id="hero">
<div id="keymessage">
<h2>Japanese Fusion Cuisine</h2>
<h3>Authentic &am; Traditionally Inspired Japanese Dishes</h3>
<p>Try our New FALL Specialties ></p>
</div>
</section> <!-- Hero ends -->
<section id="featured">
<div class="featured-item">
<p><img src="assets/featured-pumpkin_chipotle%20soup.jpg" width="319" height="158" alt="Seasonal Soups - Pumpkin Chipolete Soup"/> </p>
<h2>Seasonal Soups</h2>
<p>Ozio offers a collection of soups each fall that warm hands and make hearts happy. Each fall our sous-chef explore great locally grown flavours to bring the best combinations to awake your senses with our seasoning. (Pumpkin Chipotle Soup)</p>
<p class="featured-button">More</p>
</div> <!-- Seasonal Soups end -->
<div class="featured-item">
<p><img src="assets/featured-maki_sushi.jpg" width="319" height="158" alt="Sushi - Maki SUshi"/> </p>
<h2>Savoury Sushi</h2>
<p>We have a wide selection of traditional sushi creations as well as creations unique to Ozio Authentic Sushi. We serve maki sushi for people who are becoming sushi lovers to hand-rolled temaki sushi for the more refined palette. </p>
<p class="featured-button">More</p>
</div> <!-- Savoury Sushi end -->
<div class="featured-item">
<p><img src="assets/featured-udon.jpg" width="319" height="158" alt="Undeniable UDon"/> </p>
<h2>Undeniable UDon</h2>
<p>Enjoy a traditional taste of Japanese Udon noodles. We serve Fall Udon soups warm to heat up your taste buds during the cooler weather. Udon come in a number of pairing styles for both the meat lovers and veggitarians - the choice is all yours.</p>
<p class="featured-button">More</p>
</div> <!-- Undeniable UDon end -->
</section> <!-- Featured ends -->
<!--
<section id="gallery">
<div class="gallery-pics">
<p><img src="assets/salad_bowl.jpg"></p>
<p><img src="assets/gravy_bowl.jpg"></p>
<p><img src="assets/orange_on_white.jpg"></p>
</div>
</section>
-->
<div class="row">
<div class="column">
<img src="assets/gravy_bowl.jpg" alt="Gravy">
</div>
<div class="column">
<img src="assets/two_bowls.jpg" alt="Bowls">
</div>
<div class="column">
<img src="assets/salad_bowl.jpg" alt="Salad">
</div>
</div>
<div class="column">
<img src="assets/sushi.jpg" alt="Sushi">
</div>
<div class="column">
<img src="assets/orange_on_white.jpg" alt="OrangeOnWhite">
</div>
<div class="column">
<img src="assets/shrimp.jpg" alt="Shrimp">
</div>
</div> <!-- Wrapper ends -->
</body>
</html>
How my website looks like right now
Okay so I want to make the sushi picture to be on the left side of the two bottom pictures which are on the bottom.
How can I do that in html and css?
(I am trying to post my code for HTML and CSS but there is an error coming saying, your post contains appears to contain code that is properly not coded)
The easiest way to do this would be to use width and padding to each be a percentage of the screen. For example, if you have 6 images and want 2 rows and 3 columns, you would want the width to be 30% with left and right padding of 1.66%. Each image with left and right padding would be 33.33% of the screen.
img {
width: 30%;
max-height: 100px;
float: left;
padding: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://img.grouponcdn.com/deal/hfefAup1zQWBE2K8sWURgS27xax/hf-846x508/v1/c700x420.jpg">
<img src="https://www.verywellhealth.com/thmb/6eCa_ReyK0zfrapJOXoVuD-boME=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-691112817-5a4eef095b6e240037fc6278.jpg">
<img src="https://img.grouponcdn.com/bynder/Ri5HEhJFF4o6PFz5WCG2rrSNN4A/Ri-2048x1229/v1/c700x420.jpg">
<img src="https://assets3.thrillist.com/v1/image/1559020/size/tmg-slideshow_l.jpg">
<img src="https://media.fromthegrapevine.com/assets/images/2015/10/vegetarian-sushi-rolls.jpg.480x0_q71_crop-scale.jpg">
<img src="https://images-gmi-pmc.edge-generalmills.com/d1584f73-4865-4b8b-b3e5-7f9ca741366f.jpg">
</body>
</html>
I am trying to align everything up, making the sections align and so forth. But I can't seem to get each section to line up.
Here is the link: https://codepen.io/pmurtagh4/pen/GXNzrJ
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-right: 30%;
margin-left: 10%;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 120%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800px;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600px;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section <footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Setting margin: auto, removing display: block and setting width to 100% instead of 120% makes it look quite okay. Is this what you were looking for?
https://codepen.io/anon/pen/PdmKWQ
The main issue you are having is because of .sign-up-form width styling. It is currently set to 120%, which is making the content weird. Remove it or change it to 100%.
Second issue I found is related to font-weight. The value of it is never in px. Review doc for more info.
Third issue remove the default margin on the page.
Updated code snippet -
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 50%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin: 5%;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 100%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
P.S. A lot of your tags don't have a closing tag. You should fix them as well.
body {
background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
font-size:50px;
font-family: 'Raleway', sans-serif;
position: absolute;
color: white;
left: 790px;
}
.title {
position: relative;
}
.text {
color: white;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
line-height: 10px;
}
.nfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black|50%;
}
.sfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black;
}
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:750px;
margin-bottom: 500px;
background-color:black;
position: absolute;
}
.text-desc {
color:white;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
}
.buttonnfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonof {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
background-color:#05a2aa;
}
.buttonsfa:hover{
background-color:#05a2aa;
}
.buttonof:hover{
background-color:#05a2aa;
}
<!doctype html>
<html>
<head>
<title> SpeedyAlts </title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class='bg'>
<a class="title"> SpeedyAlts </a>
<div class="nfa">
<center>
<a class="text"> NFA Account </a>
<br>
<br>
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
</center>
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="sfa">
<center>
<a class="text"> SFA Account </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="of">
<center>
<a class="text"> Optifine Cape </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
</div>
</div>
<script src="https://embed.selly.gg"></script>
</body>
</html>
I have got no idea why it is not working. For some reason with margin-top margin-left etc. It's not moving it up nor down with any of the margins. Could Anyone help? I am not that good at HTML nor with CSS so excuse any code that is badly formatted if there is any. Also, if anyone could give me any advice on problems like this in the future that would be helpful. Thanks.
Your div in question has position:absolute. You will need to either remove this, or use top and bottom, left and right to move it on the page. In your example, if you'd like to move the element up on the page you will need to declare:
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
background-color:black;
position: absolute;
left:750px;
bottom: 500px;
}
Please keep in mind this means your element will always be 500px from the bottom and 750px from the left. It is better to use percentage values.
To move it up, you can try one of these to the class .of :
Margin approach
margin-top:-50px;
Absolute positioning approach
top: 300px; //change this value as needed
Transform approach
transform:translateY(-50px);
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;
}
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>