Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>CSS Runder Tabellenheader

CSS Runder Tabellenheader

Philipp27.03.0518:18
Wie lässt sich das realisieren?

muss eigentlich nur wissen wie man einen Code für Bild angibt das Links nur einmal erscheint. dann kommt das mittlere Bild was sich automatisch der Länge anpasst und dann kommt wieder ein nur einmal erscheinendes Bild rechts.

Dürfte doch eigentlich funktionieren oder?
0

Kommentare

sr27.03.0518:31
Ich bin nicht ganz sicher, ob ich richtig verstanden habe, was Du vorhast aber runde Ecken lassen sich wunderbar mit CSS realisieren. Ein Blick nach A List Apart sei empfohlen:

...und in viele andere CSS Tutorials auch, aber vielleicht kommst Du damit ja schon weiter.

Gruß,
sr
0
Philipp27.03.0518:48
Naja ich will eigentlich nur wissen wie man Bilder in einer Tabelle an eine bestimmte stelle setzt und ihnen sagt das sich bestimmte wiederholen und manche nicht...

Soll halt so eine art button werden...
0
sr27.03.0518:57
Hm, ja, also. Auch dann solltest Du zu CSS greifen, falls Du damit klar kommst, denn alle Möglichkeiten Tabellen direkt im html mit Hintergrundbildern zu versehen sind erstens sehr problematisch was die Standards angeht (da ist das nämlich nicht vorgesehen) und zweitens wird es von allen möglichen Browsern nicht oder nur teilweise, auf jeden Fall aber immer "anders" unterstützt. Soll heißen: Selbst wenn Du das auf Deinem Rechner für Deine Browserversion hingebastelt bekommst, erlebst Du unter Umständen Dein blaues Wunder, wenn Du Dir die Seite auf einem anderen Rechner mit anderem Browser anschaust. Eben darum versucht man Tabellen als Layoutmittel zu vermeiden. Das fällt anfangs schwer, aber das umgewöhnen auf CSS lohnt sich und ist auch zukuntsträchtig. So, genug missioniert, zur Sache.

Tipps zur Hintergrundgestaltung mittels CSS gibts hier:

Und wenn es denn unbedingt Tabellen sein sollen:

Wenn Du einen Button gestalten willst... warum machst Du das nicht einfach als Grafik? Sorry, falls das ein dummer Kommentar ist, weil es an Deinen Bedürfnissen vorbei geht.

Gruß,
sr
0
sr27.03.0518:58
Ohhh weh... Rechtschreibung ist meine Stärke nicht heute, ganz offenbar.

Wer Fehler findet, darf sie behalten.:-[
0
Philipp27.03.0519:20
Ich werde jetzt nochmal erklären was ich will

Aus diesen Bildern muss per CSS


0
Philipp27.03.0519:21
Sowas als Tabellenüberschrift werden.

0
Lutz Selke
Lutz Selke27.03.0520:11
es gibt auch ne mozilla eigenentwicklung
-moz-border-radius-bottomright:16px;

(funktioniert deshalb auch nur in mozilla browsern)
verwendet wird das z.b. hier
0
Lukas Flueck27.03.0520:20
Vorschlag:
mach es doch mit CSS und table kombiniert. Nimm DIVs um layer zu definieren und pack die Grafiken in den unteren Layer in table cells, aber als direkter Bildinhalt und nicht als Hintergrundbilder. Dem layer gibst Du den z-index=-1 und darüber platzierst du den layer mit der Beschriftung.
Tip für das mittlere Bild: mach die Originaldatei nur 1px breit, da sich dein Balken horizontal nicht verändert.
Einfachste Variante: 5 Zellen horizontal:
1. Zelle: linkes Eck
2. Zelle: Bildbalken 1px breit ohne Breitenangabe
3. Zelle: Bildbalken mit intergrierter Beschriftung, nicht breiter als Beschriftung
4. Zelle: wie 2.Zelle
5. Zelle: rechtes Eck
0
Philipp27.03.0520:48
Lukas
das klingt ja alles ganz interessant aber ich denke nicht das ich das umsetzten kann... Vielleicht ein Beispiel?
0
Rantanplan
Rantanplan27.03.0521:33
Tabellen... *kopfschüttel* Die werden für jeden Quark mißbraucht.

Eine sinnvolle Lösung sieht zum Bleistift so aus:
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Rantanplan
Rantanplan27.03.0521:34
Und das Bild tab1.gif
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Rantanplan
Rantanplan27.03.0521:34
Und tab2.gif

Und jetzt streng mal deinen eigenen Kopf an.
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Rantanplan
Rantanplan27.03.0521:36
Und das Ergebnis sieht so aus:
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Philipp28.03.0501:00
Das Problem ist nur das die Tabelle so oder so da ist.
Der Button dient also nur als Überschrift...
Und ich muss diesen Button mit css erzeugen...
0
Philipp28.03.0501:00
Aber vielen Dank für deine Mühe!
0
Claude
Claude28.03.0502:31
Rantanplan: In deinem Beispiel fehlt .
0
Claude
Claude28.03.0502:32
Das von mir geschriebene wurde einfach eliminiert, es fehlt (halt mit Leerräumen) < /head > .
0
Rantanplan
Rantanplan28.03.0506:55
Claude

Ups, hast recht Ich hab's nicht durch den Validator geschickt.
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
sr28.03.0512:45
Philipp
Das Problem ist nur das die Tabelle so oder so da ist.
Der Button dient also nur als Überschrift...
Und ich muss diesen Button mit css erzeugen...

Ja, Philipp, aber Du hast die Lösung doch jetzt hier gleich mehrfach! Ich hatte nicht die Zeit, ein Beispiel zu posten, wie Rantanplan das tat, aber ein Blick in die Erklärungen, deren Links ich oben postete, hätte Dich auch schon zu entsprechenden Lösungen gebracht. Anpassen an Deinen Quellcode musst Du die Sache so oder so - hoffe, mit Rantanplan's Beispiel gelingt Dir das jetzt - viel Erfolg auf jeden Fall! Ansonsten, und bitte verstehe das weniger oberlehrerhaft, als es klingt, ist der Hinweis unseres freundlichen Hundes gerade in so einem Fall angebracht: "Und jetzt streng mal deinen eigenen Kopf an" - es lohnt sich gerade bei solchen Sachen, das Konzept zu verstehen und zu nutzen, anstatt nur einen von anderen geschriebenen Code zu kopieren und einzufügen. Klar, das ist unangenehm, wenn es schnell gehen soll, aber dazu raten kann man nur. So, das waren jetzt aber auch genug Belehrungen für heute

Grüße,
sr
0
Serge
Serge28.03.0513:16
Hier gibt es das auch nochmal erklärt:



Da steht auch drin, wie das mit CSS3 funktionieren soll... naja, für die Zukunft..
0
Philipp28.03.0513:43
Ja das mit Rantaplan stimmt,
aber das müsste alles in einen:

.hgtabelleoben
{

background: url(../gifs/m.gif);

color: #ffffff;
font-family: arial;
font-size: 14px;


}
0
Rantanplan
Rantanplan28.03.0516:07
Philipp

Kuck mal, du hast Osterferien... nimm dir die genannten Links, arbeite die dortigen Lösungen durch, lies mal die verschiedenen CSS-Tutorials, die man per Google findet.

Und wenn dir das zuviel Aufwand ist, dann probiers das nächste Mal mit einer Frage, die sinnvoll gestellt ist und schieb nicht nach jeder Antwort eine neu Einschränkung "ja schon, aber" nach. So macht man sich nur Feinde fürs Leben.
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Lukas Flueck28.03.0516:46
Rantanplan[quote]Tabellen... *kopfschüttel* Die werden für jeden Quark mißbraucht.

Ich bin auch für vollständige CSS Lösungen. Leider ist die Sache mit CSS nur auf dem Papier so schön flexibel und elegant: viele der Browser haben aber die liebe Mühe mit CSS layouts. Es gibt eine lange Liste von Tricks, um alle Browser unter einen Hut zu bringen. Deshalb sind Tabellenlayouts nicht sooo dumm und schon gar kein Missbrauch. Dank der Tabellentechnik gibt es schon Jahre ansehnliche Sites...da war CSS Unterstützung noch nicht da. Tabellen werden aber auch von einem NS4 (meist) korrekt angezeigt....oder wenigstens mit einem einfachen Trick: Tag in ansonsten leere Zellen.

Philipp: für CSS Tipps: www.css-praxis.de
0
Rantanplan
Rantanplan28.03.0517:16
Lukas Flueck
Leider ist die Sache mit CSS nur auf dem Papier so schön flexibel und elegant: viele der Browser haben aber die liebe Mühe mit CSS layouts.

Wenn man mal vom IE absieht, ist die CSS1/2-Unterstützung der modern(er)en Browser schon recht brauchbar.
Deshalb sind Tabellenlayouts nicht sooo dumm und schon gar kein Missbrauch. Dank der Tabellentechnik gibt es schon Jahre ansehnliche Sites..

Äh... ja. Eine die mir am besten gefällt ist die von Amazon. Schon richtig, vom praktischen Standpunkt aus gesehen völlig richtig. Gedacht waren die Tabellen aber nicht für Layoutgeschichten, sondern für die tabellarische Darstellung von Daten. Daß sich das Web so stark layoutlastig entwickelt, das hatte damals, als die HTML-Elemente formuliert wurden, niemand gedacht. Daher kam CSS auch erst so spät. Zu spät um den rollenden Zug mit den Tabellen als Layoutraster noch aufhalten zu können.
da war CSS Unterstützung noch nicht da. Tabellen werden aber auch von einem NS4 (meist) korrekt angezeigt....oder wenigstens mit einem einfachen Trick: Tag in ansonsten leere Zellen.

Äh... ein NS4 zeigt sowieso so gut wie nix korrekt an und gerade da kann man mit CSS viel erreichen. Nämlich indem man die Seiten so gestaltet, daß sie ein CSS-unfähiger Browser lesbar und gut darstellen kann. Da hat der Lynx-Nutzer dann auch etwas davon, der ist nämlich über Tabellenlayouts nicht sehr erfreut Unter dem Stichwort Barrierefreiheit findet man dazu recht gute Hinweise.
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Lukas Flueck28.03.0518:12
Bin gar kein Freund von IE, aber der Markt bestimmt: wenn 90% der Sitebesucher IE benutzen, dann muss die Site korrekt für den IE angezeigt werden. Die
0
Lukas Flueck28.03.0518:58
Ups...wo ist der Rest des Texts geblieben?

...Browserweichen sind leider immer noch nötig.

Philipp will aber auch eine table im wörtlichen Sinne. Der farbige Balken soll nur die Titelzeile werden.
0
JustDoIt
JustDoIt28.03.0520:18
Schöne Beispiele und Links. Das schaue ich mir mal gleich an. Ich arbeite sehr gerne mit CSS, weil da die einzelnen Elemente schön nacheinander geladen werden und per CSS Datei das Layout komplett änderbar ist.  

Bestes Beispiel das ich kenne:
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.