grafisches fenster aus 9 teilen mit CSS

[bigmek]

Ich möchte von den table layout auf CSS umsteigen nur leider bekomme ich es nicht überall hin.

Ich habe mir aus einer tabelle ein eigenes fenster gebastelt
der aufbau ist wie folgt

  
  <table width="100%" height="100%">  
    <tr height="20"> <!-- top -->  
      <td width="20">1</td> <!-- left -->  
      <td width="*">2</td> <!-- center -->  
      <td  width="20">3</td> <!-- right -->  
    </tr>  
    <tr height="*"> <!-- middle -->  
      <td width="20">1</td> <!-- left -->  
      <td width="*">2</td> <!-- center -->  
      <td  width="20">3</td> <!-- right -->  
    </tr>  
    <tr height="20"> <!-- bottom -->  
      <td width="20">1</td> <!-- left -->  
      <td width="*">2</td> <!-- center -->  
      <td  width="20">3</td> <!-- right -->  
    </tr>  
  </table>  

nur bekomme ich das nicht in css umgewandelt.
kann mir wer helfen?

[Steel]

Hi!

Ich möchte von den table layout auf CSS umsteigen nur leider bekomme ich es nicht überall hin.

Tabellen und CSS sind kein Widerspruch. Ich moechte auch gern von Ford auf Autogas umsteigen...

Ich habe mir aus einer tabelle ein eigenes fenster gebastelt
der aufbau ist wie folgt

<table width="100%" height="100%">
    <tr height="20"> <!-- top -->
      <td width="20">1</td> <!-- left -->
      <td width="">2</td> <!-- center -->
      <td  width="20">3</td> <!-- right -->
    </tr>
    <tr height=""> <!-- middle -->
      <td width="20">1</td> <!-- left -->
      <td width="">2</td> <!-- center -->
      <td  width="20">3</td> <!-- right -->
    </tr>
    <tr height="20"> <!-- bottom -->
      <td width="20">1</td> <!-- left -->
      <td width="">2</td> <!-- center -->
      <td  width="20">3</td> <!-- right -->
    </tr>
  </table>

>   
> nur bekomme ich das nicht in css umgewandelt.  
> kann mir wer helfen?  
  
Wobei genau? Was verstehst Du  unter "in CSS umwandeln"? CSS formatiert HTML. Du hast dort HTML. Moechtest Du also  
a) dein HTML mit CSS formatieren?  
b) dein Fenster mit vernuenftigem, mit CSS formatiertem HTML umsetzen?  
c) irgendwas ganz anderes?  
  
Ich vermute Option b trifft hier zu.  
  
Wo hast Du ein Problem bei deinem Vorhaben? Was verstehst Du z.B. unter "Fenster"?  
  
~~~html
<div>  
  <h3>Fenstertitel <a>X</a></h3>\  
  Fensterinhalt  
</div>

So sieht ein "Fenster" gewoehnlich bei mir aus. Da Du aber 9 Felder hast, bin ich mir nicht sicher, ob Dir das reicht.

Evtl. willst Du einfach eine (skalierbare) Box mit runden und anderen Ecken?

[bigmek]

So sieht ein "Fenster" gewoehnlich bei mir aus. Da Du aber 9 Felder hast, bin ich mir nicht sicher, ob Dir das reicht.

Evtl. willst Du einfach eine (skalierbare) Box mit runden und anderen Ecken?

»»

ja genau sowas meine ich.
nur in dem beispiel ist bischen merkwürdig gelöst
da eigentlich nur 4 grafiken verwendet werden.

ich möchte aber das mein fenster größenunabhängig wird, und nicht an die größe der grafik gebunden ist.

so soll es sein

o--o--o--o
|01|02|03|
o--o--o--o
|04|05|06|
o--o--o--o
|07|08|09|
o--o--o--o

und skaliert dann so

o--o-------------o--o
|01|     02      |03|
o--o-------------o--o
|  |             |  |
|  |             |  |
|04|     05      |06|
|  |             |  |
|  |             |  |
o--o-------------o--o
|07|     08      |09|
o--o-------------o--o

[suit]

ich möchte aber das mein fenster größenunabhängig wird, und nicht an die größe der grafik gebunden ist.

Dann brauchst du in Summe 9 Elemente und 2 bzw 3 Grafiken

<div>
  <div id="linksoben"></div>
  <div id="oben"></div>
  <div id="rechtsoben"></div>
  ...
</div>

Die Ecken bekommen Grafik #1
Die Kanten Grafik #2
Die Mitte Grafik #3 (wenns eine Hintergrundfarbe nicht tut)

Die Ecken sind jeweils absolut aus dem elternelement rauspositioniert.

[Bigmek]

2 bzw 3 grafiken?
Ich komm glaub ich nicht ganz mit.
Ich müsste doch 9 grafiken brauchen, oder nicht?.

Sorry css technisch hab ichs nicht so.
Kannst mir das an einem beispiel zeigen?

[Der Martin]

Hallo,

2 bzw 3 grafiken?
Ich müsste doch 9 grafiken brauchen, oder nicht?

warum 9?
Die Mitte soll doch frei bleiben für den eigentlichen Inhalt, oder nicht? Das wären schon mal nur noch 8 Felder deiner Skizze, die man bestücken muss.
Dann fasst man die restlichen teilweise zusammen:

* Ecke links oben enthält auch noch die linke und die obere Kante
 * Ecke rechts unten enthält auch noch die rechte und die untere Kante

Zusammen mit den Ecke links unten und rechts oben komme ich auf 4 Grafiken. Die positioniert man nun in die Ecken ihres Containerelements und nutzt aus, dass sie sich teilweise überlagern. Fertig ist die Laube.

Alternativ kann man auch 4 Container verschachteln und jedem davon eine der Grafiken als positioniertes Hintergrundbild zuordnen. Unschön, weil ich dann mindestens 3 unnötige Container im Markup habe, aber immerhin auch möglich.

So long,
 Martin

[suit]

* Ecke links oben enthält auch noch die linke und die obere Kante
* Ecke rechts unten enthält auch noch die rechte und die untere Kante

Ich würde die jewils die Ecken und Kanten zusammenfassen.

Eine grafik sieht etwa so aus

/\ /

Die andere so
 _
| |
 ¯

[Bigmek]

* Ecke links oben enthält auch noch die linke und die obere Kante
* Ecke rechts unten enthält auch noch die rechte und die untere Kante

Ich würde die jewils die Ecken und Kanten zusammenfassen.

Eine grafik sieht etwa so aus

/\ /

Die andere so
_
| |
¯

ecken und kanten können aber nicht eine grafik sein.
erklärung:

o--o--o--o
| 0| 1| 2|
o--o--o--o
| 3| 4| 5|
o--o--o--o
| 6| 7| 8|
o--o--o--o

die grafiken 0, 2, 6 und 8 haben eine fixe größe und sollen auch genau so angezeigt werden

die grafiken 1 und 7 haben eine fixe höhe die breite allerdings kann theoretisch unendlich sein (die grafik datei selbst hatt eine breite von einem pixel)

die grafiken 3 und 5 haben eine fixe breite die höhe allerdings kann theoretisch unendlich sein (die grafik datei selbst hatt eine höhe von einem pixel)

und grafik 4 ist einfach eine hintergund grafik.

[dieselross]

Wie wäre dieses?

css:

