WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Some CSS images not showing up? (8 posts)

  1. sdotbrucato
    Member
    Posted 5 years ago #

    I've been designing a theme locally, using plain old html/css. Everything displays properly in all browsers.

    Now when I brought everything to WordPress, only some of the images are displaying properly, basically the background images.

    As you see, locally I have navigation links, a separator in the middle banner, and H1 images in the content area.
    [IMG]http://i14.photobucket.com/albums/a307/d3c1us/Picture3.png[/IMG]

    On the WordPress version I have none of that, but the other images are appearing.
    [IMG]http://i14.photobucket.com/albums/a307/d3c1us/Picture3.png[/IMG]

    Ive included my CSS, and bolded the sections that arent appearing.

    body {
    	background: #000 url(img/background.jpg) no-repeat center top;
    }
    
    #wrapper {
    	margin: 0 auto;
    	width: 740px;
    }
    
    <strong>.hrintro {
    	background: url(img/hrintro.gif) no-repeat center center;
    	display: block;
    	height: 5px;
    	margin: 1em auto .7em;
    	width: 99px;
    }</strong>
    
    .hr {
    	background: url(img/hr.gif) no-repeat center center;
    	display: block;
    	height: 5px;
    	margin: 1em auto;
    	width: 99px;
    }
    
    .first {
    	margin-right: .2em;
    }
    
    /* defining floating element */
    .first,
    #nav li,
    #extra,
    #content,
    #main
    {
    	float: left;
    }
    
    #credits,
    .up {
    	float: right;
    }
    
    #intro,
    #footer {
    	clear: both;
    }
    
    /* Header */
    
    h1 {
    	background: url(img/h1.jpg) no-repeat left top;
    	height: 166px;
    	margin-top: 18px;
    }
    
    /* Site navigation */
    #nav {
    	background-image: url(img/nav.jpg);
    	height: 71px;
    }
    
    #nav a {
    	display: block;
    	height: 45px;
    	overflow: hidden;
    }
    
    <em>#home a {
    	background: url(img/home.jpg) no-repeat left top;
    	margin-left: 230px;
    	width: 71px;
    }
    	#home a:hover {
    	background: url(img/home.jpg) no-repeat left bottom;
    	}
    
    #homeh a {
    	background: url(img/home.jpg) no-repeat left bottom;
    	margin-left: 230px;
    	width: 71px;
    }
    
    #folio a {
    	background: url(img/portfolio.jpg) no-repeat left top;
    	margin-left: 20px;
    	width: 103px;
    }
    	#folio a:hover {
    	background: url(img/portfolio.jpg) left bottom;
    	}
    
    #folioh a {
    	background: url(img/portfolio.jpg) no-repeat left bottom;
    	margin-left: 20px;
    	width: 103px;
    }
    
    #contac a {
    	background: url(img/contac.jpg) no-repeat left top;
    	margin-left: 16px;
    	width: 69px;
    }
    	#contac a:hover {
    	background: url(img/contac.jpg) no-repeat left bottom;
    	}
    /* end nav */</em>
    
    /* intro banner section */
    
    #intro {
    	background: #68221a url(img/introback.jpg) repeat-y left top;
    	color: #f0eedf;
    	padding: 3px 0;
    	text-shadow: #3f0a0a 0 1px 3px;
    }
    
    #intro h2  {
    	background: url(img/introtop.jpg) no-repeat left top;
    	padding: 20px 20px 0 20px;
    }
    
    #intro p {
    	background: url(img/introbott.jpg) no-repeat left bottom;
    	padding: 0 20px 20px 20px;
    }
    
    #intro ul  {
    	background: url(img/introbott.jpg) no-repeat left bottom;
    	padding: 0 20px 20px 20px;
    }
    
    #intro a {
    	border-bottom: 1px dotted #b27868;
    	color: #f0eedf;
    }
    	#intro a:hover {
    	background: url(img/opacity.png) repeat;
    	color: #fff;
    	}
    /* end intro */
    
    #extra {
     	background:white url(img/backmain.jpg) repeat-y center top;
    }
    
    #rcborder {
    	padding: 0 3px;
    	border-left: 1px solid #c0beac;
    	border-right: 1px solid #c0beac;
    }
    
    #content {
    	background: url(img/mainbottom.jpg) no-repeat center bottom;
    	color: #474642;
    	padding: 20px 25px 40px;
    	text-shadow: #d6d5ca 0 1px 4px;
    }
    
    #content a {
    	color: #828079;
    }
    	#content a:hover {
    		color: black;
    	}
    
    #content h2, #content h3 {
    	margin-bottom: 1em;
    	margin-top: .2em;
    }
    
    /* Main column */
    
    #main {
    	width: 690px;
    }
    
    #about {
    	margin-bottom: 3em;
    }
    
    #about h2 {
    	background: url(img/about.gif) no-repeat left top;
    	height: 31px;
    	width: 515px;
    }
    
    #contact h2 {
    	background: url(img/contact.gif) no-repeat left top;
    	height: 31px;
    	width: 515px;
    }
    
    /* Footer */
    
    #footer {
    	background-color: #000;
    	color: #908f86;
    	height: 4em;
    	margin-bottom: 3em;
    	padding-top: .5em;
    }
    
    #footer a {
    	border-bottom: 1px dashed #484944;
    	color: #908f86;
    }
    
    #footer a:hover {
    	color: #f0eedf;
    }
    
    #secnav li {
    	display: inline;
    	margin-right: .5em;
    }
    
    <strong>#apple {
    	background: url(img/apple.gif) no-repeat right center;
    	margin-bottom: 1em;
    	padding-top: 2px;
    	padding-right: 18px;
    	margin-top: .2em;
    }</strong>

    Any help would be greatly appreciated.

  2. drewactual
    Member
    Posted 5 years ago #

    go back and use full URL's to eliminate that as a possible problem is where I would start...

    instead of /img/img.img, use http: //page/blog/theme/img/img.img..

    using climbers (i.e.: ../././img.img) or even pointing to a peer directory (i.e. : /img/img.img) has been an issue for me in the past, and I found that being precise about it helps.. Now why it does that i couldn't tell you.. But I'm guessing it is my fault and not the computer's :-)

  3. sdotbrucato
    Member
    Posted 5 years ago #

    Changed my CSS to direct URLS and still nothing. What's bothering me, is all of the images that create the layout are present, just the ones that are supposed to go over those images.

  4. drewactual
    Member
    Posted 5 years ago #

    drop us a link, it will be easier to diagnose. i've seen many things cause this, but to be brutally honest it is usually the crazy simplest thing in the world at the root... such is 'de-bugging' huh?..

  5. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    Yeah, we need a link to the live site to find the actual problem. Seeing it live makes it much easier to point out the error.

  6. sdotbrucato
    Member
    Posted 5 years ago #

  7. drewactual
    Member
    Posted 5 years ago #

    your images are protected. If you change the permissions you may find they work.

    also, the declaration display:block; in the a:'s may need to be exchanged..

    see if this helps.

  8. sdotbrucato
    Member
    Posted 5 years ago #

    your images are protected. If you change the permissions you may find they work.

    also, the declaration display:block; in the a:'s may need to be exchanged..

    see if this helps.

    OMG, how simple. Thank you so much. I was ready to just give up!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.