Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm fairly new to coding, so I know it's far from perfect! I'm just looking for some help getting this page to look decent on a mobile phone. Most likely, the text and picture will stack; I'm not sure what to do about the header and footer.
<body>
<h1 div id= "header"> </h1>
<div id="logos"> <img id="logo" src= "https://msu.edu/~donald88/portfolio/logo02.png" </div>
<ul id="navigation">
<li> About</li>
<li> Portfolio</li>
<li> Résumé</li>
<li> Contact</li>
</ul>
<h2> Project Spotlight </h2>
<h3> Refugee Development Center Newsletters </h3>
</br> </br>
<div id= "main">
<div class="project-image"><img src= "https://msu.edu/~donald88/portfolio/rdcnewslettertwo.png" alt="RDC newsletter" /></div>
<div id="spotlight-text"> <p class="project-text"> This is a project I did in a class during my freshman year of college. A member of the RDC staff came to my class to
give a general overview of what she wanted, and then we divided into teams to design two newsletters for this awesome organization. My team
consisted of three members, and we all worked together to write and design the newsletters. I specifically wrote the story pictured on the
left in the summer 2016 newsletter about the GLOBE camp program. I also helped collaborate on the design of both newsletters as far as color choice,
text formatting, and article length. I then edited my other team members' articles and helped assemble everything as a PDF that could be printed
or looked at online. Finally, my team gave a presentation to the rest of my class and the RDC staff member about our newsletter and the choices
we made while creating it. The client only had positive things to say about our design! </p>
<p class="project-text"> Completed: April, 2016 <br/>
Category: Web/Print </p>
</div>
<div class="back-button"> Back to portfolio </div>
<div class="portfolio-button"> See full project </div>
</div>
</p>
<div style="clear: both"></div>
<div style="clear: both"></div>
<footer class="footer">
<div class="container">
<div id="ftr-wrap">
<div class="ftr-links">
<div class= "table">
<ul>
<li> <div class="icons"><img src= "http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png"></div></li>
<li><div class="icons"><img src= "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"></div></li>
<li><div class="icons"><img src= "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png"></div></li>
<li><div class="icons"><img src= "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/linkedin-512.png"</div></li>
</div>
</ul>
</div>
<div class="copyright-amazon">
<p class="copyright">© Copyright Kelsie Donaldson 2016</p>
<p class="amazon"><a href="https://www.instagram.com/kelsiedonaldson/"><img
</div>
</div>
</div>
</footer>
CSS:
Body {
background-image: url("http://www.publicdomainpictures.net/pictures/140000/velka/grey-white-background.jpg");
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
#header {
height: 120px;
width: 100%;
min-width: 1200px;
background-color: #b196db;
text-align: center;
font-family: 'Yesteryear', cursive;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 120px;
font-size: 100px;
position: relative;
}
#logo {
height: 110px;
max-width: 880px;
padding: 30px;
padding-top: 10px;
padding-bottom: 28px;
margin-top: -10em;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}
#navigation li {
display: inline;
list-style-type: none;
padding: 50px;
float: center;
text-decoration: none; }
#navigation {
text-align: center;
min-width: 1160px;
height: 30px;
background-color: #35b7ab;
margin-top: 0px;
top: 140px;
padding-top: 15px;
font-family: Lucida bright;
font-size: 20px;
color: white
}
a {
text-decoration: none;
color: white;
}
a:hover{
color: #867289; }
h2 {
font-size: 50px;
color: #66096c;
font-family: 'Philosopher', sans-serif;
text-align: center; }
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
body {
padding:0;
margin: 0;
}
.footer {
position: absolute;
margin-bottom: -30;
margin-top: 10px;
bottom:0;
width:100%;
min-width: 1200px;
background-color: #b196db;
}
.footer p {
color: #fff;
font-size:1em;
display: inline-block;
position: relative;
bottom: 10px;
float: right;
}
.container {
max-width: 1674px; /* adjust to allow for padding as needed */
padding:0 50px; }
#ftr-wrap {
display:table;
table-layout:fixed;
width:100%;
margin:0 auto; }
#ftr-wrap > div:nth-child(1) {text-align:left;}
#ftr-wrap > div:nth-child(2) {text-align:center;}
#ftr-wrap > div:nth-child(3) {text-align:right;}
.ftr-links ul {
padding: 0;
display: inline-block;
position: relative;
margin: auto;
width: 100%; }
.table {
position: relative;
display: table;
margin: 0 auto;
display: inline-block;
list-style: none;
margin-left: 45%;
bottom: -50; }
.ftr-links ul li {
display: inline-block;
padding-right: 15px;
font-size:.75em; }
.ftr-links ul li a {
display: inline-block;
color: #fff;
margin: 0; }
.icons > img {
display: inline;
height: 40px;
width: 40px;
padding-bottom: 20px; }
#main{
height:800px;
width:100%;
}
#main {
height:500px;
width:100%;
}
.project-image{
width:40%;
color: #66096c;
height:100%;
float:left;
margin-left: 7em;
padding-right: 3em;
}
div#spotlight-text {
width:40%;
height:100%;
float:left;
font-family: Lucida Bright;
font-size: 20px;
color: #66096c;
margin-right: 2%;
}
h3 {
font-size: 30px;
color: #867289;
text-align: center;
font-family: Lucida Bright;
I understand that you want your page to look better when it gets scaled down to mobile but if you want to accomplish this, I highly recommend you check out Media Queries
They can help you accomplish what you're looking for. Also, please don't forget when using media queries to put this at the closing of your head tag in your HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I am making a ten-page website and I made the general layout but I can't figure out how to position images and text in the div box. Nothing works. In this particular page I want the image to be on the top right of the Div and the text to be on the left. I feel if I can get the general idea of how this works I will be able to do it for the other pages as well.
Below is my code:
<!DOCTYPE html>
<html>
<style>
h1{
color:white;
font-size: 50px;
font-family: ultra;
}
p{
color:white;
}
h2{
color:white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
body {
background-color:#252525;
background-attachment:fixed;
background-position: 50% 50%;
background-repeat:no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 90%;
height: 1000px;
</style>
<body>
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/>
<div>Content for New Div Tag Goes Here</div>
</div>
</div>
</body>
</html>
You can achieve what you are looking for, with float: right property. Try this code.
h1{
color:white;
font-size: 50px;
font-family: ultra;
}
p{
color:white;
}
h2{
color:white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
background-color:#252525;
background-attachment:fixed;
background-position: 50% 50%;
background-repeat:no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 90%;
height: 1000px;
}
.main img {
float: right;
margin-left: 10px;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<body>
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="http://via.placeholder.com/300" class="expand" width="100" height="100" alt=""/>
<div class="text">Content for New Div Tag Goes Here</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Your code is wrongly finished, look at the below sample from your code, put another </div> tag.
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/>
<div>Content for New Div Tag Goes Here</div>
</div>
</div>
if you place image on the top right and text on the left, then simple use bootstrap for making grids like .col-md-6 .col-sm-12 .col-xs-12 in both image and text
OR
if you wrap the text around the image, then use float: right on the image and it will move to te right and text will wrap the image.
By the way, the code looks so messy, Don't put styles inside HTML page, use an external stylesheet for that.
I am trying to create a 3 column webpage. My bullets for the unordered and ordered lists are not aligning with the corresponding text in the column. Also, for my middle column the text is scrunched together. How do I space the paragraphs apart?
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
}
#container {
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto;
/*will center your page*/
margin-right: auto;
/*will center your page*/
}
h1,
h2 {
text-align: center;
}
li {
text-align: center;
padding: 5px;
}
h4 {
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header {
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #navigation {
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content {
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #content #sidebar1 {
background-color: #ADA9A0;
float: left;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1 {
background-color: white;
min-height: 300px;
margin-bottom: 3px;
width: 50%;
float: left;
margin: 0;
}
#container #content #sidebar2 {
background-color: #ADA9A0;
float: right;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #footer {
padding-top: 1px;
border-top: 1px solid black;
}
.CR {
text-align: left;
position: fixed;
}
.Instructor h4 {
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a {
color: white;
text-decoration: none;
/*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover {
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="HTML.CSS.css" />
<title>My Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
Home
HTML/CSS
PHP
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li>Lectures</li>
<li>Syllabus</li>
<li>Helpful Videos</li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website.
<p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across
several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p>
</p>
</div>
<div id="sidebar2">
<h4> Homework and Projects </h4>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Welcome Button</li>
<li>2-column Webpage</li>
</ul>
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<h4>Copyright Natalie Fofanova </h4>
</div>
</footer>
</body>
</html>
Declare a line-height to the 2nd section.
Example
#second p {
line-height: 20px;
}
http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
text-align: justify;
text-align-last: left;
padding-left: 10px;
padding-right: 10px;
}
Add this to your CSS hope it will work
As your code should change like the below code:
#content ul{
margin:0;
padding:0;
display:block;
}
#content ul li {
text-align: center;
padding: 0px;
list-style-type:none;/* if you really wants bullets remove this line*/
}
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
line-height:20px;
}
#column1 p{padding:4px;}
.clearfix{clear:both;}
To change your min-height should be min-height: 320px; instead of 300px.
You want to more clarity in this question. please tell me we will suggest some more points.
i will update your code jsfiddle.
Demo
p{
padding: 0 0 10px 0;
}
just padding down would make sure space between all paragraph
http://i.imgur.com/sTt59s4.png
Problem #1: Text in footer disappeared. Just randomly noticed while I was busy aligning other elements that the text in my footer was gone.
http://i.imgur.com/WyHf37d.png
Problem #2: Paragraph won't wrap. If I hadn't put display: inline the text would disappear completely.
Problem #3: Images float on top of my nav bar. When I scroll down, the images pass on top of the bar and it looks weird.
Feel free to correct my coding in general. I am a noob. Thanks.
HTML:
<head>
<meta charset="utf-8">
<title>BIKES & BITES | ABOUT</title>
<link href="styles/Hortaleza-Kyla-styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700italic,900italic,900' rel='stylesheet' type='text/css'>
</head>
<header>
<section id="title-slogan">
<h1>BIKES & BITES</h1>
<p>EAT • BIKE • LOVE</p>
</section>
<nav id="main-nav">
<ul>
<li><img src="index-images/B&B-logo.png" id="logo"></li>
<li>HOME</li>
<li>ABOUT</li>
<li>ADVENTURES</li>
<li>HUNGRY?</li>
<li>CALENDAR</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="main-content">
<h1>ABOUT</h1>
<section id="about-bb">
<img src="02-about-images/B&B-logo2.png">
<p id="desc"><b>BIKES & BITES</b> brings you cycling and food all wrapped into one delicious burrito. It’s for anyone, everyone; it’s for people like you! People who love health and at the same time, love good food. Whether you’re just thinking of buying a bike, a total newbie, or even a pro, we welcome everyone to the community. We're just here to have a good time!
<b>BIKES & BITES</b> aims to share with its readers the beauty and enjoyment of cycling, with the help of the natural beauty of the Philippines. It aims to encourage others to try taking up the sport—or any sport for that matter—and at the same time a healthy lifestyle (but still be able to eat what you want!). <b>BIKES & BITES</b> will provide you with routes, recipes, and many more, to help you with every aspect of your cycling life.</p>
</section>
<section id="about-creator">
<img src="02-about-images/02-about-profile.png">
<p><h3>Kyla Hortaleza</h3>
<i>Founder and Editor</i><br><br>
Despite being an avid cyclist and part-time duathlete, Kyla Hortaleza is currently an Interdisciplinary Studies major in Ateneo de Manila University. She is 22-years-old and has no experience of writing a serious blog whatsoever, but finds delight in sharing her experiences to others through her pictures. She believes in the power of juicing and the power of carbohydrates (no to fad diets but yes to moderation!). She loves promoting cycling and believes that it is the sport that anyone can try and enjoy regularly.</p>
</section>
</section>
<footer>
<p>Created by Kyla Hortaleza | 2015</p>
</footer>
</body>
CSS:
body {
margin: auto;
background: #fdedf1;
padding-top: 80px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
#aboutpage #main-content #about-bb p {
display: inline;
}
#aboutpage #main-content {
overflow: scroll;
}
#aboutpage #main-content p {
font-family: 'Montserrat', sans-serif;
padding-top: 200px;
}
#aboutpage #main-content img {
width: 300px;
height: 300px;
}
#aboutpage #main-nav a.about {
color: #f8bfcd;
}
#aboutpage #main-nav a.about:hover {
color: #ccf0e2;
}
#aboutpage #main-content #about-bb {
width: 400px;
float: left;
position: relative;
padding: 75px 0px 75px 200px;
}
#aboutpage #main-content #about-creator {
width: 400px;
float: left;
position: relative;
padding: 75px 0px 75px 75px;
}
#aboutpage #main-content #about-creator img {
padding-left: 45px;
}
#main-content h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
body #title-slogan h1, p {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-top: -21px;
}
body #title-slogan-hungry h1, p {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-top: -194px;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
}
#logo {
width: 60px;
height: 60px;
position: relative;
left: -10px;
top: -1px;
padding: 0;
margin: 0;
vertical-align: middle;
}
#main-nav {
background: white;
overflow: auto;
text-align: left;
padding-left: 70px;
}
#main-nav ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-variant-caps: all-small-caps;
font-weight: 600;
}
#main-nav ul li {
display: inline-block;
padding-top: 15px;
}
#main-nav a {
display: block;
text-align: center;
height: 50px;
color: black;
text-decoration: none;
padding: 0px 5px;
}
#main-nav a:hover {
color: #ccf0e2;
}
footer p {
background: black;
overflow: auto;
text-align: center;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
margin-top: 50px;
width: 100%;
height: 50px;
}
I've removed
white-space:nowrap;
from
body #title-slogan h1, p
body #title-slogan-hungry h1, p
It should look like this now:
body #title-slogan h1, p {
overflow: hidden;
margin-top: -21px;
}
body #title-slogan-hungry h1 {
text-indent: 100%;
overflow: hidden;
margin-top: -194px;
padding: 0;
Oh, and you've forgotten opening a <body> tag before header starts.
I'm helping working on a website for a friend. I'm very new to this and can't get the white container to stretch to the very bottom of the browser page.
Here is the link
html, body {
background-color: transparent;
text-align:center;
text-rendering: optimizelegibility;
margin: 0px;
}
#wrapper {
width: 100%;
max-width: 1088px;
margin: 0 auto;
}
#sitecontainer {
position: relative;
background-color: rgba(255,255,255,0.84);
width: 80%;
max-width: 1038px;
margin: 0 auto;
height: 100%;
padding-right: 30px;
padding-left: 30px;
top: 0;
min-height: 100%;
}
main {
width: 100%;
height: 100%;
margin: 0 auto;
line-height: 1.4;
position: relative;
}
a {
font-family: 'roboto', sans-serif;
font-weight: 500;
color:#3d7109;
text-transform:uppercase;
text-decoration: none;
}
a #footer{
font-family: 'roboto', sans-serif;
font-weight: 300;
text-decoration:none;
text-transform:none;
}
a:hover {
opacity: 0.7;
}
header img {
width: 100%;
max-width: 300px;
font-style: none;
padding-top: 30px;
}
header h2 {
font-family: 'roboto', sans-serif;
font-weight: 500;
font-size: 14px;
text-align: center;
}
h1 {
font-family: 'roboto', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align:center;
font-style:normal;
}
/* ===================
Nav
=================== */
nav {
margin: auto;
margin-bottom: 30px;
max-width: 700px;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
#menu {
padding: 0;
margin-right: 10px;
margin-left: 10px;
}
#menu li {
display: inline-block;
margin-right: 30px;
margin-bottom: 5px;
font-size: 17px;
text-align: center;
}
#menu li:last-child {
margin-right: 0;
}
/* ===================
Content
=================== */
p {
font-family: 'roboto', sans-serif;
font-weight: 300;
text-align:center;
}
.indexpage article {
margin-bottom: 85px;
}
article:before {
content: "";
display: block;
background: #3f474c;
width: 6px;
height: 1px;
margin-bottom: 16px;
}
.permalinkpage article:before {
margin: 0 auto 16px;
}
.permalinkpage .post {
margin: auto;
font-size: 14px;
letter-spacing: 0.9px;
}
.permalinkpage p {
margin: 24px 0;
}
/* Text */
.permalinkpage .text .post {
width: 100%;
max-width: 500px;
margin: auto;
}
<div id="wrapper">
<div id="sitecontainer" height="100%">
<!---------- HEADER / LOGO ---------->
<header class="wrapper clearfix">
<section id="blog-title">
<h1 style="margin-top: 0px; margin-bottom: 0px;">
<img src="files/images/logo.gif" alt="Healing by Andrea"/>
</h1>
</section>
</header>
<!---------- NAV START ---------->
<nav>
<ul id="menu">
<li>
Home
</li>
<li>
Crystals
</li>
<li>
Bio
</li>
<li>
Rates
</li>
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
<!---------- NAV END ---------->
<main class=" permalinkpage">
<!---------- CONTENT ---------->
<div class="grid-sizer"></div>
<article class="text">
<section class="post">
<h1 class="post-title" >"What is Reiki?"</h1>
<article class="type_description"><div class="article-content">
<div class="boxed">
<p>The word Reiki is made of two Japanese words - Rei which means "God's Wisdom or the Higher Power" and Ki which is "life force energy". So Reiki is actually "spiritually guided life force energy."
</p>
<p>A treatment feels like a wonderful glowing radiance that flows through and around you. Reiki treats the whole person including body, emotions, mind and spirit creating many beneficial effects that include relaxation and feelings of peace, security and wellbeing. Many have reported miraculous results.
<br>
Reiki is a simple, natural and safe method of spiritual healing and self-improvement that everyone can use. It has been effective in helping virtually every known illness and malady and always creates a beneficial effect. It also works in conjunction with all other medical </p>
</div>
</div>
</article><!-- Javascript Assets --><p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script><script src="http://static.tumblr.com/e6lc7yi/7rPn0ryx1/gobig-plugins.js" type="text/javascript"></script></p>
<section class="post-meta">
</section>
</section>
</article>
</main>
</div>
</div>
Any ideas?
html, body {
height: 100%;
}
#wrapper {
height: 100%;
}
Adding these will help you achieve what you are after
HTML & CSS question: For this assignment we are not supposed to use floats, but instead only use block, inline-block, and inline. Even though I have set the side-bar div to inline block, and the main-content div to inline-block, and the width less then the wrapper width, It is not aligning left and right. Can anyone please help me understand what I need to fix.
I know this is a lot of code to put in here, but I am not sure what I need to put in, and what I don't. I looked around and tried to find an answer but if this question has already been asked and solved please reference me. Thanks.
Google drive of the html and css (sorry to have to send the whole file, I was not sure what it was so I decided to attach the whole html and css file.)
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Word Stream</title>
<meta name="description" content="Pay per click search marketing software offers a means for accomplishing two core requirments for PPC optimization"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Header (Logo and Nav) -->
<div id="header">
<div id="nav">
<ul>
<li>Products</li>
<li>|</li>
<li>Products</li>
<li>|</li>
<li>Blog</li>
<li>|</li>
<li>Support</li>
<li>|</li>
<li>AdWords Grader</li>
</ul>
<form id ="login">
<label>
<button class="button" type="button">Login</button>
</label>
</form>
</div>
<div id="logo">
<img src="logo.png" alt="Logo">
<span id="word">Word</span>
<span id="stream">Stream</span>
</div>
</div>
<!-- Main content section -->
<div id="main-page">
<div id="banner">
<h1>WordStream Internet Marketing Software</h1>
</div>
<!-- main side of page -->
<!-- Side bar (info and Advertisment) -->
<div id="side-bar">
<div id="side-bar-content">
<h1>Wordstream for PPC</h1>
<h2>Drive More Profits Through PPC!</h2>
<p>Get Started with <span class="blue">Wordstream</span>'s Powerful PPC Platform Today</p>
<form>
<label>
<button class="button1" type="button">SCHEDULE DEMO</button>
</label>
<label>
<button class="button2" type="button">FREE TRIAL</button>
</label>
</form>
<p class="center">(No Credit Card Required)</p>
</div>
<!-- side bar ad -->
<div id="side-bar-ad">
<div id="wrap-img-text">
<h3>How does your adWords performance measure up?</h3>
<p>Get a free, instant report with the WordStream Adwords Performance Grader</p>
<form>
<label>
<button class="graded" type="button">Get Graded Today</button>
</label>
</form>
</div>
<img class="img" src="left_content_ad1.png" alt="Oops, your browser isn't showing this image.">
</div>
</div>
<div id="handle">
<div id="upper-bar">
<img class="inline" src="home_button.png" alt="home">
<span class="blue">PPC</span>
<!-- contact info and phone pic -->
<div id="contact" class="inline">
<img class="inline phone" src="phone.png" alt="phone">
<!-- text only -->
<div class="inline">
<p class="top">
<span class="hours">Mon - Fri 9 a.m. - 5 p.m. (EST)</span>
<br>
<span class="number">855.967.3787</span>
<br>
<span class="int-number">International: +1.617.963.0555</span>
</p>
</div>
</div>
</div><br/>
<!-- main content starts here -->
<div id="main-content">
<h1>PPC - Achieve More Efficiant Pay-Per CLick (PPC) Marketing</h1>
<p><span class="bold">PPC</span>(pay-per click) search marketing software offers a means for accomplishing two core requirements for PPC optimization:</p>
<ul>
<li>
<span class="bold">PPC Automation</span>-While it would be impossible (and inadvisable!) to automate every aspect of pay-per-click advertising, automating away redundant, time-consuming tasks affords you a means of increasing productivity. Often, this means being able to produce an amount of work that would otherwise have been unachievable for you and your business.
</li>
<li>
<span class="bold">PPC Management</span>-PPC management refers to the maintenance and prioritizing of paid seach marketing tasks. Being able to oversee various aspects of your account while assigning each item on a seemingly endless to-do list an appropriate value can make or break an online ad campaign.
</li>
</ul>
<p>
WordStream's PPC software is specifically designed to aid in these two PPC search engine marketing areas. This page will show you both the processes the software is automating for you, and the best course of action to take where workflow is concerned.
</p>
<!-- Bordered *Trial* box with logo and button -->
<div id="trial-box">
<img src="content_ad.png" alt="ad">
<div class="text-button">
<h3>Drive More Profits Through PPC - Try Our Platform FREE</h3>
<p>Get instant access to WordStream's innovative <span class="bold"> Quality Score</span> and <span class="bold">Account Management</span> tools through our <span class="bold"> FREE 7-day Trial</span>. Risk Free, No Credit Card Required and No Automatic Signups.</p>
<form>
<label>
<button class="get-started" type="button">Get Started Today!</button>
</label>
</form>
</div>
</div>
<!-- under the trial box -->
<h2>Automation And Your PPC Search Campaign</h2>
<p>Another two lines of text that I really dont feel like copying. Soooo much text to copy, not worth it. Im just writing this instead to fill in the space.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#wrapper{
width: 1000px;
margin: 0px auto;
}
/*HEader things*/
#header{
width: auto;
position: relative;
height: 100px;
}
#logo{
display: block;
text-align: left;
position: absolute;
bottom: 0px;
}
#logo img{
vertical-align: text-bottom;
width: 50px;
}
#word{
color: grey;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#stream{
color: blue;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#nav{
display: block;
margin: 10px 30px;
position: absolute;
right: 0px;
}
#nav ul{
display: inline-block;
background-color: #F0F0F0;
border-radius: 5px;
padding: 0px 10px 5px;
padding-bottom: 7px;
}
#nav li{
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
#login{
display: inline-block;
margin-left: 20px;
}
.button{
width: 60px;
height: 25px;
background-color: blue;
border-radius: 5px;
border: 0px;
color: white;
}
/*Banner right under header*/
#banner{
background-color: blue;
padding: 5px 10px;
margin: 15px 0px;
font-size: 10px;
box-shadow: 0px 50px 200px grey;
}
#banner h1{
color: white
}
/*sidebar*/
#side-bar{
display: inline-block;
width: 220px;
}
#side-bar-content{
border-bottom: 1px solid lightgrey;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side-bar h1{
font-size: 15px;
color: blue;
}
#side-bar h2{
font-size: 12px;
color: darkred;
}
#side-bar p{
font-size: 11px;
}
.button1{
border: 0px;
background-color: blue;
color: white;
width: 220px;
padding: 3px 0px;
margin-bottom: 3px;
border-radius: 5px;
}
.button2{
border: 0px;
background-color: orange;
color: white;
width: 220px;
padding: 3px 0px;
border-radius: 5px;
}
.center{
text-align: center;
}
/*Bottom half of sidebar*/
#side-bar-ad{
position: relative;
}
#wrap-img-text{
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
#wrap-img-text h3{
font-size: 15px;
padding: 5px;
color: blue;
}
#wrap-img-text p{
padding: 3px;
}
.graded{
width: 180px;
background-color: darkblue;
color: white;
border-radius: 10px;
margin: 5px;
}
.img{
width: 210px;
height: auto;
}
.blue {
color: blue;
}
#handle{
vertical-align: top; display: inline-block;
}
/*Under the panel (phone number etc)*/
#upper-bar{
display: inline-block;
vertical-align: top;
position: relative;
width: 720px;
height: 110px;
border-bottom: 1px solid lightgrey;
}
#upperbar hr{
position: absolute;
bottom: 0px;
}
.inline{
display: inline-block;
vertical-align: top;
}
#contact{
position: absolute;
height: 110px;
right: 0px;
top: 0px;
}
.phone{
height: 70%;
width: auto;
}
.number{
color: blue;
font-family: Impact, Charcoal, sans-serif;
font-size: 45px;
}
.int-number{
font-size: 15px;
}
/*main content section*/
#main-content{
display: inline-block;
width: 700px;
vertical-align: top;
}
#main-content li{
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px
}
#main-content h1{
font-size: 23px;
color: blue;
margin-bottom: 5px;
margin-top: 15px;
}
#main-content p{
margin-bottom: 5px;
margin-top: 15px;
}
.bold{
font-weight: bold;
}
#trial-box{
border: 5px solid blue;
padding: 10px;
}
#trial-box img{
display: inline-block;
vertical-align: top;
}
.text-button{
display: inline-block;
width: 600px;
vertical-align: top;
}
h3{
color: blue;
}
.get-started{
background-color: limegreen;
color: white;
border-radius: 5px;
border: 0px;
width: 150px;
padding: 5px;
}
h2{
color: blue;
font-size: 17px;
margin-top: 10px;
}
Output:
Check out this Fiddle
EDIT:
Q:Why the code didn't work before?
A: