Solved

how do i configure an HTML page in dreamweaver so that it will auto size the contents to fit on the screen?

Posted on 2004-09-25
14
608 Views
Last Modified: 2010-04-25
hi,

i am using dreamweaver to build up an HTML page, and i want to configure the page so that, when viewed as a web page, the contents will fit on the page (by this i mean the entire width), so that i don't have to scroll to the right to view contents that can't fit.  also, when i open a menu on the left, such as the favourites menu, i'd like the contents of the page to resize (i.e. go smaller) so that the entire width of the page is still visible,

thanks

nick
0
Comment
Question by:nick_harambee
  • 7
  • 6
14 Comments
 
LVL 14

Expert Comment

by:Esopo
Comment Utility
There are a few ways.

You can put everything inside a table and set that to 100% width.
You can put everything inside a contanier and apply CSS formatting.

But the important thing is that you must layout your page in a way that will allow the content to shrink or expand without affecting the overall look.
For instance, if you want a 3 colum layout, you could use something like this:
http://www.ssi-developer.net/main/templates/temps/3c-hd-ft-flex.htm

See how the center column resizes to fit the screen size?
This will require that you "prepare" your center column for various sizes ranging somewhere between 300pxs to 800pxs (if you want to satisfy most viewers).

Check this link for more layouts (two cols, three cols, misc):
http://www.ssi-developer.net/main/templates/index.shtml

Best regards,

Esopo.



0
 
LVL 10

Expert Comment

by:rockmansattic
Comment Utility
<quote>
 i'd like the contents of the page to resize (i.e. go smaller) so that the entire width of the page is still visible,
</quote>

to make the text get smaller, you would have to incorporate some javascript to change the size of teh font (not recommended)
also to change the size of images, you can do the javascript way (again, not recommended) or use relitive sizing like your tables (as Esopo suggested)  width=100% height=100%.
you should put these images in there own cell or div tag, depending on how you have it setup.

Mysuggestion, do as Espop suggested, and dont change the size of teh object in the page, just the text should be affected.

Rockman
0
 
LVL 14

Expert Comment

by:Esopo
Comment Utility
Reading Rockman's post I realized you may want to resize the page's "content" meaning making pictures and text smaller or larger to fit the window, is this what you want? If so, there are ways to accomplish it and we can provide code for it, but as Rockman stated, it is highly NOT RECOMMENDED.

If that is not what you want, then you should have had your problem solved by now, how are you doing Nick?
0
 

Author Comment

by:nick_harambee
Comment Utility
i am working on too many questions at the moment i think!! (whilst trying to have a life at the same time).

what i have (or rather what i will have) is a web page which consists of a header and a table with maybe 8 thumbnails in each row.  below each thumbnail is some text.  so the suggestions about just resizing one of the columns (e.g. the middle column of 3) are not really suitbale for what i want to do.  i was hoping that there would be a simple way of resizing all the contents of the page to fit the size of the window, but if you say it is unadvisable i guess i should just make sure all the contents fit when the page is fullscreen, and accept that if the window is smaller, then scrolling left to right is what i'll get,

nick.
0
 
LVL 14

Accepted Solution

by:
Esopo earned 500 total points
Comment Utility
So your problem is the 8 col table for the thumbnails, right? I am guessing you are looking for something like this:


****************************************
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#F7F7F7" style="font-family: Arial, Helvetica, sans-serif;      font-size: x-small;">
  <tr>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td width="12%"><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
  </tr>
  <tr valign="top">
    <td><div align="center">This is some text </div></td>
    <td><div align="center">This is some text, This is some text</div></td>
    <td><div align="center">This is some text, This is some text</div></td>
    <td><div align="center">This is some text</div></td>
    <td><div align="center">This is some text, This is some text, This is some text</div></td>
    <td><div align="center">This is some text</div></td>
    <td><div align="center">This is some text, This is some text</div></td>
    <td><div align="center">This is some text, This is some text, This is some text</div></td>
  </tr>
  <tr>
    <td colspan="8">&nbsp;</td>
  </tr>
  <tr>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
    <td><div align="center"><img src="http://www.experts-exchange.com/images/pe/1796676.jpg"></div></td>
  </tr>
  <tr valign="top">
    <td><div align="center">This is some text </div></td>
    <td><div align="center">This is some text, This is some text</div></td>
    <td><div align="center">This is some text, This is some text</div></td>
    <td><div align="center">This is some text</div></td>
    <td><div align="center">This is some text, This is some text, This is some text</div></td>
    <td><div align="center">This is some text</div></td>
    <td><div align="center">This is some text, This is some text</div></td>
    <td><div align="center">This is some text, This is some text, This is some text</div></td>
  </tr>
</table>
****************************************

The table will shrink and expand according to the size of the window. It will also stop shrinking before it hurts the content. Let me know if this helps.

Esopo.
0
 

Author Comment

