• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

missing images

Guest
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

Trying too add social media to footer and the images are missing.... not sure how to address it

Views

693

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 09, 2022 Mar 09, 2022

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

...

Votes

Translate

Translate
Community Expert ,
Mar 04, 2022 Mar 04, 2022

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.

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

So i took your suggestion but i don't know what the problem results mean... plz translate... sent you a copy of my problem area hope this helps if not plz be more specific

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 04, 2022 Mar 04, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 04, 2022 Mar 04, 2022

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

https://www.w3.org/wiki/Html/Elements/img

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

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.

 

image.png

 

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

so i tried your thought and created a new page for your site but i could not create anything and i make updates to my file that is not working and that is not working.... 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

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.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

Copy link to clipboard

Copied

<!-- end nav -->
 
        <!-- box-intro -->
        <!--<section class="box-intro">
            <div class="table-cell">
                <h1 class="box-headline letters rotate-2">
                    <span class="box-words-wrapper">
                        <b class="is-visible">design.</b>
                        <b>&nbsp;coding.</b>
                        <b>graphic.</b>
                    </span>
       </h1>
                <h5>everything you need to build your personal portfolio</h5>
            </div>-->
 
           <!-- <div class="mouse">
                <div class="scroll"></div>
            </div>
        </section>-->
        <!-- end box-intro -->
    <!--</div>-->
 
    <!-- portfolio div -->
    <!--<div class="portfolio-div">
        <div class="portfolio">
            <div class="no-padding portfolio_container">-->
                <!-- single work -->
                    <div class="col-md-3 col-sm-6  fashion logo">
                    <a href="single-project.html" class="portfolio_item">
                        <img src="img/portfolio/01.jpg" alt="image" class="img-responsive" />
                        <div class="portfolio_item_hover">
                            <div class="portfolio-border clearfix">
                                <div class="item_info">
                                    <span>Mockups in seconds</span>
                                    <em>Fashion / Logo</em>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="col-md-3 col-sm-6 ads graphics">

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

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>-->

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

Copy link to clipboard

Copied

</ul>
</nav>
<div class="container-fluid">
<p class="copyright">&#64;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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

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>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

is there a full ones for everything i am trying for? fb  twitter instragram, linkedin, pintrest dribble, and behance?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

See my post above.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 05, 2022 Mar 05, 2022

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

Don't read emails.  Come back to the web forum where I corrected the error.

 

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

still nothing

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

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>-->

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 07, 2022 Mar 07, 2022

Copy link to clipboard

Copied

None of this is the code I gave you.  🙄

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 07, 2022 Mar 07, 2022

Copy link to clipboard

Copied

you asked to see everything because screen shots were not giving you enough information

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines