6 Replies - 688 Views - Last Post: 07 August 2012 - 02:11 AM

#1 suifer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 30-July 12

Page Setup

Posted 06 August 2012 - 06:27 AM

Hello,

The page is basically finished but I have several problems:
- The main menu is horizontal I do not understand why the party is white it is not up and down but only part.
- I can not put the text has a vertical side menu.
- The footer can not I put a completely left of the page to make it quite the same level as the beginning of the page.
- The menu text is centered vertically on ie when firefox is well on the left of the arrow was quoting it right.

Here are the ones that gives:
http://img36.imagesh...9/misenpage.jpg

<table width="940" cellpadding="0" border="0" align="center">
        <tr>
          <td valign="top" align="center" height="79">
            <table width="100%" cellspacing="0" cellpadding="18" border="0" align="left">
                <tr>
                  <td width="50%"><a href="http://www.test.com/"><img src="../image/logo.gif"
                        alt="TEXTE" name="logo" class="logo" longdesc="http://www.test.com/" /></a></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr class="bluemenubar">
          <td height="38">
            <table width="100%" cellspacing="0" cellpadding="15" border="0">
                <tr>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Home</a></td>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Training Center</a></td>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Your Training</a></td>
                  <td class="menu_active"> <a href="test.html" class="menu_active">Useful Information</a></td>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Our Services</a></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
                <tr>
                  <td width="50%"><img width="470" height="150" src="../image/Man_Reading_470.jpg" alt="" /></td>
                  <td width="50%" class="header_blue"><em>. . . Texte.</em></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td valign="top" id="leftNavContainer">
            <div id="operaNavigation">
              <div id="navLevelC1" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC2" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC3" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC4" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC5" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC6" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a>
              </div>
            </div>
<table width="100%" cellspacing="5" cellpadding="0" border="0" style="height: 134px; width: 940px;" class="LeftMenu">
                <tr>
                  <td valign="top" rowspan="6">
                    <div class="postexte">
                      <h4 class="pos_top">
                        <br />
                      </h4>
                      <h4 class="pos_top"><table width="100%" cellspacing="5" cellpadding="0" border="0" style="height: 134px; width: 940px;" class="LeftMenu">
                <tr>
                  <td valign="top" rowspan="6">
                    <div class="postexte">
                      <h4 class="pos_top">
                        <br />
                      </h4>
                      <h4 class="pos_top">TEXTE </h4>
                    </div>
                  </td>
                </tr>
            </table> </h4>
                    </div>
                  </td>
                </tr>
            </table>
<div class="footer_legal_notice">                                                        
      <a href="http://www.test.com" target="_blank"> &copy;
        TEXTE</a> </div>
  </body>
</html>


