webForumDet fria alternativet

Problem med position:absolute

26 svar · 1 458 visningar · startad av peter@bm

peter@bmMedlem sedan jan. 201015 inlägg
#1

CSS är inte min starkaste sida även om jag brukar kunna få till det resultat jag vill men nu börjar jag känna att situationen är lite hopplös. Jag vet inte exakt hur jag ska förklara detta men jag gör ett försök:

Jag har två kolumner på en sida i form av varsin div:

#divEntRight
{
float: right;
width: 250px;
border-left: solid 1px #d9d9d9;
padding-left: 10px;
}

#divEntLeft
{
float: left;
width: 269px;
}

Dessa ligger i sin tur inom en div helt utan någon som helst css-kod. Så långt är allt ok. Dessa och det de innehåller visas som det ska. Det är när jag försöker placera en GoogleMaps-kontroll under dessa som det börjar spöka.

Kontrollen importeras och fungerar korrekt men den har en position:absolut i sig också som placerar denna över de två ovannämnda divarna. Hur kan jag göra för att skapa en div som omsluter GoogleMaps-kontrollen och ser till att den håller denna inom dess ramar?

Danne VMedlem sedan aug. 20067 685 inlägg
#2

För att en div ska kunna placeras absolut måste dess "förälder" vara antingen absolut eller relativ.

Alltså: Ge den där divven som inte är formaterad med CSS följande stil:

position:relative;

Sen kan du ge de andra divvarna absolut position efter behag.

peter@bmMedlem sedan jan. 201015 inlägg
#3

Den ligger fortfarande över de två kolumnerna. :/

voigtann1Medlem sedan juni 20018 810 inlägg
#4

visar gärna i HTML kod vad du har gjort, bli mycket enklare att kolla på vad du gör för fel (bästa lösningen är om du hade kunnat publicera koden)

Men som Danne skriver, noden ovan om den kör en relativ positionering så kan du positionera vad du vill i den, men det är viktigt att veta ett absolut positionerad barn "tappar" egenskapen från parent-noden

<div id="parent"><div style="position: absolute; height: 200px; width: 200px"></div></div>

Innebär inte att #parent få en höjd på 200px.

peter@bmMedlem sedan jan. 201015 inlägg
#5

Här är en förenklad variant. Jag förväntar mig en blå-kolumn till vänster, en grön till höger och därefter kartkontrollen under. Istället lägger sig nu kartan ÖVER den blå kolumnen och även en del av den gröna.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="EPiServer.test" %>
<%@ Register assembly="Artem.GoogleMap" namespace="Artem.Web.UI.Controls" tagprefix="artem" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">

    \<div id="parent" style="width: 500px;"\>
        \<div style="float: left; width: 250px; height: 170px; background-color: Blue;"\>
            ...
        \</div\>
        \<div  style="float: right; width: 250px; height: 250px; background-color: Green;"\>
            ...
        \</div\>
        
        \<div id="karta"\>
            \<artem:GoogleMap ID="googleMaps" runat="server" Width="280px" Height="500px" Zoom="14"
                     EnableScrollWheelZoom="false" ZoomPanType="Large3D"
                     Latitude="58.35433301072118" Longitude="11.986445089573097"
                     Key="ABQIAAAAXNuEXdq7CGmkVOO4NPw6CxSprBb3d22s3kSaSFyRB1gvOG8D3hT5iWytZ4A6efEvst350trEvmtj0A"\>
                \<Markers\>
                \<artem:GoogleMarker Latitude="58.35433301072118" Longitude="11.986445089573097" Clickable="false" /\>
                \</Markers\>
            \</artem:GoogleMap\>
        \</div\>
    \</div\>

\</form\>

</body>
</html>

peter@bmMedlem sedan jan. 201015 inlägg
#6

Jag förstod nu hur jag kan använda <div id="parent" style="width: 500px; position:relative;"> och <div id="karta" style="position:absolute; top: 100px;"> för att placera den längre ner men ett problem med detta är att innehållet i kolumn-divarna är dynamiskt och altererar därmed i höjd. Hur kan jag lösa det för att kart-diven ska följa med och lägga sig under?

voigtann1Medlem sedan juni 20018 810 inlägg
#7

positionera dina divar utan absolut, om det är en nod så kan du alltid positionera det med marginaler, bredd, höjd.

peter@bmMedlem sedan jan. 201015 inlägg
#8

Problemet är ju som jag skrev att dessa position:absolut kommer ifrån googlemaps-kontrollen. Det må låta dumt men jag kan inte ta bort dem.

voigtann1Medlem sedan juni 20018 810 inlägg
#9
#karta {}

kan du ju alltid sätta till din google maps kod, du har ju skrivit din höjd och bredd ( Width="280px" Height="500px")