#Frame {  
	position:relative;  
	display:block;  
	width:100%;  
	min-width:740px;  
	min-height:400px;  
	background-color:#ffffff;  
	margin-left:auto;  
	margin-right:auto;  
	z-index:10;  
}  
#Header {  
	display:block;  
	width:100%;  
	height:95px;  
	background-image:url('../media/FrameTop.jpg');  
	background-repeat:repeat-x;  
	z-index:10;  
}  
#HeaderLeft {  
	display:inline;  
	display:inline-block;  
	width:40px;  
	height:95px;  
	background-image:url('../media/FrameUL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
	z-index:10;  
}  
#HeaderRight {  
	display:inline;  
	display:inline-block;  
	width:40px;  
	height:95px;  
	background-image:url('../media/FrameUR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
	z-index:10;  
}  
#MainBlock {  
	display:block;  
	width:100%;  
	height:100%;  
	min-width:400px;  
	min-height:410px;  
	padding-right:60px;  
	background-color:transparent;  
	z-index:20;  
}  
#MainLeft {  
	display:inline-block;  
	width:40px;  
	height:100%;  
	min-height:410px;  
	background-image:url('../media/FrameL.jpg');  
	background-repeat:repeat-y;  
	position:relative;  
	float:left;  
	z-index:40;  
}  
#MainRight {  
	display:inline-block;  
	width:40px;  
	height:100%;  
	min-height:410px;  
	background-image:url('../media/FrameR.jpg');  
	background-repeat:repeat-y;  
	position:relative;  
	float:right;  
	z-index:40;  
}#Footer {  
	display:block;  
	width:100%;  
	height:70px;  
	background-image:url('../media/FrameBottom.jpg');  
	background-repeat:repeat-x;  
	z-index:20;  
}  
#FooterLeft {  
	display:inline;  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameLL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
	z-index:20;  
}  
#FooterRight {  
	display:inline;  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameLR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
	z-index:20;  
}

und im html:

	<body>  
		<div id="Frame">  
			<div id="Header">  
				<div id="HeaderLeft">  
				</div>  
				<div id="Logo">  
				</div>  
				<div id="HeaderRight">  
			<div id="MainBlock">  
				<div id="MainLeft">					  
				</div>  
				<div id="MainRight">  
				</div>  
			</div>  
			<div id="Footer">  
				<div id="FooterLeft">  
				</div>  
				<div id="FooterRight">  
				</div>  
			</div>  
		</div>		  
	</body>  

Gruß
dieselross

[Bigmek]

dein Beispiel Funktioniert irgendwie nicht so recht bei mir.

beispiel mit obrigen div layout

beispiel mit box layout wie es sein soll

in den zwei beispielen is die benennung der grafiken leider nicht so wie oben von mir beschrieben sondern:

o--o--o--o
| 0| 1| 2|
o--o--o--o
| 7| 8| 3|
o--o--o--o
| 6| 5| 4|
o--o--o--o

[suit]

Was spricht gegen den ursprünglich von mir vorgeschlagenen Code?

