mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 08:37 Benutzername: Passwort: Auto-Login

Thema: [CSS] - Kindelemente ansprechen vom 25.02.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] - Kindelemente ansprechen
Autor Nachricht
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 25.02.2009 16:19
Titel

[CSS] - Kindelemente ansprechen

 Antworten mit Zitat Zum Seitenanfang
Hallo zusammen,

ich habe hier ein kleines Problem bei dem ich zZ auf keine Lösung komme.

Ich habe hier ein Typo3 Projekt bei dem ich für den Redakteur ein Inhaltselement bereitstellen möchte,
bei dem er nur den Text eingeben muß und sich um das Layout keine Gedanken machen braucht.

Dazu bietet der RTEditor wenige vordefinierte Klassen, die ich nutze und per CSS umschreibe.


Das HTML Konstrukt welches immer gleich ist schaut wie folgt aus.

HTML
Code:

<p class="align-left">
   <strong>Headline</strong>
   <br />
   Lorem ipsum
</p>


und mein CSS
Code:

div#wrapper #content #main p.align-left {
   display:block;
   width:500px;
   background:#ccc;
   border:1px solid #535353;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px
}

div#wrapper #content #main p.align-left strong:first-child {
   background:red;
   display:block;
   width:496px;
   padding:2px;
}

/*IE6*/
* html div#wrapper #content #main p.align-left strong {
   background:red;
   display:block;
   width:498px;
   padding:2px;
}
/*IE6*/

div#wrapper #content #main p.align-left > * {
   padding:5px;
}


jetzt habe ich mir dabei gedacht das ich über 'p.align-left > *' jedes Element nehme und einen Paddingwert vergebe.Nur ist ja kein Element vorhanden und somit klebt der Text am rand der Box.

bevor jetzt welche meinen ich solle doch anstatt dem Absatzelement ein DIV nutzen, den muß ich enttäuschen.
Da macht Typo3 nicht mit.

Hat mir jemand vielleicht einen Tipp/Lösungsvorschlag wie ich den Text mit einem Abstand von 5 Px setzen kann?

Vielen Dank
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.02.2009 16:51
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
p.align-left {
   padding: 5px;
}


* Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 25.02.2009 16:51
Titel

Antworten mit Zitat Zum Seitenanfang
Schonmal ganz einfach versucht?

CSS
.align-left{padding:5px;}


HTML
<p class="align-left">
<strong>Headline</strong>
<br />
Lorem ipsum
</p>

Klappt wunderbar!
  View user's profile Private Nachricht senden
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 25.02.2009 16:54
Titel

Antworten mit Zitat Zum Seitenanfang
dann schiebt es mir das strong element auch noch 3px nach rechts.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.02.2009 16:57
Titel

Antworten mit Zitat Zum Seitenanfang
Dann musst du die Formatierungen dafür eben entfernen *zwinker*


Edit: Hast du getrunken?

Zuletzt bearbeitet von m am Mi 25.02.2009 16:58, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 25.02.2009 16:59
Titel

Antworten mit Zitat Zum Seitenanfang
so schauts ohne Padding aus




so mit Padding





//getrunken? nee bis jetzt noch nicht.
du meinst das Padding des Strong-Elementes?


ne dreckige Lösung wäre sowas

Code:

div#wrapper #content #main p.align-left strong:first-child {
   background:red;
   display:block;
   width:506px;
   padding:2px;
   margin-top:-5px;
   margin-left:-5px;
}


das schaut dann so aus




ich denke ich lass es so und passe das für den IE jetzt noch an.

trotzdem würde mich eine bessere Lösung noch interessieren

Zuletzt bearbeitet von Kash am Mi 25.02.2009 17:07, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.02.2009 17:07
Titel

Antworten mit Zitat Zum Seitenanfang
Ah, jetzt verstehe ich auch wo du das Problem hast. Ja, dann wäre das zum Beispiel eine Lösung.

Wenn es bei dem markup bleibt, dann gibt es auch keine andere Lösung.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [jQuery] - Kindelemente ansprechen
Fehlende Kindelemente in Baumstruktur - Bug in PHP 4?
a:active funktioniert nicht auf kindelemente?
CSS - richtig ansprechen
lightbox2 ansprechen
SVG Objekte mit js ansprechen
Neues Thema eröffnen   Neue Antwort erstellen
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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB