Avatar billede stinejh1980 Nybegynder
03. juli 2009 - 09:18 Der er 5 kommentarer og
1 løsning

Redefiner 0,0

Jeg har sat mit side design op vha tabeller.
3 kolonner - 3 rækker

I den øverste midterste celle skal min menu ligge.

Jeg bruger z-index og absolute position for at placere.Nu har jeg rodet med at eller andet så elementerne ikke længre positionerer sig i cellen - men går over i øverste højre celle.

Det vil sige elemenetrene 0,0 position er ny ved vinduets side og ikke tabellenes side. Jeg kan ikke bare regne ud hvor langt inde på siden cellen er for så flytter den sig når vinduer re-sizer.
Avatar billede keysersoze Ekspert
03. juli 2009 - 10:34 #1
et link kunne hjælpe - men et bud er at du mangler en position: relative, på din td.
Avatar billede stinejh1980 Nybegynder
03. juli 2009 - 10:36 #2
Jeg kan desværre ikke give dig et link da den kun ligger på virksomhedens webserver endnu :-)

Jeg prøver lige med relative :-)

Skal jeg sætte den på den <div> som omslutter hele mit menu element, eller skal det være på selve menuelementerne ?
Avatar billede keysersoze Ekspert
03. juli 2009 - 11:26 #3
det skal sættes på det element der skal positioneres ud fra - så som nævnt må det mest logisk være den td din menu ligger inde i.
Avatar billede stinejh1980 Nybegynder
03. juli 2009 - 11:50 #4
Også når selve menuen er i en webcontrol :-) som bliver henvist til fre danne td? :-)
Avatar billede stinejh1980 Nybegynder
03. juli 2009 - 12:09 #5
Så lykkedes det - keysersoze smid et svar

Min webcontrol:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MenuTranLayer.ascx.vb" Inherits="ElvWeb.MenuTranLayer" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<link href="Style.css" rel="stylesheet" type="text/css" />

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="TopMenuBackground" runat="server" class="TopMenu" >
    <asp:Menu ID="Menu1" runat="server" />
</div>
    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
    <ContentTemplate>
        <div id="PanelBackGround" class="Opac_Background" runat="server">
            <div id="TextContainer" class="BodyText" runat="server">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                <asp:PlaceHolder ID="PHText" runat="server"></asp:PlaceHolder>           
                </ContentTemplate>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Menu1" EventName="MenuItemClick" />
                </Triggers>
                </asp:UpdatePanel>       
            </div>
           
            <div id="PanelCloseBtn" class="CloseBtn" runat="server">
                <asp:LinkButton ID="BtnClose" runat="server">[x] Close</asp:LinkButton>   
            </div>       
        </div>
    </ContentTemplate>
    </asp:UpdatePanel>   
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
    <asp:Label ID="LblMessage" runat="server" CssClass="ErrorMessage"></asp:Label>   
    <asp:Label ID="Label1" runat="server" ForeColor="#FF33CC" Font-Size="X-Large"></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>

Min masterpage:
<table id="MainDesign" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td rowspan="3" valign="top" style="width: 260px">
            <img src="gfx/spacer_S.gif" alt="" border="0" />
        </td>
        <td colspan="2" class="TopMenu_Row">
            <uc1:MenuTranLayer ID="MenuTranLayer1" runat="server" />
        </td>
    </tr>
    <tr>
        <td align="left" valign="top"><uc2:MenuLow ID="MenuLow1" runat="server" />
            <img src="gfx/spacer_XL.gif" alt="" border="0" />
        </td>
        <td>
            <br /><br />
        </td>
    </tr>
    <tr>
        <td valign="top" colspan="2">
            <div id="Content">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
            </div>
        </td>
    </tr>
</table>

Min CSS:
#MainDesign
{
    background-position: center top;
    background-attachment: fixed;
    background-image: url(gfx/BG.gif);
    background-repeat: no-repeat;
    width: 960px;
    height:600px;
}

#Content
{
    /*border: thin solid #00FFFF;*/
    overflow: auto;
    height: 490px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 5px;
    vertical-align: top;
}

/********************* menu styles - Start **********************/
.TopMenu_Row
{
    /*border: thin solid #FFFF00;*/
    height: 65px;
    max-width: 598px;
    text-align: right;
    position: relative;
    top: 0px;
    left: 0px;
}

.TopMenu
{
    /*border: thin solid #FF33CC;*/
    background-image: url(gfx/RedBanner.gif);
    height: 65px;
    width: 598px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    z-index: 1;
    vertical-align: middle;
}
.TopMenu a
{
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.TopMenu a:hover
{
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: underline;
}

.BodyText
{
    /*border: thin solid #00FF00;*/
    max-height: 330px;
    width: 400px;
    color: #FFFFFF;
    filter: alpha(opacity=100);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    position: absolute;
    top: 70px;
    right: 0px;   
    z-index: 0;
}


.Opac_Background
{
    /*border: thin solid #0000FF;*/
    background-image: url(gfx/RecField.gif);
    height: 443px;
    width: 598px;
    filter: alpha(opacity=90);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
}

.CloseBtn
{
    width: 400px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top: 410px;
    right: 0px;
    text-align: left;
    font-size: 11px;
}

.CloseBtn a
{
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.CloseBtn a:Hover
{
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: underline;
}
Avatar billede keysersoze Ekspert
03. juli 2009 - 13:22 #6
super :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester