I've added HTML and CSS, but why won't some images show up?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Mind you, I'm no pro Web designer, but...

I added my HTML code and CSS codes to my Yola Web site, uploaded the images to my "Resources" folder, changed ALL the URLs (in the HTML codes, too) to "resources/name.jpg", pressed "Save", pressed "Preview" and I could only see certain images. Others, like my banner and most of the larger graphics, didn't show up at all. Not even a "?" image.

I went back and tried publishing it. Still nothing from those certain images. I feel liek there's something wrong with the CSS code. Based off what you see below, what do you think is going on?

Here's my CSS:

/* CSS Document */
body{
margin:0;
padding:0 0 0 0;
font-family:Arial, Helvetica, sans-serif;
background:url(resources/back-bg.gif) repeat-x 0 0;
height:963px;
background-color:#FBDD25;
color:#B65206;
}
td, ul, ol, li, a, span, p, form, input, label, textarea, checkbox, radiobutton, strong, select {
margin:0;
padding:0;
}
img{
padding:0;
Margin:0;
display:block;
}

ul {
list-style:none;
font-size:0;
line-height:0;
}
/*-----------------------------------header-----------------------------*/
.hdr-bg{
background:url(resources/hdr-bg.jpg) no-repeat 0 0;
height:238px;
}
p.tour{
font:bold 16px/16px Arial, Helvetica, sans-serif;
color:#D17C28;
background-color:inherit;
padding:0 0 3px 18px;
}
p.nxt{
font:bold 9px/9px Arial, Helvetica, sans-serif;
color:#8E7500;
background-color:inherit;
padding:0 0 5px 0;
}
ul.toplink{
padding:0 0 0 2px;
margin:0;
}
ul.toplink li{
float:left;
margin:0 2px 0 0;
}
ul.toplink li a{
background:url(resources/gallery-butt.gif) no-repeat 0 0;
width:58px;
height:12px;
display:block;
font:normal 9px/14px Arial, Helvetica, sans-serif;
color:#D17C28;
background-color:inherit;
text-align:center;
text-decoration:none;
padding:0 0 0 0;
}
ul.toplink li a:hover{
color:#FF9125;
background-color:inherit;
}
ul.hdrlink{
padding:0 0 0 33px;
margin:0;
}
ul.hdrlink li{
float:left;
margin:0 3px 0 0;
}
ul.hdrlink li.home a{
background:url(resources/home-butt.gif) no-repeat 0 0;
height:69px;
width:67px;
display:block;
}
ul.hdrlink li.quotes a{
background:url(resources/quotes.gif) no-repeat 0 0;
height:69px;
width:67px;
display:block;
}
ul.hdrlink li.quotes a:hover{
background:url(resources/quotes-over.gif) no-repeat 0 0;
}
ul.hdrlink li.search a{
background: url(resources/search.gif) no-repeat 0 0;
height:69px;
width:67px;
display:block;
}
ul.hdrlink li.search a:hover{
background:url(resources/search-over.gif) no-repeat 0 0;
}
ul.hdrlink li.contact a{
background: url(resources/contact.gif) no-repeat 0 0;
height:69px;
width:67px;
display:block;
}
ul.hdrlink li.contact a:hover{
background:url(resources/contact-over.gif) no-repeat 0 0;
}
.bg-link{
background-color:#000;
color:#fff;
}
ul.navigation {
padding:0 0 0 10px;
margin:0;
}
ul.navigation li{
float:left;
font:bold 11px/27px Arial, Helvetica, sans-serif;
padding:0 35px 0 0;
}
ul.navigation li a{
color:#fff;
background-color:#000;
text-decoration:none;
}
ul.navigation li a:hover{
color:#B65206;
background-color:#000;
}
/*user*/
ul.user{
padding:0 0 0 0px;
margin:0;
}
ul.user li{
float:left;
margin:0 0 0 0;
}
ul.user li.login a{
font:normal 11px/27px Arial, Helvetica, sans-serif;
color:#FDEA73;
background-color:#B65206;
text-decoration:none;
display:block;
text-align:center;
text-transform:uppercase;
width:91px;margin:0 1px 0 1px;
}
ul.user li.register a{
font:normal 11px/27px Arial, Helvetica, sans-serif;
color:#FDEA73;
background-color:#B65206;
text-decoration:none;
text-align:center;
text-transform:uppercase;
display:block;
width:100px;
border:0;
margin:0;
}
ul.user li a:hover{
color:#FBDA0D;
background-color:#B65206;
}
/*-----------------------------left panel---------------------------------------*/
p.blandits-txt{
font:normal 40px/24px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:36px 0 0 0;
}
p.blandits-txt span{
font-size:18px; line-height:20px;
color:#768F11;
background-color:inherit;
padding:13px 50px 15px 0;
display:block;
}
.lft-block{
background:url(resources/lft-block.gif) no-repeat 0 0;
height:102px;
}
p.africa{
background:url(resources/africa-map.jpg) no-repeat 15px 0;
height:63px;
font:bold 16px/63px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:0 0 0 98px;
}
p.australia{
background:url(resources/australia.jpg) no-repeat 9px 0;
height:65px;
font:bold 16px/65px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:0 0 0 87px;
}
p.europe{
background: url(resources/europe.jpg) no-repeat 11px 0;
height:69px;
font:bold 16px/69px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:0 0 0 84px;
}
p.nemo a{
font:bold 13px/18px Arial, Helvetica, sans-serif;
color:#3F6617;
background-color:inherit;
display:block;
padding:21px 0 0 11px;
}
p.nemo a:hover{
text-decoration:none;
}
p.nemo span{
display:block;
color:#B65206;
background-color:inherit;
text-align:left;
padding:0 35px 15px 11px;
}
ul.tempolink{
padding:0 0 0 11px;
margin:0;

}
ul.tempolink li{
background:url(resources/white-arrow.gif) no-repeat 0 10px;
display:block;
}
ul.tempolink li.new a{
width:325px;
font:bold 13px/24px Arial, Helvetica, sans-serif;
color:#3F6617;
display:block;
text-decoration:none;
border-top:dashed 1px #178800;
background-color:#FDE96F;
margin:0 0 0 7px;
padding:0 0 0 4px;
}
ul.tempolink li.aut a{
width:325px;
font:bold 13px/24px Arial, Helvetica, sans-serif;
color:#3F6617;
background-color:inherit;
display:block;
text-decoration:none;
border-top:dashed 1px #178800;
border-bottom:dashed 1px #178800;
margin:0 0 0 7px;
padding:0 0 0 4px;
}
ul.tempolink li.aut a:hover{
background-color:#FDE96F;
color:#3F6617;
}
.baner{
background:url(resources/baner.jpg) no-repeat 11px 0;
height:144px;
}
p.special-txt{
font:bold 24px/24px Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
display:block;
text-transform:uppercase;
padding:21px 0 0 232px;
}
p.special-txt span{
background:url(resources/bullet.gif) no-repeat 0 20px;
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#FBD825;
background-color:inherit;
display:block;
text-transform:none;
padding:10px 28px 1px 10px;
}
p.special-txt a{
font-size:11px;
line-height:24px;
color:#fff;
background-color:inherit;
text-decoration:none;
text-transform:none;
padding:0 0 0 10px;
}
p.special-txt a:hover{
color:#FBD825;
background-color:inherit;
}
/*------------------------right link-----------------------------------*/
.snaps{
font:normal 30px/24px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:19px 0 12px 0;
}
.gallery-bg{
background:url(resources/gallery-bg.gif) no-repeat 0 0;
height:105px;
}
.number{
font:bold 14px/17px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:13px 0 0 0;
}
a.view{
background: url(resources/view-bg.gif) no-repeat 0 0;
height:27px;
font:bold 12px/27px Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
display:block;
text-decoration:none;
padding:0 0 0 50px;
}
a.view:hover{
color:#3F6617;
background-color:inherit;
}
.useful{
font:normal 30px/24px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:32px 0 13px 0;
}
ul.usefullink{
padding:0 0 0 0;
margin:0;
}
ul.usefullink li{
background:url(resources/white-arrow.gif) no-repeat 5px 10px;
}
ul.usefullink li a{
font:bold 11px/24px Arial, Helvetica, sans-serif;
color:#3F6617;
background-color:inherit;
padding:0 0 0 14px;
}
ul.usefullink li a:hover{
text-decoration:none;
}
ul.usefullink li span{
font:normal 11px/24px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
}
/*-------------------------------footer---------------------------------*/
ul.footerlink {
padding:0 0 0 132px;
margin:0;
}
ul.footerlink li{
float:left;
font:bold 11px/27px Arial, Helvetica, sans-serif;
padding:0 16px 0 0;
}
ul.footerlink li a{
color:#fff;
text-decoration:none;
background-color:#000;
}
ul.footerlink li a:hover{
color:#B65206;
background-color:#000;
}
.all-right{
font:normal 9px/18px Arial, Helvetica, sans-serif;
color:#B65206;
background-color:inherit;
padding:19px 0 56px 0;
}
.all-right a{
color:#000; text-decoration:none;
background-color:inherit;
}
.all-right a:hover{
color:#B65206;
background-color:inherit;
}
Photo of Christina

