Vollständige Version anzeigen : H2 auf eine Höhe ohne position:absolute; und div-box dazwischen


GaYlORd
07.03.2014, 10:07

Hi Leute,

mir fällt gerade zu diesem Problem keine Lösung ein:


<h2>Überschrift</h2>
<div class="text">asdasdasd</div>
<h2>Noch ne Überschrift</h2>
<div class="text">asdasdasd</div>


So weit so gut, nur sollen die H2s neben einander stehen. Der Inhalt wird per jQuery ein bzw. ausgeblendet.
Das ganze ginge ja problemlos mit position:absolute; allerdings möchte ich das vermeiden, weil sich der Abstand nach oben bzw. zu den Rändern ändert.

Ich möchte die beiden H2s nicht direkt untereinander schreiben, und ich möchte unbedingt H2-Überschriften verwenden ;)

Die CSS-Klasse bisher:

h2{
display: inline-block;
padding: 10px 20px;
border: 1px solid #e5e5e5;
border-bottom: 1px solid #fff;
cursor: pointer;
}


Gäbe es da eine andere Möglichkeit?

Danke und Gruß
gl

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Chrisomator
07.03.2014, 10:32

Wenn ich's richtig verstanden habe könntest du um die jeweiligen Contentblöcke noch ein DIV Container setzen und diesen floaten lassen.

<div style="float: left;">
<h2>Überschrift</h2>
<div class="text">asdasdasd</div>
</div>
<div style="float: left;">
<h2>Noch ne Überschrift</h2>
<div class="text">asdasdasd</div>
</div>
<div style="clear: both;"></div>


GaYlORd
07.03.2014, 11:01

Danke für den Tipp. Float klappt aber leider nicht. Das 2te H2 wird ja trotzdem hinter der ersten div-box angezeigt.

Hab mal ein Bild gemacht, das verdeutlicht das ganze vllt:
#attach#27038#/attach#
Die Linke Seite erscheint, wenn auf TAB1 geklickt wird, die rechte Seite bei klick auf TAB2.
Das rote sind die html-tags.


Gruß
gl


Nanobyte
07.03.2014, 11:53

Das hier wäre meine spontane Lösung: Edit fiddle - JSFiddle (;jsfiddle~net/qPxhL/)

Alternativ kannst du deine h2 auch mit jQuery auslesen, ausblenden und dann deine "Tabs" erzeugen.


Murdoc
07.03.2014, 11:55

Von hier geklaut? :D
Div 100% Höhe unahängig vom Inhalt - RR:Board (Div-100-H%C3%B6he-unah%C3%A4ngig-vom-Inhalt?p=11179293#post11179293)

Tabs (ohne JavaScript) (;putc~me/etc/rr/height/#tab1)


Chrisomator
07.03.2014, 11:59

Also möchtest du die beiden DIV's mit der Klasse "text" sozusagen übereinander packen und je nach klick auf Tab 1 oder Tab 2 das eine verstecken und das andere anzeigen?
Wenn ja pack die beiden DIVs mit der Klasse "text" in einen neuen DIV Container und gib diesem Container position: relative; Dann gibst du den ;text Elementen position:absolute und display: none; Dann onLoad kannst du ja das erste ;text Element einblenden lassen, da ich davon ausgehen, dass standardmäßig Tab 1 ausgewählt ist.

Ich hoffe ich habe dein Problem richtig nachvollziehen können, ansonsten wäre es vielleicht noch ganz hilfreich, wenn du dein Ziel beschreibst und evt. ein JSFiddle erstellst. :)

LG


Nanobyte
07.03.2014, 12:25

Von hier geklaut? :D
Div 100% Höhe unahängig vom Inhalt - RR:Board (Div-100-H%C3%B6he-unah%C3%A4ngig-vom-Inhalt?p=11179293#post11179293)


Nein, du solltest doch wissen was ich Quellen referenziere ;)


GaYlORd
07.03.2014, 18:04

Danke ;Nanobyte -> die textboxen mit position:absolute; zu machen, hatte mir gefehlt :)

Gruß
gl


Ähnliche Themen zu H2 auf eine Höhe ohne position:absolute; und div-box dazwischen
  • [CSS] IE6 Div ohne Inhalt aber höhe mit background
    Hiho, mein Problem ist, das der IE6 bei mir 2 DIV Cointainer komplett killt... Ich habe 2 Stück die einfach nur eine Hintergrundfarbe haben oder ebend ein Hintergrundbild. Beide haben eine festgelegt höhe einmal 2px einmal 12px... der IE6 ignoriert diese aber gekonnt und ich habe ein, naja ic [...]

  • [Video] Ohne Sicherung in 215 m Höhe
    ;;;youtube~com/watch?v=yU4rp_oRK0Q :thumbsup: [...]

  • Windows 7: Neues Fenster Position überlappend ohne Versatz
    Hey, ich hab 'ne Frage. Ich habe bei mir (Windows 7 Ultimate) die Fenster, die ich von Ordnern öffne, nie maximiert sondern immer im "Fenster-Modus". Dabei habe ich die Fenster immer in einer bestimmten Größe, damit ich Sachen am unteren und rechten Rand des Bildschirms erreichen kann, ohne Fens [...]

  • [CSS] position: relative oder absolute
    Hi ich hoffe ich spam euch nicht zu viel ^^ Naja... Meine Frage In meinen Buch wird das wieder mal zu kompliziert erklärt und da ihr mir ja schon mal mit padding und margin geholfen habt könnt ihr mir jetzt vill. auch die unterschiedlichen anwendugsmethoden von relative und absolute erkläre [...]



raid-rush.ws | Imprint & Contact pr