✔ 2 Spaltenlayout + runde Ecken

Hi Maik,

ich hoffe, dass ich es so jetzt richtig gemacht habe.
Nun habe ich aber das nächste Problem. Ich hätte gern innerhalb der Boxen einen Abstand nach oben/unten von 16px und nach links/rechts von 6px.

Code: 
  .c260-box { background: #eee; margin: 24px 0; padding: 0; }
  .c260-box-content { background: transparent url(../../img/gfxborder260.gif) no-repeat left bottom; margin: 0; padding: 0; }
  .c260-box-top-border { background: transparent url(../../img/gfxborder260.gif) no-repeat left top; margin: 0; padding: 0; }

http://www.xlabs.de/corner/layout.html

Gruß GN911
 
Zuletzt bearbeitet:
Moin,

richte für den Boxeninhalt eine weitere Box ein:
HTML: 
<div class="pad"> {Boxeninhalt} </div>
CSS: 
.pad { padding:16px 6px; }

mfg Maik
 
Hab ich so auch nicht empfohlen.

HTML: 
<div class="c260-box">
     <div class="c260-box-content">
        <div class="c260-box-top-border"></div>
        <div class="pad"> {Boxeninhalt} </div>
     </div>
</div>


mfg Maik
 
habe es jetzt so gemacht. Wenn ich mir es aber im FF v3.0.11 auf nen Mac anschaue fehlt der obere Rahmen.
Gruß GN911
 
Trifft nicht nur auf den Mac-Rechner und Firefox-Browser zu.

Darf man erfahren, für welche Methode / Technik du dich eigentlich entschieden hast?

Sollte den Bildformaten nach deine Wahl auf http://www.schillmania.com/projects/dialog2/ gefallen sein, stimmt dein "abgewandelter" HTML- und CSS-Code nicht.

Hab's hier mal für die linke Navi-Box nachgestellt, und in allen gängigen Browsern (unter WinXP Prof.) erfolgreich getestet:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Even More Rounded Corners (Single Image Approach) Using CSS - Simple Example</title>

<style type="text/css">
<!--
.dialog {
 position:relative;
 width:260px;
 z-index:1;
 margin-bottom:0.5em; /* spacing under dialog */
}

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(http://www.xlabs.de/corner/img/gfxborder260.gif) no-repeat top right;
 _background-image:url(http://www.xlabs.de/corner/img/gfxborder260.gif);
}

.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:16px 6px;
}

.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}

.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}

.dialog .b,
.dialog .b div {
 height:6px; /* height of bottom cap/shade */
 font-size:1px;
}

.dialog .b {
 background-position:bottom right;
}

.dialog .b div {
 position:relative;
 background-position:bottom left;
}
-->
</style>
</head>

<body>

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  {Navigation}
 </div>
 <div class="b">
      <div></div>
 </div>
</div>

</body>
</html>


mfg Maik
 
Moin Maik,

so sieht das richtig aus.
Kannst du mir noch sagen, welchen conditional comment ich nehmen muss, da folgende Ergebnisse des CSS-Validators erscheinen:

Die Eigenschaft _background-image existiert nicht : url(....)
Die Eigenschaft zoom existiert nicht : 1
Die Eigenschaft _overflow-y existiert nicht : hidden
Die Eigenschaft _height existiert nicht : 1600px

http://www.xlabs.de/corner.html

Gruß GNß11
 
Moin,

da die CSS-Hacks dem IE6 gewidmet sind, kommt folgender Conditional Comment zum Einsatz - ich beschränke mich hier auf die relevanten Selektoren, die die CSS-Hacks beinhalten:
Code: 
<style type="text/css">
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(http://www.xlabs.de/corner/img/gfxborder260.gif) no-repeat top right;
}

.dialog .content {
 position:relative;
 padding:16px 6px;
}

.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 height:100%;
 background-position:top left;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.dialog .content {
 zoom:1;
 overflow-y:hidden;
}

.dialog .t {
 height:1600px; /* arbitrary long height, IE 6 */
}
</style>
<![endif]-->


_background-image wird bei dir eh nicht benötigt, da du keine transparente PNGs verwendest, wie sie im Original genutzt werden.

Und zum Nachlesen: Alternative CSS-Dateien für den Internet Explorer (Conditional Comments)

mfg Maik
 
Hallo Maik,

also wenn ich diesen Hack verwende, benötige ich die Unterstriche nicht mehr (_height, _overflow)

Gruß GN911
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück