H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

Dieses Thema im Forum "Webdesign" wurde erstellt von GaYlORd, 7. März 2014 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 7. März 2014
    Hi Leute,

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

    PHP:
    < 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:
    PHP:
    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
     

  2. Anzeige
  3. #2 7. März 2014
    AW: H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

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

     
  4. #3 7. März 2014
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

    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:
    bild.JPG
    Die Linke Seite erscheint, wenn auf TAB1 geklickt wird, die rechte Seite bei klick auf TAB2.
    Das rote sind die html-tags.


    Gruß
    gl
     
  5. #4 7. März 2014
    AW: H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

    Das hier wäre meine spontane Lösung: Edit fiddle - JSFiddle

    Alternativ kannst du deine h2 auch mit jQuery auslesen, ausblenden und dann deine "Tabs" erzeugen.
     
  6. #5 7. März 2014
    Zuletzt von einem Moderator bearbeitet: 13. April 2017
  7. #6 7. März 2014
    AW: H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

    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
     
  8. #7 7. März 2014
    Zuletzt von einem Moderator bearbeitet: 13. April 2017
    AW: H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

    Nein, du solltest doch wissen was ich Quellen referenziere ;)
     
  9. #8 7. März 2014
    AW: H2 auf eine Höhe ohne position:absolute; und div-box dazwischen

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

    Gruß
    gl
     

  10. Videos zum Thema
Die Seite wird geladen...