Copy link to clipboard
Copied
Trying too add social media to footer and the images are missing.... not sure how to address it
Why don't you use one of the pre-built Bootstrap starter pages in Dreamweaver? It's a good way to jump start your project without added costs.
Go to File > New > Starter Templates > Bootstrap Templates. Choose one of the layouts and hit CREATE button. Save your newly created page as index.html and edit as required.
Tutorials:
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap4/
One final bit of advice. Get
...Copy link to clipboard
Copied
What images are missing? Please be more specific by posting a URL to the problem page online. Or show us the code you're working with.
In the meantime, check your code for validation errors by going to Windows > Results > Validation. Fix all reported errors.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
The height and width are empty as seen in your code between the "". That should be a number. Also, there are spaces in your file names which is bad practice but wouldn't prevent your images from loading.
Copy link to clipboard
Copied
in complement of what @Ben M said... you also wrote PIinterest .png... not only using a space but also two letters i one upper and one lower case...
in an other hand, don't forget that your file names are case sensitive so foo.png and Foo.png are two different files
width and height attributes do not require any value in a mandatory way
Copy link to clipboard
Copied
@Deleted User.
I prefer Font Awesome icons for social media. Less bandwidth and icons can be scaled up or down without any quality loss.
Just for fun, I put together this animated version. Icons spin when you hover your mouse over them. The circles behind icons can be further styled with CSS to suit your site design.
Working Code Example: (copy & paste code into a new, blank document).
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Font Awesome Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background: #222;
width: 90%;
margin: 0 auto;
color: antiquewhite
}
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px;
background-color: tomato;
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
/**OPTIONAL ANIMATION ON HOVER**/
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.9s;
transition: all 0.9s
}
</style>
</head>
<body>
<h2>Font Awesome Icons</h2>
<ul class="social-network social-circle">
<li><a href="#" title="Facebook"><i class="fa fa-2x fa-facebook-f"></i></a></li>
<li><a href="#" title="Twitter"><i class="fa fa-2x fa-twitter"></i></a></li>
<li><a href="#" title="Pinterest"><i class="fa fa-2x fa-pinterest"></i></a></li>
<li><a href="#" title="Instagram"><i class="fa fa-2x fa-instagram"></i></a></li>
</ul>
<hr>
<h3>Font Awesome Cheatsheet</h3>
<p><a style="background:antiquewhite; padding:0.5%" href="https://fontawesome.com/v4/cheatsheet/">https://fontawesome.com/v4/cheatsheet/</a></p>
</body>
</html>
Post back if you have any questions.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Copy my entire code exactly as posted. I guarantee it works in an internet connected browser. But you won't see much in DW's DESIGN view. But LIVE view will work.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Floating mockups</span>
<em>Ads / Graphics</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-sm-12 photography">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/02.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Photorealistic smartwatch</span>
<em>Photography</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 fashion ads">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/04.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Held by hands</span>
<em>Fashion / Ads</em>
</div>
</div>
</div>
</a>
</div>
Copy link to clipboard
Copied
<div class="col-md-3 col-sm-6 graphics ads">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/05.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Mobile devices</span>
<em>Graphics / Ads</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-sm-12 photography">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/010.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Photorealistic smartwatch</span>
<em>Photography</em>
</div>
</div>
</div>
</a>
</div>
Copy link to clipboard
Copied
<div class="col-md-3 col-sm-6 graphics ads">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/06.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Mobile devices</span>
<em>Graphics / Ads</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/07.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Mobile devices</span>
<em>Graphics / Ads</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/08.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Mobile devices</span>
<em>Graphics / Ads</em>
</div>
</div>
</div>
</a>
</div>
Copy link to clipboard
Copied
<div class="col-md-3 col-sm-6 graphics ads">
<a href="single-project.html" class="portfolio_item">
<img src="img/portfolio/09.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Mobile devices</span>
<em>Graphics / Ads</em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!--</div>
<!-- end portfolio_container -->
<!-- </div>-->
<!-- portfolio -->
<!-- </div>-->
<!-- end portfolio div -->
<!-- footer -->
<footer>
<nav>
<ul>
<li class="social-media">Follow me</li>
<li class="social-media-logos"><i class="ion-social-facebook"></i></a></li>
<li class="social-media-logos"><i class="ion-social-instagram-outline"></i></a></li>
<li class="ssocial-media-logos"><i class="ion-social-twitter"></i></a></li>
<li><a href="#" title="LinkedIn"><i class="fa fa-2x fa-linkedin"></i></a></li>
<li><a href="#" title="Behance"><i class="fa fa-2x fa-dribbble"></i></a></li
<li><a href="#" title="Dribbble"><i class="fa fa-2x fa-dribbble"></i></a></li>
<!--<li><a href="#" title="LinkedIn"><i class="fa fa-2x fa-linkedin"></i></a></li>
<li><a href="#" title="Behance"><i class="fa fa-2x fa-dribbble"></i></a></li
<li><a href="#" title="Dribbble"><i class="fa fa-2x fa-dribbble"></i></a></li>-->
Copy link to clipboard
Copied
</ul>
</nav>
<div class="container-fluid">
<p class="copyright">@2022 Peter Grinnell</p>
</div>
</footer>
<!-- end footer -->
<!-- back to top -->
<!-- <a href="#0" class="cd-top"><i class="ion-android-arrow-up"></i></a>-->
<!-- end back to top -->
<!-- jQuery -->
<script src="js/jquery-2.1.1.js"></script>
<!-- plugins -->
<script src="js/bootstrap.min.js"></script>
<script src="js/menu.js"></script>
<script src="js/animated-headline.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<!-- custom script -->
<script src="js/custom.js"></script>
<!-- google analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src=g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-76796224-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Copy link to clipboard
Copied
These are the icons for LinkedIn, Behance and Dribbble:
<li><a href="#" title="LinkedIn"><i class="fa fa-2x fa-linkedin"></i></a></li>
<li><a href="#" title="Behance"><i class="fa fa-2x fa-behance"></i></a></li
<li><a href="#" title="Dribbble"><i class="fa fa-2x fa-dribbble"></i></a></li>
Copy link to clipboard
Copied
is there a full ones for everything i am trying for? fb twitter instragram, linkedin, pintrest dribble, and behance?
Copy link to clipboard
Copied
See my post above.
Copy link to clipboard
Copied
so i tried your recommendation but still no images... also i noticed that the color on <li class="social-media-logos"> for drippble is different is this an issue?
i did notice you gave me the code for dribble twice and i think you meant to give me to code for behance... not trying to be a problem just something i noticed
Copy link to clipboard
Copied
Don't read emails. Come back to the web forum where I corrected the error.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
I can't guess what you have going on. And screenshots of code are not helpful. We need to see the entire code.
If you want more help, upload the code I gave you to your web server and post the URL here so we can take a look at it.
I'm signing off now. It's time to cook dinner. I'll check back tomorrow.
Copy link to clipboard
Copied
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">-->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Peter Grinnell</title>
<!-- <link rel="icon" href="img/fav.png" type="image/x-icon">-->
<!-- Bootstrap -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionicons/css/ionicons.min.css" rel="stylesheet">-->
<!-- main css -->
<link href="css/style.css" rel="stylesheet">
<!-- modernizr -->
<!--<script src="js/modernizr.js"></script>-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<!--<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>-->
<!-- end Preloader -->
<header>
Copy link to clipboard
Copied
<!-- <div class="container-fluid">-->
<!-- box header -->
<ul class="menu">
<li class="label"></li>
<li><a href="index.html">Home</a> <!--<i class="ion-ios-circle-filled color"></i>--></li>
<li><a href="about.html">About me</a></li>
<!--<li><a href="services.html">Payment</a></li>-->
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact me</a></li>
</ul>
<div class="my-logo">
<img src="images/logo.png" width="150" alt="Logo"></a>
</div>
<!-- box-nav -->
<!-- <a class="box-primary-nav-trigger" href="#0">
<span class="box-menu-text">Menu</span><span class="box-menu-icon"></span>
</a>-->
<!-- box-primary-nav-trigger -->
</header>
<!-- end box header -->
<!-- nav -->
<!-- <nav>
<!-- <ul class="box-primary-nav">
<li class="box-label">About me</li>
<li><a href="index.html">Intro</a> <i class="ion-ios-circle-filled color"></i></li>
<li><a href="about.html">About me</a></li>
<li><a href="services.html">services</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact me</a></li>
<ul>
<li class="box-label">Follow me</li>
<li class="box-social"><a href="#0"><i class="ion-social-facebook"></i></a></li>
<li class="box-social"><a href="#0"><i class="ion-social-instagram-outline"></i></a></li>
<li class="box-social"><a href="#0"><i class="ion-social-twitter"></i></a></li>
<li class="box-social"><a href="#0"><i class="ion-social-dribbble"></i></a></li>
</ul>
</nav>-->
Copy link to clipboard
Copied
None of this is the code I gave you. 🙄
Copy link to clipboard
Copied
you asked to see everything because screen shots were not giving you enough information