✔ 2 Spaltenlayout + runde Ecken

[GN911]

Hallo,

ich möchte gern ein Layout ähnlich vom Aufbau wie bei ebay erstellen.
Die Container für den Inhalt und die Navigation sollen runde Ecken bekommen und sollen mehrfach verwendet werden können.
Die Struktur der CSS-Dateien soll wie bei YAML aufgebaut werden (wegen Bug fixes).

<style type="text/css">
.page_margins { margin: 0; padding: 10px 0; }
#header { width: 960px; height: auto; margin: 10px 0; padding: 6px; }
#main { margin: 0; padding: 0; }
.c664r { width: 664px; height: auto; margin: 10px 0; padding: 12px 6px; }
.c260l { width: 260px; height: auto; margin: 10px 0; padding: 12px 6px; }
#footer { width: 960px; height: auto; margin: 10px 0; padding: 6px; }

.clearfix { clear: both; }
</style>

<div class="page_margins">
 <div id="header"></div>
   <div id="main">
     <div class="c664r"></div>
     <div class="c260l"></div>
   </div>
 <div id="footer"></div>
</div>

Wie gehe ich die Sache am besten an?
Gruß GN911

 

[Maik]

Hi,

weißt du schon, wie du die runden Ecken erzeugen möchtest?

Mit oder ohne Grafiken? Mit oder ohne Javascript-Unterstützung?

Ich frag nur, weil dir hier eine Vielzahl unterschiedlicher Techniken und Lösungsansätze zur Verfügung stehen:

• 25 Rounded Corners Techniques with CSS
• CSS Rounded Corners 'Roundup'

mfg Maik

 

[GN911]

Hi Maik,

ich würde die Ecken schon per Grafiken realisieren. So wie bei ebay oder yahoo halt.
Was ist die beste Methode dafür?

Unter dem Link kannst du aktuellen Stand sehen: http://www.xlabs.de/corner/layout.html

Kannst du dir die Struktur mal anschauen und mir sagen, ob jetzt schon Bug fixes gemacht werden müssen, z.B. wegen IE 3 Pixel da die Container eine feste Größe haben.


Gruß GN911

 

[Maik]

Moin,

wenn du zur Erzeugung der runden Ecken das Markup nicht mit unzähligen DIVs (max. bis zu 8 Stück pro Box) aufblähen willst, solltest du dir diese technischen Varianten näher anschauen:

• http://www.schillmania.com/projects/dialog2/
• http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/ (mit JS-Unterstützung)

Bislang kann ich in der Seite keine Notwendigkeit für "IE6-Bugfixes" feststellen.

Aber was nicht ist, kann ja noch werden ;-)

mfg Maik

 

[GN911]

Hi Maik,

ich habe es wie folgt versucht, aber leider schiebt er die Schrift über den Container hinaus.
Den Rahmen zeigt er unten auch nicht an.

  #header, #footer { background: #eee; margin: 10px 0; padding: 6px; }
  #main { margin: 0; padding: 0; }
  .c664r { float: right; width: 664px; background: #eee; margin: 10px 0; padding: 0; }
  .c260l { float: left; width: 260px; background: transparent url(../../img/gfxborder260.gif) no-repeat left top; margin: 10px 0; padding: 0; }
  .c260l-inner { overflow-hidden; background: transparent url(../../img/gfxborder260.gif) no-repeat left bottom; }

<div class="page_margins">
 <div id="header">Header</div>
   <div id="main">
     <div class="c664r">Content</div>
     <div class="c260l"><div class="c260l-inner"></div>Navigation sdfsgdkgd,gdkgjdskgjksdjgkdsgkldglksdjglaksdjglajsdgljlgdlkfglsdgm</div>
     <div class="c260l">Navigation</div>
   <div class="clearfix"></div>
   </div>
 <div id="footer">Footer</div>
</div>

Gruß GN911

 

[Maik]

Ich weiß jetzt nicht, wer "er" ist, und ohne die Hintergrundbilder ist da auch nicht viel zu erkennen.

Ist das Ganze irgendwo online zugänglich?

mfg Maik

 

[GN911]

Ist das Ganze irgendwo online zugänglich?

Unter dem Link kannst du aktuellen Stand sehen: http://www.xlabs.de/corner/layout.html

 

[Maik]

Wundert es dich, bei solch einer überlangen Zeichenkette, gepaart mit einer absoluten Boxenbreite?

Ohne Leerzeichen hat der Browser keinen Anhaltspunkt, wo er in dem String einen Zeilenumbruch vornehmen soll.

mfg Maik

 

[GN911]

Hi Maik,

ja okay, habe jetzt mal ein paar Worte Lorem ipsum eingefügt. Sieht schonmal besser aus.
Was aber leider immer noch ist, ist dass er die Box die eigendlich unter der ersten stehen soll daneben steht und der untere Rand nicht angezeigt wird.


Gruß GN911

 

[Maik]

Naja, du wiederholst da den linken Spaltenblock c260l, der mit float:left formatiert ist, und somit an seiner rechten Seite vom nachfolgenden Block c260l umflossen wird. Diese Prozedur würde sich bei jeder weiteren Box fortsetzen.

Stattdessen gehören die einzelnen Navi-Boxen in diesem einen Spaltenblock untergebracht:

<div class="c260l">
    <div class="naviBox">Navigation</div>
    <div class="naviBox">Navigation</div>
</div>

mfg Maik