I'm trying to re-format an EPUB using the PDF format of the same book as a model using Calibre. I found this: https://i.stack.imgur.com/tGPWt.jpg
I want to: Make the text on the right look the same as the one on the left.
The EPUB is like this:
Code:
.calibre {
display: block;
font-size: 1em;
padding-left: 0;
padding-right: 0;
margin: 0 5pt;
}
.p2 {
text-indent: 1.5em;
margin: 0;
}
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<body class="calibre">
<p class="p2">It was hard to not watch his Status Page like a hawk (which apparently lived in the mountain areas), but he watched his level slowly rise over the course of the cycle. </p>
<p class="p2">Level 19.02 – A Red Wolf.</p>
<p class="p2">Level 19.08 – Three more Red Wolves.</p>
<p class="p2">Level 19.13 – Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it.</p>
<p class="p2">Level 19.22 – An Undead Swordsman and his Skelemaidens. </p>
<p class="p2">Level 19.29 – A pack of Fish Otters. </p>
<p class="p2">Level 19.38 – A very angry-looking Stump. </p>
<p class="p2">Level 19.45 – Three more Red Wolves. </p>
<p class="p2">Level 19.57 – Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it. (He had gotten turned around at some point and had ended up going in a circle.)</p>
<p class="p2">Level 19.66 – A trip back to kill some Heat Pigs in the Salazarm Desert for more <i>Desert Bacon. </i></p>
</body>
</html>
I just want to change the part after the " - ". On the PDF, it doesn't continue under 'level 19.XX'. If I try to change the text-align using span or something similar it doesn't work. I don't know what to do anymore.
I hope I managed to explain it well. Any ideas?
EDIT: I'll expand the code to what it looks like:
you need to follow this html structure to get this...
I wrapped line with div status-container and then divide label and text separately
I find this solution from here
.status-label {
float:left; padding-right:5px;
}
.status-text {
overflow:hidden; display:block;
}
.p2 {
margin: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<body class="calibre">
<p class="p2">It was hard to not watch his Status Page like a hawk (which apparently lived in the mountain areas), but he watched his level slowly rise over the course of the cycle. </p>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.02 – </span><span class="status-text">A Red Wolf.</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.08 – </span> <span class="status-text">Three more Red Wolves.</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.13 – </span> <span class="status-text">Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it.</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.22 – </span><span class="status-text"> An Undead Swordsman and his Skelemaidens. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.29 – </span><span class="status-text"> A pack of Fish Otters. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.38 – </span><span class="status-text"> A very angry-looking Stump. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.45 – </span><span class="status-text">Three more Red Wolves. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.57 – </span> <span class="status-text">Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it. (He had gotten turned around at some point and had ended up going in a circle.)</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.66 – </span> <span class="status-text">A trip back to kill some Heat Pigs in the Salazarm Desert for more <i>Desert Bacon. </i></span></p>
</div>
</body>
</html>
Related
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
I would like to put a box in my page body but exclude the two elements in the upper area.
I wrote the code for the elements, but it seems that it have been ignored:
EDIT: I added the HTML. I cannot create other div's, so I don't know how to specify that the two elements must be excluded from the code written in the body's css.
body {
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/background.png");
margin: 0;
padding: 0;
font-size: 8pt;
font-family: "Tahoma";
width: 800px;
border: 4px solid red;
}
#banner {
text-align: center;
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/bannerbg.png");
background-repeat: repeat-x;
height: 50px;
}
h1 {
text-align: center;
font-style: bold;
font-family: "Verdana";
font-size: 24pt;
text-shadow: 3px 3px #999999;
}
<!DOCTYPE html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="movie.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/banner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2007)</h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/overview.png" alt="general overview">
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br> Mako <br> Sarah Michelle Gellar <br> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li>The Official TMNT Site</li>
<li>RT Review</li>
<li>RT Home</li>
<li>CSE 190 M</li>
</ul>
</dd>
</dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rottenbig.png" alt="Rotten">
33%
</div>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Peter Debruge <br>
Variety
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Todd Gilchrist <br>
IGN Movies
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>It stinks!</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Jay Sherman (unemployed)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Joshua Tyler <br>
CinemaBlend.com
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
NAME <br>
PUBLICATION
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Jeannette Catsoulis <br>
New York Times
</p>
<p class="rotten">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Ed Gonzalez <br>
Slant Magazine
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Mark Palermo <br>
Coast (Halifax, Nova Scotia)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Steve Rhodes <br>
Internet Reviews
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
NAME <br>
PUBLICATION
</p>
<p>(1-10) of 88</p>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/w3c-xhtml.png" alt="Validate HTML">> <br>
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!">
</div>
</body>
</html>
This is how the page should be:
enter image description here
The issue is that you have limited the width of the body and this is not recommended. Instead wrap everything except the elements you want excluded in a separate container div and limit the width of that.
body {
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/background.png");
margin: 0;
padding: 0;
font-size: 8pt;
font-family: "Tahoma";
}
.container {
margin: auto;
max-width: 800px;
border: 4px solid red;
}
#banner {
text-align: center;
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/bannerbg.png");
background-repeat: repeat-x;
height: 50px;
}
h1 {
text-align: center;
font-style: bold;
font-family: "Verdana";
font-size: 24pt;
text-shadow: 3px 3px #999999;
}
<div id="banner">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/banner.png" alt="Rancid Tomatoes">
</div>
<div class="container">
<h1>TMNT (2007)</h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/overview.png" alt="general overview">
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br> Mako <br> Sarah Michelle Gellar <br> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li>The Official TMNT Site</li>
<li>RT Review</li>
<li>RT Home</li>
<li>CSE 190 M</li>
</ul>
</dd>
</dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rottenbig.png" alt="Rotten"> 33%
</div>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Peter Debruge <br> Variety
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Todd Gilchrist <br> IGN Movies
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>It stinks!</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Jay Sherman (unemployed)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Joshua Tyler <br> CinemaBlend.com
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> NAME <br> PUBLICATION
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Jeannette Catsoulis <br> New York Times
</p>
<p class="rotten">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Ed Gonzalez <br> Slant Magazine
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Mark Palermo <br> Coast (Halifax, Nova Scotia)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Steve Rhodes <br> Internet Reviews
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> NAME <br> PUBLICATION
</p>
<p>(1-10) of 88</p>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/w3c-xhtml.png" alt="Validate HTML">> <br>
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!">
</div>
</div>
Hello i am new for css and html.. I need to remove the space between body and footer. Any help ?
I want to add an image at the same lines with paragraph
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neotic</title>
</head>
<body>
<div>
<center><img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" ></center>
<center> <font face="Arial" size="14.18" color=" #587974" >Beat the markets with AI </font></center>
</div>
</br>
</br>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
</br>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
</body>
Okay. Fist of all... Please give all of your code and use up-to-date HTML5 code...
Using the poorly written code you provided, I made a JSFiddle.
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
the div with the class well had a height of who knows what, so when I set the background color and the height at 20px, I came out with a result just like your picture.
PS: I removed the outdated center tags and added a text-align:; to the div style. I also fixed your </br> tags which were incorrect and reset them to <br/>. I also added missing starting elements like <footer> because of the </footer> in your code. Thanks to James and j08691 who pointed out that the <font> tags are also outdated. I fixed your code, but next time please check your HTML for outdated tags.
<title>Neotic</title>
<body>
<div>
<img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" style>
<h1 style="text-align: center;">
<font face="Arial" size="14.18" color=" #587974">Beat the markets with AI </font>
</h1>
</div>
<br/>
<br/>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
<br/>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<footer>
<div style="background-color:#333; height:20px;">
<p style="font-family: Arial; font-size:+2; text-align:center;color:#fff;" >©2017 Neotic. All rights reserved </p>
</div>
</footer>
I can't get these to move to the center of the page. Anyone see what's wrong?
<ul id="contact">
<h1> Contact </h1>
<p> Dreamstowheels#yahoo.com </p>
<p> 2236 El Camino Real <br>
Santa Clara Ca 95050 </p>
</ul>
<ul id="follow">
<h1> Follow </h1>
<img src="http://www.flagera.eu/sites/all/modules/socialmedia/icons/levelten/glossy/32x32/facebook.png">
</ul>
<ul id="supporters">
<h1> Supporters </h1>
<p> Cyclinginquisition.com </p>
<p> Colombia Cycling Team </p>
<p> Calmar Bicycles </p>
<p> Rock Solid Cycling </p>
<p> Fast Freddie Foundation </p>
<p> Golden Creek Services (Envio de Paquetes) </p>
</ul>
</footer>
CSS
footer{ /*Footer section attributes */
margin: -50px auto;
width: 100%;
text-align: center;
/* border-top: solid 1px;*/
}
Let me know if you need to css for the contact, follow, and supporters divs. Thanks in advance.
Erase everything in your CSS code in fiddle and just put the following there.
footer{ margin:0 auto; text-align:center;}
https://jsfiddle.net/u2Zb2/45/
I'm trying to align some text (asterisk) in the middle of the image above.
I've set the css to align center, but it looks like it's off to the left a bit.
How do I align the text in the exact center of the square image above?
<div class="alignright">
<p>
<img alt="Sign up Today" height="259" src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" width="300" /></p>
<p class="asterisk">
*Price for a single city. Multi-city, state<br>
and multi-state packages also available.</p>
</div>
<div class="circle">
<span class="number">1</span>
</div>
<h3>
Banana</h3>
<p>
A banana is an edible fruit, botanically a berry, produced by several kinds
of large herbaceous flowering plants in the genus Musa.</p>
<p> </p>
<div class="circle">
<span class="number">2</span>
</div>
<h3>
Orange is the colour of saffron, pumpkins and apricots.</h3>
<p>
Mobile phones, mobile broadband and home broadband in the Orange Shop. Plus the latest
news, entertainment, sport and lifestyle content from Orange.</p>
<p> </p>
<div class="circle">
<span class="number">3</span>
</div>
<h3>
Watermelon</h3>
<p>
We here at the National Watermelon Promotion Board have one goal: to increase
consumer demand for fresh watermelon through promotion, research</p>
jsfiddle:
http://jsfiddle.net/7bzc74qy/37/
It is being aligned to the center; you just have a left margin on your image that isn't on your asterisk.
Add those 49px to the asterisk and you're good to go.
.asterisk {
margin: 20px 0 0 49px;
}
JSFiddle