Content boxes

jank

Right well you may have guessed it I have another photoshop question!

I want to know how I can make a 2 different content boxes independent of each other when info is added to each.

For eaxmple, I may have 2 content boxes. One for maybe quick links and the other the main content of the page or whereever. The quick links may have only a few lines of text in it but the main content may many many lines of info and text.
I dont want the height of one content box affecting the other one ie the maxz length of one making the rest the max length.

If you dont know what im on about take a lot at this

You can see nice content boxes on the left and right as well as the main data in the middle all indepenent of each other and all wraped by a nice content box with the white space being a background image.

I have tried a few different slicing techniques but to no avail. I know it can be done so whats the trick with this?

buddy

Hmmmm, I started reading and saw the word "Photoshop" and went: eeek!! I know noth about Photoshop.

However I think the answer to your dilemna is Tables!! I could be completely wrong.

Take a look at: www.alcobuds.com

Yes, the tables aren't fancy but they are independant of each other.

Figment

jank wrote:

I have tried a few different slicing techniques but to no avail. I know it can be done so whats the trick with this?

Your are going to need to learn a bit of html. Photoshop isnt a web page creation tool so to do anything out of the bsic you will need to know what is going on behind the scenes.

I agree tables seem to be what you need. Or Divs.

jank

I actually know a good bit of HTML.

Just I use photoshop becuse it maks much nicer websites than just basic HTML imo.

However im not too clued in on divs though

tomED

jank wrote:

I actually know a good bit of HTML.

Just I use photoshop becuse it maks much nicer websites than just basic HTML imo.

However im not too clued in on divs though

If you know a good bit of HTML - why are you using photoshop to create the html????

In professional terms, photoshop is only used to create the graphics. After that a html editor is used to bring it altogether.

jank

I use it cause you can save it as a webpage which brings what you have made in one click. I just think it is much easier that way.

Can you have two tables side by side with each other. It solves my problem if you can.

Zombienosh

yup you can do magical things with tables

tomED

jank wrote:

I use it cause you can save it as a webpage which brings what you have made in one click. I just think it is much easier that way.

Can you have two tables side by side with each other. It solves my problem if you can.

Your approach to designing websites is pretty poor - Photoshop wasn't created to be a HTML editor, it just has added features to make some of the usual proofing tasks quicker....

You have to start using a html editor to create decent websites.


Even this comment "I use photoshop becuse it maks much nicer websites than just basic HTML imo." makes me cringe.....

HTML is the skeleton of the website. If HTML wasn't there (to some degree (inserted to stop people saying you could use css)) you wouldn't have a website..... HTML is the powerful part, the grahics are just cosmetics to make HTML attractive.

If you can master HTML, CSS and photoshop you can create excellent websites - better than anything you would ever create with photoshop.

You have to rethink the way you are designing websites - maybe get some books are something and research it on the web. The end result will be much better!

Zombienosh

tomED wrote:

Your approach to designing websites is pretty poor - Photoshop wasn't created to be a HTML editor, it just has added features to make some of the usual proofing tasks quicker....

You have to start using a html editor to create decent websites.


Even this comment "I use photoshop becuse it maks much nicer websites than just basic HTML imo." makes me cringe.....

HTML is the skeleton of the website. If HTML wasn't there (to some degree (inserted to stop people saying you could use css)) you wouldn't have a website..... HTML is the powerful part, the grahics are just cosmetics to make HTML attractive.

If you can master HTML, CSS and photoshop you can create excellent websites - better than anything you would ever create with photoshop.

You have to rethink the way you are designing websites - maybe get some books are something and research it on the web. The end result will be much better!

<smiles> i have to agree </smiles>

jank

OK so what books/ programs would you reccommed.
I use dreamweaver and image ready along with photoshop.
Use CSS too but only in a basic sense.



As with tables how do you get one right next to each other?

<table ????????>
<tr><td>this is the left table</td></tr>
<tr><td>Insert random stuff here!!</td></tr>
</table>

<table ????????>
<tr><td>this is the right table</td></tr>
<tr><td>Insert random stuff here!!</td></tr>
</table>

what can i put in the ??? to make it happen for me

tomED

jank wrote:

OK so what books/ programs would you reccommed.
I use dreamweaver and image ready along with photoshop.
Use CSS too but only in a basic sense.



As with tables how do you get one right next to each other?

<table ????????>
<tr><td>this is the left table</td></tr>
<tr><td>Insert random stuff here!!</td></tr>
</table>

<table ????????>
<tr><td>this is the right table</td></tr>
<tr><td>Insert random stuff here!!</td></tr>
</table>

what can i put in the ??? to make it happen for me

LOL - i'm not doing yer research for you.

The easiest way to get two tables side by side is to embed them in a larger table.



<table ????????>
<tr><td>
<table ????????>
<tr><td>this is the left table</td></tr>
<tr><td>Insert random stuff here!!</td></tr>
</table>
</td></tr>
<tr><td>
<table ????????>
<tr><td>this is the right table</td></tr>
<tr><td>Insert random stuff here!!</td></tr>
</table>
</td></tr>
</table>

Ph3n0m

Try using the following

<table cellspacing="0" cellpadding="0" border="100%">
<tr>
    <td valign="top">
	<!-- table in left hand cell -->
	<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top">
		links or whatever here
		</td>
	</tr>
	</table>
    </td>
    <td valign="top">
	<!-- table in left hand cell -->
	<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top">
		content here
		</td>
	</tr>
	</table>
     </td>
</tr>
</table>

tomED

jank wrote:

OK so what books/ programs would you reccommed.
I use dreamweaver and image ready along with photoshop.
Use CSS too but only in a basic sense.

PS Focus on dreamweaver to help you acheive this... I thought you said you knew a good bit of html?

maxheadroom

Ph3n0m wrote:

Try using the following

<table cellspacing="0" cellpadding="0" border="100%">
<tr>
    <td valign="top">
	<!-- table in left hand cell -->
	<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top">
		links or whatever here
		</td>
	</tr>
	</table>
    </td>
    <td valign="top">
	<!-- table in left hand cell -->
	<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top">
		content here
		</td>
	</tr>
	</table>
     </td>
</tr>
</table>

That made my brain hurt. Why use tables for this when two floated divs are exactly what he's looking for? He also doesn't want the divs to (appear to) expand to be the same height, so this on is easy...

Ph3n0m

if he wants to use divs, all well and good, but he did ask for html help as per his last post

and if you looked closely - neither internal table would have to stretch to be the same height as the other

jank

Im looking for whatever that will work tbh, divs or tables or whatever.

I think i have it though. Ill try it out and let you know how it went down.

However if divs are easier to use then is there an example of some html code i could follow

<div style="position: absolute; left:height: 400px; width: 100px; "><table> left hand stuff...........</table></div>

<div style="position: absolute; right:height: 400px; width: 100px; "><table> right hand stuff...........</table></div>


would the above work?(dont mind the height and the width variables!)

Ph3n0m

not quite

with div you have to specify x and y co-ordinates, so to use your code you would need to do the following

<div style="position: absolute; position: absolute;
[COLOR=Red]top: 20px;left: 250px;[/COLOR] 
height: 400px; width: 100px; ">
<table> left hand stuff...........</table>
</div>

<div style="position: absolute; position: absolute;
[COLOR=Red]top: 20px;left: 650px;[/COLOR]
 height: 400px; width: 100px; ">
<table> right hand stuff...........</table></div>

And aswell as that, all co-ordinates are taken from the top left most corner of a browser top:20px means 20 pixels from the top, and left:250px, means 250 pixels from the left side

However, I for one, do not like using divs all the time, since occasionally you do get cross browser and cross platform issues, especially if you are trying to achieve a complicated layout. But with a simple enough layout like the one above, you shouldnt have any real problems (although absolute positioning can be nasty when it goes wrong)

maxheadroom

Ph3n0m wrote:

if he wants to use divs, all well and good, but he did ask for html help as per his last post

and if you looked closely - neither internal table would have to stretch to be the same height as the other

Well, as far as I (and the W3c) are concerned, tables are for tabular data only. Layout should be achieved using logical divisions (div tags) and CSS.

Just FYI, this code will do the same job:

<style>
#navigation {
  float:left;
  width: 7em;
}

#main-copy {
  margin-left: 7em;
}
</style>

<div id="navigation">Navigation stuff</div>
<div id="main-copy">Main Copy</div>

No need for absolute positioning, just float the nav column to the left and set the margin on the right column so there's no overlap.

Look at http://www.positioniseverything.net/ - its a great resource for tableless layout tips.

jank

ok ive tried using the CSS and i have the following

<style>

#main {

position: absolute;
left: 244px;
top: 189px;
width: 606px;
height: 406px;


}

#login {
position: absolute;
left:0 px;
top: 189px;
width: 244px;
height: 145px;

}

#special {
position: absolute;
left:0 px;
top:351 px;
width: 244px;
height: 144px;

}


</style>

As you can see i have two small content boxes on the left and one big main one on the right

i then do this

<div id="login">
<table>
<TR>
		<TD COLSPAN=8 ROWSPAN=2>
			<IMG SRC="images/logintop.jpg" WIDTH=244 HEIGHT=36  ALT=""></TD></TR>

<TR>
		<TD background="images/loginleftside.gif"  WIDTH=35 HEIGHT=80  ALT="" COLSPAN=2>
			</TD>
		<TD background="images/loginmain.gif" WIDTH=175 HEIGHT=80   ALT="" COLSPAN=4>
			</TD>
		<TD background="images/loginrightside.gif" WIDTH=34 HEIGHT=80  ALT="" COLSPAN=2>
			</TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=80 ALT=""></TD>
	</TR>

<TR>
		<TD COLSPAN=8>
			<IMG SRC="images/loginbottom.jpg" WIDTH=244 HEIGHT=29 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=29 ALT=""></TD>
	</TR>
</table>
</div>

and more or less the same for the other two div "main" and "special" in that order

The results are well lets just say images are all over the place
Now ive tried to taje yer advice and do things better, i know im still using tables but im trying to move away from it but I REALLY need to get this working

Any ideas?

maxheadroom

jank wrote:

ok ive tried using the CSS and i have the following

[snip]

The results are well lets just say images are all over the place
Now ive tried to taje yer advice and do things better, i know im still using tables but im trying to move away from it but I REALLY need to get this working

Any ideas?

Ok, you're halfway there. Firstly, look at this http://members.boards.ie/maxheadroom/jank.html - its a more flexible way to lay out your boxes.

The next thing you need to think about is your images. In this example I'm assuming that your left box is 175px wide.

You have a top image which is 175 pixels wide and 20px tall, you have a bottom picture which is 175px wide and 20px tall and you have a vertically repeating central part which is 175px wide and 1px tall. Set the repeating image to be the bg image for the leftbox like this:

background: white url(middle.gif) repeat-y 0 0;

Now, change the code for the left div to add a div for your top and bottom images:

<div id="leftbox">
  <div id="lefttop"> &nbsp; </div>
  <div id="leftmain">
    <h2>This is the left box</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sit amet tellus sit 
      amet est auctor convallis. Class aptent taciti sociosqu ad litora torquent per conubia 
      nostra, per inceptos hymenaeos. Cras metus lorem, varius et, lobortis vitae, tristique 
      ac, eros. Etiam ligula mauris, faucibus sed, pharetra ut, malesuada nec, pede. Maecenas
      lacinia mauris ac quam. Quisque imperdiet pretium pede.
    </p>
  </div>
  <div id="leftbottom">&nbsp;</div>
</div>

And add appropriate CSS:

#leftbox {
  border: none;
  float: left;
  width: 175px;
  margin-bottom: 5px;
  background: transparent url("jank-middle.gif") repeat-y 0 0;
  padding: 0; 
  }

#leftbox #lefttop {
  background: transparent url("jank-top.gif") no-repeat 0 0;
  height: 20px;
  }

#leftbox #leftmain {
  margin: -20px 5px;
  background: transparent;
}

#leftbox #leftbottom {
  background: transparent url("jank-bottom.gif") no-repeat 0 0;
  height: 20px;
}

And you can see the result here: http://members.boards.ie/maxheadroom/jank-images.html

You should be alright from here, but feel free to come back and ask any questions Also, I haven't added any box-model hacks to make IE play nicely, so this won't work on anything less than IE 6. read www.positioniseverything.net to learn how to modify this to work in older versions of IE.

Cork Skate

Dreamweaver should do all that for you .... there is no need for all the mssing around. Not exactly sure how/where in DW but it is DEFINITELY in there. I prefer to do it myself in a text editor.

jank

Cheers for all the help

I did it by just deleting the html that was giving me problems and then just adding my own tables bit by bit.

It was way too messy to do the other way.

Have it working nice now though although im going to have to research alot more about CSS.

maxheadroom

Cork Skate wrote:

Dreamweaver should do all that for you .... there is no need for all the mssing around. Not exactly sure how/where in DW but it is DEFINITELY in there. I prefer to do it myself in a text editor.

Relying on dreamweaver won't teach you anything about why things work the way they do. Those examples were put together in notepad, only used dreamweaver for the source formatting.