Suche

[appelknolli]

gesundes neues jahr zusammen,

ich möchte gerne das die blöcke auf der linken seite jeweils unten und oben abgerundete ecken, ohne grafik, und der content bereich, also die centerblöcke, auf der rechten seite runde ecken haben. das css soll jetzt nicht das problem sein aber wo baue ich es in diesem theme ein? wenn eventuell mal die rechtenblöcke zugeschaltet werden, würde ich gerne anstatt im content bereich die runden ecken an der rechten seite der rechten blöcke haben. kann ich das mit einer art haupt-DIV für den bereich unterhalb des headers realisieren? wäre eine javascript variante die bessere lösung?

also so:

Code Auswählen Erweitern

<div id="container">
<b class="oben">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--Hier das originale zeugs rein -->
<b class="unten">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

und wenn ja, was kommt dann alles in diesen cointainer? 

vg appel

[reddragon]

Also der Code für die Block ist folgender (index.html):

Code Auswählen Erweitern

            <!-- START block_left -->
            <div class="block __BLOCK_ID__">
              <div class="block-caption">

                {BLOCK_TITLE}
              </div>
              <div class="block-content">
                {BLOCK_CONTENT}
              </div>
            </div><!-- END block_left -->


Alles, was innerhalb des html-Kommentars ist, wird für die einzelnen Blöcke wiederholt.

Hier gibts eine Anleitung, für runde Ecken, ohne Grafik

[appelknolli]

hoi, danke für deine hilfe. ich werde es mal diese woche, wenn etwas zeit ist, ausprobieren 

vg appel

[AlternativeComputing]

gesundes neues jahr zusammen,

ich möchte gerne das die blöcke auf der linken seite jeweils unten und oben abgerundete ecken, ohne grafik, und der content bereich, also die centerblöcke, auf der rechten seite runde ecken haben. das css soll jetzt nicht das problem sein aber wo baue ich es in diesem theme ein? wenn eventuell mal die rechtenblöcke zugeschaltet werden, würde ich gerne anstatt im content bereich die runden ecken an der rechten seite der rechten blöcke haben. kann ich das mit einer art haupt-DIV für den bereich unterhalb des headers realisieren? wäre eine javascript variante die bessere lösung?

Gar nicht. Das hat nichts mit dem template zu tun. Du must nur in der Layout.css die Änderungen machen. Beispiel:

Runde Ecken Oben:

Code Auswählen Erweitern


#leftcolumn .block-title {
        background-color: #DeinFrabwert;
        background-position: center;
        background-repeat: repeat-x;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        -khtml-border-radius-topleft: 5px;
        -khtml-border-radius-topright: 5px;
        -webkit-border-radius-topleft: 5px;
        -webkit-border-radius-topright: 5px;
        border-radius-topleft: 5px;
        border-radius-topright: 5px;
        -opera-border-radius-topleft: 5px;
        -opera-border-radius-topright: 5px;
        -o-border-radius-topleft: 5px;
        -o-border-radius-topright: 5px;
        display: block;
        color:#000000;
        font-size: 12px;
        font-weight: bold;
        line-height: 22px;
        padding-left: 15px;
}


Runde Ecken Unten:

Code Auswählen Erweitern


#leftcolumn .block-title {
        background-color: #DeinFrabwert;
        background-position: center;
        background-repeat: repeat-x;
        -moz-border-radius-bottomleft: 5px;
        -moz-border-radius-bottomright: 5px;
        -khtml-border-radius-bottomleft: 5px;
        -khtml-border-radius-bottomright: 5px;
        -webkit-border-radius-bottomleft: 5px;
        -webkit-border-radius-bottomright: 5px;
        border-radius-bottomleft: 5px;
        border-radius-bottomright: 5px;
        -opera-border-radius-bottomleft: 5px;
        -opera-border-radius-bottomright: 5px;
        -o-border-radius-bottomleft: 5px;
        -o-border-radius-bottomright: 5px;
        display: block;
        color:#000000;
        font-size: 12px;
        font-weight: bold;
        line-height: 22px;
        padding-left: 15px;
}


