SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Smile Side Windows Repeating Graphics - How to Piece Together in CSS?

    Hello all,

    I've got 3 .gif images I want to use for repeating graphics for the side windows for my home page at http://www.productreviewsbytyler.com. I have attached them to the thread here.

    sidewindowstartleft.gifsidewindowbody.gifsidewindowendleft.gif

    So, to piece these together, am I going to need to make 3 divs inside my leftside and rightside windows, and give them an id and then put the images in as background images? Then, will I say no-repeat for the start and end gifs, but then set the sidewindowbody to horizontal-repeat?

    Am I able to use CSS to flip the images horizontally and use them for the other side windows, or do I need to make 3 more images for the rightside window?

  2. #2
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've done a good attempt on my own here. Here's what I've tried so far, and hopefully my server will update the display soon enough so you can see how it's not quite there yet. It's still not set right.

    Code:
    #leftside{
    	overflow:auto;
    	float:left;
    	height:700px;
    	width:300px;
    }
    	#leftsidestart{
    		float:right;
    		background:url("sidewindowstartleft.gif") no-repeat scroll 50% 0 transparent;
    		height:300px;
    		width:25px;
    	}
    	#leftsidebody{
    		margin:0 auto;
    		background:url("sidewindowbody.gif") repeat-x scroll 50% 0 transparent;
    		height:300px;
    	}
    	#leftsideend{
    		float:left;
    		background:url("sidewindowendleft.gif") no-repeat scroll 50% 0 transparent;
    		height:300px;
    		width:18px;
    	}
    Code:
    <div id="leftside">
        <div id="leftsidestart">&nbsp;</div>
        <div id="leftsidebody">
          <h2 class="sideWindowHeaderText">Most Popular</h2>
          <ul class="sideWindowLinks">
            <li><a href="http://www.atlantareviewgroup.com/food/peapod1.html">Peapod</a></li>
            <li><a href="http://www.atlantareviewgroup.com/health/dieting/southbeach1.html">South Beach Diet</a></li>
            <li><a href="http://www.atlantareviewgroup.com/coupons/brandcaster1.html">Brandcaster Coupons</a></li>
          </ul>
        </div><!-- end left box div -->
        <div id="leftsideend">&nbsp;</div>
      </div><!-- end leftside div -->


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •