PDA

View Full Version : template with graphics and varying text areas


dubaco
07-07-2008, 09:42 AM
Hi
I must say that what I have read in this forum has completely changed me from my frame/table based designing to a css/div one (much thanks to the general feeling that "frames are evil")
However, I am struggling with something related to my migration.
I have an area for text that consists of an internally bevel edged box that used to be constructed using a 3 row table with a top, middle (one pixel high) and a bottom graphic. The height would then vary depending upon the amount of text in the middle row.
I have recreated with 3 div areas but how do you make the middle box variable in height? I have made it an editable region but it either doesn't fill tottaly or overflows.
It's probably something daft I'm doing by mixing the 2 approaches.

The other question is do I need to put all the divs in one outer div or can I just create them where I choose on the page. It still seems to work with no outer div.
I hope that makes sense.
Many thanks
Dubaco

Corrosive
07-07-2008, 10:21 AM
Ha, ha Frames ARE evil!!

You can change the border attributes of a div using CSS. Look at the border options and you'll see a whole range and I believe that a bevelled edge is available thus saving you mucking about with three divs!!

Give it a try.

dubaco
07-07-2008, 10:35 AM
Cheers for that lightening response, didn't notice border styles before so need to muck about some more. However they seem to be squared corners and I had created some artyfarty curved ones with chosen light source etc in PSP. Do I just dump that idea or is there a way of making a div area "expandable" thus dealing with the impact on a lower div?
The other concept I can't quite get is when to nest divs.

Corrosive
07-07-2008, 11:31 AM
Cheers for that lightening response, didn't notice border styles before so need to muck about some more. However they seem to be squared corners and I had created some artyfarty curved ones with chosen light source etc in PSP. Do I just dump that idea or is there a way of making a div area "expandable" thus dealing with the impact on a lower div?
The other concept I can't quite get is when to nest divs.

Try height:auto rather than giving it a fixed height, that will help the div to expand with the text. If I wanted 'arty farty' curved edges I would have a div at the top of the box with the top of the box set as a background jpeg, the main content for the text as a div below and use height:auto and put a repeating 'slice' of the background of the box. repeat:y (I think, but check that) and then you can type text over this and then do the foot of the box as the same way as the header. Does that make any sense??

dubaco
07-07-2008, 12:04 PM
I would have a div at the top of the box with the top of the box set as a background jpeg, the main content for the text as a div below and use height:auto and put a repeating 'slice' of the background of the box. repeat:y (I think, but check that) and then you can type text over this and then do the foot of the box as the same way as the header. Does that make any sense??

Thanks again!
That's sort of what I tried, believe it or not, but what do you put as the starting l and t position of the lower div with the bottom graphic, or is this where nested divs come in?

Corrosive
07-07-2008, 12:18 PM
OK, I'm going to try and explain this to the best of my ability (ha, ha). Use div tags rather than layers because they 'divide' your page up into sections. If you place your expanding box inside a bigger div, say 'column two' so that it is fixed on the page and then do as I said, the expanding div will automatically push the div below it (the footer) down. No need to nest layers. I tried it once with nesting layers and came unstuck badly!! If it is set in another div, which stops it from wandering off the page when you expand the div above (with text), then just set the L & T both to '0' (or nothing at all) and it should work. It will automatically appear below the div above.

Which tutorials have you studied so far??

dubaco
07-07-2008, 12:32 PM
Aaaahh, I using insert-layout object-AP Div. not tags! Thanks again.

I found a couple of tutorials and used this one but got stuck towards the end:

http://www.samueljesse.info/tutorials/CSS/

This one mentions div tags and I was meaning to have a go when I had a minute:

http://www.vineyardesigns.com/resources/dreamweaver/div_css_site.shtml

Have you a better suggestion?

Corrosive
07-07-2008, 12:50 PM
Try this resource

http://www.adobe.com/devnet/dreamweaver/css.html

It helped me get to grips with CSS.

Try and use Div Tags wherever possible. Although AP Divs (or layers) promise the ability to drag and drop wherever you need them it tends not to work out that way in my experience.

I think it's like Div Tags are like building your house on rock and Layers are like building it on sand. If you build on rock with Div Tags then you can use layers for the windows! Replace 'house' with 'website' and 'windows' with 'elements' such as images etc. and you should start to get the picture.

I hope that helps or, if not, refer me for psychiatric help :wink:

dubaco
07-07-2008, 08:33 PM
You're a star, Corrosive, just what I needed, blimey where do I start?
Dubaco:-D

Corrosive
07-07-2008, 08:41 PM
You're a star, Corrosive, just what I needed, blimey where do I start?
Dubaco:-D

have you got a design mocked up??

dubaco
07-10-2008, 07:35 PM
Hi again
Thanks for the "pointed in the right direction" again

With these Adobe tutorials, any suggestions as to where I start for the div tag grounding? I've got a customer chomping at the bit and I desperately need to have a site that will allow the whole page to scroll?
Cheers
Dubaco

Corrosive
07-11-2008, 11:04 AM
Hi again
Thanks for the "pointed in the right direction" again

With these Adobe tutorials, any suggestions as to where I start for the div tag grounding? I've got a customer chomping at the bit and I desperately need to have a site that will allow the whole page to scroll?
Cheers
Dubaco

Hi Dubaco

Can you explain better what you mean by 'allow the whole page to scroll?'

Cheers

dubaco
07-14-2008, 02:51 PM
Hi Corrosive

I'm going around the bend here, everyone appears t have a different angle on creating a page with div tags. I have picked up that the whole page wants to go in a "container" but my page consists of top navi bar, side navi bar, contents frame, etc.
Does absolutely every element go in a div? I mean does every item in the left nav bar go in its own div retained within the "contaner" div?
Is there a straightforward tutorial you could recommend to get me off the ground.
I have an idea of what I am trying to create here:
http://www.playsportcoaching.co.uk/mockup.htm
I know you're probably busy but any guidance would be gratefully appreciated.
Cheers
Dubaco

Corrosive
07-14-2008, 03:10 PM
Hi Corrosive

I'm going around the bend here, everyone appears t have a different angle on creating a page with div tags. I have picked up that the whole page wants to go in a "container" but my page consists of top navi bar, side navi bar, contents frame, etc.
Does absolutely every element go in a div? I mean does every item in the left nav bar go in its own div retained within the "contaner" div?
Is there a straightforward tutorial you could recommend to get me off the ground.
I have an idea of what I am trying to create here:
http://www.playsportcoaching.co.uk/mockup.htm
I know you're probably busy but any guidance would be gratefully appreciated.
Cheers
Dubaco

Hi Dubaco

EVERYTHING goes into your container or (as I call it) wrapper DIV. You need to look at a basic two column layout using CSS. If you mail me at info@corrosiveonline.co.uk I can talk you through it.

Cheers