Mit den Hintergrundgrafiken (2 bzw 3 sind nötig) darfst du dich selbst beschäftigen:

  
<!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>  
		<title>Corner</title>  
		<style type="text/css">  
			body {  
				padding: 50px;  
			}  
			.box {  
				position: relative;  
				width: 500px;  
				height: 300px;  
				background: #808080;  
			}  
			  
			.box span {  
				position: absolute;  
				width: 10px;  
				height: 10px;  
			}  
			  
			.box .c1 { top:    -10px; left:  -10px; background: #FF0000; }  
			.box .c3 { top:    -10px; right: -10px; background: #00FF00; }  
			.box .c5 { bottom: -10px; right: -10px; background: #0000FF; }  
			.box .c7 { bottom: -10px; left:  -10px; background: #000000; }  
  
			.box .c2 { top:    -10px; left:    0px; width:  100%; background: #00FFFF; }  
			.box .c4 { top:      0px; right: -10px; height: 100%; background: #FF00FF; }  
			.box .c6 { bottom: -10px; left:    0px; width:  100%; background: #FFFF00; }  
			.box .c8 { top:      0px; left:  -10px; height: 100%; background: #FF8000; }  
			  
		</style>  
	</head>  
	<body>  
		<div class="box">  
			<span class="c1"></span>  
			<span class="c2"></span>  
			<span class="c3"></span>  
			<span class="c4"></span>  
			<span class="c5"></span>  
			<span class="c6"></span>  
			<span class="c7"></span>  
			<span class="c8"></span>  
		</div>  
	</body>  
</html>

[Bigmek]

das ich die größe manuell an die grafiken anpassen muss.

sorry ich weis ich bin ein bischen pingelig.
so, einen etwas verstpäteten dank an alle die versuchen mir zu helfen :)

[suit]

das ich die größe manuell an die grafiken anpassen muss.

Das versteh ich nicht - was musst du manuell anpassen.

[Bigmek]

das ich die größe manuell an die grafiken anpassen muss.

Das versteh ich nicht - was musst du manuell anpassen.

die dicke|breite

du machst ja da

  
.box span {  
                                position: absolute;  
                                width: 10px;  
                                height: 10px;  
                        }  
.box .c1 { top:    -10px; left:  -10px; background: #FF0000; }  
.box .c3 { top:    -10px; right: -10px; background: #00FF00; }  
.box .c5 { bottom: -10px; right: -10px; background: #0000FF; }  
.box .c7 { bottom: -10px; left:  -10px; background: #000000; }  
  
.box .c2 { top:    -10px; left:    0px; width:  100%; background: #00FFFF; }  
.box .c4 { top:      0px; right: -10px; height: 100%; background: #FF00FF; }  
.box .c6 { bottom: -10px; left:    0px; width:  100%; background: #FFFF00; }  
.box .c8 { top:      0px; left:  -10px; height: 100%; background: #FF8000; }  
  

und wenn ich jetzt eine grafik habe die nicht 10 pixel breit ist sondern 25 dann muss ich die ganzen styles nochmal machen und für 25px anpassen.
außerdem benützt du einige negativ coordinaten, wehalb ich dort wo ich die box verwende dann auch auzfpassen muss das ich den rand richtig beachte.

[suit]

display: block;
sowie
overflow: hidden;

fehlen auf die span-Elemente btw :) sonst mags der ie6 nicht

und wenn ich jetzt eine grafik habe die nicht 10 pixel breit ist sondern 25 dann muss ich die ganzen styles nochmal machen und für 25px anpassen.

Warum lässt du das Ding nicht durch ein Script generieren?

Bei jeglicher Runde-Ecken-Technik mit CSS hast du aber dasselbe Problem - ob du musst irgendwas im CSS an die Rahmedicke anpassen - sei es nun ein padding, wenn du mit dem Klassiker (2 bzw 4 Hintergrundbilder arbeitest) oder eben diese Lösung.

Du kannst aber gerne bei deiner extrem unübersichtlichen Tabellenwurst bleiben :)

außerdem benützt du einige negativ coordinaten, wehalb ich dort wo ich die box verwende dann auch auzfpassen muss das ich den rand richtig beachte.

.box {  
  margin: 10px;  
}

problem gelöst - damit fällt das Aufpassen weg.

[Bigmek]

Warum lässt du das Ding nicht durch ein Script generieren?

genau das hab ich vor, schöner wäre es halt gewesen wenn ich einen style für alle boxen hätte machen können.

Du kannst aber gerne bei deiner extrem unübersichtlichen Tabellenwurst bleiben :)

darum will ich ja umsteigen, das tabellenlayout ist zwar leicht zu verstehen nur wenn man mal mehrere tabellen hatt wirds schnell unübersichtlich.

.box {

margin: 10px;
}

>   
> problem gelöst - damit fällt das Aufpassen weg.  
  
ok das hatte ich nicht bedacht.  
  
deine lösung ist zu 98% perfekt, und wird verwendet :)  
wenn du mir sagen kannst wie ich es schaffe das die box nicht wie üblich über die gesamte breite geht.  
sondern lediglich soviel platz einnimmt wie sein inhalt, dann wäre es 99% perfekt.  
  
meine idee ist ein bei .box ein float:left; anhängen allerdings ist das nicht wirklich ne gute lösung denke ich  
  

[suit]

meine idee ist ein bei .box ein float:left; anhängen allerdings ist das nicht wirklich ne gute lösung denke ich

inline-block (wurde ja bereits) oder float würde ich verwenden - oder natürlich per position absolute irgendwohingeklotzt (z.B. für lightboxen) dann sind sie auch ausserhalb des Textflusses.

[Bigmek]

meine idee ist ein bei .box ein float:left; anhängen allerdings ist das nicht wirklich ne gute lösung denke ich

inline-block (wurde ja bereits) oder float würde ich verwenden - oder natürlich per position absolute irgendwohingeklotzt (z.B. für lightboxen) dann sind sie auch ausserhalb des Textflusses.

ok danke, jetzt muss ich nurnoch mein php script so umbauen das es statt tabellen css boxen erstellt, aber das bekomme ich jetzt auch alleine hin.

ps: funktioniert das eigentlich mit allen browsern?
oder muss ich da noch was beachten.

[suit]

ps: funktioniert das eigentlich mit allen browsern?
oder muss ich da noch was beachten.

Probiers aus - ich hab' jetzt nur oberflächlich in Opera 9.6, Internet Explorer 6 und Firefox 3.5 ausprobiert - sollte "funzen" (mit der display: block und overflow: hidden Ergänzung).

[dieselross]

Versuch's mal mit korrekt aufgebautem html und einer ausgelagerten css-Datei. In etwa so:

  
<!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" xml:lang="en" lang="en">  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
	<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">  
	<title>untitled</title>  
	</head>  
<body>  
	<div id="Frame">  
		<div id="Header">  
			<div id="HeaderLeft">  
			</div>  
			<!--<div id="Logo">  
			</div> -->  
			<div id="HeaderRight">  
			</div>  
		</div>  
		<div id="MainBlock">  
			<div id="MainLeft">  
			</div>  
			<div id="MainRight">  
			</div>  
		</div>  
		<div id="Footer">  
			<div id="FooterLeft">  
			</div>  
			<div id="FooterRight">  
			</div>  
		</div>  
	</div>  
</body>  
</html>  

und so:

  
#Frame {  
	position:relative;  
	display:block;  
	width:100%;  
	min-width:740px;  
	min-height:400px;  
	background-color:#ffffff;  
	margin-left:auto;  
	margin-right:auto;  
	z-index:10;  
}  
#Header {  
	display:block;  
	width:100%;  
	height:20px;  
	background-image:url('../media/1.gif');  
	background-repeat:repeat-x;  
	z-index:10;  
}  
#HeaderLeft {  
	display:inline;  
	display:inline-block;  
	width:20px;  
	height:20px;  
	background-image:url('../media/0.png');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
	z-index:10;  
}  
#HeaderRight {  
	display:inline;  
	display:inline-block;  
	width:20px;  
	height:20px;  
	background-image:url('../media/2.png');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
	z-index:10;  
}  
#MainBlock {  
	display:block;  
	width:100%;  
	height:100%;  
	min-width:400px;  
	min-height:410px;  
	padding-right:60px;  
	background-color:transparent;  
	z-index:20;  
}  
#MainLeft {  
	display:inline-block;  
	width:20px;  
	height:100%;  
	min-height:410px;  
	background-image:url('../media/7.gif');  
	background-repeat:repeat-y;  
	position:relative;  
	float:left;  
	z-index:40;  
}  
#MainRight {  
	display:inline-block;  
	width:20px;  
	height:100%;  
	min-height:410px;  
	background-image:url('../media/3.gif');  
	background-repeat:repeat-y;  
	position:relative;  
	float:right;  
	z-index:40;  
}  
#Footer {  
	display:block;  
	width:100%;  
	height:20px;  
	background-image:url('../media/5.gif');  
	background-repeat:repeat-x;  
	z-index:20;  
}  
#FooterLeft {  
	display:inline;  
	display:inline-block;  
	width:20px;  
	height:20px;  
	background-image:url('../media/6.png');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
	z-index:20;  
}  
#FooterRight {  
	display:inline;  
	display:inline-block;  
	width:20px;  
	height:20px;  
	background-image:url('../media/4.png');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
	z-index:20;  
}  

Des weiteren mußt du die Größe der einzelnen div's im css natürlich an das Format deiner Grafiken anpassen (hab' ich spaßeshalber schon 'mal für dich gemacht) und auch eine korrekte Deklaration des Doctype im Header kann nicht wirklich schaden.

Mit einer Änderung der Größenangaben für #Frame kannst du jetzt unterschiedlich große Kästchen erzeugen.

Guck' dir das Ganze in Ruhe an und frag' mich gerne, wenn du etwas nicht verstanden hast. Ich lerne auch ständig dazu hier und bin froh, auch 'mal 'was weitergeben zu können.

Gruß
dieselross

[suit]

Versuch's mal mit korrekt aufgebautem html und einer ausgelagerten css-Datei. In etwa so:

Der Code ist zu Präsentationsbezogen und lässt sich nur umständlich generieren, wenn man die Rahmen z.B. erst später mittels JavaScript hinzufügt. Ich würde da tendentiell bei meinem Vorschlag bleiben.

[Steel]

Hi!

ecken und kanten können aber nicht eine grafik sein.

Doch.

erklärung:

o--o--o--o
| 0| 1| 2|
o--o--o--o
| 3| 4| 5|
o--o--o--o
| 6| 7| 8|
o--o--o--o

die grafiken 0, 2, 6 und 8 haben eine fixe größe und sollen auch genau so angezeigt werden

die grafiken 1 und 7 haben eine fixe höhe die breite allerdings kann theoretisch unendlich sein (die grafik datei selbst hatt eine breite von einem pixel)

die grafiken 3 und 5 haben eine fixe breite die höhe allerdings kann theoretisch unendlich sein (die grafik datei selbst hatt eine höhe von einem pixel)

und grafik 4 ist einfach eine hintergund grafik.

Suit hat nicht ganz recht. Aber fast.

Fuer das, was Du hier beschreibst, brauchst Du maximal 4 Grafiken. Ich habe Deine Beispiele gesehen also verwende ich Pfeile um die Raender darzustellen.

Als erstes moechtest Du einen Container wo alles Drin ist. In diesem befindet sich der Container mit deinem Inhalt.

Eine Grafik fuer die Ecken:
/\ /

Eine Grafik fuer die horizontalen Raender:

<<<<<

Eine Grafik fuer die vertikalen Raender:
/\/
/\/
/\/

Eine Grafik fuer den Hintergrund:

Ein Container das alles kapselt:
<div class='fenster'>
</div>

Ein Container fuer den oberen Rand samt Ecken:
<div class='randoben'>
  <div class='eckelo'></div>
  <div class='eckero'></div>
</div>

Ein Container fuer den unteren Rand samt Ecken:
<div class='randunten'>
  <div class='eckelu'></div>
  <div class='eckeru'></div>
</div>

Ein Container fuer den linken Rand:
<div class='randlinks'>
<div>

Einen fuer rechts:
<div class='randrechts'>
<div>

Nun noch dein Inhalt:
<div class='inhalt'>
</div>

Das alles sieht dann so aus:
<div class='fenster'>
  <div class='randoben'>
    <div class='eckelo'></div>
    <div class='eckero'></div>
  </div>
  <div class='randlinks'>
    <div class='randrechts'>
      <div class='inhalt'>
         <h1>Tolle Fenster!</h1>
         <p>
          Toller Inhalt!
         </p>
      </div>
    <div>
  <div>
  <div class='randunten'>
    <div class='eckelu'></div>
    <div class='eckeru'></div>
  </div>
</div>

Die horizontalen Raender bekommen eine Hohe in Randbreite und als Hintergrund das Randbild - unten um Randbreite verschoben.
Die Ecken werden absolut in den Ecken positioniert und bekommen Hoehe und Breite einer Ecke mit den Ecken als Hintergrund - je nach Ecke auch entsprechend verschoben.
Linker und rechter Rand bekommen ein Padding in Randbreite sowie die vertikalen Raender als Hintergrund - wieder entsprechend verschoben.
Der Inhalt bekommt seinen Hintergrund.

Sollte fertig sein. Habs jetzt nicht probiert.

[Bigmek]

ich verstehe leider nicht ganz was du meinst.
kannst mir ein beispiel zeigen mit den css styles?

ich glaube ohne raff ich das nicht.

[suit]

ich verstehe leider nicht ganz was du meinst.
kannst mir ein beispiel zeigen mit den css styles?

Der von mir gepostete Code entspricht 1:1 diesem, nur die hintergrundgrafiken fehlen

[suit]

Suit hat nicht ganz recht. Aber fast.

Jep, ich hatte einen Denkfehler :)

Fuer das, was Du hier beschreibst, brauchst Du maximal 4 Grafiken.

Trotzdem reichen drei :)

Grafik 1:
Ränder links und rechts + alle Ecken

Grafik 2: Ränder oben und unten

Grafik 3 (optional):
Hintergrund der Box

[Steel]

Suit hat nicht ganz recht. Aber fast.

Jep, ich hatte einen Denkfehler :)

Fuer das, was Du hier beschreibst, brauchst Du maximal 4 Grafiken.

Trotzdem reichen drei :)

Stimmt. Man kann die Ecken zu den horizontalen oder vertikalen grafiken hinzufuegen. Nur bei einer Wiederholung darf halt nichts in Wiederholrichtung dazwischen kommen.

[Der Martin]

Hallo,

* Ecke links oben enthält auch noch die linke und die obere Kante
* Ecke rechts unten enthält auch noch die rechte und die untere Kante

Ich würde die jewils die Ecken und Kanten zusammenfassen.
Eine grafik sieht etwa so aus

/\ /

Die andere so
_
| |
¯

dann verzerrt's dir aber beim Skalieren des Containers die Rahmen, denn du musst bei deiner Version die Grafiken mitskalieren (damit fällt auch die Lösungsvariante mit den Hintergrundbildern weg). Bei meinem Ansatz dagegen skalieren ich keine Grafik, sondern verschiebe sie nur gegeneinander wie zwei Winkel, die man übereinanderschiebt:

║
   ╔═════════════════════
   ║              ║
   ║              ║
   ║              ║
   ║              ║
  ═║══════════════╝
   ║

Die überstehenden Schenkel lässt man dann mit overflow:hidden verschwinden (bei der Variante mit Hintergrundbildern ergibt sich das von allein), und die einzelnen Eck-Grafiken klatscht man auf die Schnittpunkte.

So long,
 Martin

[Steel]

Heyho!

║
   ╔═════════════════════
   ║              ║
   ║              ║
   ║              ║
   ║              ║
  ═║══════════════╝
   ║

Schick! Ich hab Lust mir das auf ne 100x60 Leinwand drucken zu lassen und an die Wand zu haengen. :)

[Der Martin]

Hallo,

║
   ╔═════════════════════
   ║              ║
   ║              ║
   ║              ║
   ║              ║
  ═║══════════════╝
   ║

Schick! Ich hab Lust mir das auf ne 100x60 Leinwand drucken zu lassen und an die Wand zu haengen. :)

aber bitte, meinen Segen haste! ;-)

Ciao,
 Martin

[suit]

dann verzerrt's dir aber beim Skalieren des Containers die Rahmen, denn du musst bei deiner Version die Grafiken mitskalieren

Jein muss man nicht - eine weitere Grafik benötigt man dann natürlich, wenn man keine Maximalgröße haben möchte (also 3 oder 4 Grafiken in Summe).

