100% width, how to?

frold · Post by **frold** » Thu 27. Nov 2003, 00:23

If you see my test site:

http://www.frold.lir.dk/cms/index.php

I have some questens:

1. how do I get the menu to change colors when my mouse is over an item?

2. How do I get the width 100%, so when your IE windows i small the text is following the windows size?

Right now my templates main code is(see below), it is just a test site to test how this system works...:

Code: Select all

<TABLE cellSpacing=0 cellPadding=0 border=0 width="100%" style="border-collapse: collapse" bordercolor="#111111">
        <TBODY>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=10 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD class=breadcrumb width="50%">{BREADCRUMB}</TD>
          <TD class=footer align=right width="50%">Sidst opdateret: {DATE_ARTICLE}</TD></TR>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=5 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=1 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=499></TD></TR>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=15 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD>
        </TR>
        </TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111">
        <TBODY>
        <TR>
          <TD width="100%"><A name=jump1></A>{CONTENT}</TD></TR>
        <TR>
          <TD width="100%"><IMG height=25 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD></TR>
        <tr><td width="100%">[BACK]<img src="http://www.phpwcms.de/img/article/back_link_0.gif" border="0" width="36" height="7">[/BACK]</td></tr>
        <TR>
          <TD height="100%" width="100%"><IMG height=25 
            src="http://www.phpwcms.de/img/leer.gif/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD width="100%"><IMG height=1 
            src="http://www.phpwcms.de/img/article/elements/content_line_499.gif" 
            width=499></TD></TR>
        <TR>
          <TD width="100%"><IMG height=5 
            src="http://www.phpwcms.de/img/leer.gif/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD class=footer width="100%">[RSS all]XML RSS[/RSS] Dette er blot en test!!</TD></TR>
        </TBODY>
</TABLE>

My footrs code is:

Code: Select all

<TABLE height=11 cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD width="100%" bgColor=#4a5966 height=1><IMG height=1 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD>
          <TD width=20><IMG height=1 
            src="http://www.phpwcms.de/img/article/elements/bg_bottom_shadow_1px.gif" 
            width=20></TD></TR>
        <TR>
          <TD height=10><IMG height=10 
            src="http://www.phpwcms.de/img/article/elements/bg_bottom_shadow.gif" 
            width="100%"></TD>
          <TD><IMG height=10 
            src="http://www.phpwcms.de/img/article/elements/bg_bottom_corner.gif" 
            width=20></TD>
        </TR>
        </TBODY>
</TABLE>

And my left code is....

Code: Select all

{NAV_TABLE_COLUMN}
<IMG height=100 src="http://www.phpwcms.de/img/leer.gif" width=1>

Bijan Hemati · Post by **Bijan Hemati** » Thu 27. Nov 2003, 00:39

Hi frold,

for 1st question see this posting.

http://www.phpwcms.de/forum/viewtopic.p ... =mouseover

Regards,

Bijan

frold · Post by **frold** » Thu 27. Nov 2003, 20:57

thx what about the second Q?

ric zito · Post by **ric zito** » Fri 28. Nov 2003, 10:08

If you see my test site:

2. How do I get the width 100%, so when your IE windows i small the text is following the windows size?

In the Admin, in the Page Layout section, just set All Blocks width to 100%. Your tables in your template will have to be at width=100% to, if you want them to stretch accordingly.[/quote]

frold · Post by **frold** » Fri 28. Nov 2003, 11:42

Well there is still somethings wrong...

It will let you reseize you browser windows until a limit and then it doesn´t will.

See this picture... it is big, so click on the link - here it looks great

http://www.studmed.dk/images/bigcms.jpg

here is when the windows size is small, it doesn´t look good...
1. the menu is small
2. and you still have to scroll left/right to see the whole text and that is what I doesn´t want - the reason is that my site has to be visible on a pocketpc

Bijan Hemati · Post by **Bijan Hemati** » Fri 28. Nov 2003, 18:15

If you want your text to collapse when the window is resized, you should create an html type content and put this code in it.

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="100%">Your text goes here.</td>
  </tr>
</table>

frold · Post by **frold** » Fri 28. Nov 2003, 19:20

Well.. I have to redesign my templates via admin?

right now my main block use this code on my local test server...

Code: Select all

