Seite 1 von 3

Ecken abrunden

Verfasst: 11.12.2008 19:59
von P7BB
Hallo,
wie kann ich denn eine Art Rahmen um meine Homepage machen, der abgerundete Eckenhat? Wenn es geht, sollte es kein Bild sein, die Gründe dafür kennt bestimmt jeder (kann bei längeren Texten zu Verschiebungen führen, etc.)

Edit: Wo ich grad so den Banner hier seh:
[ externes Bild ]
Da sind die Ecken ja abgerundet... ich möchte praktisch das gleiche, aber natürlich innerhalb von diesem feld noch mit php und javascript arbeiten... ;) aber eben nicht als bild, sondern mit html-technischen mitteln...

Verfasst: 11.12.2008 21:26
von gn#36
Wie das geht kannst du dir beim phpBB 3 abgucken. Im Prinzip musst du "nur" an den Stellen an denen normalerweise die spitzen Ecken liegen teiltransparente Bilder hinlegen die eine runde Ecke enthalten. Wenn du Firefox nutzt dann schau dir einfach mal per Firebug die Stellen an an denen runde Ecken genutzt werden. (Und wenn nicht, dann besorg ihn dir, früher oder später musst du sowas nämlich sowieso mit mehreren Browsern testen).

Re: Ecken abrunden

Verfasst: 07.01.2009 15:07
von P7BB
Sry, dass ich diesen Thread ausgrabe, aber ich bekomm das einfach nicht hin...
Ich habe folgendes Bild:
http://www.LupiUpload.de/file.php?dat=BMHMEjlZ.png

Das dort abgebildete Bild hat einen blauen Rand mit runden ecken. An den Ecken selbst ist ein Stück nicht durchsichtig, allerdings ist der Hauptteil schon durchsichtig.
Wenn ich jetzt versuche, das ganze mit runden Eckn hinzubekommen, funktioniert eine Ecke einwandfrei, 2 Ecken durchkreuzen sich irgendwie selbst und eine Ecke ist ganz blau. Kann mir jemand vllt einen Beispielcode posten?

Edit: Ich hab das nun anders gelöst. :) Aber wo ich hier grad schon einen Thread offen hab:
wie kann ich den Abstand zwischen zwei <tr> abschalten? also die obere zeile hat sowohl in FF als auch im IE einen kleinen Abstand zur nächsten Zeile. Das ist aber nicht ganz praktisch für mich... Es gibt bestimmt eine Möglichkeit, das irgendwie abzuschalten, oder? :)

Re: Ecken abrunden

Verfasst: 07.01.2009 17:31
von Boecki91
Tabellen für das Gestallten einer Webseite sind mehr so modern, man benutzt mittlerweile div und co

Aber Hier die Lösung:
http://forum.de.selfhtml.org/archiv/2005/1/t100155/

Re: Ecken abrunden

Verfasst: 07.01.2009 17:41
von P7BB
Danke.
Naja ich benutze lieber die Tabellen, weil ich das persönlich am einfachsten finde... Aber ist ja jedem selbst überlassen :) ;)

Re: Ecken abrunden

Verfasst: 08.01.2009 06:33
von gn#36
Runde Ecken sind in meinen Augen per Div und Span allerdings deutlich leichter zu realisieren, da du immer zwei verschachtelte Elemente brauchst um das zu realisieren (schau dir mal den Quellcode dieser Seite an, da wird das mit den Runden Ecken ja auch an einigen Stellen gemacht. Im Prinzip nichts anderes als die Ecken als Hintergrundgrafik des inneren Elements und die Hintergrundfarbe im äußeren Element (das dann von den Ecken überdeckt wird).

Re: Ecken abrunden

Verfasst: 08.01.2009 14:42
von P7BB
ich hab mich ein bisschen doof ausgedrückt... meine seite hat nun eine statische größe von 1000px... das hab ich mit einer tabelle gemacht. Nun kann ich ein einfaches Hintergrund-Bild benutzen, welches auch 1000px breit ist und ich hab meine Runden Ecken.
So ist der Kopf der Homepage nun eine Tabelle, die 1000px breit und 100px groß ist. Nun habe ich ein weiteres <tr> gemacht, um danach den rand (ebenfalls ein pic mit der größe 1000 px) darzustellen. Doch leider ist bei dem Übergang von der einen Zeile zur nächsten Zeile ein kleiner weißter rand. Der stört natürlich... Ich wweiß aber ncith wie ich den wegbekommen soll... Boecki91s Link hat mir leider nicht geholften :'(

Re: Ecken abrunden

Verfasst: 08.01.2009 18:01
von Doktor Smile
Um ganz ehrlich zu sein verstehe ich das auch nicht so ganz,
wie das mit den DIVs geht.

Problem ist bei mir irgendwie immer:
Wenn ich eine Spalte verschieben will musste ich bei Tabellen nur "<td>" und dann den Inhalt inklusive schließendem Tag dort hinsetzen, wo es hin soll.

Bei den DIVs läuft das irgendwie soweit ich weiß auch noch alles über die CSS Dateien undso.
Wenn ich mal eine ganze Spalte verschieben will, verschob sich immer nur der obere Teil, und hinterher war es nur ein Chaos.

Was ist an Tabellen nicht modern?
ich meine warum soll man immer kompliziert programmieren, wenn man es doch ganz einfach haben kann?
Tabellen finde ich auch, sind die einfachste Möglichkeit,
warum diese nicht auch verwenden?

Re: Ecken abrunden

Verfasst: 08.01.2009 23:18
von gn#36
Wenn du sie einmal verstanden hast sind Divs viel einfacher als Tabellen, zumindest in meinen Augen. Da musst du nämlich dann am HTML gar nichts mehr ändern und kannst sie trotzdem verschieben. Es gibt so viele Tutorial Seiten die dir ein mehrspaltiges Layout mit Divs liefern. Du kannst auch Divs pixelgenau platzieren wenn du willst, alles was du kennen musst sind ein paar CSS Befehle. Der Vorteil gegenüber Tabellen ist, dass Divs für die meisten Inhalte barrierefreier sind als Tabellen (stell dir vor, dir wird der Inhalt einer Seite vorgelesen, inklusive der Tatsache, dass bestimmte Daten in Tabellenform vorliegen. Bei Tabellen als Layoutmittel verstehst du irgendwann aufgrund der vielen verschachtelungen nichts mehr, bei Divs dagegen kommen nur dann Tabellen vor, wenn sie auch wirklich gebraucht werden).

Ein ganz akzeptables anfängertutorial hier arbeitet sich schrittweise durch und das Endresultat braucht keine Tabellen für das Layout. Klar, das wird nicht genau so aussehen wie du es dir wünscht, aber man sieht dass es eigentlich nicht schwierig ist wenn du damit fertig bist.

Re: Ecken abrunden

Verfasst: 08.01.2009 23:25
von piero
tabellen sind für tabellarische daten da und nicht fürs design ;)
wäre dann sowas wie wenn du aus einer Vase trinken würdest :P
Semantischer Code