26 svar · 1 466 visningar · startad av peter@bm
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?
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.
Den ligger fortfarande över de två kolumnerna. :/
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.
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>
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?
positionera dina divar utan absolut, om det är en nod så kan du alltid positionera det med marginaler, bredd, höjd.
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.
#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")
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. :(
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.
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; ?
lägg upp sidan så vi andra kan se det, för vilka är dessa kontroller du pratar om?
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.
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
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.
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 ?
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.
kan du skickar genererade koden som elementen gör? För oss som INTE använder oss av .NET
Jag får tyvärr inte ut den. Han har kompilerat den till en dll-fil.