box in box verschachteln...

  • guten abend,

    würde gern in eine bestehende #box weitere kleinere links und rechts
    einfügen.
    ohne, daß es die große zerreisst.
    in der großen box befindet sich überschrift h1, h2 und daneben soll etwas text...danke!!!

  • Lass mich raten. Dein Quellcode sieht so aus:

    Code
    <div>
    <h1>Überschrift</h1>
    <h2>Überschrift</h2>
    </div>

    Und du willst:

    Code
    <div>
    <div class="links">links</div>
    <div class="rechts">rechts</div>
    <h1>Überschrift</h1>
    <h2>Überschrift</h2>
    </div>

    Das müsste eigentlich mit dem CSS

    Code
    .links { float: left;width: 100px; }
    .rechts [ float: right;width: 100px;}

    möglich sein. Wenn nicht: zeig uns deinen Quellcode oder besser noch einen Link zu der Seite.

  • hi, adult, kann ich leider nicht posten,

    </head>
    <body>
    <div id="title">
    <span style="background-color:#000000;">
    <div align="center">
    <font color="#ffffff">
    <div align="center">
    <h1>live xxx live chat live girls</h1></span>
    <font color="#dddddd">
    <h2>http://www.xxx.com</h2></>
    </div>

    das ist meine #box title
    da möchte ich links und rechts von den überschriften text reinsetzen...
    hatte gedacht, indem ich weitere boxen draufsetze???

    ps: da ist zwar eine doppelung drin align= center, aber nur so gehts...sonst verrutscht mir unten text, keine ahnung warum...

  • Dein HTML-Ausschnitt ist grauenhaft. Ich hoffe der Rest der Seite sieht nicht auch so aus? Da ist so ziemlich alles falsch:

    - doctype fehlt
    - head fehlt
    - span falsch verwendet
    - font gibt es nicht mehr, wird nicht mal mehr geschlossen
    - ...

    Zudem sagst Du nun etwas anderes was du willst. Erst war es

    Zitat

    würde gern in eine bestehende #box weitere kleinere links und rechts
    einfügen.
    ohne, daß es die große zerreisst.

    jetzt ist es

    Zitat

    da möchte ich links und rechts von den überschriften text reinsetzen...

    Das ist sowohl inhaltlich wie auch technisch etwas anderes. Wenn es darum geht auf der selben Zeile wie die Überschriften Text zu setzen musst Du so vorgehen:

    HTML

    Code
    <h1><span class="links">links</span><span class="rechts">rechts</span>Überschrift</h1>

    CSS:

    Code
    h1 span.links {
     display: block;
     float: left;
     width: 40px;
    }
    h1 span.rechts {
     display: block;
     float: right;
     width: 40px;
    }

    Da ich nun aber nicht weiß was du überhaupt willst ist das auch nur geraten ...

  • hi, erst einmal viele Dank...
    html ist halbwegs ok mit doctype u.s.w, war ja nur ein ausschnitt...
    Du hast das schon richtig gesehen und ichj probiere heute Deinen
    idee umzusetzen

    habe waagerechte box über ganze seite, border und da ist überschrift h1, h2 drin, left und right soll da nur etwas text zur auflockerung rein...
    ich probier jetzt mal...

  • ok, das klappt irgendwie,
    aber ich möchte 2,3 zeilen text/content untereinander stellen...
    bsp.

    text(h5)(#cc0000) überschrift(h1)('fff) text(h5)(#cc0000)
    text....................."" (h2) text............text
    text................................................text
    das alles in einer box...

  • ->

    HTML
    <div id="box">
            <div id="right"><p>Rechte Spalte mit beliebig viel Text</p></div>
            <div id="center"><h1>&Uuml;berschrift 1</h1><h2>&Uuml;berschrift 2</h2></div>
            <div id="left"><p>Linke Spalte mit beliebig viel Text</p></div>
            <div class="clear"></div>
    </div>


    Wichtig ist bei dieser Variante die Reihenfolge der Boxen, sonst kommt es zu einem heillosen Chaos. Da die Boxen von rechts nach links sortiert sind und auch quasi an den rechten Rand der Box "geklebt" sind, müssen sie auch von rechts nach links aufgerufen werden. Der HTML-Schnipsel ist aus einer Seite von mir im Netz, funktioniert also und ist auch einwandfrei validiert.

    zugehöriger CSS-Schnipsel mit BEISPIEL-Breiten:

    Um das Ganze besser zu verstehen, einfach mal bei SelfHTML reinschaun. Der Link führt genau auf die Seite, auf der dein Problem behandelt wird: Dreispaltige Layouts mit Hilfe von CSS.