peter@bmMedlem sedan jan. 201015 inlägg
#10

Dessa är properties för kontrollen och dessvärre inget som gör att jag kan påverka positioneringen. Den sitter där den sitter. :(

peter@bmMedlem sedan jan. 201015 inlägg
#11

Jag har test-siten för kontrollen och där läggs den ut på väl valda positioner så det går ju uppenbarligen. Jag fattar dock inte vad skillnaden mellan min kod och den koden är.

peter@bmMedlem sedan jan. 201015 inlägg
#12

Här är samma test-site som jag pratade om. Uppenbarligen går den ju att sätta på andra ställen än högst upp i hörnet men MÅSTE man då göra det med fast positionering via t ex. top:200px; ?

voigtann1Medlem sedan juni 20018 810 inlägg
#13

lägg upp sidan så vi andra kan se det, för vilka är dessa kontroller du pratar om?

peter@bmMedlem sedan jan. 201015 inlägg
#14

Sorry, glömde kopiera in den. http://googlemap.artembg.com/direction/GoogleDirection.aspx

Det är .Net-kontroller jag pratar om, en färdigkompilerad dll-fil.

voigtann1Medlem sedan juni 20018 810 inlägg
#15

Jo, så mycket har jag också förstått att det är googles koder vi pratar om, men

Jag har test-siten för kontrollen och där läggs den ut på väl valda positioner så det går ju uppenbarligen. Jag fattar dock inte vad skillnaden mellan min kod och den koden är.

Vilka kontroller? google maps egna? ja sjävlklart positioneras de, det blir inline styling på många objekt i google koden. Men inget i googles koder positionera det med absolut, relative finns fortfarande på elementet (kolla i firebug om du använder dig av det) de kör en position: relative på elementet #ctl00_phContent_GoogleMap1

peter@bmMedlem sedan jan. 201015 inlägg
#16

Länken du just fick går till en sida som visar demon på hur man använder en C#-kontroll som är skriven för att kunna använda GoogleMaps i .Net utan att behöva blanda in Java-script. Det är en kille i Turkiet eller något sånt som har skrivit utifrån Google's API.

Jag har suttit och tittat i bl. a. firebug och tycker att min min kod jag får ut utav det ser likadan ut men ändå positioneras den ovanpå mina två stapel-divar som jag visade i koden. Jag vill att den ska ligga under. Alltså; två staplar först och under dessa en div innehållande kartan. I nuläget är det kartan längst upp i högra hörnet ovanpå staplarna.

voigtann1Medlem sedan juni 20018 810 inlägg
#17

kör en overflow: hidden; på dina element, jag förstå fortfarande inte vad du försöker göra och vad problemet är enligt dig.

vad innehåller css:en för #parent ?

peter@bmMedlem sedan jan. 201015 inlägg
#18

Jag har lagt upp en enkel kod som motsvarar vad jag vill göra. Den enda css som används är den som finns med i taggarna.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="EPiServer.test" %>
<%@ Register assembly="Artem.GoogleMap" namespace="Artem.Web.UI.Controls" tagprefix="artem" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">

        <div id="parent" style="width: 500px;">
            
            <div style="float: left; width: 250px; height: 170px; background-color: Blue;">
                ...
            </div>
            <div  style="float: right; width: 250px; height: 250px; background-color: Green;">
                ...
            </div>
            <div style="position:relative;">
                <artem:GoogleMap ID="googleMaps" runat="server" Width="280px" Height="500px" Zoom="14"
                         EnableScrollWheelZoom="false" ZoomPanType="Large3D"
                         Latitude="58.35433301072118" Longitude="11.986445089573097"
                         Key="ABQIAAAAXNuEXdq7CGmkVOO4NPw6CxSprBb3d22s3kSaSFyRB1gvOG8D3hT5iWytZ4A6efEvst350trEvmtj0A">
                    <Markers>
                    <artem:GoogleMarker Latitude="58.35433301072118" Longitude="11.986445089573097" Clickable="false" />
                    </Markers>
                </artem:GoogleMap>
            </div>
        </div>

    </form>
</body>
</html>

Använder jag den här koden så ser det rätt ut i IE (vänster på bilden i länken nedanför), nämligen att kartan ligger under mina två kolumner men i FF/Safari blir det som till höger, kartan ligger då ovanpå kolumnerna.

http://forumbilder.se/show.aspx?iid=038201062134P2a7f

voigtann1Medlem sedan juni 20018 810 inlägg
#19

kan du skickar genererade koden som elementen gör? För oss som INTE använder oss av .NET

peter@bmMedlem sedan jan. 201015 inlägg
#20

Jag får tyvärr inte ut den. Han har kompilerat den till en dll-fil.

Genererad på 401 ms · cache AV · v20260730165559-full.f96bc7eb