Unten und Oben:

Code Auswählen Erweitern


#leftcolumn .block-title {
        background-color: #DeinFrabwert;
        background-position: center;
        background-repeat: repeat-x;
        -moz-border-radius-left: 5px;
        -moz-border-radius-right: 5px;
        -khtml-border-radius-left: 5px;
        -khtml-border-radius-right: 5px;
        -webkit-border-radius-left: 5px;
        -webkit-border-radius-right: 5px;
        border-radius-left: 5px;
        border-radius-right: 5px;
        -opera-border-radius-left: 5px;
        -opera-border-radius-right: 5px;
        -o-border-radius-left: 5px;
        -o-border-radius-right: 5px;
        display: block;
        color:#000000;
        font-size: 12px;
        font-weight: bold;
        line-height: 22px;
        padding-left: 15px;
}


Die 5px must Du mit den Wert Deiner Wahl eintragen. Je höher desto Runder und sichtbarer die Ecken.
Dieser Code beinhaltet schon die gängigsten Browser. Nur mein Opera zickt noch.

[appelknolli]

@AlternativeComputing, also dein vorschlag funktioniert bei mir überhaupt nicht...0 änderung.

vg appel

[AlternativeComputing]

Hmm, ich schau mir das Template nachher mal genauer an.

[AlternativeComputing]

Probiere das mal in der Layout.css:

Runde Ecken Oben:

Code Auswählen Erweitern


#main .block-caption,
#rightbar .block-caption,
#sidebar .block-caption {
   margin: 10px 0;
   display: block;
   font-weight: bold;
   font-family: "Trebuchet MS", Arial, Sans-serif;
   font-style: normal;
   text-align: left;
   text-decoration: none;
   line-height: normal,
   background-color: #DeinFrabwert;
   background-position: center;
   background-repeat: repeat-x;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   -khtml-border-radius-topleft: 5px;
   -khtml-border-radius-topright: 5px;
   -webkit-border-radius-topleft: 5px;
   -webkit-border-radius-topright: 5px;
   border-radius-topleft: 5px;
   border-radius-topright: 5px;
   -opera-border-radius-topleft: 5px;
   -opera-border-radius-topright: 5px;
   -o-border-radius-topleft: 5px;
   -o-border-radius-topright: 5px;
   font-size: 12px;
   padding-left: 15px;
}


Runde Ecken Unten:

Code Auswählen Erweitern


#main .block-caption,
#rightbar .block-caption,
#sidebar .block-caption {
   margin: 10px 0;
   display: block;
   font-weight: bold;
   font-family: "Trebuchet MS", Arial, Sans-serif;
   font-style: normal;
   text-align: left;
   text-decoration: none;
   line-height: normal,
   background-color: #DeinFrabwert;
   background-position: center;
   background-repeat: repeat-x;
   -moz-border-radius-bottomleft: 5px;
   -moz-border-radius-bottomright: 5px;
   -khtml-border-radius-bottomleft: 5px;
   -khtml-border-radius-bottomright: 5px;
   -webkit-border-radius-bottomleft: 5px;
   -webkit-border-radius-bottomright: 5px;
   border-radius-bottomleft: 5px;
   border-radius-bottomright: 5px;
   -opera-border-radius-bottomleft: 5px;
   -opera-border-radius-bottomright: 5px;
   -o-border-radius-bottomleft: 5px;
   -o-border-radius-bottomright: 5px;
   font-size: 12px;
   padding-left: 15px;
}


Unten und Oben:

Code Auswählen Erweitern


