Rundungen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufruf
aufwand
austausch
background
bild
datei
display
ecken
funktion
genau beschrieben
kleinvieh
margin
overflow
right
rundung
shop
spart
suchanfrage
tabelle
vielen dank
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
So viel ich weiss, geht das nicht nur mit HTML - dh, dass du das mit Bildern machen musst.
MfG sebigisler
Evt. findest du bei Selfhtml etwas: http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=tabelle -
entstehen dann aber unter unterschiedlichen aufl?sungen nicht ggf fehler??
-
Ich habe da eine L?sung mit CSS:
Du schreibst eine CSS-Datei mit:
.rounded {
background:transparent;
width:100%;
}
.rounded .b1, .rounded .b2, .rounded .b3, .rounded .b4, .rounded .b1b, .rounded .b2b, .rounded .b3b, .rounded .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.rounded .b1, .rounded .b2, .rounded .b3, .rounded .b1b, .rounded .b2b, .rounded .b3b {
height:1px;
}
.rounded .b1 {
margin:0 5px;
background:#ffcc66;
}
.rounded .b2 {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
.rounded .b3 {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
.rounded .b4 {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
.rounded .b4b {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
.rounded .b3b {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
.rounded .b2b {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
.rounded .b1b {
margin:0 5px; background:#ffcc66;
}
.rounded .b2, .rounded .b2b {
margin:0 3px;
border-width:0 2px;
}
.rounded .b3, .rounded .b3b {
margin:0 2px;
}
.rounded .b4, .rounded .b4b {
height:2px; margin:0 1px;
}
.rounded .boxcontent {
display:block;
background: #ddffee;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
So, dann zwei Funktionen:
function rounded_in()
{
echo '<div class="rounded">';
echo '<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>';
echo '<div class="boxcontent">';
}
function rounded_out()
{
echo '</div>';
echo '<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>';
echo '</div>';
}
Dann musst Du fie Funktionen nur noch vor bzw nach der Tabelle aufrufen, d.h. :
<?php rounded_in() ?>
<table>
<tr>
<td>
.
.
.
</td>
</tr>
</table>
<?php rounded_out() ?>
So habe ich die Rundungen auf dem (selbstgeproggten) Shop auf meiner Seite gemacht.
Ich hoffe, das hat geholfen ;O) -
F?r Mozilla gibt es auch eine sch?n einfache L?sung. http://css4you.de/mozproperty.html Aber was ist denn daran so schlimm, Bilder zu verwenden? So ist man doch viel flexibler, da man nur ein Bild austauschen muss. (Bei Templates also viel praktischer, da man ja nicht den Code ?ndern muss...)
-
Im Code muss man nur Farbwerte ?ndern.
Das ist bestimmt schneller, als ein neues Bild f?r jede Ecke erstellen zu m?ssen.
Au?erdem spart diese Methode Speicherplatz und die Seite wird schneller geladen.
Ist zwar nicht viel, aber Kleinvieh macht auch Mist. Mit der Zeit l?ppert sich da schon was zusammen.
Au?erdem spart man sich den Aufwand, Tabellenfelder f?r die Randbilder zu erstellen, was den Tabellencode ?bersichtlicher macht.
Beitrag ge?ndert am 29.04.2006 07:43 von ku-shi -
mit php bin ich grad am lernen... reichte s wenn ich den code einfach kopier oder muss ich da noch grundlegend viel dran ?ndern?
au?erdem danke f?r die viele antworten :) -
Ich habe das noch mal einfacher gemacht. Schreibe das in rounded.css
.rounded {
background:transparent;
width:100%;
}
.rounded .b1, .rounded .b2, .rounded .b3, .rounded .b4 {
display:block;
overflow:hidden;
font-size:1px;
}
.rounded .b1 {
margin:0 5px;
background:#ffcc66;
height:1px;
}
.rounded .b2 {
background:#ffcc66;
border-left:2px solid #ffcc66;
border-right:2px solid #ffcc66;
margin:0 3px;
height:1px;
}
.rounded .b3 {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
margin:0 2px;
height:1px;
}
.rounded .b4 {
background:#ffcc66;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
height:2px;
margin:0 1px;
}
.rounded .boxcontent {
display:block;
background: #ddffee;
border-left:1px solid #ffcc66;
border-right:1px solid #ffcc66;
}
und das in functions.php:
function rounded_in()
{
echo '<div class="rounded">';
echo '<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>';
echo '<div class="boxcontent">';
}
function rounded_out()
{
echo '</div>';
echo '<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>';
echo '</div>';
}
Das reicht, wenn die Rundungen oben und unten genau gleich aussehen, d.h. gleiche Farben und Hintergr?nde haben sollen.
Jetzt musst Du nur noch die Farbwerte ?ndern. In meinem ersten Post hab ich das ja genau beschrieben. -
zumerstellen der Datei rounded.css reicht es wenn Du den Code in die Datei kopierst. In der Php-Datei must Du diese aber per id oder Class (hier geht es um class="") aufrufen.
z.B. <div class="rounded"> -
zumerstellen der Datei rounded.css reicht es wenn Du den Code in die Datei kopierst. In der Php-Datei must Du diese aber per id oder Class (hier geht es um class="") aufrufen.
z.B. <div class="rounded">
Nein! Man ruft die Rundungen per <?php rounded_in() ?> vor der Tabelle auf und schlie?t sie per <?php rounded_out() ?> direkt nach der Tabelle. Bsp.:
<?php rounded_in() ?>
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
<?php rounded_out() ?> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
