mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 10:16 Benutzername: Passwort: Auto-Login

Thema: Runde Ecken mit Kopzeile und 2 Attributen vom 29.12.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Runde Ecken mit Kopzeile und 2 Attributen
Seite: 1, 2  Weiter
Autor Nachricht
N1ce0ne
Threadersteller

Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 29.12.2009 15:36
Titel

Runde Ecken mit Kopzeile und 2 Attributen

Antworten mit Zitat Zum Seitenanfang

Hi Gemeinde!

Ich sitz seit einen Tag an diesem Problem und will euch fragen ob ihr mir weiter helfen könnt!

Code:
<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th colspan="2"><h4>Kopfzeile</h4></th>
  </tr>
  <tr>
    <td colspan="2">Content</td>
  </tr>
  <tr>
    <td colspan="2">Content</td>
  </tr>
</table>









Ich habe für die Kopfzeile als Attribut <th> und <h4> zum ansteuern mit css... wie bekomm ich das hin, daß ich beide runde ecken in die th bekomm und es noch gut aussieht?

so soll es aussehen:




danke im vorraus!
  View user's profile Private Nachricht senden
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Di 29.12.2009 15:39
Titel

Antworten mit Zitat Zum Seitenanfang

verwende keine tabellen, das ganze sieht nicht nach tabellarischem inhalt aus also baue auch entsprechend semantisch deinen quellcode auf.

H1 SPAN für dein problem mit den runten ecken (stichwort sliding doors)
DIV P für den nachfolgenden inhalt
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
N1ce0ne
Threadersteller

Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 29.12.2009 15:44
Titel

Antworten mit Zitat Zum Seitenanfang

Das Problem ist, ich sitze an einem vorgefertigten Script und dieses System wird von dem Autor durch tausende Zeilen Code geschleift...
Ich weiss das es sich mit DIV's SPANS's usw komfortabler gestalten lässt aber ich bin
numal darauf angewiesen aus den 2 Attributen ein gutes ergebnis rauszubekommen!

Hilfe *bäh*


Zuletzt bearbeitet von N1ce0ne am Di 29.12.2009 15:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 29.12.2009 16:32
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
table th {
 background:#18b7e3 url(linkspq.jpg) no-repeat 0 0;
}
table th h4 {
 color: #fff;
 background: url(rechtspq.jpg) no-repeat right top;
}


Besser aber wäre es mit EINER Grafik zu machen (S.O.: Sliding Doors) damit das Ganze auch aufskaliert bzw. mehrzeilig werden kann.
Dazu legst du eine Grafik von z.B. 800x800px (am besten ein png8 für diesen Verwendungszweck) an, rundest außen jeweils die ecken ab und nimmst folgende Anweisungen zum Stylen:

Code:
table th {
 padding: 5px 0 0 5px; /* bei einem border-radius von 5px */
 background:#18b7e3 url(deinhintergrund.png) no-repeat 0 0;
}
table th h4 {
 padding: 0 5px 5px 0; /* bei einem border-radius von 5px */
 background: url(deinhintergrund.png) no-repeat right bottom;
}


Zuletzt bearbeitet von sahnemuh am Di 29.12.2009 16:39, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
N1ce0ne
Threadersteller

Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 29.12.2009 17:06
Titel

Antworten mit Zitat Zum Seitenanfang

Oh super, das system kannte ich noch gar nicht!

ich werde es gleich mal testen und geb dir dann nen feedback!

danke nochmal
  View user's profile Private Nachricht senden
N1ce0ne
Threadersteller

Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 30.12.2009 12:29
Titel

Antworten mit Zitat Zum Seitenanfang

hallo,

also sahnemuh ich hab es getestet und es ist das gleiche rausgekommen wie bei mir:




siehst du das sich das rechte bild genau an das <h4> Objekt angliedert.

In der <th> befindet sich noch ein <span> Objekt, liegt es vllt daran?

Grüße N1


Zuletzt bearbeitet von N1ce0ne am Mi 30.12.2009 12:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
danielkussin

Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht: Männlich
Verfasst Mi 30.12.2009 14:11
Titel

Antworten mit Zitat Zum Seitenanfang

Deine Hintergrundgrafik ist zu lang! Mach sie mal ca. 75% der Gesamtlänge!

Und benutz bitte keine PNGs wenn es nicht not-tut sondern gif (wenn das Farbspektrum unter 256 Farben ist, dann musst du dir auch keine Sorgen um die Darstellungen in unterschiedlichen Browsern machen!)

@Firefox und Safari können übrigens Runde-Ecken! Nur ein Tipp, dann musst du aber mit einem Hack für IE arbeiten.


Zuletzt bearbeitet von danielkussin am Mi 30.12.2009 14:15, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
N1ce0ne
Threadersteller

Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 31.12.2009 13:56
Titel

Antworten mit Zitat Zum Seitenanfang

Hmm ich glaub die Hintergrundgrafiken sind okay,
es sind 2 runde Ecken und in der mitte erscheint die hintergrundfarbe (siehe erste post)

es geht nicht darum ob es png oder gif ist ich möchte das die th 100% mit den nur 2 vorhandenen attributen sauber dargestellt wird
  View user's profile Private Nachricht senden
 
Ähnliche Themen Mal wieder runde Ecken im IE etc
Runde Ecken in Illustrator (einzeln und ohne Script)?
Ecken eines abgerundeten Ecken-Rechtecks abrunden. :)
[Flash + XML] <br> in Attributen
css - Bilder mit unerschiedlichen attributen
{flash} runde boundingbox
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.