Mehrere Fragen, runde Ecken bei Textbox, Links highlighten

Hallo!

Ich möchte im rechten Seitenbereich eine Textbox einrichten, die mit einer Hintergrundfarbe und runden Ecken ausgestattet ist. Die Textbox wurde bislang mit Hilfe einer Tabelle realisiert, die aber unschön aussieht.
Anhang 18430

Wie und wo kann ich die Textbox so verändern das diese runde Ecken und einen durchgehend farbigen Hintergrund hat? Bitte beachten das ich von CSS sehr wenig Ahnung habe.

Zweite Frage: Ich möchte das alle Links, die in Texten, Artikeln, etc. vorhanden sind farblich hervorgehoben werden, bzw. unterstrichen werden. Bei mouseover sollten diese sich ebenfalls verfärben. Wie und wo kann ich das definieren?

Link zur Seite: www.tsv-wawa.de.web60.ims-firmen.de

Danke!

Als erstes gibst du deiner Tabelle eine CSS-Klasse, die wir brauchen, damit die folgenden Änderungen sich nicht auf alle Tabellen auswirken, sondern nur auf die eine. Zum Beispiel eine Klasse "contact"

Im CSS brauchst du dann folgende Anweisung:

Code:

---

table.contact {
  border-radius: 10px; /* oder ein beliebiger anderer Wert */
}

table.contact td {
  border-top: none;
}

---

Für deine zweite Frage wäre folgendes denkbar:

Code:

---

#main a {
  color: #ff0000; /* oder ein beliebiger anderer Wert */
}
#main a:hover {
  color: #00ff00; /* oder ein beliebiger anderer Wert */
}

---

Das wirkt sich dann auf alle Links in deiner Hauptspalte aus. Wenn du das für alle 3 Spalten möchtest, kannst du statt #main lieber #container-inside ansprechen.

Zitat:

---

Zitat von dazzle89

Das wirkt sich dann auf alle Links in deiner Hauptspalte aus. Wenn du das für alle 3 Spalten möchtest, kannst du statt #main lieber #container-inside ansprechen.

---

"#container-inside" gibt es nicht. Vermutlich wäre es dann eher #container .inside

Zitat:

---

Zitat von Kahmoon

"#container-inside" gibt es nicht. Vermutlich wäre es dann eher #container .inside

---

Doch, die ID gibt es auf der Seite. Oder einfach #container sonst, ist eh kürzer :D

Achso auf seiner Seite. Sorry :D. Dachte vom Core, da gibts die imho so nicht.

Zitat:

---

Zitat von Zappageck71

... Bitte beachten das ich von CSS sehr wenig Ahnung habe. ...

---

Auch in HTML scheinst du nicht so fit zu sein. Da sind jede Menge Fehler auf der Seite. Versuche Contao so zu benutzen, dass du kein eigenes HTML schreibst, dann bekommst du auch keine Fehler. Das ist ziemlich einfach, denn du kannst Inhaltselemente erstellen und diese dann in ein Modul-Typ-HTML bringen mit z.B. {{insert_content::23}}, 23 ist hier die ID des Inhaltselementes und dieses Modul dann in dein Layout einbinden. https://docs.contao.org/books/manual...nserttags.html

Deine Tabelle solltest du dort auch umwandeln in eine Liste, da diese Tabelle keine tabellarischen Daten enthält - also:

HTML-Code:

---

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  ...
</ul>

---

Damit diese Liste nicht wie eine Liste aussieht, kannst das in deiner CSS wie folgt machen, nachdem du dem Inhaltselement od. dem Artikel die Klasse textbox gegeben hast:

HTML-Code:

---

.textbox ul {
  list-style: none;
  padding: 0;
}

---

Dann solltest du im Texteditor keinen Inline-Style zur Formatierung hinzufügen, das kannst du nacher alles in deiner CSS-Datei formatieren.

Wenn du das gemacht hast, dann öffne im Firefox das Addon Firebug, markiere dein Element, welches du formatieren möchtest, links im HTML-Baum, und klicke dann rechts in der CSS-Ansicht mit der rechten Maustaste, und wähle Element-Style bearbeiten. Dort kannst du dann mit Eigenschaften und Werten experimentieren - Beispiel:

HTML-Code:

---

element.style {
  background-color: #933;
  border-color: green;
  border-radius: 15px;
}

---

Deine Links kannst du am besten allgemein so formatieren:

HTML-Code:

---

a {
 color: #0f0;
}
a:focus,
a:hover,
a:active {
 color: tomato;
}

---

Damit hast du einen schwachen Selektor (a = Elementselektor) und kannst ihn deswegen leicht dort überschreiben, wo Links von dieser Formatierung abweichen sollen. Was meistens in Navigationen der Fall ist.

Code:

---

.mod_navigation li a {
 color: red;
}
.mod_navigation li a:focus,
.mod_navigation li a:hover,
.mod_navigation li a:active {
 color: pink;
}
/* Das li ist nur im Selektor mit drin, wegen der Skiplinks, welche dann davon nicht berührt werden. */

---

Ich muss dazu sagen das ich die Seite in halbfertigem Zustand übergeben bekommen habe, die HTML-Fehler habe ich somit auch nicht zu verantworten.
Gerade mit der Formatierung der "Tabelle" im Textfenster bin ich gestern nicht recht weiter gekommen.
Das sehe ich mir gleich mal an.
Danke für den Input.

Mach da keine Tabelle hin, das ist Müll.

Ja klar ist das Müll, deshalb soll die ja auch weg.
Habe jetzt ne Liste eingebaut, komme jedoch mit der von dir beschriebenen Vorgehensweise nicht klar.
Der Artikel hat die Klasse "textbox".
Die CSS-Datei habe ich wie folgt angepasst:

HTML-Code:

---

/*    round corners <li>
------------------------------------------------- */
.textbox ul {
  list-style: none;
  padding: 0;

}

---

Wenn ich jetzt die Seite aufrufe wird mir die Liste auch angezeigt. Wenn ich mit der Maus das entsprechende Element auswähle das die Liste beinhaltet und dann per Rechtsklick den Element Syle bearbeite ändert sich an der Ausgabe nichts und nach Eingabe der Werte und Drücken der Enter-Taste wird die Eingabe gelöscht.

Anhang 18437
Anhang 18438

Was mache ich falsch?

Was soll sich da auch großartig ändern?

Du sagst mit den beiden Zeilen nur, dass der Innenabstand (padding) auf 0 gesetzt wird und keine Aufzählungszeichen da sein sollen.

Nun hast du schließlich keine Tabelle mehr, sondern eine Liste, und diese wird von den alten CSS-Anweisungen der Tabelle natürlich nicht mehr angesprochen. Anderes HTML bedeutet nämlich andere CSS-Selektoren.

Diese Angaben

.textbox ul {
list-style: none;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}

bringen dir schon einmal die Hintergrundfarbe und abgerundete Ecken. Anschließend kannst du die Listenpunkte gestalten mit mehr Abstand, Trennlinien oder Pipapo. Evtl. kannst du Hintergrundfarbe und abgerundete Ecken auch der Klasse .textbox geben, wenn die Überschrift in der Box sein soll. Was möchtest du denn genau erreichen? Wie soll es aussehen - hast du eine Grafikvorlage?

So, ich bin jetzt schon ein ganzes Stück weiter mit der Gestaltung der Seite.
Problem: Die Links in der textbox rechts bekomme ich nicht formatiert.
Die werden nach wie vor global gehandhabt. Ich habe versucht die Links im Container zu formatieren, hatte allerdings damit keinen Erfolg. Die Links werden innerhalb der Box immer grau gefärbt.
Global kann ich es aber auch nicht ändern, da sonst alle Links in der rechten Spalte formatiert werden, was ich nicht möchte.
Die Links innerhalb der Box sollen weiß dargestellt werden, wie der Rest des Textes innerhalb der Box auch.
Ich denke ich mache irgendwas mit der CSS-Formatierung falsch.
Hier der Teil aus der CSS, der die Textbox regelt:

Code:

---

.textbox {
  padding: 10px;
  background-color: #800001;
  border-radius: 10px;
  color: #ffffff;
  #container {width: 200px; height: 200px; border: 1px solid #eee;}

}

---

Alle meine Versuche in den obigen Code separate Regeln für die Links einzubinden, waren bislang erfolglos.
Danke für die Hilfe.

Wie man Links formatiert steht in diesem Thread schon weiter oben.
Wenn es nur die Links in der Textbox sein sollen, dann .textbox a
Auch wenn Du nur eine Vereinsseite machst, solltest Du Dich m.E. mit den Grundlagen von css befassen.