1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Simple CSS problem...PLEASE Help

Discussion in 'Web Design' started by ballerz4life, Mar 31, 2010.

  1. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    Home Page:
    Hello,

    I am using Interspire shopping cart and I am having 1 problem redesigning the site. With most pictures that I want to replace all I have to do is find out the name of the picture and name the new picture the same thing and whoola...picture gets replaced and I am happy.

    Now I am trying to replace the black box on the left hand side of all the pages with a picture that is the same the size. The problem is...it looks like the code is calling for a picture here SideBg.gif, but really it is not. I have deleted the picture and the box still shows up. It appears that the code is just making a black box there instead, now I can change the size of the box but I need to replace it with a picture.

    Here is the code:

    Code:
    /* Left Content Area */
    
    .Left {
    	background: url(../images/black/SideBg.gif) 0 0 no-repeat;
    }
    .Left {
    	float: left;
    	min-height: 500px;
    	width: 184px;
    	font-size: 0.85em;
    	margin-right: 15px;
    }
    
    .Left h2 {
    	font-size: 1.5em;
    	font-weight: normal;
    	margin: 10px 5px 5px 10px;
    }
    
    .Left ul {
    	margin: 0;
    	padding: 0;
    }
    
    .Left li {
    	clear: both;
    	list-style: none;
    	margin: 0;
    	padding: 3px 0;
    }
    
    .Left .BlockContent {
    	margin: 0 10px 0 10px;
    }
    
    .Left li {
    }
    
    .Left li a {
    	text-decoration: none;
    }
    
    .Left li a:hover {
    	text-decoration: underline;
    }
    .Left #SideCategoryList li{
    	padding: 3px 0 0 0;
    }
    .Left #SideCategoryList li ul {
    	padding-left: 15px;
    }
    
    Again, I need to replace the SideBg.gif with my own picture, can someone please help me with this.

    Thanks
     
  2. voyevoda

    voyevoda Regular Member Premium Member

    Joined:
    Mar 21, 2010
    Messages:
    217
    Likes Received:
    97
    Location:
    Eastern Front
    The "black box" is still there because the .Left class is specifying that any object with that class has a width of 184 pixels and a minimum height of 500 pixels.

    Either replace the SideBg.gif with your own image or add "display: none;" to the .Left class to make it go away.
     
  3. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    Home Page:
    OK, I will try this and let you know.

    Thank you
     
  4. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    Home Page:
    OK, so I used the "display: none;" code and it did make the box disappear but it still will not detect my new picture.

    Before I asked for help I changed the picture a few times and nothing happened, even if I deleted SideBg.gif it still showed the black box.

    Like I said in OP, any other picture that I need to replace on the site I just name my picture the same thing and it works...with the exception of this one.

    Any other ideas...

    Thanks
     
  5. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    Home Page:
    Can someone guide me in the right direction here...thanks
     
  6. webchick11

    webchick11 Newbie

    Joined:
    Feb 24, 2009
    Messages:
    37
    Likes Received:
    12
    Location:
    US
    Just name your new picture SideBg.gif and make sure you upload it to /images/black folder. If the old and new pictures are the same size, this should work just fine.

    I rarely use .gif files anymore, I mostly use .png - so make sure that you have the file name correct.