Christina

  • 6 Posts
  • 0 Reply Likes
  • frustrated.

Posted 8 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Christina,

How are you?

The CSS looks correct - A bit more info on your setup would be good.

Are you using Yola Pro and linking to the CSS or is it on the page?

Whats your website URL?

What default Yola style are you using?

---

The first thing you could do is check the images are reachable i.e.
http://yoursite.com/resources/back-bg...

Does this test show the image that will not show when linked in your CSS?

Check you have all the image names in correct case.

--

Get back with the info I request above and we will be able to help you further.

Lee
Photo of Christina

Christina

  • 6 Posts
  • 0 Reply Likes
Thank you so much for responding Lee!

OK, so I'm using normal Yola (Yola Bronze).

My web site URL is http://mangoandallen.com

My default yola style is called "Squeaky Clean."

I checked to see if the images are reachable individually (outside of the CSS) -- They are.

If they correct case is lowercase throughtout, then yes I think I have them in the correct case.

:-)
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Christina

Please send me the URL of your site and I will have a look at it. Also follow Lee's tips from the thread, as that may solve your problem.

My email is support@yola.com.

Nazlie
Photo of Christina

Christina

  • 6 Posts
  • 0 Reply Likes
Thanks for getting back to me, Nazlie.

The URL is http://mangoandallen.com.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Christina

Nazlie is currently offline right now. I took a look at your site - which by the way - is absolutely fantastic! It does not appear that you have any of those images that you have listed in your code in your File Manager. Unless I am looking at the wrong site?

Can you please take a look at your File Manager and let me know if you do see those images?
Photo of Christina

Christina

  • 6 Posts
  • 0 Reply Likes
Sanja,

I changed the entire thing for the sake of time. I needed the site to either be "under construction" or completely live.

I should have said something earlier, but I've been working on the site all day. I apologize, Sanja. Thank you for your time on this problem, though, seriously.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
No worries, Christina!

I'm glad that I'm not losing my mind, after all :)

I hope that all goes well moving forward. From what I've seen in your site - it looks like you're well on your way!