# Help creating Web Page - Creating text area



## wiggymob (Mar 13, 2007)

Hi all,

I'm creating a web site (pretty basic one) and need some help.

I've attached a screen shot showing the general design I want to create. 

It'll consist of a background pic (the one in the screen shot is purely for an example!), it'll have a number of buttons located on the left hand side and what I want to do, is depending on the button pressed I want a new page (with new text) to appear in the red square.

I've had a brief play with Flash & I'm going to set up some fancies animated buttons for the left hand side but I'm having problems creating the part on the right hand side where I want my text to appear.

I've had a search through the net and have come across pages on Frames & tables but don't know if this is what I need to use.

When I've tried creating frames (consisting of a small area of the left and a larger area of the right) it keeps giving me a visible bar which I don't want & also I couldn't get the frames to have a background pic behind it (spanning across both frames)

Can someone explain what I need to do to achieve what is shown in the screen shot? 

Thanks in advance

Ross


----------



## WendyM (Jun 28, 2003)

Hi wiggymob,
You don't need tables or frames to accomplish this. Are you familiar with css at all? You can create a div for your overall page and set the background on that. Then you can create a div for your menu on the left and a div for your content on the right and the set the content to float to the right of your menu. If that sounds completely foreign to you, let us know and I'll mock up a css page and an html page to show you what I mean.


----------



## wiggymob (Mar 13, 2007)

Thank WendyM for replying.

I've not had any exposure to CSS but if you feel it'll help me achieve what I want then I'm all ears 

Could I still put some flash buttons on the menu section on the left?
Can the background pic span across the whole page?

Re your example, if you could do that, that would be fantastic. Would you mind doing the example in the same layout etc as my example screen shot 

Thanks again

Ross


----------



## WendyM (Jun 28, 2003)

Hi Ross,
The answer to all of your questions is yes. Unfortunately, I'm on my way out of town for the weekend but I can give you an example on Tuesday. Hopefully someone else will post an example, but if not, I'll get back to you next week. Sorry for the bad timing!


----------



## Gibbs (Feb 28, 2005)

Not sure if I'm on the right track so excuse me if this isn't what your after. When you talk about a "visible bar" do you mean border?

To remove a border inside your 

tag add this for example:

```
[TABLE]
```

Now for the iFrames. I guess you want them to be transparent so that your background image is visible?

If so use this in the body tag of your iFrame:

```

```

Hope that helps.


----------



## wiggymob (Mar 13, 2007)

Thanks WendyM, no worries if you can post an example when you return that'll be great, thanks

Thanks for replying Gibbs. I've tried using the 2nd piece of code to make the background image visible across both frames but it doesn't seem to work.

In this piece of code, where would I need to place your text?:

My Frames Page

It's just a mock page so far, just trying to play around till I can get what was shown in the screen shot I attached. To re-cap, I just want a content section just off center so that when someone clicks on a menu on the left, the relevant text appears in the contents section (or red square in my screen shot)

Thanks


----------



## Gibbs (Feb 28, 2005)

You need to place it in the section of the iFrames (inside "Copy of Page1.htm" by the look of your code).


----------



## sbrisendine (Apr 21, 2007)

I recently found a good site that might help you out, http://www.webdesignfromscratch.com/html.cfm

Start there and then move up to the CSS pages, then go back around for the other articles.

If you want some templates to help you reference to something that might get you to the code your looking for http://www.opendesigns.org/ is another good resource.


----------



## wiggymob (Mar 13, 2007)

After reading through some CSS sites I seem to have got the design I wanted (thanks sbrisendine for your links) but I have a couple more question:

Can I add flash buttons to a stylesheet? If so, how is this done?

From that:

How do I code it so that when a flash button is pressed it opens a HTML into one of my internal CSS pages (i.e. into the RED square area on my screen shot)?

Thanks

Ross


----------



## sbrisendine (Apr 21, 2007)

hey wiggy, I need to do a little more research on that myself, but these look to be some good resources.

simple: http://www.technorealm.co.uk/design/frame-targetting.html
complex but full info: http://www.w3.org/TR/html401/present/frames.html


----------



## Sequal7 (Apr 15, 2001)

wiggymob said:


> Can I add flash buttons to a stylesheet? If so, how is this done?


No, you add them to your html page. The flash buttons are still content that you add to a div on the page, much like adding text to the page.



wiggymob said:


> How do I code it so that when a flash button is pressed it opens a HTML into one of my internal CSS pages (i.e. into the RED square area on my screen shot)?


The flash buttons need to open "relative" links, then it will load a new page. Your content goes in the same place on each page you create.

Here is a sample of a CSS page that you wanted as well. You can view the source code for the page it is very basic and you can modify it to suit. Keep also in mind tha this is a fluid page, so it will expand as the window sizes expand, you can also make it fixed. Only the first link works, the rest would be similar.

EDIT: Man, can I spell anything...sorry cleaned up the typos'


----------



## wiggymob (Mar 13, 2007)

Thanks everyone for replying.

I'll have a look at <DIVS> and see if I can work it out.

I'll no doubt come back to you if I'm stuck!


----------



## haswalt (Nov 22, 2004)

just a note try to staty away from iframes, they're not good practice and cannot not be read by all browsers.


----------



## wiggymob (Mar 13, 2007)

Hi all,

Ok, I posted on here a while ago Re: help with creating a content text area for a website I'm doing & after some advise from others regarding CSS DIV's I've since managed to get my site to exactly how I wanted it............................... apart from only in Firefox!!

In IE6 the layout and positioning of certain DIV's are completely wrong & as I'm new to web design I'm not sure how and why?!

I've had a search around the net over the past few days & come across various sites mentioning known bugs with IE6 but again as I'm new to web design I don't really know what I'm looking for.

Therefore would it be possible if some kind sole would have a look at the attach page & explain why the DIV work fine in Firefox & what is required to get the text in the same position for IE6 etc????

I'm hoping that if someone can correct it on this page I can then use it to correct my other pages.

Thanks in advance

Ross


----------



## wiggymob (Mar 13, 2007)

Managed to fix the content / layout etc in IE6 but now have same problem in IE7!!

So at the moment I've got it sorted in Firefox & IE6 but need to sort the layout out in IE7.

As I'm scared any changes I'm gonna make will correct one & effect the other, is there any code I can put in which will only effect one particular browser?? (e.g. IE7)

Ross


----------



## wiggymob (Mar 13, 2007)

The problems I've got is the Edwardian Script ITC font I've used for the main heading is not recognised in IE7 but fine in IE6 & Firefox.

The other problem is the pictures I've used which sit inside a "content" div. In IE6 + Firefox they are positioned nicely but in IE7 the pics appear to be repeated to fit the whole "content" div. I'm not sure if this maybe something to do with the picture sizing?? 

I also had a problem with the border around the "content" div which I seem to have fixed myself by removing the first visible line in the code which put IE into quirk mode

I can provide example pages if required???


----------



## wiggymob (Mar 13, 2007)

Since seen that you can specify a different stylesheet to be loaded depending on the version of IE for example.

Can anyone advise where you put the IF statments & can you enter more than one?


----------

