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 |
|
|
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!
|
|
|
|
|
pRiMUS
Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht:
|
Verfasst Di 29.12.2009 15:39
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
N1ce0ne
Threadersteller
Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.12.2009 15:44
Titel
|
|
|
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
Zuletzt bearbeitet von N1ce0ne am Di 29.12.2009 15:45, insgesamt 1-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 29.12.2009 16:32
Titel
|
|
|
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
|
|
|
|
|
N1ce0ne
Threadersteller
Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.12.2009 17:06
Titel
|
|
|
Oh super, das system kannte ich noch gar nicht!
ich werde es gleich mal testen und geb dir dann nen feedback!
danke nochmal
|
|
|
|
|
N1ce0ne
Threadersteller
Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 30.12.2009 12:29
Titel
|
|
|
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
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Mi 30.12.2009 14:11
Titel
|
|
|
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
|
|
|
|
|
N1ce0ne
Threadersteller
Dabei seit: 29.12.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 31.12.2009 13:56
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ä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
|
|