mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 20.04.2024 08:58 Benutzername: Passwort: Auto-Login

Thema: [CSS] Text Stylen (no div, no class etc) vom 20.11.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Text Stylen (no div, no class etc)
Seite: 1, 2, 3  Weiter
Autor Nachricht
bender007
Threadersteller

Dabei seit: 19.09.2008
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.11.2008 22:13
Titel

[CSS] Text Stylen (no div, no class etc)

Antworten mit Zitat Zum Seitenanfang

Hi,
ich habe ein etwas verrücktes Problem und zwar habe ich ein Newsmodul in Joomla was mir von einer Kategorie den Title und den Introtext anzeigt.

Title ist klar z.B. 2.märz und der folgende Introtext ist nicht mit einem (a oder p) oder sonst etwas umschlossen, so ist es mir nicht möglich den Text der dem Title folgt zu stylen. Der Title läßt sich über a stylen da er auch ein Link ist.
ok etwas schwer zu erklären hier mal der Code:
Code:

<div class="gn_static_1">
<ul>
<li>
<a href="/index.php?option=com_content&view=article&id=.....=3&lang=de">März.2008</a>
<br/>
Weiter hohe...
</li>
</ul>
</div>


Also im <li> befinden sich der <a href> der den Titel mit dem Link umschließt und der nachfolgende Introtext(Weiter hohe...)

Den Title März.2008 kann ich Problemlos stylen aber den nachfolgenden dynamisch erstellen text nicht (Weiter hohe...).

Die Idee war vor den Titel eine Grafik zu setzten die sich dann beim rüber Hovern über den Titel verändert und dafür muss ich den dynamischen Text (Weiter hohe...) etwas vorrücken so ca. 10px. Ich könnte auch die Grafik in den <ul> setzten aber dann funzt der Hover effekt nicht mehr.

Ist es möglich das zu umgehen? (Der html code ist natürlich dynamisch.. Joomla halt * Ööhm... ja? * )

P.S.

Hier ein kleiner auszug aus einer der vielen .php Dateien:
Code:
<div class="gn_static_<?php echo $globalnews_id; ?>">
<ul>
   <li><?php echo modGlobalNewsHelper::renderGN_Content($params,$item); ?></li>
</ul>
</div>


Das Problem ist das der Title zusammen mit dem Introtext ausgegeben wird wenn ich das Splitten könnte wäre es no problemo Grins ..nur zur Info.

Vielen Dank bender * Ich bin müde... *


Zuletzt bearbeitet von bender007 am Do 20.11.2008 22:26, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 20.11.2008 22:25
Titel

Antworten mit Zitat Zum Seitenanfang

Du kannst doch auf den Inhalt des li Elementes getrennt von dem des Hyperlinks stylen:

Code:
div.gn_static_1 ul li {
  ...
}
div.gn_static_1 ul li a {
  ...
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
bender007
Threadersteller

Dabei seit: 19.09.2008
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.11.2008 22:35
Titel

Antworten mit Zitat Zum Seitenanfang

hi, danke für deine Antwort.

Aber jedesmal wenn ich das ul li element style verändert er auch das a element da ja <a> und der Introtext beide in li stehen... oder sehe ich das falsch?

Code:

.gn_static_1 ul li {
   list-style-type:none;
   padding: 0 0 0 30px;
}

.gn_static_1 ul li a {
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 14px;
   text-transform: uppercase;
   color:#274471;
   padding: 0 0 0 15px;
     background-image: url(../../../images/let.gif);
   background-repeat: no-repeat;
   background-position: 0px 2px;
}
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 20.11.2008 22:46
Titel

Antworten mit Zitat Zum Seitenanfang

Ich bin mir nicht sicher ob ich die korrekt verstehe, aber ich schätze du willst etwas ähnliches erreichen:

Code:
      ul li {
         padding-left: 10px;
      }
      ul li a {
         margin-left: -10px;
      }


oder

Code:
      ul li {
         padding-left: 10px;
      }
      ul li a {
         position: relative;
         left: -10px;
      }


Zuletzt bearbeitet von m am Do 20.11.2008 22:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
bender007
Threadersteller

Dabei seit: 19.09.2008
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.11.2008 23:01
Titel

Antworten mit Zitat Zum Seitenanfang

ja so etwas in der art.

ich möchte das <a> nicht gleichzeitig mit dem introtext beginnt sondern sagen wir 15 px vorher damit ich das bild einfügen kann damit <a> und der Text bündig abschließen und in <a> noch ein bild reinpasst.

Hab mal schnell n Bild gemalt das wir uns nicht missverstehen:

[/img]


März.2008 und Weiter hohe... sollen bündig abschließen aber in a soll noch ein bild (davor)..

P.S ich prbier deinen Code mal aus scheint zu funzen Grins ..meld mich gleich nochmal


Zuletzt bearbeitet von bender007 am Do 20.11.2008 23:05, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 20.11.2008 23:05
Titel

Antworten mit Zitat Zum Seitenanfang

Ja ist ja kein Problem, du kannst innerhalb des Hyperlinks auch noch eine Grafik einfügen.

Die Werte 10px und -10px tauscht du dann mit der Breite der Grafik aus...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
bender007
Threadersteller

Dabei seit: 19.09.2008
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.11.2008 23:09
Titel

Antworten mit Zitat Zum Seitenanfang

Ich probier mal etwas rum aber ich rall das grad absolut net *balla balla*

Meld mich gleich nochmal

.. Bei deiner -15px methode muss ich doch das Bild in den Quellcode schreiben oder?
Weil wenn ich dem Bild einen Minus wert gebe ist es weg (ich denke mal das es von dem li überdeckt wird)

und wie schon gesagt der Title = März2008 und der Text sollen bündig miteinander abschließen und das Bild soll vor dem Titel März... stehen.


Zuletzt bearbeitet von bender007 am Do 20.11.2008 23:18, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 20.11.2008 23:16
Titel

Antworten mit Zitat Zum Seitenanfang

Code:


div.gn_static_1 ul li a {
  padding-left: 10px;
  background: transparent url(deinbild.jpg) center left no-repeat;
}



Zuletzt bearbeitet von Kash am Do 20.11.2008 23:18, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen javascript stylen - wie, wo?
Dropdown stylen
checkboxen stylen per print.css
[jquery] checkboxes und radiobuttons stylen
Drop-Down bzw Select Box stylen - per Javascript
CSS im style Attribut untergeordnete Tags stylen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  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.