Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 17
  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    div soll anderes überlagern

    HI!
    CSS ist nicht mein Freund
    Aber ihr wisst ja, ich frage alles nur einmal
    Welche Definitionen muss ich vornehmen, damit bei nachfolgendem Code die Optionsbox beim Aufklappen nicht das darunter liegende rote Fenster verschiebt sondern sich darüber legt?
    HTML-Code:
    <!DOCTYPE HTML> 
    <html> 
    <head> 
    <title>Test Box</title> 
    </head> 
    <body>
    	<div id="aussen" style="border: 1px blue solid;"><div onclick="optionsaufzu();">Optionsbox</div>
    		<div id="innen" style="display: none;">
    		Option 1<br>
    		Option 2
    		</div>
    	</div>
    	<div style="border: 1px red solid;">Drunter soll nicht verrutschen</div>
    	<script>
    		function optionsaufzu() {
    			document.getElementById('innen').style.display = (document.getElementById('innen').style.display == '' ? 'none' : '');
    		}
    	</script>
    </body> 
    </html> 
    Danke

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: div soll anderes überlagern

    Das div id="innen" braucht ein: position:absolute;

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Stimmt, klappt. Danke schlauer!

    Aber: Ich hätte eigentlich den blauen Rahmen gern drum behalten. Also der Kasten mit dem blauen Rahmen soll sich inkl. Rahmen nach unten öffnen, ohne den roten zu verschieben.
    Geht das auch mit CSS?
    Aktueller Code:
    HTML-Code:
    <!DOCTYPE HTML> 
    <html> 
    <head> 
    <title>Test Box</title> 
    </head> 
    <body>
    	<div id="aussen" style="border: 1px blue solid;"><div onclick="optionsaufzu();">Optionsbox</div>
    		<div id="innen" style="display: none; position: absolute; background-color: white;">
    		Option 1<br>
    		Option 2
    		</div>
    	</div>
    	<div style="border: 1px red solid;">Drunter soll nicht verrutschen</div>
    	<script>
    		function optionsaufzu() {
    			document.getElementById('innen').style.display = (document.getElementById('innen').style.display == '' ? 'none' : '');
    		}
    	</script>
    </body> 
    </html> 
    Geändert von mikdoe (21-06-2012 um 17:58 Uhr)

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: div soll anderes überlagern

    Du kannst dem #innen doch einfach links, rechts und unten auch einen blauen Rahmen geben.

  5. #5
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Ja, fast am Ziel, danke Korbinian.
    Code:
    HTML-Code:
    <!DOCTYPE HTML> 
    <html> 
    <head> 
    <title>Test Box</title> 
    </head> 
    <body>
    	<div id="aussen" style="padding: 2px; border: 1px blue solid; width: 100%;"><div onclick="optionsaufzu();" style="cursor: pointer;">Optionsbox</div>
    		<div id="innen" style="display: none; position: absolute; background-color: white; width: 100%; border-left: 1px blue solid; border-right: 1px blue solid; border-bottom: 1px blue solid;">
    		Option 1<br>
    		Option 2
    		</div>
    	</div>
    	<div style="border: 1px red solid;">Drunter soll nicht verrutschen</div>
    	<script>
    		function optionsaufzu() {
    			document.getElementById('innen').style.display = (document.getElementById('innen').style.display == '' ? 'none' : '');
    		}
    	</script>
    </body> 
    </html> 
    Aber irgendwie ist das div innen etwas verschoben im IE9 und es entsteht eine unerwünschte horizontale Scrolleiste, siehe Bild, wie kriege ich das weg?
    blaue_box.png

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: div soll anderes überlagern

    Naja, width:100% plus 1px Border erzuegt eine Scrollbar. Aber das width:100% ist sowieso überflüssig, da ein DIV ein Blockelement ist und wenn du es nicht aus den Fluss nimmst, ist es immer automatisch so breit wie Platz da ist.

    einfacher wäre das ganze aber vermutlich, wenn du deine Elemente mit JS einfügst, da dass was du anscheinend vorhast, sowieso nicht ohne JS funktioniert, bringt es auch nichts unnötiges Markup zu erzeugen.

  7. #7
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Naja, width:100% plus 1px Border erzuegt eine Scrollbar. Aber das width:100% ist sowieso überflüssig, da ein DIV ein Blockelement ist und wenn du es nicht aus den Fluss nimmst, ist es immer automatisch so breit wie Platz da ist.
    Habe width nur aufgenommen, weil es sonst so aussieht:
    blau2.png

    Zitat Zitat von ein schlauer Beitrag anzeigen
    einfacher wäre das ganze aber vermutlich, wenn du deine Elemente mit JS einfügst, da dass was du anscheinend vorhast, sowieso nicht ohne JS funktioniert, bringt es auch nichts unnötiges Markup zu erzeugen.
    Du meinst, per innerHTML den Inhalt einfügen und auch wieder rausnehmen?
    Aus welchem Grund wird es ohne JS nicht funktionieren?

  8. #8
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: div soll anderes überlagern

    Naja, weil du ein Element mit display:none nicht siehst und der Begriff "Optionsbox" klingt nach dem Versuch eine Auswahlliste nachzubauen, d.h. du willst irgendetwas mit den "options" machen, das geht in dem Fall ja nur mit JS - aber das ist alles nur Spekulation, wir Wissen nicht was du vor hast.

    Wegen dem Breitenproblem, es ist müsig hier sich Lösungen zu überlegen, da ich mir sicher bin, dass das ganze am Ende so nicht dargestellt wird oder werden soll. D.h. man müßte konkret Wissen, wie das ganze am Ende aussehen soll und unter welchen Bedigungen. Jetzt in diesem Stadium an einer 1Pixel Frage rumzudoktorn, wäre Kontraproduktiv.

  9. #9
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Hast Recht, der Begriff verwirrt.
    Es geht einfach um eine Box innerhalb derer ich in einer Tabelle mehrere Optionen anbieten möchte.
    Im Moment ist es mal nur eine Checkbox, später vielleicht noch ein select und radio dazu.
    Und diese Optionen sollen halt nur aufklappen, wenn man sie braucht.
    Ich versuche es nachher mal mit einer Tabelle und setze die tr's auf none.
    Melde mich wieder.

  10. #10
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Sooooo, jetzt verhält es sich schonmal vom Layout her wie gewünscht.
    Nur noch eine Winzigkeit: Wie bekomme ich hier dieses position:absolute; untergebracht?
    Egal wo ich es hinsetze, es macht immer irgendwas aber nicht, dass der rote Kasten bleibt wo er ist, wenn man den blauen öffnet.
    Bitte nochmal um Hilfe

    http://mikdoe.lima-city.de/test_klappbox.html

  11. #11
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Ich würde sagen, ich bin nicht weit entfernt.
    Schaut ihr bitte nochmal drauf: http://mikdoe.lima-city.de/test_klappbox.html

    Nur zwei Fragen:
    1. Wie bekomme ich die <hr> und den roten Kasten UNTER den blauen Kasten?
    2. Wie schaffe ich es, den blauen Kasten mit der vollen Breite auszustatten, ohne dass bei width:100% ein Scrollbalken entsteht?

    Danke

  12. #12
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Hat hierzu keiner eine Idee?
    Ich weiß nicht mehr, wo ich ansetzen soll.
    Oder ist das auch mit einer table nicht so lösbar?

  13. #13
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: div soll anderes überlagern

    Warum machst du es denn nicht so wie bei deiner Menüanimation?
    Sollte dann doch so wie bei diesem Beispiel funktionieren.
    Hoffe ich konnte helfen

  14. #14
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.932

    AW: div soll anderes überlagern

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Warum machst du es denn nicht so wie bei deiner Menüanimation?
    Weil ich garnicht kapiere, was da läuft. Manche Dinge gehen mir im Moment zu tief. Da finde ich mich mal rein, wenn mehr Zeit dafür ist.

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Sollte dann doch so wie bei diesem Beispiel funktionieren.
    Das ist ja genial.
    Nur mit dieser einen Zeile jQuery('#wrapper').height(jQuery('#wrapper').height() + 'px'); läuft das?
    Was macht denn diese Zeile überhaupt?

  15. #15
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: div soll anderes überlagern

    Zitat Zitat von mikdoe Beitrag anzeigen
    Nur mit dieser einen Zeile jQuery('#wrapper').height(jQuery('#wrapper').height() + 'px'); läuft das?
    Was macht denn diese Zeile überhaupt?
    Das umgebende DIV benötigt eine gewisse Höhe, welche den Text anzeigt, wenn die Tabelle "einzeilig" ist. Diese soll sich ja nicht ändern, wenn die Tabelle mehr Zeilen bekommt. Also benötigt dieses DIV eine feste Höhe. Entweder per CSS-Angabe oder mit eben dieser einen Zeile.
    Mit [Query('#wrapper').height()] kannst du die Höhe eines Elements auslesen oder festlegen. Heist also #wrapper-Höhe = #wrapper-Höhe + 'px'
    Es wird die momentane Höhe ausgelesen und dem Element als neue feste Höhe zugwiesen.
    Hoffe ich konnte helfen

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. leeres DIV über anderes DIV soll Clickbar sein
    Von sodah im Forum JavaScript
    Antworten: 16
    Letzter Beitrag: 11-07-2010, 11:21
  2. Antworten: 4
    Letzter Beitrag: 26-05-2009, 09:19
  3. Menü soll Inhalt überlagern
    Von TimeForGold im Forum CSS und (X)HTML
    Antworten: 12
    Letzter Beitrag: 31-08-2008, 21:15
  4. Bild mit gif-Datei überlagern
    Von coastbike im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 16-11-2007, 23:12
  5. Menü soll das Page überlagern
    Von Sanni im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 22-09-2007, 16:28

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •