...

View Full Version : table/css help! urgent!



influencedesign
10-31-2008, 01:57 AM
I need help with this.. I sliced up this image in photoshop..as seen in the coding below.http://i34.tinypic.com/2hfic6w.jpg 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



<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>

twodayslate
10-31-2008, 02:02 AM
tables are not the way to go. use divs

influencedesign
10-31-2008, 02:08 AM
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

twodayslate
10-31-2008, 02:10 AM
use background images and repeat them

http://www.partdigital.com/tutorials/convert-web
http://www.google.com/search?hl=en&q=div+slice+.psd&btnG=Google+Search&aq=f&oq=

bazz
10-31-2008, 02:14 AM
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



<!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

I have added css to the page too to give you a strat there too.

influencedesign
10-31-2008, 02:24 AM
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

bazz
10-31-2008, 02:29 AM
Do you mean the centre box? Oh yeh you do, since you wrote that on the image. :rolleyes:


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

twodayslate
10-31-2008, 02:35 AM
you can use JS or perhaps some CSS if the box will be the same height in all your pages.

http://bonrouge.com/~fixH

influencedesign
10-31-2008, 02:35 AM
Do you mean the centre box? Oh yeh you do, since you wrote that on the image. :rolleyes:


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

twodayslate
10-31-2008, 02:43 AM
http://www.w3schools.com/css/pr_background-image.asp


check out http://www.w3schools.com and http://bonrouge.com/~home

bazz
10-31-2008, 03:04 AM
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

influencedesign
10-31-2008, 03:24 AM
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?

bazz
10-31-2008, 03:27 AM
by default, divs extend as the content grows.

bazz

twodayslate
10-31-2008, 03:32 AM
by default, divs extend as the content grows.

bazz
and if the bg-image is set to repeat so will the image.

influencedesign
10-31-2008, 03:35 AM
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?

BoldUlysses
10-31-2008, 04:23 AM
It's a lot easier than it used to be with tables. Check this out (http://www.sufferndesign.com/helping/site93.html).

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>

<style type="text/css" title="">

* {
margin:0px;
padding:0px;
}

body {
width:100%;
text-align:center;
}

#container {
position:relative;
width:555px;
height:582px;
margin:0px auto;
background:url("bg1.jpg");
text-align:left;
}

#inner_box {
position:absolute;
width:262px;
top:175px;
left:150px;
background:url("boxbg1.jpg") repeat-y;
}

p {
padding:0px 5px;
font:0.6em arial, verdana, sans-serif;
color:#fff;
}

#inner_box_bottom_cap {
width:262px;
height:8px;
background:url("boxcap1.jpg");
}


</style>

</head>

<body>

<div id="container">
<div id="inner_box">
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciu</p>
<div id="inner_box_bottom_cap"></div>
</div>
</div>

</body>
</html>

Note the complete lack of clutter in the HTML. Resize the browser font to see the div grow as the content grows.

influencedesign
10-31-2008, 04:51 AM
It's a lot easier than it used to be with tables. Check this out (http://www.sufferndesign.com/helping/site93.html).

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>

<style type="text/css" title="">

* {
margin:0px;
padding:0px;
}

body {
width:100%;
text-align:center;
}

#container {
position:relative;
width:555px;
height:582px;
margin:0px auto;
background:url("bg1.jpg");
text-align:left;
}

#inner_box {
position:absolute;
width:262px;
top:175px;
left:150px;
background:url("boxbg1.jpg") repeat-y;
}

p {
padding:0px 5px;
font:0.6em arial, verdana, sans-serif;
color:#fff;
}

#inner_box_bottom_cap {
width:262px;
height:8px;
background:url("boxcap1.jpg");
}


</style>

</head>

<body>

<div id="container">
<div id="inner_box">
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciu</p>
<div id="inner_box_bottom_cap"></div>
</div>
</div>

</body>
</html>

Note the complete lack of clutter in the HTML. Resize the browser font to see the div grow as the content grows.



you're amazing man! thanks a bunch!

did you have to crop the image for the "inner box"?

BoldUlysses
10-31-2008, 04:56 AM
The background of #inner_box is a thin jpg ("boxbg1.jpg") repeated in the vertical direction (repeat-y in the code) as often as necessary to fill the background space.

Pull out the three images used (boxbg1.jpg, bg1.jpg and boxcap1.jpg) and you'll understand better how the page is put together.

influencedesign
10-31-2008, 05:21 AM
The background of #inner_box is a thin jpg ("boxbg1.jpg") repeated in the vertical direction (repeat-y in the code) as often as necessary to fill the background space.

Pull out the three images used (boxbg1.jpg, bg1.jpg and boxcap1.jpg) and you'll understand better how the page is put together.

awesome man! i appreciate it so much! thanks a grip


thanks everyone else who helped as well!:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum