CODEWITHSUNDEEP
htmlcssweb
Spooks
Spooks

Reputation: 51

How do I add my logo to my website using html

i currently have a website set up but i cant quite figure out how to add a logo to the top left of my website. I am not talking about a favicon if you are wondering im talking about a logo that is on the website itself just like how stack overflow has a logo on the website with the words stack overflow next to it. im pretty new to coding though so its probably an ammeture mistake but i just cant get my logo to show up on my website. Here is my current code that I have in notepad+

UPDATE: fixed my code and uploaded it to the internet using filezilla but for some reason now my logo wont show up, its just that little torn piece of paper that shows up in place of the image showing that the image wont work and i dont know how to make my logo show up. Another thing I fixed my code on my laptop then put it on a usb then went over to my desktop and used it to use filezilla to upload my site to the internet.

(fixed code)

<!Doctype html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/G:/coding/wensite/favicon.ico" type="image/x-icon" />
<meta charset="utf-8"/>
<title> I_See_St4irs</title>
<meta name="Viewpoint" content="Width=device-width,initial-scale=1.0">
<link rel="stylsheet" href="blueberry.css"/>
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body{
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%:
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p{
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
  display: inline-block;
  margin: 15px; 
  float: left;
  height: 60px;
  width: auto; 
  border-radius: 50%; 
}
nav { 
float: right;
padding: 35px 20px 20px 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background:#ccc url(http://i65.tinypic.com/xgfvc4.jpg ) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin; 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width; 960px;
margin-top; 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%;
}
ul.camaro li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.90;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.social li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #333333;
max-height: 50px;
text-align: center;
opacity: 0.95;
}






/*-------------------------MEDIA!!!-------------------------*/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 740px) {
header {
psotion: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#"><img id="logo" src="http://i67.tinypic.com/2v9dm5h.jpg"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li><a href="contact me.html">Contact Me.</a></li>
<li><a href="pictures.html">Pictures</a></li>
<li><a href="about me.html">About Me</a></li>
<li><a href="other people.html">Other People</a></li>
</ul>

</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="staring.jpg"/></li>
<li><img src="burnout.jpg"/></li>
<li><img src="ablade.jpg"/></li>
<li><img src="aston.jpg"/></li>
<li><img src="jag.jpg"/></li>
<li><img src="post1.jpg"/></li>
<li><img src="post2.jpg"/></li>
<li><img src="post4.jpg"/></li>
<li><img src="post5.jpg"/></li>
<li><img src="post8.jpg"/></li>
<li><img src="post9.jpg"/></li>
<li><img src="post10.jpg"/></li>
<li><img src="post11.jpg"/></li>

</ul>
</div>
</div>
</div>
<section>
<img src="instagram_logo_small.png"/>
<h1>My Instagram!</h1>
<p> This is my instagram account my name on instagram is I_see_st4irs i post mainly car pictures</p>
</section>
<section>
<img src="twitter.png"/>
<h1>My Twitter!</h1>
<p> This is my Twitter account my name on Twitter is I_see_st4irs i post a little bit of everything i have a secondary twitter by the name of Lenny_bruh_rekt</p>
</section>
<section>
<img src="pinterest.png"/>
<h1>My Pinterest!</h1>
<p> This is my Pinterest account my name on Pinterest is I_see_st4irs i post anything i like on my boards.</p>
</section>
<div class="clear"></div>
<article>
<img src="2ss.jpg"/>
</article>
<aside>
<h2> My Favorite Car:</h2>
<ul class="Camaro">
<li><h3>My favorite car is the Chevrolet Camaro, especially the 6th gen Camaro which is the latest Camaro.</h3></li>
<li><h3>455 horsepower</h3></li>
<li><h3>455 foot pounds of torque</h3></li>
<li><h3>0-60 mph in 3.9 seconds</h3></li>
<li><h3>Runs the quarter mile in 12.2 seconds</h3></li>
<li><h3>Weighs 3,685 pounds</h3></li>
<li><h3>So the 2016 Camaro SS is a great muscle car</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>The 2016 Camaro SS</h1>
<img src="ss.jpg"/>
<p> This is My favorite muscle car.</p>
</section>
<section>
<h1>The 2015 Koenigsegg one:1</h1>
<img src="koenigsegg.jpg"/>
<p> This is my favorite Megacar.</p>
</section>
<section>
<h1>The 2016 Dodge Charger Hellcat</h1>
<img src="hellcat.jpg"/>
<p> This is My favorite sports sedan.</p>
</section>
<footer>
<section>
<h3><b> Me</b></h3>
<p><b>@[email protected]</b><br><br>
contact me if you want to send me pictures to post on my Instagram or Twitter.</p>
</section>
<section>
<h3>Follow me!</h3>
<ul class="social">
<li><a href="www.online-instagram.com/user/i_see_st4irs/246253528"><img src="instagram_logo_small.png"></a></li>
<li><a href="https://twitter.com/i_see_st4irs"><img src="twitter.png"></a></li>
<li><a href="https://twitter.com/i_see_st4irs"><img src="tumblr.png"></a></li>
<li><a href="https://plus.google.com/wm/quevuelvamatt/.../collections"><img src="googleplus.png"></a></li>
<li><a href="https://www.youtube.com/channel/UCOaUXzGUZ2_1EB_-QI15WoA"><img src="youtube.png"></a></li>
</ul>
</section>
<section>
<img src="logo.jpg">
</section>
</footer>
<footer class="second">
<p>©copyright - I_See_St4irs, 2016.</p>
</footer>





</body>
</html>

Upvotes: 3

Views: 100357

Answers (5)

user17345836
user17345836

Reputation: 1

I use this:

<link rel="icon" href="image.png">

It doesn't change the size, but it's easy to use.

Upvotes: 0

1010
1010

Reputation: 221

Once you have a logo for your website ready, it's easy. This is the code I use:

<link rel="shortcut icon" type="image/x-icon" href="yourLogo.jpg" />

That's it!

Hope it helps!

Upvotes: 4

warkentien2
warkentien2

Reputation: 979

as @alireza said: you misspelled heightin your #logo{ css.

also, you could do this:

html:
<a href="#"><img id="logo" src="http://i67.tinypic.com/2v9dm5h.jpg"></a>

and
css: 

#logo {
  display: inline-block;
  margin: 15px; /* margin: 20px was off */
  float: left;
  height: 60px;
  width: auto; /* correct proportions to specified height */
  border-radius: 50%; /* makes it a circle */
}

Upvotes: 1

JohnnyP
JohnnyP

Reputation: 500

You have misspelled height in the #logo CSS block. Fixing that will make it show up.

Also, FYI, you cannot put an a href in a CSS background declaration:

#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: <a href="http://tinypic.com?ref=261kfht" target="_blank">     <img src="http://i68.tinypic.com/261kfht.jpg" border="0" alt="Image and video hosting by TinyPic"></a> center;
}

There are other issues with this markup, let me know if you have other questions once you fix those.

Upvotes: 1

Alex
Alex

Reputation: 8695

You have an invalid property in your css. Change heigt: 60px; to height: 60px;

Jsfiddle

Upvotes: 0

Related Questions