Div-Box "um die Ecke"

Hansi05 · 20.05.2009

Hallo,

es kann sein dass ich im Mom den Wald vor lauter Bäumen nicht sehe aber kann mir jmd sagen wie ich sowas realisieren kann?

Von mir aus können das dann auch 2 Elemente sein ... Also es muss nicht zwingend nur eine Div-Box oder was auch immer sein

mfg

kabummski · 20.05.2009

AW: Div-Box "um die Ecke"

Was meinst du genau?

Hansi05 · 20.05.2009

AW: Div-Box "um die Ecke"

Normalerweise ist eine Div-Box ja nur ein Viereck, ich brauch aber eine Div-Box die so aussieht wir auf der Skizze oben, von mir aus können es dann auch 2 Dov-Boxen oder ganz andere Elemente sein, ist mir eig egal, die Hauptsache ist, dass das Resultat so aussieht.

DavidCaspar · 21.05.2009

AW: Div-Box "um die Ecke"

eine mehreckige Divbox gibts (noch) net ^^, das resultat könntest du aber mit 2 div boxen hinbekommen -> eine große links und eine kleinere rechts neben der großen mit cssanweisungen: margin-top: 40px und float right.

Oder du packst die 2 divboxen in eine dritte rein.

sokie · 21.05.2009

AW: Div-Box "um die Ecke"

warum nicht einfach eine entsprechende grafik als background?

Herr_D · 21.05.2009

AW: Div-Box "um die Ecke"

Brauchst du den Rahmen oder wo Ist das Problem?

Möglichkeiten:

1. Sokiestyle per background
2. per "Schichten" - position:absolute und z-index mit unterschiedlichen Rahmen

lauffreak · 21.05.2009

AW: Div-Box "um die Ecke"

meinst du so?

Damb · 23.05.2009

AW: Div-Box "um die Ecke"

Absolute mit Z-Index hab ich mal gebastelt

Aber nicht meckern wenn was falsch ist, ich bin auch noch am lernen :rolleyes:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testbeispiel</title>
<style type="text/css">
<!--
#groß {
    background-color: #999999;
    height: 50em;
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 0px;
    right: 0px;
}
#klein {
    background-color: #FF9900;
    height: 200px;
    width: 30%;
    position: absolute;
    visibility: visible;
    z-index: 1;
    top: 0px;
    right: 0px;
    }


-->
</style>
</head>

<body>
<div id="groß">
  <div id="klein">Bla bla ^^</div>
  <div align="right"></div>
Bla Bla ^^</div>
</body>
</html>

Viele Grüße
Damb

Edit: Ach und Herr_D gratz zu 7k Beiträge ^^ (ned schlecht Herr Specht)

cebito · 23.05.2009

AW: Div-Box "um die Ecke"

Nur was kleines: <div align="right"></div>
wofür ist der denn da und was soll das align?

Damb · 23.05.2009

AW: Div-Box "um die Ecke"

Oh hmm,
ich kann mir auch nicht vorstellen was mich da "geritten" hat. Naja sowas kann auch nur mir passieren :hmpf:
Das <div align="right"></div> hat natürlich keine Bedeutung für das ganze Projekt aber danke das du mich darauf aufmerksam gemacht hast. Von selbst wär es mir wahrscheinlich nicht aufgefallen.
Grüße
Damb

Hansi05 · 30.05.2009

AW: Div-Box "um die Ecke"

Das sind an sich alles annähernde Lösungen die aber ein Problem haben:
Ich brauch auch eine Rahmen um die Box.
Sobald ich um dei große Box einen Rahmen mache, wird der Rahmen auch im die kleine in der Ecke rechts oben gemacht.

Und bei Background macht es sich mit der Positionierung der Schrift schwer, zumal die Größe dynamisch ist.

Kann man da noch was machen?

Damb · 31.05.2009

AW: Div-Box "um die Ecke"

Hm also ich habe da ein bisschen Rumgebastelt weil mir grade der Schädel vom Lernen qualmt ^^ vielleicht konnte ich dir ja damit helfen.

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testbeispiel</title>
<style type="text/css">
<!--
#groß {
    background-color: #999999;
    height: 50em;
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 0px;
    right: 0px;
    border-style:solid;
}
#klein {
    background-color: #FF9900;
    height: 200px;
    width: 30%;
    position: absolute;
    visibility: visible;
    z-index: 1;
    top: 0px;
    right: 0px;
    border-style:solid;
    border-top:0;
    border-right:0;
    }
#schriften1 {
    text-align:center;
    font-size:24px;
    font-weight:bolder;
    margin-top:25px;
    }
#schriften2 {
    text-align:center;
    font-size:36px;
    font-weight:bolder;
    margin-top:50px;
    }
#textblock1 {
    margin-top:250px;
    text-align:center;
    font-size:16px;
    font-weight:bolder;
    margin-left:50px;
    margin-right:50px;
    }

-->
</style>
</head>

<body>
<div id="groß">
  <div id="klein">
      <div id="schriften1">
          Bla bla bla. Mal ein etwas längerer Text zum sehen wie das ganze ausschaut  ^^
      </div>
 </div>

    <div id="schriften2">Bla Bla ^^
    </div>
    
        <div id="textblock1"> Ich weiss nun nicht ob ich das ganze falsch verstanden habe oder entspricht das nicht der                     Beschreibung die du geliefert hast. Hm das mit der Schrift platzieren geht doch auch oder seh ich das nun auch falsch? ;)
        </div>


</div>
</body>
</html>

Viele Grüße
Damb