.firstMenu {
    color: #666666;
    font-weight: bold;
    margin-top: 0px;

.firstMenu A {
    color: #666666;
    font-weight: bold;
}
.firstMenu A.leftLinkActive {
    color: #666666;
    text-decoration: underline;
}
.firstMenu A:hover {
    text-decoration: underline;
}
table.leftMenu {
    vertical-align: top;
    width: 162px;
    display: inline-block;
}
.leftMenuHome {
    padding: 1px 1px 5px;
    vertical-align: top;
    width: 155px;
	display: inline-block;
}
* {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

#operaNavigation {
PADDING-RIGHT: 0px; 
MARGIN-TOP: -10px; 
DISPLAY: block; PADDING-LEFT: 0px; 
FONT-SIZE: 12px; 
BACKGROUND: url(image.gif) no-repeat left top; 
PADDING-BOTTOM: 0px; 
WIDTH: 222px; 
PADDING-TOP: 22px; 
FONT-FAMILY: Arial, Helvetica, sans-serif
}
TD.NavItem {
    text-align: left;
    vertical-align: top;
    width: 142px;
}
.navLevelC_blank, .navLevelC_off, .navLevelC_on, .navLevelC_body {
    cursor: pointer;
    font-size: 11px;
    font-weight: normal;
    margin-left: 15px;
    margin-top: 3px;
    padding-left: 15px;
}
.navLevelC_blank {
    background: url("image.gif") no-repeat scroll 0 2px transparent;
    color: #1A61A9;
    text-decoration: none;
}
.navLevelC_off {
    background: url("image.gif") no-repeat scroll 0 2px transparent;
    color: #1A61A9;
    text-decoration: none;
}
.navLevelC_on {
    background: url("image.gif") no-repeat scroll 0 2px transparent;
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelC_blank a {
    color: #707070;
    text-decoration: none;
}
.navLevelC_blank a:hover {
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelC_off a {
    color: #707070;
    text-decoration: none;
}
.navLevelC_off a:hover {
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelC_on a, .navLevelC_on a:hover {
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelSC, .navLevelSC_body, .navLevelSC_blank, .navLevelSC_on, .navLevelSC_off {
    border-bottom: 1px solid #E2EBF5;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    margin-left: 0;
    margin-top: 4px;
    padding: 5px 0 5px 28px;
    text-decoration: none;
    width: 179px;
}
.navLevelSC_body {
    margin-left: -45px;
    text-decoration: none;
    width: 205px;
}
.navLevelSC_blank {
    background: url("image.gif") no-repeat scroll 10px 8px transparent;
    border-bottom: 1px solid #E2EBF5;
    margin-left: 0;
    margin-top: 4px;
    padding: 5px 0 5px 28px;
    text-decoration: none;
    width: 179px;
}
.navLevelSC_off {
    background: url("image.gif") no-repeat scroll 10px 8px transparent;
    text-decoration: none;
}
.navLevelSC_on {
    background: url("image.gif") no-repeat scroll 10px 8px transparent;
    text-decoration: none;
}



Thank you in advance for your help.

Is This A Good Question/Topic? 0
  • +

Replies To: Page Setup

#2 AceKYD  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 33
  • Joined: 01-July 12

Re: Page Setup

Posted 06 August 2012 - 07:07 AM

I am looking at your code right now, for now all i can say is that you have not yet defined the class for the footer in your css file. So it wont work. maybe you should do that first
Was This Post Helpful? 0
  • +
  • -

#3 suifer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 30-July 12

Re: Page Setup

Posted 06 August 2012 - 07:11 AM

I grieve forget to copy it:

		<div class="footer_legal_notice">
			<a target="_blank" href="http://www.test.com"> &copy; TEXTE</a> </div>
		<div class="toppage">
			<a href="#top">top</a> </div> 


.footer_legal_notice {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #1A61A9;
    bottom: 0;
padding-left:50px;
}

#toppage {
    float: right;
	text-align: right;
    margin-right: 5px;
	position:absolute;
	bottom : 0px;
	right: 20px;
} 

Was This Post Helpful? 0
  • +
  • -

#4 AceKYD  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 33
  • Joined: 01-July 12

Re: Page Setup

Posted 06 August 2012 - 07:58 AM

hey, i've finished editing your code, but you might still have little stuffs to add. I dont have your images, files etc so i can't defined the perfect look. Here is your html code
<html>
<head></head>
<link rel="stylesheet" href="css.css" type="text/css">
<body>
<table width="940" border="1" align="center">
        <tr>
          <td valign="top" align="center" height="79">
            <table width="100%" cellspacing="0" cellpadding="18" border="0" align="left">
                <tr>
                  <td width="50%"><a href="http://www.test.com/"><img src="../image/logo.gif"
                        alt="TEXTE" name="logo" class="logo" longdesc="http://www.test.com/" /></a></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr class="bluemenubar">
          <td height="38">
            <table width="100%" cellspacing="0" cellpadding="15" border="0">
                <tr>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Home</a></td>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Training Center</a></td>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Your Training</a></td>
                  <td class="menu_active"> <a href="test.html" class="menu_active">Useful Information</a></td>
                  <td class="menu_inactive"><a href="test.html" class="menu_inactive">Our Services</a></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
                <tr>
                  <td width="50%"><img width="470" height="150" src="../image/Man_Reading_470.jpg" alt="" /></td>
                  <td width="50%" class="header_blue"><em>. . . Texte.</em></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td valign="top" id="leftNavContainer">
            <div id="operaNavigation">
              <div id="navLevelC1" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC2" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC3" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC4" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC5" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a> </div>
              <div id="navLevelC6" class="navLevelSC_blank"><a href="../Version 3/test.html">TEXTE</a>
              </div>
            </div>
          </td></tr>
<tr cellspacing="5" cellpadding="0" border="0" style="height: 134px; width: 940px;" class="LeftMenu">
                  <td valign="top">
                    <div class="postexte">
                      <h4 class="pos_top">TEXTE </h4>
                    </div>
                  </td>
                </tr>  
       <tr><td class="footer_legal_notice"><center><a href="http://www.test.com">&copy; TEXTE</a></center></td></tr>             
 </table>
</body>
</html>



And your css wasnt changed much
.firstMenu {
    color: #666666;
    font-weight: bold;
    margin-top: 0px;

.firstMenu A {
    color: #666666;
    font-weight: bold;
}
.firstMenu A.leftLinkActive {
    color: #666666;
    text-decoration: underline;
}
.firstMenu A:hover {
    text-decoration: underline;
}
table.leftMenu {
    vertical-align: top;
    width: 162px;
    display: inline-block;
}
.leftMenuHome {
    padding: 1px 1px 5px;
    vertical-align: top;
    width: 155px;
	display: inline-block;
}
* {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

#operaNavigation {
PADDING-RIGHT: 0px; 
MARGIN-TOP: -10px; 
DISPLAY: block; PADDING-LEFT: 0px; 
FONT-SIZE: 12px; 
BACKGROUND: url(image.gif) no-repeat left top; 
PADDING-BOTTOM: 0px; 
WIDTH: 222px; 
PADDING-TOP: 22px; 
FONT-FAMILY: Arial, Helvetica, sans-serif
}
TD.NavItem {
    text-align: left;
    vertical-align: top;
    width: 142px;
}
.navLevelC_blank, .navLevelC_off, .navLevelC_on, .navLevelC_body {
    cursor: pointer;
    font-size: 11px;
    font-weight: normal;
    margin-left: 15px;
    margin-top: 3px;
    padding-left: 15px;
}
.navLevelC_blank {
    background: url("image.gif") no-repeat scroll 0 2px transparent;
    color: #1A61A9;
    text-decoration: none;
}
.navLevelC_off {
    background: url("image.gif") no-repeat scroll 0 2px transparent;
    color: #1A61A9;
    text-decoration: none;
}
.navLevelC_on {
    background: url("image.gif") no-repeat scroll 0 2px transparent;
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelC_blank a {
    color: #707070;
    text-decoration: none;
}
.navLevelC_blank a:hover {
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelC_off a {
    color: #707070;
    text-decoration: none;
}
.navLevelC_off a:hover {
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelC_on a, .navLevelC_on a:hover {
    color: #1A61A9;
    text-decoration: underline;
}
.navLevelSC, .navLevelSC_body, .navLevelSC_blank, .navLevelSC_on, .navLevelSC_off {
    border-bottom: 1px solid #E2EBF5;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    margin-left: 0;
    margin-top: 4px;
    padding: 5px 0 5px 28px;
    text-decoration: none;
    width: 179px;
}
.navLevelSC_body {
    margin-left: -45px;
    text-decoration: none;
    width: 205px;
}
.navLevelSC_blank {
    background: url("image.gif") no-repeat scroll 10px 8px transparent;
    border-bottom: 1px solid #E2EBF5;
    margin-left: 0;
    margin-top: 4px;
    padding: 5px 0 5px 28px;
    text-decoration: none;
    width: 179px;
}
.navLevelSC_off {
    background: url("image.gif") no-repeat scroll 10px 8px transparent;
    text-decoration: none;
}
.navLevelSC_on {
    background: url("image.gif") no-repeat scroll 10px 8px transparent;
    text-decoration: none;
}

.footer_legal_notice {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #1A61A9;
	    
}

#toppage {
    float: right;
	text-align: right;
    margin-right: 5px;
	position:absolute;
	bottom : 0px;
	right: 20px;



Tell me if this is what you want?
Was This Post Helpful? 0
  • +
  • -

#5 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,424
  • Joined: 28-November 09

Re: Page Setup

Posted 06 August 2012 - 02:30 PM

You're setting yourself up for some horrendous pains later on by designing with tables. I could give you the entire rant, but I'll sum it up: Tables are for tabular data, not design.

Look into CSS based design, tables died in the 90s and are widely frowned upon by professionals.
Was This Post Helpful? 1
  • +
  • -

#6 suifer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 30-July 12

Re: Page Setup

Posted 06 August 2012 - 09:56 PM

Thank you for your help.
Infact the ones I want for the text is not to use table because after I change the size of a table whenever the content changes.
Even with the change you make to the text is still below the vertical menu.
For the footer I want the text to be left completely to the left of the table and the "top" is completely right and they are at the bottom of the page.
I know it's more the tables used is that it is inadvisable that's why I try to minimize and minimize use of tables.
Was This Post Helpful? 0
  • +
  • -

#7 suifer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 30-July 12

Re: Page Setup

Posted 07 August 2012 - 02:11 AM

With margin-bottom: 0 I managed to put at the bottom of the page on the same lines but I can not put a footer on the left and top right.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1