• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text über mehrere divs? aber wie?

steffus

Neues Mitglied
Hallo habe 3 divs nebeneinander. Möchte nun einen Text komplett über diese 3 erscheinen lassen. Ein 4. div mit absolute Positionierung kommt da aber nicht in Frage. Gibt es noch eine andere Möglichkeit?
 
ein <p> mit absoluter positionierung?

oder das <p> in der rechten der drei boxen rechts floaten und 100% breite mir relativer positionierung (nur ne idee und ungetestet).
 
Willkommen im Forum.

Deine Frage ist ziemlich ungenau gestellt. Bitte werde da konkreter. Das hier ist vermutlich nicht das, was du meinst:

HTML:
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">

.box {
    width: 10em;
    float: left;
}

.highlight {
    margin-left: -20em;
    background: #fcc;
}

        </style>

    </head>

    <body>
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam, arcu in condimentum porta, felis neque auctor tortor, gravida vehicula nulla nulla non metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in euismod sapien. Nulla at eros dolor. Suspendisse euismod velit sit amet ante lacinia dignissim. Vivamus convallis felis eu erat bibendum euismod non sit amet odio.</p>
        </div>

        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam, arcu in condimentum porta, felis neque auctor tortor, gravida vehicula nulla nulla non metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in euismod sapien. Nulla at eros dolor. Suspendisse euismod velit sit amet ante lacinia dignissim. Vivamus convallis felis eu erat bibendum euismod non sit amet odio.</p>
        </div>

        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam, arcu in condimentum porta, felis neque auctor tortor, gravida vehicula nulla nulla non metus.</p>
            <div class="highlight">Dieser Text sollte über alle drei Spalten gehen. Ich mache ihn mal noch ein paar Wörter länger.</div>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in euismod sapien. Nulla at eros dolor. Suspendisse euismod velit sit amet ante lacinia dignissim. Vivamus convallis felis eu erat bibendum euismod non sit amet odio.</p>
        </div>
    </body>

</html>
 
Ich rate dir nur 4 <p> 's zu verwenden. 3 davon bekomm float: left, die margin/padding werte der <p> 's setzt du auf 0.

<p>bla bla bla</p>
<p class="floatleft">BOX1</p>
<p class="floatleft">BOX1</p>
<p class="floatleft">BOX1</p>


Wenn in die 3 Boxen Bilder sin sollen, brauchst auch dafür keine divs.
Einfach die <img> floaten und darüber wieder einen <p>.
 
Du solltest dann allerdings (um semantisch korrekt zu bleiben)
Code:
[COLOR=#000080]<div class=[COLOR=#0000ff]"highlight"[/COLOR]>[/COLOR]Dieser Text sollte über alle drei Spalten gehen. Ich mache ihn mal noch ein paar Wörter länger.[COLOR=#000080]</div>[/COLOR]
durch
Code:
[COLOR=#000080]<[/COLOR]p[COLOR=#000080] class=[COLOR=#0000ff]"highlight"[/COLOR]>[/COLOR]Dieser Text sollte über alle drei Spalten gehen. Ich mache ihn mal noch ein paar Wörter länger.[COLOR=#000080]</p>[/COLOR]
ersetzen
 
Zurück
Oben