by:nick_harambee
Comment Utility
thanks esopo - we are getting there!  however, one of the other questions that i am asking on EE at the moment is to do with sorting the thumbnails on a page alphabetically, from top left to bottom right (i.e. not just in rows or columns, across the whole page).  here are the links:

http://www.experts-exchange.com/Web/Graphics/Q_21136701.html

http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_21142973.html

up until yesterday i didn't think that this was going to be possible, so i thought i would have to manually insert new thumbnails, and then all the other thumbnails would be shifted along one, or down onto the next row (i still have some work to do in following up the possibility of sorting the thumbnails automatically, and not much time at the moment).

if i did have to go down the manual route, it would be rather more complicated using your code, as each row is entered seperately.  i will accept your answer as the answer to my question, but would it be possible to adapt your code, so that the number of columns per row is specified at the start of the table, and then the thumbnail/text entries can all be in one long list, where after each 8 thumbnails, a new row would automatically be started?  

thanks,

nick.
0
 
LVL 14

Expert Comment

by:Esopo
Comment Utility
>>if i did have to go down the manual route...<<

How many thumbnails are you going to be using, and how often will you be needing updates? I am guessing you don't have a database with all of this information... which would make an excellent step #1 into getting you thumbnail page up. If you are not going to be "moving" too much information, then a manual approach could be reasonable.

Basically, if I am getting you right, you want to (1) be able to display thumbnails of some info that you already have, (2) do such displaying automatically and (3) with some sorting applied (alphabetically for now).

This is fairly simply once you get the idea correctly (and the tools in order). First of all you need Server Side scripting. I noticed you asked in the Coldfusion area, do you have Coldfusion installed in your web-host?
Other suitable Server Side languages would be ASP, PHP and Perl (I could help you with ASP & PHP).

Now, the common approach is to put the info into a database (or something similar) and make a simple webpage that will load the info and present the information.

Are we on the same page? let me know so I can help you further.


BTW: The code I gave you is very basic and was ment to help you get the idea of a table that does what you want. That table is very simple:
- 8 cols
- 5 rows (one row of pics + one row of titles + one row for separation + one row of pics + one row of titles)

And,

- the first 8 cels are set to 12% width (which adds up yo 96% width that IE understands and evens out)

If you want to use less cols then just change the individual cel width to add up to 100% or a little less.

Best regards,

Esopo.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:nick_harambee
Comment Utility
thanks for your message esopo and sorry for the delay in getting back to you

if there was a way of converting your script that you have entered above for a table with 8 columns that can be resized so that i could enter the information for the thumbnails in one list in dreamweaver, and then the first 8 lines would be used for row 1,  the second 8 for row 2, etc., then i would settle for this.  i do have cold fusion installed though, so i am open to the other method you suggest (i.e. creating a database first, then using coldfusion/dreamweaver/whatever to create the page) but i will need quite a lot of assistance with this as i haven't used coldfusion before.

here is a detailed description of exactly what i am looking for:

i have thumbnails saved on my pc which are photos of authors.  i want to generate a webpage with a title and specific formatting for colour/font etc.  then below the title would be a table of thumbnails, with the authors name below each thumbnail.  each thumbnail (rather than the text below) would be a hyperlink to a webpage dedicated to this author.  the thumbnails will be sorted alphabetically according to the name of the author from the start of the table (top left) to the end (bottom right), and will probably number between 20 and 40 per page.  every now and then i will be needing to add an author to the table, and once i have done so i want to be able to sort the table again.  finally, i would like the table to be able to resize to fit the size of the window as in the script you posted for me above.

i hope this is clear,

thanks,

nick.
0
 

Author Comment

by:nick_harambee
Comment Utility
hi esopo,

i don't seem to be getting anywhere with the automatic/coldfusion route, so i would be grateful if you could tell me whether it is possible to adapt your script as i have outlined above (i.e. to have one list of all the thumbnails/links and then send the first 8 to row 1, send 8 to row 2, etc)

thanks,

nick.
0
 
LVL 14

Expert Comment

by:Esopo
Comment Utility
Hi Nick,

Sorry I didn't answer you before. You can easily adapt the concept I gave you but not the code since it's pure and simple HTML. You need to work with server side scripting and that will require you use a similar concept as the example I used to create your automated page.

I'm very sorry to hear your Coldfusion approach is not working. I can't understand why since this site has some extremely well suited Coldfusion experts. I myself can't help you there cause I never really took the time to learn Coldfusion since I am more than satisfied with my languages of choice ASP & PHP.

Two things:

1. I would recommend you that when asking Qs here at EE you divide your needs into very small chuncks that can be asked & answered easily and fast. For instance, when you asked this Q it was a bit unclear but eventually we were able to figure your needs out and provide a working example. If you are not clear and ask for more than one thing you risk experts not spending time in your Qs, besides asking more than one Q per thread is against EE policies.