#main .block-caption,
#rightbar .block-caption,
#sidebar .block-caption {
   margin: 10px 0;
   display: block;
   font-weight: bold;
   font-family: "Trebuchet MS", Arial, Sans-serif;
   font-style: normal;
   text-align: left;
   text-decoration: none;
   line-height: normal,
   background-color: #DeinFrabwert;
   background-position: center;
   background-repeat: repeat-x;
   -moz-border-radius-left: 5px;
   -moz-border-radius-right: 5px;
   -khtml-border-radius-left: 5px;
   -khtml-border-radius-right: 5px;
   -webkit-border-radius-left: 5px;
   -webkit-border-radius-right: 5px;
   border-radius-left: 5px;
   border-radius-right: 5px;
   -opera-border-radius-left: 5px;
   -opera-border-radius-right: 5px;
   -o-border-radius-left: 5px;
   -o-border-radius-right: 5px;
   font-size: 12px;
   padding-left: 15px;
}



Es kann aber auch sein, das Du den Code aus meinen ersten Beispiel ab "background-color: #DeinFrabwert;"

eventuell auch hier einfügen must:

Code Auswählen Erweitern

#main .block-caption {
   color: #6297bc;
   background-color: transparent;
   font-size: 1.6em;
}

und hier

Code Auswählen Erweitern

#rightbar .block-caption {
   color: #6297bc;
   background-color: transparent;
   font-size: 1.5em;
}

[appelknolli]

aaalso, Safari kann damit gar nix anfangen, was mich etwas erstaunt, aber der FF Firefox 3.6rc1 kann das CSS3 darstellen. mit den anderen habe ich es nicht getestet. die Layout.css muss dahingehend abgeändert werden, zumindest bei mir 

Code Auswählen Erweitern


#wrap #main #main-content
{display: block; text-align: left; text-decoration: none;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
border-radius-topleft: 10px;
border-radius-topright: 10px;
-opera-border-radius-topleft: 10px;
-opera-border-radius-topright: 10px;
-o-border-radius-topleft: 10px;
-o-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -khtml-border-radius-bottomleft: 10px;
  -khtml-border-radius-bottomright: 10px;
  -webkit-border-radius-bottomleft: 10px;
  -webkit-border-radius-bottomright: 10px;
  border-radius-bottomleft: 10px;
  border-radius-bottomright: 10px;
  -opera-border-radius-bottomleft: 10px;
  -opera-border-radius-bottomright: 10px;
  -o-border-radius-bottomleft: 10px;
  -o-border-radius-bottomright: 10px;
padding-left: 5px;
margin: 30px 0 25px 5px;
font-style: normal;
line-height: normal,
background-color:transparent;
font-weight: bold;
font-size: 1.1em;
padding-right: 5px;
background: white repeat-x center;
}

und

Code Auswählen Erweitern

#main .block-caption,
#rightbar .block-caption,
#sidebar .block-caption

{display: block;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Sans-serif;
font-style: normal;
text-align: left;
text-decoration: none;
line-height: normal,
background-color: transparent;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
border-radius-topleft: 10px;
border-radius-topright: 10px;
-opera-border-radius-topleft: 10px;
-opera-border-radius-topright: 10px;
-o-border-radius-topleft: 10px;
-o-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -khtml-border-radius-bottomleft: 10px;
  -khtml-border-radius-bottomright: 10px;
  -webkit-border-radius-bottomleft: 10px;
  -webkit-border-radius-bottomright: 10px;
  border-radius-bottomleft: 10px;
  border-radius-bottomright: 10px;
  -opera-border-radius-bottomleft: 10px;
  -opera-border-radius-bottomright: 10px;
  -o-border-radius-bottomleft: 10px;
  -o-border-radius-bottomright: 10px;
font-size: 11px;
padding-left: 15px;
background: transparent repeat-x center;
}


für weitere ideen bin ich offen,

danke euch

[appelknolli]

so, habe mich nochmals ran gesetz und bin zu diesem ergebnis gekommen

runde ecken mit CSS3 ohne grafik und ganz einfach dafür noch nicht vollständig unterstützt aber zukunftsträchtig.

Code Auswählen Erweitern


border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;


jetzt klappt es auch mit dem Safari & FF aber immer noch nicht in Opera. Im IE...keine ahnung 

[AlternativeComputing]

Bei mir zickt Opera auch, es soll laut Opera funktionieren. Tut es aber nicht. Keine Ahnung warum

[appelknolli]

IE 8.0.xxx...nö, hatte aber von diesem sch...teil nix anderes erwartet. möchte mal wissen wieso das teil so erfolgreich werden konnte. das ding macht einen immer wieder wütend.

[Andi]

Moin

die Browser "zicken" da nicht rum, sie halten sich an die w3c-Standards.
CSS-Befehle für runde Ecken gibt es erst ab CSS3 und das kann noch keiner der aktuellen Browser vollständig interpretieren.

Mit diesem proprietären Krams wie -khtml-border-radius kommt ihr immer nur "teilweise" zum Erfolg. Für alle Browser wird das nicht klappen....


Hier, vielleicht etwas aufwändiger, aber zumindest für alle Browser verwendbar:
http://www.webbe.de/index.shtml?CONTENT=script_css_corner;LANG=de
http://www.cssplay.co.uk/boxes/krazy.html

[appelknolli]

sie halten sich an die w3c-Standards.

...sicher?   

ich bin mir da nicht so sicher 

grüssle

[Andi]

naja, dann ärgert euch halt weiter über die uneinheitliche Implementierung von proprietärem Krams und verwendet es weiter....

Acid2

Acid2 wurde vom Web Standards Project (WaSP) entwickelt .....
....
Aufgabe des Tests ist die Feststellung von Render-Fehlern durch Webseiten. Der Test verwendet die Prinzipien von HTML, hauptsächlich werden aber CSS-Fähigkeiten getestet[4], da diese zur Zeit der Entwicklung von den meisten Browsern nur unzureichend unterstützt wurden. Die Hauptintention ist es hierbei, die Probleme mit den Browsern hervorzuheben, die den Test nicht bestehen. Alle Browser, deren HTML- und CSS-Implementierungen kompatibel zu den Spezifikationen des World Wide Web Consortiums sind, haben keine Schwierigkeiten bei der Darstellung.
.......
# Trident
    * Windows Internet Explorer ist seit März 2009 mit Version 8.0 als letzter der üblichen Webbrowser in der Lage, den Acid2-Test zu bestehen. Die weiterhin von Microsoft offiziell unterstützten Versionen 6.0 und 7.0 sind hierzu auch weiterhin nicht in der Lage. Trident wird mit Windows 7 offizieller Bestandteil des Betriebssystems und alle Windows-Browser, sofern diese Trident einsetzen, zum Bestehen des Acid2-Test befähigen.

Acid3

wurde, wie auch sein Vorgänger ,,Acid2", vom Web Standards Project (WaSP) entwickelt. Die Entwicklung wurde im April 2007[8] von Ian Hickson aufgenommen und schließlich im Februar 2008 veröffentlicht. Anders als Acid2 konzentriert sich der dritte Acid-Test auf interaktive Webseiten, und testet dementsprechend primär DOM Level 2 und ECMAScript. Dennoch werden die Browser beispielsweise auch auf ihre SVG- und XML-Unterstützung überprüft.

Also für mich ist ein Browser Standardkompatibel, wenn er Acid2 besteht und hier positiv gelistet ist:
http://www.quirksmode.org/compatibility.html#t00

[appelknolli]

übrigens funktioniert das ganze auch auf Safari Mobile (iPhone), also auf einem telefon der 3 smartphone hersteller 
und wer benutzt denn freiwillig den IE?

@Andi, mir ist schon klar das du als entwickler besser bescheid weißt was gut und schlecht ist.
ich hatte auch zig seiten für die runden ecken gelesen inkl. JavaScript zeugs aber wenn das, was ich jetzt verwende CSS3 ist, wird es auch bei Opera noch kommen, IE interessiert mich nicht.

vg appel. 

[AlternativeComputing]

@ Andi:

Danke für die Links, werde die mal Testen.

Die 3-D Boxen schauen net schlecht aus, sollte ja auch nur für die Boxentitel futzen.

[appelknolli]

sag ich doch http://www.stern.de/digital/online/internet-explorer-bundesamt-warnt-vor-nutzung-des-microsoft-browsers-1535934.html  ok, hat zwar nix mit der CSS darstellung zu tun aber ein nichtbenutzung kann helfen CSS3 darzustellen.

[AlternativeComputing]

Öhmmm ich bin auch kein Freund von M$ Produkten und dem Interschrott Explorer, aber was hat das mit css3 zu tun ?

Es ist halt so das alle Browser nicht gleich sind und unterschiedlich mit css umgehen. Es aber Möglichkeiten gibt, um alle Browser dazu zu zwingen dieses gleich anzuzeigen.

Das man nach Möglichkeit auf dem IE verzichten soll, ist schon seit erscheinen  des Browser bekannt. Der IE ist dafür bekannt, das er offen ist wie ein Scheunentor. Wer den Benutzt, naja weiter will ich hier in der Sache IE nicht Äußern, den das muß jeder selber wissen, ob er einen Browser benutzt der große Schwachstellen hat und gefährlich werden kann.

Aber das hat wie gesagt nichts mit der Darstellung von CSS zu tun. Kannst ja in Sachen IE einen Tread in "Off Topic" Aufmachen

[appelknolli]

nein, das hatte nix wirklich mit CSS3 zu tun, das schrieb ich ja auch. aber es ist ärgerlich wenn es mölichkeiten zur darstellung von, wie in diesem thread runde ecken, gibt und die browser hersteller halten sich nicht drann bzw. nur unzureichend. was ich meinte ist, das wenn man den IE nicht benutzt die möglichkeiten steigen css sinnvoll einzusetzen ohne krücken zu bauen. klar, ich kann auch 1 pixel gifs benutzen um tabellen und zellen wie früher passgenau zu machen aber will man das oder doch lieber DIV's und das bitte in allen browsern. ich hoffe nur das durch solche nachrichten die masse der user auch die alternativen entdecken. 

also, die möglichkeiten für den einsatz von "runden Ecken" für PMX haben wir erläutert, es geht mit CSS3, aufwändiger mit CSS2 und oder krücken mit Tabellen und Grafik.

CSS3: alle aktuellen Webkit basierten und FF 3.6
CSS2: IE (fast), Safari, FF, Opera, iCab, Google Crome
Krücken: alle inkl. Netscape und Mosaic

[SvenW]

...die alternativen entdecken. 

also, die möglichkeiten für den einsatz von "runden Ecken" für PMX haben wir erläutert, es geht mit CSS3, aufwändiger mit CSS2 und oder krücken mit Tabellen und Grafik.

Ein Beispiel ohne Tabellen hier:

http://www.yaml.de/fileadmin/examples/06_layouts_advanced/equal_height_boxes.html

und im Dateianhang...

[reddragon]

Auch wenn es nicht wirklich zum Thema gehört:

Man sollte den IE nicht grundsätzlich verteufeln, und ignorieren. Ich habe diesem Produkt auch schon seit Jahren den Rücken gekehrt, aber auch der FF hat eine dunkle Seite der Macht!

November 2009 "Firefox unsicherster Browser"
Dezember 2009 "Firefox hat die meisten Käfer"

Es ist ein ständiges Auf und Ab, und einen einheitliches Browser wird es nie geben. Daher sollten man sich beim Coden an die Standards halten, so dass die Seiten so angelegt werden, dass zumindest ein Großteil der User keine Probleme hat.