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.
Annonceindlæg tema
Forsvar & beredskab
Cybersikkerhed, realtidsdata og robuste it-systemer er blevet fundamentet for moderne forsvar.
et link kunne hjælpe - men et bud er at du mangler en position: relative, på din td.
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 ?
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.
Også når selve menuen er i en webcontrol :-) som bliver henvist til fre danne td? :-)
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; }
Vi tilbyder markedets bedste kurser inden for webudvikling