div ovanpå div i absolut position

8 svar · 429 visningar · startad av ironhead 9 feb. 2005

ironheadMedlem sedan mars 20011 346 inlägg

Frågan9 feb. 2005 23:12#1

Hej!

Jag försöker grejja med en enkel wysiwyg editor som jag har i en <div>, nu skulle jag vilja lägga en <div> till ovanpå den första och positionera den exakt där jag vill...alltså få min div med iframe som innehåller färgpaletten att alltid visas under färg-knappen när jag trycker på den...som det är nu så flyttas den med när man gör radmatning i div-en :-/

<div id=foo contenteditable=true align=left style="width:754px;
 font-face:Verdana; padding:3; border:1px solid #CCCCCC; 
 scrollbar-base-color:gray; overflow=auto;z-index:100;">
</div>
  
<div id="palette" contenteditable=false style="z-index:120; 
 display: none; position:absolute; float:none; margin-left:368px; 
 margin-top: 0px;">
   <iframe width="154" height="104" id="cp1" src="palette.htm" 
 marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

Hur tusan ska man skriva, har testat allt från static till relative, z-index etc. men får inte till det...

FuelMedlem sedan okt. 20001 285 inlägg

10 feb. 2005 11:04#2

Tja.. satt & lekte lite som snabbast :)

<script type="text/javascript">
function show_palz(palette_id) {
    document.getElementById(palette_id).className = "palette1b";
}
</script>

<style type="text/css">
.hideme { display: none; }

.palette1b { display: block; position:absolute; left:10px; top: 40px; }
.editme   { display: block; margin-top: 140px; font-face:verdana; font-size:12px; }
.editwin  { width:500px; height:300px; padding:3; border:1px solid #CCCCCC; scrollbar-base-color:gray; overflow:auto; }
</style>
<button onclick="javascript:show_palz('palette');">Palette 1</button>

<div id="stuff" contenteditable="true" class="editme">
Edit here:
<div id="foo" contenteditable="true" class="editwin">
Some text here..
</div>
</div>

<div id="palette" class="hideme">
<iframe width="154" height="104" id="cp1" src="palette.htm" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

ironheadMedlem sedan mars 20011 346 inlägg

10 feb. 2005 11:09#3

okej, kanske inte helt kristallklart :-/

1. jag har en knapp (input type="button") ovanför min editerbara div
2. div foo är editeringsdiven, dvs jag kan skriva text i den
3. jag har ett lager till som jag kallar "palette" som innehåller en iframe som i sin tur innehåller palette.htm och är en klickabar färgskala.
4. jag vill lägga lagret "palette" strax under knappen, och det betyder att jag kommer att lägga lagret ovanpå lagret "foo"
5. Går bra sålänge jag inte skrivit nåt i lagret "foo", men när jag skriver så förflyttas lagret "palette" nedåt.

Hur ska jag göra så att lagret "palette" ligger i en fast position under knappen?

ironheadMedlem sedan mars 20011 346 inlägg

10 feb. 2005 11:14#4

Fuel skrev:

Tja.. satt & lekte lite som snabbast :)

<script type="text/javascript">
function show_palz(palette_id) {
    document.getElementById(palette_id).className = "palette2";
}
</script>

<style type="text/css">
.palette1 { display: none; }
.palette2 { display: block; position:absolute; left:520px; top: 20px; z-index:100; }
.editme   { display: block; margin-top: 20px; width:500px; height:300px; font-face:verdana; padding:3; border:1px solid #CCCCCC; scrollbar-base-color:gray; overflow:auto; }
</style>

<div id="foo" contenteditable="true" class="editme">
Some text here..
</div>
  
<div id="palette" class="palette1">
<iframe width="154" height="104" id="cp1" src="palette.htm" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

<a href="javascript:show_palz('palette');">Palette</a>

Den här gör ju att palett-lagret hamnar till höger om det första, jag vill att det ska hamna under en knapp som befinner sig ovanför första lagret och fäller ut sig över lager 1

FuelMedlem sedan okt. 20001 285 inlägg

10 feb. 2005 11:18#5

Har uppdaterat .. sitter som bekant bara & leker ( har lunch ) :)

FuelMedlem sedan okt. 20001 285 inlägg

10 feb. 2005 11:20#6

eller så här:

<script type="text/javascript">
function show_palz(palette_id) {
    document.getElementById(palette_id).className = "palette1b";
}
</script>

<style type="text/css">
.hideme { display: none; }

.palette1b { display: block; margin:10px; }
.editme   { display: block; font-face:verdana; font-size:12px; }
.editwin  { width:500px; height:300px; padding:3; border:1px solid #CCCCCC; scrollbar-base-color:gray; overflow:auto; }
</style>
<button onclick="javascript:show_palz('palette');">Palette 1</button>
<div id="palette" class="hideme">
<iframe width="154" height="104" id="cp1" src="palette.htm" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="stuff" class="editme">
Edit here:
<div id="foo" contenteditable="true" class="editwin">
Some text here..
</div>
</div>

ironheadMedlem sedan mars 20011 346 inlägg

10 feb. 2005 19:42#7

Nu flyttas hela foo-diven ner hela storleken på paletten istället...jag vill att paletten ska "överlappa foo-diven"

FuelMedlem sedan okt. 20001 285 inlägg

10 feb. 2005 20:43#8

Varsågod !

<html>
<head>

<title>Palett Rally</title>

<script type="text/javascript">
function visa(p)
{
	for (i=1; i<4; i++){
		if (p==i) {
			document.getElementById('palette'+p).style.display='block';
		} else {
			document.getElementById('palette'+i).style.display='none';
		}
	}
}
</script>

<style type="text/css">

#palette1, #palette2, #palette3
{
    position: absolute;
    top: 50px;
    left: 20px;
    z-index: 10;
    width: 154px;
    height: 104px;
    display: block;
    padding:10px;
    background-color: #eeeeee;
}

#palette1 { border:2px solid #ff0000; }
#palette2 { border:2px solid #FF8000; }
#palette3 { border:2px solid #0080FF; }

.editWin
{
    display: block;
    font-face: verdana;
    font-size: 12px;
    width: 500px;
    height: 300px;
    padding: 3;
    border:2px solid #444444;
    scrollbar-base-color: gray;
    overflow: auto;
    z-index:1;
}
</style>

</head>

<body>

<a href="javascript:visa('0');">Standard</a> | 
<a href="javascript:visa('1');">Palette 1</a> | 
<a href="javascript:visa('2');">Palette 2</a> | 
<a href="javascript:visa('3');">Palette 3</a>

<p>Edit here:</p>
<div id="foo" contenteditable="true" class="editWin">
Some text here..
</div>

<div id="palette1" style="display:none;">
Palette 1 <p>[<a href="javascript:visa('0');">X</a>]</p>
</div>

<div id="palette2" style="display:none;">
Palette 2 <p>[<a href="javascript:visa('0');">X</a>]</p>
</div>

<div id="palette3" style="display:none;">
Palette 3 <p>[<a href="javascript:visa('0');">X</a>]</p>
</div>

</body>
</html>

ironheadMedlem sedan mars 20011 346 inlägg

10 feb. 2005 20:53#9

ah! Snyggt!
Tack så hemskt mycket :D