Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Oct 2014
    Posts
    2
    Member #
    40507

    Fixed positioning on table-style menu

    Hello!

    I am working on a website that was created using Photoshop > Save for Web, so the whole format of the site is a table. I would like to pin the top portion of the site (the menu and other slices), so that the rest of the page can be scrolled down without losing the navigation bar.

    Using CSS code (probably messy, but I am a novice!) I've figured out how to pin the slices, but for some reason there is a transparent space between the menu bottons and the slices above them. Does anyone have any ideas why this is happening?

    This is the CSS:
    <!--
    .subheader
    {
    font-weight:normal;
    color:#EE7009;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:16px;
    text-align:center;
    font-family:HelveticaNeueW01-UltLt, sans-serif;
    line-height:1;
    margin:0px;
    padding:0px;
    }
    body
    {
    font-size:15px;
    cursor:text;
    font-family:Times New Roman;
    color:#666666;
    background-color:#ffffff;
    text-align:left;
    vertical-align:top;
    }
    .logo
    {
    position:fixed;
    top: 0px;
    left: 0px;
    padding-top:0px;
    padding-bottom:0px;
    background color:#FFF;
    z-index:1000;
    }
    .blankLarge
    {
    position:fixed;
    top: 0px;
    left: 242px;
    padding-top:0px;
    padding-bottom:0px;
    background color:#FFF;
    z-index: 1000;
    }
    .menu
    {
    position:fixed;
    height: 38px;
    width:1024px;
    padding-top:0px;
    padding-bottom:0px;
    z-index: 1000;
    top: 170x;
    left: 0x;
    background color:#FFF;
    }
    .copyContainer
    {
    position: absolute;
    padding: 0px;
    z-index: 1;
    top: 204px;
    }
    -->
    </style>

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Post html code too

  4. #3
    Junior Member
    Join Date
    Oct 2014
    Posts
    2
    Member #
    40507

    Smile

    Quote Originally Posted by sasha_bolcina View Post
    Post html code too

    Thank you! Please see below:

    <html>
    <head>
    <title>Press</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .subheader
    {
    font-weight:normal;
    color:#EE7009;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:16px;
    text-align:center;
    font-family:HelveticaNeueW01-UltLt, sans-serif;
    line-height:1;
    margin:0px;
    padding:0px;
    }
    body
    {
    font-size:15px;
    cursor:text;
    font-family:Times New Roman;
    color:#666666;
    background-color:#ffffff;
    text-align:left;
    vertical-align:top;
    }
    .logo
    {
    position:fixed;
    top: 0px;
    left: 0px;
    padding-top:0px;
    padding-bottom:0px;
    background color:#FFF;
    z-index:1000;
    margin-bottom: 0 !important;
    }
    .blankLarge
    {
    position:fixed;
    top: 0px;
    left: 242px;
    padding-top:0px;
    padding-bottom:0px;
    background color:#FFF;
    z-index: 1000;
    margin-bottom: 0 !important;
    }
    .menu
    {
    position:fixed;
    height: 38px;
    width:1024px;
    padding-top:0px;
    padding-bottom:0px;
    z-index: 1000;
    top: 170x;
    left: 0x;
    background color:#FFF;
    }
    .copyContainer
    {
    position: absolute;
    padding: 0px;
    z-index: 1;
    top: 204px;
    }
    -->
    </style>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Press.psd) -->
    <table id="Table_01" width="1024" height="801" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><a href="index.html"><img src="images/Press_01.gif" alt="" width="195" height="166" border="0" class="logo" position:"fixed"></a></td>
    <td>
    <span class="header"><img src="images/Press_02.gif" width="47" height="166" alt="" positition:"fixed"></span></td>
    <td colspan="4">
    <img src="images/Press_03.gif" width="790" height="166" alt="" class="blankLarge" positition:"fixed"></span></td>
    </tr>
    <tr><div class="menu">
    <td colspan="2"><span class="menu"><img src="images/Press_04.jpg" width="242" height="38" alt=""></span></td>
    <td colspan="2"><span class="menu"><a href="ProgramOverview.html"><img src="images/Press_05.gif" alt="" width="270" height="38" border="0"></a></span></td>
    <td><span class="menu"><a href="MyTvF.html"><img src="images/Press_06.gif" alt="" width="254" height="38" border="0"></a></span></td>
    <td><span class="menu"><a href="Contact.html"><img src="images/Press_07.gif" alt="" width="262" height="38" border="0"></a></span></td></div>
    </tr>
    <div class="copyContainer">
    <tr>
    <td><a href="Welcome.html"><img src="images/Press_08.gif" alt="" width="195" height="53" border="0"></a></td>
    <td rowspan="10">
    <img src="images/Press_09.gif" width="47" height="506" alt=""></td>
    <td>
    <img src="images/Press_10.gif" width="1" height="53" alt=""></td>
    <td colspan="3" rowspan="10">
    <img src="images/Press_11.gif" width="781" height="506" alt=""></td>
    </tr>
    <tr>
    <td><a href="Mission.html"><img src="images/Press_12.gif" alt="" width="195" height="55" border="0"></a></td>
    <td>
    <img src="images/Press_13.gif" width="1" height="55" alt=""></td>
    </tr>
    <tr>
    <td><a href="Admissions.html"><img src="images/Press_14.gif" alt="" width="195" height="49" border="0"></a></td>
    <td>
    <img src="images/Press_15.gif" width="1" height="49" alt=""></td>
    </tr>
    <tr>
    <td><a href="Staff.html"><img src="images/Press_16.gif" alt="" width="195" height="49" border="0"></a></td>
    <td>
    <img src="images/Press_17.gif" width="1" height="49" alt=""></td>
    </tr>
    <tr>
    <td><a href="Data.html"><img src="images/Press_18.gif" alt="" width="195" height="53" border="0"></a></td>
    <td>
    <img src="images/Press_19.gif" width="1" height="53" alt=""></td>
    </tr>
    <tr>
    <td><a href="Campus.html"><img src="images/Press_20.gif" alt="" width="195" height="47" border="0"></a></td>
    <td>
    <img src="images/Press_21.gif" width="1" height="47" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/Press_22.gif" width="195" height="52" alt="">
    <div style="position: relative; background: "images/Data_11.jpg" width="770" height="740";">
    <p style="position: absolute; top: -354px; left: 243px; width: 781px; padding: 4px; background-color: #fff; font-color: #666666; font-weight: regular; font-size: 15px; height: 425px;">
    Sample Text. </p>
    </div>
    </td>
    <td>
    <img src="images/Press_23.gif" width="1" height="52" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/Press_24.gif" width="195" height="52" alt=""></td>
    <td>
    <img src="images/Press_25.gif" width="1" height="52" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/Press_26.gif" width="195" height="53" alt=""></td>
    <td>
    <img src="images/Press_27.gif" width="1" height="53" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/Press_28.gif" width="195" height="43" alt=""></td>
    <td>
    <img src="images/Press_29.gif" width="1" height="43" alt=""></td>
    </tr>
    <tr>
    <td colspan="5">
    <img src="images/Press_30.gif" width="766" height="90" alt=""></td>
    <td>
    <img src="images/Press_31.gif" width="258" height="90" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="195" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="47" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="269" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="254" height="1" alt=""></td>
    <td class="copyContainer">
    <img src="images/spacer.gif" width="258" height="1" alt=""></td>
    </tr></div>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

  5. #4
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    There are so many errors in structure and cost to much time to fix it. I haven't so much time. I pull header out of your code to structure it in a little bit nicer way, to show you how rest of the code could be organized. If it can help you to redo your page - than super.

    Code:
    <html>
    <head>
    <title>Press</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    body
    {
        font-size:15px;
        cursor:text;
        font-family:Times New Roman;
        color:#666666;
        background-color:#ffffff;
        text-align:left;
        vertical-align:top;
    }
    .logo
    {
        background-color: #fff;
        left: 0;
        margin: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    .blankLarge
    {
        position:fixed;
        top: 0px;
        left: 242px;
        padding-top:0px;
        padding-bottom:0px;
        background-color:#FFF;
        z-index: 1000;
        margin-bottom: 0 !important;
    }
    .menu
    {
        position:fixed;
        height: 38px;
        width:1032px;
        padding-top:0px;
        padding-bottom:0px;
        z-index: 1000;
        top: 166px;
        left: 0px;
    }
    .fixed {
        position: fixed;
        width: 1032px;
        overflow: hidden;
        height: 200px;
    }
    .fixed a {
        text-decoration: none;
        float: left;
    }
    .fixed img {
        border: none;
        float: left;
    }
    -->
    </style>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Press.psd) -->
    <div class="fixed">
        <a href="index.html">
            <img src="images/Press_01.gif" alt="" width="195" height="166" border="0" class="logo">
        </a>
        <img src="images/Press_02.gif" width="47" height="166" alt="">
        <img src="images/Press_03.gif" width="790" height="166" alt="" class="blankLarge">
        <div class="menu">
            <span><img src="images/Press_04.jpg" width="242" height="38" alt=""></span>
            <span ><a href="ProgramOverview.html"><img src="images/Press_05.gif" alt="" width="270" height="38" border="0"></a></span>
            <span><a href="MyTvF.html"><img src="images/Press_06.gif" alt="" width="254" height="38" border="0"></a></span>
            <span><a href="Contact.html"><img src="images/Press_07.gif" alt="" width="262" height="38" border="0"></a></span>
        </div>
    </div>
    <div>
        Content
    </div>
    </body>
    </html>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 12:18 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com