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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation table/css help! urgent!

    I need help with this.. I sliced up this image in photoshop..as seen in the coding below. now what i need to figure out how to do is.. insert coding, so when i place content in that middle box(as shown in pic) the box extends downwards with the content. any help would be great as i need this finished pretty soon here. thanks, Alec

    Code:
    <html>
    <head>
    <title>Untitled-3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (Untitled-3.jpg) -->
    <table id="Table_01" width="1052" height="1103" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="13">
    			<img src="images/mequest_01.jpg" width="1051" height="264" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="264" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="6">
    			<img src="images/mequest_02.jpg" width="386" height="29" 
    
    alt=""></td>
    		<td>
    			<img src="images/mequest_03.jpg" width="294" height="29" 
    
    alt=""></td>
    		<td colspan="6">
    			<img src="images/mequest_04.jpg" width="371" height="29" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<img src="images/mequest_05.jpg" width="62" height="406" 
    
    alt=""></td>
    		<td rowspan="3">
    			<img src="images/mequest_06.jpg" width="4" height="406" alt=""></td>
    		<td rowspan="2">
    			<img src="images/mequest_07.jpg" width="183" height="361" 
    
    alt=""></td>
    		<td rowspan="3">
    			<img src="images/mequest_08.jpg" width="4" height="406" alt=""></td>
    		<td colspan="6">
    			<img src="images/mequest_09.jpg" width="560" height="31" 
    
    alt=""></td>
    		<td rowspan="2">
    			<img src="images/mequest_10.jpg" width="181" height="361" 
    
    alt=""></td>
    		<td colspan="2" rowspan="3">
    			<img src="images/mequest_11.jpg" width="57" height="406" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="31" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="images/mequest_12.jpg" width="32" height="375" 
    
    alt=""></td>
    		<td colspan="3" rowspan="3">
    			<img src="images/mequest_13.jpg" width="494" height="395" 
    
    alt=""></td>
    		<td colspan="2" rowspan="2">
    			<img src="images/mequest_14.jpg" width="34" height="375" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="330" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/mequest_15.jpg" width="183" height="45" 
    
    alt=""></td>
    		<td>
    			<img src="images/mequest_16.jpg" width="181" height="45" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="45" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<img src="images/mequest_17.jpg" width="62" height="403" 
    
    alt=""></td>
    		<td colspan="3" rowspan="2">
    			<img src="images/mequest_18.jpg" width="191" height="261" 
    
    alt=""></td>
    		<td rowspan="3">
    			<img src="images/mequest_19.jpg" width="32" height="403" 
    
    alt=""></td>
    		<td rowspan="3">
    			<img src="images/mequest_20.jpg" width="27" height="403" 
    
    alt=""></td>
    		<td colspan="3" rowspan="2">
    			<img src="images/mequest_21.jpg" width="194" height="261" 
    
    alt=""></td>
    		<td rowspan="3">
    			<img src="images/mequest_22.jpg" width="51" height="403" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="3" rowspan="2">
    			<img src="images/mequest_23.jpg" width="494" height="383" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="241" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="images/mequest_24.jpg" width="191" height="142" 
    
    alt=""></td>
    		<td colspan="3">
    			<img src="images/mequest_25.jpg" width="194" height="142" 
    
    alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="142" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="62" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="183" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="32" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="101" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="294" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="99" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="27" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="181" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="51" height="1" alt=""></td>
    		<td></td>
    	</tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    tables are not the way to go. use divs
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by twodayslate View Post
    tables are not the way to go. use divs
    well i sliced the image up in photoshop and got that code.. would i put each individual slice in its own div? also, how can i have that middle box extend with the content? thanks for your response

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • Users who have thanked twodayslate for this post:

    influencedesign (10-31-2008)

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi influencedesign, welcome to CF.

    Are you using software to help you code your page? I ask because that code is just like I recall seeing on the web about 8-10 years ago (pre CSS), and it is much harder to work with than today's methods are.

    I would think of using that image as a background in a container div and then, within that div, placing other containers 'on top', to hold/shape/style the text, as you want it, relative to the image background.

    The image tends to make me think about a header footer and between three columns layout.

    BTW a div is a division. Imagine a newspaper; each column represents a div. the standard at the top would be like your header div (shown below) and the columns of text would represent the left, right, and center divs.

    So the code would be something like

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <title>My page title</title>
    
    <!-- CSS Stylesheet -->
    <style type="text/css" id="vbulletin_css">
    
    * {
    margin:0;
    padding:0;
    }
    
    html,body {
    height:100%;
    background-color : #000;
    background:#333;
    font-family:Geneva, Arial, Verdana, Helvetica, sans-serif;
    color:#40231D;
    }
    
    body {
    font-size:13px;
    text-align : center;
    }
    
    #container {
    width:80%;
    min-width:780px;
    border:1px solid #FF8888;
    border-top:0;
    background:#000 url(/images/your_big_image.png) no-repeat;
    position:relative;
    padding-left:3px;
    padding-right:0px;
    margin : 0 auto;
    }
    
    * html #container {
    height:100%;
    }
    
    #header {
    margin: 0;
    height:240px; /* or whatever height ensures that the top of your image is in it */
    padding: 0;
    border : 0;
    margin-bottom : 20px;
    }
    
    
    #left,#right {
    background:#fff;
    width:150px;
    float:left;
    margin-right:3px;
    display:inline;
    border:1px solid #eee;
    padding-bottom:3px;
    }
    
    #right {
    float:right;
    margin-right:0;
    margin-left:3px;
    padding-bottom:0;
    text-align : center;
    width : 130px;
    }
    
    #center {
    margin-right:155px;/*this works together with those of left and right*/
    margin-left:155px;/*this works together with those of left and right*/
    background:#fff; 
    border:0px solid #40231D;
    padding : 0 10px;
    }
    
    #footer {
    clear:both;
    border-top:1px solid #ddd;
    border-bottom:0;
    background:#fff; 
    margin-top:3px;
    text-align:center;
    color:#bbb;
    font-size:.85em;
    padding:20px 0;
    }
    
    .clear {
    clear:both;
    font-size:0;
    line-height:0;
    }
    
    </head>
    <body>
    
    <div id='container'>
      <div id='header'>
      </div>
    
    <div id='left'>
      content here
      <div class='clear'>&nbsp;</div>
    </div>
    
    </div id='right'>
      content here
      <div class='clear'>&nbsp;</div>
    </div>
    
    <div id='center'>
      content here
      <div class='clear'>&nbsp;</div>
    </div>
    
    <div id='footer'></div>
    </div>
    </body>
    </html>
    That code is much simpler than what you have spent time on so far. This is based on the idea that the image you posted would be the background to the container div.

    We can help you with css later, which will make the divs be of a certain size and height, with set fonts etc.

    I hope this is of some help and that I haven't forgotten how easy it is to make terminology confusing.

    Any questions, just shout.

    bazz

    Edit: I have added css to the page too to give you a strat there too.
    Last edited by bazz; 10-31-2008 at 04:33 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • Users who have thanked bazz for this post:

    influencedesign (10-31-2008)

  • #6
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Twodayslate & Bazz: thank you for both of your responses

    @ Bazz: i used the image slicing from photoshop and that's what it gave me, I didn't realize it was so ancient lol. I will use the coding you and twodayslate provided to re do it, but as for the box extended with the content how would I go about doing that?

    Thanks again

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Do you mean the centre box? Oh yeh you do, since you wrote that on the image.


    Do that at the end. you can use JS or perhaps some CSS if the box will be the same height in all your pages.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by bazz View Post
    you can use JS or perhaps some CSS if the box will be the same height in all your pages.
    http://bonrouge.com/~fixH
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #9
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    Do you mean the centre box? Oh yeh you do, since you wrote that on the image.


    Do that at the end. you can use JS or perhaps some CSS if the box will be the same height in all your pages.

    bazz
    The center box is going to be the size that it is, but if I add more content I'll need the box to extend downwards with it

  • #10
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by influencedesign View Post
    The center box is going to be the size that it is, but if I add more content I'll need the box to extend downwards with it
    were it me doing it, I would make the box the same size all the time as the two either side. It would make for a more consistent page layout, from page to page.

    Just so long as the content won't make the box too long for the background image. But then, you would have another issue altogether.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #12
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    were it me doing it, I would make the box the same size all the time as the two either side. It would make for a more consistent page layout, from page to page.

    Just so long as the content won't make the box too long for the background image. But then, you would have another issue altogether.

    bazz
    Well, if I were to keep it how it is and not make the box the same size as either side.. how would i go about making it extend when content is inputted?

  • #13
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    by default, divs extend as the content grows.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #14
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by bazz View Post
    by default, divs extend as the content grows.

    bazz
    and if the bg-image is set to repeat so will the image.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #15
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    by default, divs extend as the content grows.

    bazz
    so if i put the box into its own div it will extend without ruining the image?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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