2. You need to decide how is your server going to be setup. I realize that you already have Coldfusion installed so I would go with that since it requires no extra work (and/or money). If your previous Q was not answered correctly you can make peace with the experts that tried to help you and then ask for the Qs deletion in the Community Support area, so that you can reformulate your Q and ask again.

If you choose to do this with a different server side language (like ASP or PHP) I would be more than happy to help you out, but I am sure someone else will beat me at it since what you ask for is really simple. You should be able to get your answer within 5 mins if your Q is well formulated.

Whichever way you choose to go, be sure to let me know and to point the new experts that will be helping you to this thread, so they can get a better notion of your needs.

Best regards,

Esopo.
0
 

Author Comment

by:nick_harambee
Comment Utility
thanks for your message esopo,

i have to say, i am getting a little frustrated now with all this.  it seems to me that what i am looking for is very simple, and i don't have the time or desire to get into working out coldfusion or any other server side scripting.  i have now asked several questions on ways to get my thumbnails page up without much success.

i am sure you are clear on what it is i am looking to do, and in fact, i can adapt your code easily to give me what i want.  it is just that the procedure for adding more thumbnails is too complicated.

i have asked the question in cold fusion and i do not seem to be getting anywhere.  and i am not sure how to ask the question differently.  i am also not sure on how to break it down into smaller questions, as for me i am trying to do one thing, or at least all the things i am trying to do are interelated and to break them down would probably only confuse me/others more!

so i think i am stuck!

nick
0
 
LVL 14

Expert Comment

by:Esopo
Comment Utility
You are drowning in a glass of water my friend. Let me shed some light ;)

Let's say you skip the formal database approach (using Access, SQL, etc) and just use the stuff you already have in a folder. I suspect you pictures are already named alphabetically so you would need a fairly simple script that would 1.read the folder 2. List the jpgs in it, 3. Dinamically create the table.

This is as simple as 1, 2, 3... ;)

If all you want is the names listed below the pictures, you can name the jpgs with the exact name of the person and then have your script display them using the name of the file below the pic (without the .jpg extension).

------------------------------------------

I would personally do it like this:

- Get all my files into one folder with some naming convention (giving the files names based on some structure so that it becomes easy to manage... examples below)

- Make a simple text file that holds in each line the name of the pic file I want it to display and the text it should display with such pic.

- Make a script that reads the text file and creates the table.

Exmpls:
****************************
Naming convention:
First 3 letters of the last name + first 2 letter sure name  + 1 letter middle name + underscore + a letter telling the size of the pic
Exmpl: Small picture of John A. Smith -> smijoa_s.jpg


Files in the folder:
smijoa_s.jpg
mirtab_s.jpg
casjee_s.jpg
jonmic_s.jpg
grualg_s.jpg
DATA.txt


Info in DATA.txt:
smijoa_s.jpg, Professor John A. Smith
mirtab_s.jpg, Head advisor Taurten B. Mirthroll
casjee_s.jpg, Senior advisor Jesus E. Cassie
jonmic_s.jpg, Janitor Michael C. Jones
grualg_s.jpg, The best guy ever Albert G. Gruthenthal

****************************

This looks coherent to you?
0
 

Author Comment

by:nick_harambee
Comment Utility
ok, so this looks like it could be possible (for me!)

just to give you a bit more info on what i want to be doing.  at present i have all the thumbnails saved as the author name, and it is exactly this text that i want to display below each thumbnail.  also i want each thumbnail (as opposed to the text below) to be a hyperlink to the author page.  

as for writing the script, i would struggle to do this.  is it a simple script that you could post for me?

i kind of need someone to hold my hand on this one! (my mum once told me that you can drown in 6 inches of water)

thanks

nick.
0
 
LVL 14

Expert Comment

by:Esopo
Comment Utility
Don't worry nick, you'll get it.

As for the script, yes, I could post it for you (It will take me about 15 mins to get it together), but I still don't know what language you will be using... remember I don't do Coldfusion.

I would have posted something already if I thought it was going to be helpful. I strongly recommend you stick to your Coldfusion since it is already there. As I said before, with the right question you should get more answers than you can handle within minutes.

Go to the coldfusion area and post a simple yet descriptive Q about your specific need, with references to the code I gave you for the table and the way you spect the script to deal with the files you already have... but FIRST make sure you close the Q you already have open. I would post my Q on monday morning since there will be more experts around.

Also, if you have s few minutes to spare, it will help you a lot to go through some ColdFusion basic info to help you grasp better the stuff you are dealing with. You can start here:

- Intro:
http://www.firstserv.com/support/sharedHosting/coldfusion/coldfusionWhatIs.cfm

- Samples:
http://www.cfdev.com/code_samples/coldfusion.cfm


I promise, if you don't get this Coldfusion thing dealt with by next week, I'll help you find an alternative and provide the code ;)



Cheers!

Esopo.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now