<TABLE cellSpacing=0 cellPadding=0 border=0 width="100%" style="border-collapse: collapse" bordercolor="#111111">
        <TBODY>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=10 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD class=breadcrumb width="50%">{BREADCRUMB}</TD>
          <TD class=footer align=right width="50%">Sidst opdateret: {DATE_ARTICLE}</TD></TR>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=5 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=1 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=499></TD></TR>
        <TR>
          <TD colSpan=2 width="100%"><IMG height=15 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD>
        </TR>
        </TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111">
        <TR>
          <TD width="100%"><A name=jump1></A>{CONTENT}</TD></TR>
        <TR>
          <TD width="100%"><IMG height=25 
            src="http://www.phpwcms.de/img/leer.gif" 
            width=1></TD></TR>
        <tr><td width="100%">[BACK]<img src="http://www.phpwcms.de/img/article/back_link_0.gif" border="0" width="36" height="7">[/BACK]</td></tr>
        <TR>
          <TD height="100%" width="100%"><IMG height=25 
            src="http://www.phpwcms.de/img/leer.gif/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD width="100%"><IMG height=1 
            src="http://www.phpwcms.de/img/article/elements/content_line_499.gif" 
            width=499></TD></TR>
        <TR>
          <TD width="100%"><IMG height=5 
            src="http://www.phpwcms.de/img/leer.gif/leer.gif" 
            width=1></TD></TR>
        <TR>
          <TD class=footer width="100%">[RSS all]XML RSS[/RSS] Dette er blot en test!!</TD></TR>
     </TABLE>

frold · Post by **frold** » Fri 28. Nov 2003, 19:49

If one have the time to help creating the templates I would be SO glad...

I´m a medicalstudent so my coding "abilities" is not very good, but I find this CMS very usefull and would like to learn howto use it.

At the department at the hospital I´m on right now we god an instruction witch tell you how to treat some diseases and so on....

I have taken the hole instructions from a word document and made it so you can read it on the internet and so you can read it on you PDA - palm or PocketPC

After I leave the departmant - it would be nice if the people there still can chage the instruction and add new pages to it.. therefor I would like to use this great CMS.

Right now we use a very simple design because I also have made it so it can be used on a pocketpc.

You can see the design here
http://www.studmed.dk/skadebogen

I hope that you can help in the devolpment of this design? Cause to use this CMS I need it so it can be used also on pocket pc, where the screen size is limited

I hope someone have the time and want to help

Best regards,
Frederik

You are welcome to contact my via msn frold at hotmail.com

Bijan Hemati · Post by **Bijan Hemati** » Fri 28. Nov 2003, 23:22

Please see this posting "Cell paddings and Margins +".

Oliver Georgi wrote:Here it's the template info
header

Code: Select all

<table width="775" height="53" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td width="200" height="52" bgcolor="#4A5966"><a href="/" target="_top"><img src="img/article/template/template_r1_c1.jpg" width="200" height="52" border="0" alt="phpWCMS"></a></td>
   <td width="1" bgcolor="#4A5966"><img src="img/leer.gif" width="1" height="1"></td>
   <td width="559" bgcolor="#F59B29"><img src="img/article/template/template_r1_c3.jpg" width="559" height="52" border="0" alt="open source web content management system"></td>
   <td width="15" rowspan="2" background="img/article/elements/bg_right_shadow.gif"><img src="img/leer.gif" width="15" height="1"></td>
  </tr>
  <tr><td height="1" colspan="3" bgcolor="#4A5966"><img src="img/leer.gif" width="1" height="1"></td></tr>
</table>

main:

Code: Select all

<table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><img src="img/leer.gif" width="1" height="10"></td></tr>
<tr>
<td class="breadcrumb">{BREADCRUMB}</td>
<td align="right" class="footer">{DATE_ARTICLE}</td>
</tr>
<tr><td colspan="2"><img src="img/leer.gif" width="1" height="5"></td></tr>
<tr><td colspan="2"><img src="img/article/elements/content_line_499.gif" width="499" height="1"></td></tr>
<tr><td colspan="2"><img src="img/leer.gif" width="1" height="15"></td></tr>
</table><table width="499" border="0" cellpadding="0" cellspacing="0">
<tr><td>{CONTENT}</td></tr>
<tr><td><img src="img/leer.gif" width="1" height="25"></td></tr>
<tr><td>[BACK]<img src="img/article/back_link_0.gif" border="0">[/BACK]&nbsp;&nbsp;<a href="#" target="_top" title="goto top of the page"><img src="img/article/top_link_0.gif" border="0"></a>&nbsp;&nbsp;[PRINT]<img src="picture/symbols/print_icon.gif" width="44" height="9" border="0" title="open optimized page for printing">[/PRINT]</td></tr>
<tr><td height="100%"><img src="img/leer.gif" width="1" height="25"></td></tr>
<tr><td><img src="img/article/elements/content_line_499.gif" width="499" height="1"></td></tr>
<tr><td><img src="img/leer.gif" width="1" height="5"></td></tr>
<tr><td class="footer">copyright &copy; 2002-2003 Oliver Georgi &middot; [RSS all]XML RSS[/RSS] &middot; <a href="http://sourceforge.net/projects/phpwcms" target="_blank">SourceForge.net</a> &middot; <a href="http://www.hotscripts.com/cgi-bin/rate.cgi?ID=27718" target="_blank">rate phpwcms</a></td></tr>
<tr><td><img src="img/leer.gif" width="1" height="12"><img src="http://sourceforge.net/sflogo.php?group_id=94396&type=1" width="1" height="1" border="0" alt="SourceForge.net Logo"></td></tr>
</table>

footer:

Code: Select all

<table width="775" height="11" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td width="755" height="1" bgcolor="#4A5966"><img src="img/leer.gif" width="1" height="1"></td>
   <td width="20"><img src="img/article/elements/bg_bottom_shadow_1px.gif" width="20" height="1"></td>
  </tr>
  <tr>
   <td height="10"><img src="img/article/elements/bg_bottom_shadow.gif" width="755" height="10"></td>
   <td><img src="img/article/elements/bg_bottom_corner.gif" width="20" height="10"></td>
  </tr>
</table>

left:

Code: Select all

<img src="img/article/template/template_r3_c1.jpg" width="200" height="85" border="0">{NAV_TABLE_COLUMN}<img src="img/leer.gif" width="1" height="100">

right is empty

To images you can download yourself by saving the wohole page to your computer - in IE "save as...".

Here are the pagy layout setting:

The shadows are partially made of normal images inserted in footer and as of table cell background images.

I hope this helps you. Make it as I did: Think about how to simplify your base layout you've made in HTML-Editor. Use my sample tables for building up a template. Then cut all into block code.

Oliver

Regards,

Bijan

frold · Post by **frold** » Sat 29. Nov 2003, 09:37

Well I do not understand...

When I try to use that code I the text will still not collaps when the window is resized....

Sorry I´m so studpid, but I do not understand...

Bijan Hemati · Post by **Bijan Hemati** » Sat 29. Nov 2003, 15:03

Hi frold,

I have difficulty understanding some of the features my self.

Bijan Hemati wrote:If you want your text to collapse when the window is resized, you should create an html type content and put this code in it.
Code: Select all
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="100%">Your text goes here.</td>
  </tr>
</table>

The above code needs to go in a Content. And insert your own text, where it says, "Your text goes here".

To summarize it:

go to Article
add a Content
select html type (not plain text)
insert the code I posted
Replace the "Your text goes here" with your own text.

I hope this would help you.

frold · Post by **frold** » Sat 29. Nov 2003, 17:14

Bijan Hemati wrote:Hi frold,

I have difficulty understanding some of the features my self.
Bijan Hemati wrote:If you want your text to collapse when the window is resized, you should create an html type content and put this code in it.
Code: Select all
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="100%">Your text goes here.</td>
  </tr>
</table>
The above code needs to go in a Content. And insert your own text, where it says, "Your text goes here".

To summarize it:

go to Article
add a Content
select html type (not plain text)
insert the code I posted
Replace the "Your text goes here" with your own text.

I hope this would help you.

But it did not.. it is my templates that is wrong....it is the templates that doesn´t let me resize the IE window and then the text collaps...

frold · Post by **frold** » Sun 30. Nov 2003, 00:13

Oliver... Can you help?

I really need this to work...but all say that with there problem in this forum I guess...

frold · Post by **frold** » Sun 30. Nov 2003, 00:13

Oliver... Can you help?

I really need this to work...but all say that with there problem in this forum I guess...