Bzw man kann sie natürlich auch mit den Ecken zusammenfassen, dann hat man wieder 2 bis 3 Grafiken). Also jeweils 2 Ecken + 2 zueinander parallele Kanten)

Die Ecken sind fixe Ausschnitte der "Ecken-Grafik", die Kanten sind mit repeat-x bzw y ausgestattet und stellen der jeweiligen Randgrafik.

sondern verschiebe sie nur gegeneinander wie zwei Winkel, die man übereinanderschiebt:

Damit ist man die größe der Grafik beschränkt und alphatransparente Ecken gibts auch nicht.

[Steel]

Hi!

nur in dem beispiel ist bischen merkwürdig gelöst
da eigentlich nur 4 grafiken verwendet werden.

Das ist nicht merkwuerdig sondern der Standard. Du brauchst fuer eine normale Box numal genau 4 Ecken. Damit sie unterschiedlich gross sein kann 2 kleine und 2 grosse Ecken.

ich möchte aber das mein fenster größenunabhängig wird, und nicht an die größe der grafik gebunden ist.

so soll es sein

o--o--o--o
|01|02|03|
o--o--o--o
|04|05|06|
o--o--o--o
|07|08|09|
o--o--o--o

und skaliert dann so

o--o-------------o--o
|01|     02      |03|
o--o-------------o--o
|  |             |  |
|  |             |  |
|04|     05      |06|
|  |             |  |
|  |             |  |
o--o-------------o--o
|07|     08      |09|
o--o-------------o--o

