✔ 2 Spaltenlayout + runde Ecken

Auf die selbe Weise, wie bei den linken Boxen, nur dass die rechte Box einen anderen Klassenbezeichner benötigt, um ihr individuelles Hintergrundbild (gfxborder664.gif) zuordnen zu können.

Anstelle der Klasse .rbroundbox werden für die Boxen .rbroundbox-left und .rbroundbox-right deklariert.

HTML: 
<div class="c664 rbroundbox-right">
        <div class="rbcontent">
          <div class="rbtop"></div>
            { CONTENTBOX 1 }
            <br />
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
          <div class="rbbottom">
          <div></div>
        </div>
</div>

...

<div class="c260 rbroundbox-left">
        <div class="rbcontent">
          <div class="rbtop"></div>
            { SIDEBOX 1 }
        </div>
          <div class="rbbottom">
          <div></div>
        </div>
</div>
CSS: 
.rbroundbox-left,
.rbroundbox-right {
          position: relative;
          margin: 24px 0; /* spacing over and under dialog */
}

.rbroundbox-left .rbcontent,
.rbroundbox-left .rbtop,
.rbroundbox-left .rbbottom,
.rbroundbox-left .rbbottom div {
          background: transparent url(../../img/gfxborder260.gif) no-repeat top right;
}

.rbroundbox-right .rbcontent,
.rbroundbox-right .rbtop,
.rbroundbox-right .rbbottom,
.rbroundbox-right .rbbottom div {
          background: transparent url(../../img/gfxborder664.gif) no-repeat top right;
}

.rbroundbox-left .rbcontent,
.rbroundbox-right .rbcontent  {
          position: relative;
          padding: 12px 10px 6px;
}

.rbroundbox-left .rbtop,
.rbroundbox-right .rbtop {
          /* top+left vertical slice */
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          background-position: top left;
}

.rbroundbox-left .rbbottom,
.rbroundbox-right .rbbottom {
          /* bottom */
          position: relative;
          width: 100%;
}

.rbroundbox-left .rbbottom,
.rbroundbox-left .rbbottom div,
.rbroundbox-right .rbbottom,
.rbroundbox-right .rbbottom div {
          height: 6px; /* height of bottom cap/shade */
          font-size: 1px;
}

.rbroundbox-left .rbbottom,
.rbroundbox-right .rbbottom {
          background-position: bottom right;
}

.rbroundbox-left .rbbottom div,
.rbroundbox-right .rbbottom div {
          position: relative;
          background-position: bottom left;
}

mfg Maik
 
Hallo Maik,

danke für deine Antwort und Hilfe. Das sieht gut aus und ist so wie ich es wollte.
http://www.xlabs.de/corner/layout.html
Nun kommt es, wie es kommen mußte. Ich habe ein neues Problem.
Ich möchte in einem Container 3 Spalten nebeneinander anordnen.
Eigendlich ganz simpel, dachte ich zumindest.
Er schiebt das rechte DIV irgendwie runter.

Code: 
  .leftCalNav { float: left; width: 100px; }
  .rightCalNav { float: right; width: 100px; text-align: right; }
  .middleCalNav { width: auto; background: #ccc; text-align: center; margin: 0 100px; }
  .leftCalNav a, .rightCalNav a { font-size: 150%; text-decoration: none; color: #ccc; }
  .leftCalNav a, .rightCalNav a:hover { background: #ccc; color: #fff; }

HTML: 
      <div class="c664 c664roundbox">
        <div class="rbcontent">
          <div class="rbtop"></div>
            <div class="leftCalNav"><a href="#">17. Jun</a></div>
            <div class="middleCalNav">Navigation</div>
            <div class="rightCalNav"><a href="#">KW 25</a></div>
        </div>
          <div class="rbbottom">
          <div></div>
        </div>
      </div>

mfg GN911
 
Hi,

das zu umfliessende Element wird im Markup an erster Stelle genannt - also:
HTML: 
      <div class="c664 c664roundbox">
        <div class="rbcontent">
          <div class="rbtop"></div>
            <div class="leftCalNav"><a href="#">17. Jun</a></div>
            <div class="rightCalNav"><a href="#">KW 25</a></div>
            <div class="middleCalNav">Navigation</div>
        </div>
          <div class="rbbottom">
          <div></div>
        </div>
      </div>


mfg Maik
 
Hi Maik,

habe das so in der Seite schon eingebaut, bzw. geändert gehabt.
Siehe Link oben.
Könntest du mir sagen, ob ich .clearfix überall richtig gesetzt habe?!


mfg GN911
 
Konnte ich nicht wissen, da ich die letzten zwei Wochen im Urlaub war, und vorhin dem Link nicht gefolgt bin, da ich den Fehler im HTML-Code auf Anhieb erkannt habe ;-)

Antwort-Header http://www.xlabs.de/corner/layout.html hat gesagt.:
Date: Mon, 03 Aug 2009 18:31:20 GMT
Server: Apache/2.2.11 (Unix) mod_fastcgi/2.4.6
Last-Modified: Mon, 03 Aug 2009 18:25:19 GMT
Etag: "e1995a-1748-47040e46d3342"
Accept-Ranges: bytes
Content-Length: 5960
Content-Type: text/html

200 OK
Zum Vergrößern anklicken....
Btw, ist in deinem Kalender die Zeit am 17. Juli stehen geblieben?

calendar.jpg

@clearfix: Sieht soweit alles gut aus.

mfg Maik
 
Ich hoffe du hast dich gut erholt und hattes schönes Wetter.
Ne, ich mach derzeit noch das Layout, das Leben wird später eingehaucht..
Deswegen ist es mir wichtig das ganze auch richtig zu machen.

grüße
 
Danke, ich hatte eine geile Zeit an der deutschen Nordsee :)

Wir beide schaukeln hier doch ganz ordentlich das Baby :-)

mfg Maik
 
ich hoffe das wir es schaukeln werden ;)

Ich bin mir nicht so sicher ob das beim es Kalender so richtig ist:
HTML: 
      .calcontainer li {
          float: left;
          display: block;
          width: 32px;
          margin: 2px 1px 0;
          padding: 0;
      }
      
      .calcontainer .weeks li {
          color: #9c0;
          font-weight: bold;
      }
      
      .calcontainer .weeks li, calcontainer .days li {
          width: 32px;
      }

Die linke Seite ist ja 260px breit -2x 10px padding = 240px wo der Kalender rein muss?

mfg
 
Zumindest fehlt hier der Punkt vor dem Klassennamen:
Code: 
.calcontainer .weeks li, .calcontainer .days li {
          width: 32px;
      }


Nur wozu wird diese Regel benötigt, wenn im ersten Selektor .calcontainer li die Breite für das li-Element deklariert ist?

Und was soll deiner Meinung nach hier nicht richtig sein? Die Kalender-Darstellung stimmt doch in der linken Box.

7 * 32px + 14 * 1px = 238px

238px < 240px => kein Breitenüberschuß
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück