Du bist nicht angemeldet.

[Gelöst] Runde Ecken bei Tabellen

DerSchlachter

nikyū

  • »DerSchlachter« ist der Autor dieses Themas

Beiträge: 142

  • Private Nachricht senden

1

04.04.2015, 13:57

[Gelöst] Runde Ecken bei Tabellen

Ich verzweifle langsam aber sicher. Der ein oder andere hat ggf. meine Website schon einmal besucht, diese nutze ich um mein Hobby Videospiele mit meinem, mehr oder weniger guten Kenntnisse in CMS, HTML, CSS3 und der Bildbearbeitung, zu verbinden. Bisher fuchtel ich mich so durch, dass Ergebnis gefällt mir persönlich schon ganz gut. leider bekomme ich folgendes Problem nicht gelöst:

Ich habe Artikel (Link zum Artikel) mit Tabellen, diese möchte ich mit einem abgerundeten Rahmen - ohne Innenrahmen - verzieren. Das hatte ich auch schon einmal hinbekommen. "Leider" wurden wohl einige CSS Dateien bei Joomla Komponenten Updates überschrieben, so dass der Rahmen verschwunden ist. Nun versuche ich verzweifelt die CSS Datei der Artikel-Komponente (K2) so zu ergänzen, dass der Rahmen wieder dargestellt wird. Leider ohne Erfolg. Kennt sich einer von euch damit aus?

Derzeit habe ich die CSS um den folgenden Beispielcode ergänzt:

Quellcode

 
1
2
3
4
5
6
7
8
9
10

.box {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-khtml-border-top-left-radius: 10px;
	-khtml-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}


In der Tabelle im Artikel den Stil ausgewählt, leider funktioniert hier nichts.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »DerSchlachter« (06.04.2015, 21:52)

henrikf

Pixelor-Team

Beiträge: 6 828

Wohnort: Bad Aibling / Bayern

Beruf: Software-Entwickler

  • Private Nachricht senden

2

04.04.2015, 15:30

Geht bei mir perfekt. Ich habe lediglich noch eine Zeile im CSS hinzu gefügt, amit man überhaupt einen Rahmen sieht. Hier das ganze HTML-Dokument, ausprobiert in FireFox 34.0.5:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html> 
<html>
<head>
<style>
.box {
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-top-left-radius: 10px;
  -khtml-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border:1px solid #000;
}
</style>

</head>
</body>

<table class="box">
  <tr>
    <th>Spalte 1</th>
    <th>Spalte 2</th>
    <th>Spalte 3</th>
  </tr>
  <tr>
    <td>Zeile 1</td>
    <td>Zeile 2</td>
    <td>Zeile 3</td>
  </tr>
  <tr>
    <td>Zeile 1</td>
    <td>Zeile 2</td>
    <td>Zeile 3</td>
  </tr>
  <tr>
  <td>Zeile 1</td>
  <td>Zeile 2</td>
  <td>Zeile 3</td>
  </tr>
</table>
</body>
</html>
--== Island2Live / Henrik Fisch==--
Homepage: http://www.island2live.com/ deviantART: http://island2live.deviantart.com/
Spielt gerade: Yonder: The Cloud Catcher Chronicles

DerSchlachter

nikyū

  • »DerSchlachter« ist der Autor dieses Themas

Beiträge: 142

  • Private Nachricht senden

3

04.04.2015, 17:00

Hmm, ich denke dass sich da wohl einige CSS Dateien überschneiden bzw. neutralisieren. Ich werde mal weiter forschen. Zumindest ist der Code korrekt, dass hilft mir schon einmal weiter. Danke :)

henrikf

Pixelor-Team

Beiträge: 6 828

Wohnort: Bad Aibling / Bayern

Beruf: Software-Entwickler

  • Private Nachricht senden

4

04.04.2015, 17:05

Dafür gibt es nur eine mögliche Methode:

FireFox & FireBug-PlugIn

Damit hat man so etwas in Minuten gefunden, weil da haargenau angezeigt wird, welcher CSS-Teil für welches Element zuständig ist. :)
--== Island2Live / Henrik Fisch==--
Homepage: http://www.island2live.com/ deviantART: http://island2live.deviantart.com/
Spielt gerade: Yonder: The Cloud Catcher Chronicles

DerSchlachter

nikyū

  • »DerSchlachter« ist der Autor dieses Themas

Beiträge: 142

  • Private Nachricht senden

5

04.04.2015, 17:11

Den nutze ich auch, hab aber nicht den Verweis auf die CSS gefunden. Kantabler auch daran liegen, dass ich jetzt schon einiges an Zeit beim Suchen, probieren und frickeln verballert habe 8) Ich gucke mir das gleich noch einmal an.

henrikf

Pixelor-Team

Beiträge: 6 828

Wohnort: Bad Aibling / Bayern

Beruf: Software-Entwickler

  • Private Nachricht senden

6

04.04.2015, 17:22

Guckst Du hier:



Alles wird gut, frohe Ostern! :)
--== Island2Live / Henrik Fisch==--
Homepage: http://www.island2live.com/ deviantART: http://island2live.deviantart.com/
Spielt gerade: Yonder: The Cloud Catcher Chronicles

DerSchlachter

nikyū

  • »DerSchlachter« ist der Autor dieses Themas

Beiträge: 142

  • Private Nachricht senden

7

06.04.2015, 21:51

Alle Eier und den Fehler gefunden. Es haben sich 2 CSS Dateien überschnitten. Ich habe die CSS des internen Editor bearbeitet. Nun gefällt es mir :). Jetzt geht es an die Überarbeitung der Artikel.

Ähnliche Themen