Genau das macht das Beispiel doch. Das einzige Manko ist, dass der Rand nicht mehr korrekt dargestellt wird, wenn die Box groesser als die Eckengrafik wird. Ich habe zuhause einen 24" Monitor und finde, das Beispiel hat ausreichend grosse Grafiken.

Falls Du das eine unendlich grosse Box erstellen moechtest, benoetigst Du natuerlich mehr Grafiken und mehr Divs. Divsuppe ahoi! Die Raender kannst Du dann ueber sich wiederholende Hintergrundgrafiken realisieren und die Eckgrafiken absolut platzieren. Oder du bleibst bei Deiner Tabelle.

[Bigmek]

ahhhhh ich werde gleich verrückt.
ich bekomme es nicht hin.

css ist und bleibt für mich ein mysterium

ich möchte eine seite mit folgendem layout erstellen

in jedem bereich (topBanner, topBar, sideBar, ...)
soll eine box angezeigt werden.

ausehen soll das ganze so

browser
o-----o------------------------------o-----o
|     |          TopBanner           |     |
|     |                              |     |
|     o------------------------------o     |
|     |            topBar            |     |
|     o--------o---------------------o     |
|     |sidebar |  mainbar            |     |
|     |        |                     |     |
|     |        |                     |     |
|     |        |                     |     |
|     |        |                     |     |
|     |        |                     |     |
|     |        |                     |     |
|     o--------o                     |     |
|     |                              |     |
|     |                              |     |
|     |                              |     |
|     |                              |     |
|     |                              |     |
|     o--------o---------------------o     |
|     |          bottomBar           |     |
|     o------------------------------o     |
|     |          bottomBanner        |     |
|     |                              |     |
o-----o------------------------------o-----o

und in wirklichkeit schauts so aus
website

irgendwie zerstören die boxen mein layout.
ich kommm nicht drauf, im schlimmsten fall muss ich wieder zu meinem tabellen layout wechseln wenn ichs so nicht hinbekomme

[Gunnar Bittersmann]

@@Bigmek:

nuqneH

und in wirklichkeit schauts so aus
website

Würde ich mir gerne ansehen. Leider verhindern die flimmernden Rahmen um die Boxen eine Betrachtung deiner Seite für länger als einen Sekundenbruchteil.

Qapla'