Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Location
    New York
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretch Cell Background to full length

    I have a website that I am working on the layout....
    www.sngao.com/Joomla

    I tried to use a table with four rows,
    • 1st row - banner
    • 2nd row - also banner image
    • 3nd row - has three cells, one left frame image that stretched to full length of the table, one content cell, and one on the right side has a nested table with 5 navigation buttons and some images for spacing and **i made a background image for the listing titles links so they could stretch to however long the list of titles on there is.
    • 4rd row - footer image


    **for the background image i have a div around the listing title links like:
    .titlemodule{
    background: url(../images/greyBig.gif) repeat-y;
    }

    However, the outcome is not exactly what i wanted - I would like to see the background image for those listing title links under the navigation buttons to stretch to the full length of the whole table...

    Can somebody help me with this?
    I have attached my html code for the layout (there are alot of php stuff in it but it should help to understand my layout logics...)

    Thanks so much for helping in advanced!!

    -s
    Attached Files Attached Files
    Last edited by susibabe; 05-01-2006 at 11:57 PM.

  • #2
    New to the CF scene
    Join Date
    May 2006
    Location
    New York
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Just to follow up with my coding status with the layout problem, I have actually abandon the tables and use css completely - which works much better:

    www.sngao.com/testingScript

    The image margin bottom thing is fixed, however, I am still having trouble to make the module background image (the right where the "title" area is) and the left frame image left of the content body to stretch to the length of the longest content (sometimes the content body is longer than the module title area, and sometime it is the other way around)...is there a solution to this problem?

    many thanks!!

    -s

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by susibabe
    [...] I have actually abandon the tables and use css completely [...]
    That's great to hear!

    You seem to be still thinking in tables, however... Switching from tables to CSS needs a totally different way of thinking and a totally different approach. Maybe this tutorial can clear some things?

  • #4
    New to the CF scene
    Join Date
    May 2006
    Location
    New York
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretch Cell Background to full length

    Hi,

    Thanks for your suggestion to the link - I have followed the instruction and it turns out much better again:

    http://sngao.com/testingScripts2/

    However, IE6 is still weird...I tried to read the IE Hack on that website but I don't really understand what I need to do to fix the weird floating on the right...

    Please help~~~I am almost there!!!!

    -s

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You should think of using hacks as the veeeery, very last option to fix display differences! IE isn't always wrong. In most cases there is a way to work things out without a hack. And so is a way in your case. It is just a matter of using margins and related things correctly.
    Now watch carefully and see how the layout changes to our liking when you apply my suggestions.

    Code:
    #main {
    	position:relative;
    	margin-left:20px;
    	margin-right: 10px;
    }
    #nav{
    	margin-left: 5px; delete the whole rule (in grey)
    }
    #right {
    	float:right;
    	margin-right: 25px; remove that line
    	width: 185px;
    	text-align: center;
    }
    
    ..... (CSS in between here - no change) ........
    
    #titlemodule{
    	/*background-image: url(EHBKFimages/greyBigb.gif);*/
    	background-color: #c7dcf2;
    	background-repeat: no-repeat;
    	width: 160px;
            margin-top: 10px;
    	margin-left: 15px; replace those two properties (in grey) with the following one
    	margin: 10px auto 0;
    	border:1px dotted #000;
    	height: 100%;
    	/*background-color: #009966;*/
    	text-align: left;
    }
    
    #titlemodule ul{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:.7em;
    	line-height: 15px;
    	color: #6633CC;
    	list-style: none;
    	padding: 8px 5px 8px 15px;
    	margin: 0;
    }
    And TADAAA! Looks beautiful. And no hack at all!

  • #6
    New to the CF scene
    Join Date
    May 2006
    Location
    New York
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretch Cell Background to full length

    OMG Its done!!!! Thanks soooooo sooooo soooooo soooooo sooooooo MUCH! You have saved my life and taught me aloottt!


  •  

    Posting Permissions

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