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>
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 am currently building my first webpage using a custom font from the CSS. This looks like this:
#font-face {
font-family: "Baiti";
src: url("./fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
.navbar
{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.container{
width:900px;
margin:auto;
}
.box-2 /*targeting class from HTML*/
{
border:8px dotted #ccc;
}
I am now putting some text into my page. Some is inside a table while other is outside of a table:
<html>
<head>
<title>innomotion media</title>
<!--reference CSS file, will only affect CSS PART, HTML comes first-->
<link rel="stylesheet"
type"text/css"
href="styles.css">
</head>
<body>
<!--NavBar-->
<div class="navbar">
Contact
What we do
Who we are
Home
</div>
<!--Heading-->
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
</div>
</body>
</html>
But the result looks like this:
So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?
The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).
One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).
I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.
th {
font-weight:normal;
}
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.
I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.
[Edit]
To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:
.center{
text-align:center;
}
<table border="0">
<tr>
<th colspan=2>
<h1>Julius Tolksdorf</h1>
</th>
</tr>
<tr>
<td class="center">
<img
src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width=60%
/>
</td>
<td class="center">
<font color="#534f4f" size="+2" >
<p>CEO of innomotion media and head of software developement.
<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</td>
</tr>
</table>
You are applying size = "+2" to all the text and not just the title
Change this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
</font>
To this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
</font>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
Also, check class="box-2" which is assigned only to the first text
Hey so im making a website for ICT class for hmk and basically i want "R A S T A" printed accross the front page how would you recommend going about this problem?
<P class="sans" align="center"> <font size="80" color="#009900" >R</p> </font>
<p class="sans" align="center"> <font size="80" color="#ffff00" >A </p> </font>
<p class="sans" align="center"> <font size="80" color="#ff0000" >S </p> </font>
<p class="sans" align="center"> <font size="80" color="#009900" >T </p> </font>
<p class="sans" align="center"> <font size="80" color="#ffff00" >A </p> </font>
I tried to understand your question but it is hard to visualize exactly what you want. So I'll just clean and update your code (i.e. bring it into the 21st Century).
Please don't use the <font> tag or the align attribute anymore. It's 2016.
If this is a heading, use <h1>, not <p>.
Tags work like parentheses in math. Close the inner before the outer:
<strong><em>this is correct.</em></strong>
<strong><em>this is incorrect.</strong></em>
Learn CSS. It saves you from repeating a lot of code and it's just the right thing to do.
<style>
/* this is CSS */
.page-heading {
font-size: 80px;
}
.letter1, .letter4 { color: #009900; }
.letter2, .letter5 { color: #ffff00; }
.letter3 { color: #ff0000; }
</style>
<h1 class="page-heading">
<span class="letter1 sans">R</span>
<span class="letter2 sans">A</span>
<span class="letter3 sans">S</span>
<span class="letter4 sans">T</span>
<span class="letter5 sans">A</span>
</h1>
If class .sans is what I think it is (font-family: sans-serif), and its properties are all inherited (as indeed font-family is) then you don't need to apply it to each span; you can apply it to the entire heading. Each span will inherit it from the heading. Again, this only works if all the properties in .sans are inherited.
<h1 class="page-heading sans">
<span class="letter1">R</span>
<span class="letter2">A</span>
<span class="letter3">S</span>
<span class="letter4">T</span>
<span class="letter5">A</span>
</h1>
Alternate solution: Use all descriptive CSS classes. Recommended only for very advanced CSS authors.
(This method reduces CSS size, however design changes must be reflected in the HTML, not the CSS. When first learning CSS you're better off with the method above.)
<style>
.fz-80 { font-size: 80px; }
.c-green { color: #009900; }
.c-yellow { color: #ffff00; }
.c-red { color: #ff0000; }
</style>
<h1 class="sans fz-80">
<span class="c-green">R</span>
<span class="c-yellow">A</span>
<span class="c-red">S</span>
<span class="c-green">T</span>
<span class="c-yellow">A</span>
</h1>
This is kind of hard to explain but I'm trying to place a text next to another text. A picture is worth a thousand words so here's what I'm trying to achieve.
Here's a picture of what it should look like
http://imgur.com/hc3dNJx
http://i39.tinypic.com/24kxft3.jpg
And this what I have so far. As you can see, the text that I want to place next to this text is not where it should be. I'm talking about the bold text that should be on right "9.1, Date, Author".
JSFiddle
http://jsfiddle.net/NmUaX/20/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:26px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300" style="float:left; padding-right:20px;">
<p class="excerpt" style="width:700px; line-height:20px;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</p>
<p class="excerpt" style="float:right; font-size:70px; font-family:Segoe UI;"><b>9.1</b></p>
<p class="excerpt" style="float:right; font-size:14px; font-family:Segoe UI;"><b>Date: </b>2 June 2012<br/><b>Author: </b> John Smith</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
that content <p> Element you need to give width:500px; float:left
and the bold text 9.1 you need to give a line-height:50px
Check this fiddle http://jsfiddle.net/NmUaX/21/
I tried replacing your HTML (and some CSS) on the right-floating element:
<div style="float:right;">
<div class="excerpt" style=" font-size:70px; font-family:Segoe UI;">
<b>9.1</b>
</div>
<div class="excerpt" style="font-size:14px; font-family:Segoe UI;">
<b>Date: </b>2 June 2012
<br/><b>Author: </b> John Smith
</div>
</div>
if you want to float an element to the right top, it would be best to place it before the article content. Also, it would be best to wrap both elements (the 9.1 and the date) into one container before floating them to the right.
I have been working on creating a website for a family company. It is mostly created, however I cannot get it to work in Chrome or Safari. Specifically, the links to go from page to page do not work. When clicking on the tabs on the left side, or the logo at the top, you should be directed to a different page. This works perfectly on IE. However, they do not work at all in the other 2. I have looked and looked and can't find a reason why. If anybody could help, it would be greatly appreciated.
I realize that the tabs are not uniform in Chrome or Safari as they are in IE. That is just not as important an issue to fix at the moment.
Here is the HTML for one of the pages so you can see what I have done and where I have messed up.
<!DOCTYPE html>
<html>
<head>
<title>
BERK Consulting LLC
</title>
<style type="text/css">
a:link {color:white; }
a:visited{color:white; }
a:hover {color:white; }
body {background-color:#F2E8DE}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;">
<p style="font-size: 18pt; text-align: justify; padding-top: 200px; padding-left: 200px;">
BERK was founded on the desire to remove the bureaucracy, complexity, and hidden agendas from consultancy. When you deal with BERK, you’re dealing directly with the expertise, not a salesperson or a subcontracting agency. <br /> <br />
Our down-to-earth approach combined with extensive 'in the seat' supply chain expertise allows us to advise you on key supply chain evolution decisions, allowing you to maintain focus on managing your business. <br /> <br />
We have eliminated the green beans from our team so that we can establish sustainability in your team and at an affordable rate.
</p>
<p style="text-align: right; font-size: 20pt;"> <strong>
...Securing the Last Piece® <br />
<img src="http://berkllc.com/images/LinkedIn2.png" alt="Follow Us" style="float:right;" width="150px" />
</strong> </p>
</div>
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;">
<img src="http://berkllc.com/images/BERKPic1.jpg" alt="BERK" />
<p style="font-size:11pt; padding-top:50px; ">
<span style="font-family:'Copperplate Gothic Bold'; ">
Home <br /> <br />
Who We Are <br /> <br />
What We Do <br /> <br />
Who We've Helped <br /> <br />
Our Network <br /> <br />
What Are You Missing <br /> <br />
Contact Us <br />
</p>
</span>
</div>
<div id="blank" style="width:100%; padding-top:1px;">
</div>
<div id="Legal1" style="background-color:#1F497D; position: absolute; padding-top:125px; width:994px; text-align:center;">
<table id="Legal2" border="0" style="border-collapse:collapse; font-size:8pt; color:white; margin-left: auto; margin-right: auto;" cellpadding="10px">
<tr>
<th style="cursor: pointer;" onclick="location.href='index.html'">
Home
</th>
<th style="cursor: pointer;" onclick="location.href='BERKContactUs.html'">
Contact Us
</th>
<th style="cursor: pointer;" onclick="location.href='BERKDisclaimers.html'">
Legal Disclaimers
</th>
<th style="cursor: pointer;" onclick="location.href='BERKTrademark.html'">
Trademark/Privacy
</th>
<th style="cursor: pointer;" onclick="location.href='BERKSitemap.html'">
Site Map
</th>
</tr>
</table>
<p style="text-align:center; font-size:6pt; color:white;">
© 2009 BERK Consulting, LLC. All Rights Reserved.
</p>
</div>
</body>
</html>
This is sloppy but add
z-index: 900;position: relative;
to the style for:
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;z-index: 900;position: relative;">
and add
z-index: 1;
to the styles for
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;z-index: 1;">
On an unrelated note I would recommend giving this site or this site a visit if you want to learn good practices and style for html/css/javascript.
The problem is that your "Main" div is covering up the links. And just as I start typing this, I'm called away. In any case, do not trust IE to do this right. Trust Chrome first.