Thread: Page Setup

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    8
    Rep Power
    0

    Page Setup


    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

    Code:
    <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>

    Code:
    .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.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    13
    Rep Power
    0
    Please let me know what you want to make dude.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    8
    Rep Power
    0
    Thank you for your response.
    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.

    Code:
    <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>
    Code:
    footer_legal_notice { 	
        font-family: Arial, Helvetica, sans-serif; 	    font-size: 11px; 	    font-style: normal; 	    font-weight: normal; 	    color: #1A61A9; 07	    bottom: 0; 	padding-left:50px; 	
    } 	  	
    #toppage { 	    
    float: right; 	    text-align: right; 	    margin-right: 5px; 	    position:absolute; 	    bottom : 0px; 	    right: 20px; 	
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2006
    Location
    IL, USA
    Posts
    584
    Rep Power
    21
    I am assuming you are learning, as I did 7 years ago, and that is why you are using a TABLED structure. Learn the basics for now, but I highly suggest moving away from tables for non-tabular things (suchas a whole website). Move onto DIVS and what is now HTML5 tags (header, nav, footer, article, etc.) These are the new standards and you have a LOT more flexibility to be able to position and move elements to how you would want them.

    Too fix your issues can you post a temporary web link so we may actually "view" this thing? or at least some screenshots?

IMN logo majestic logo threadwatch logo seochat tools logo