Antworten zum Thema „Text Nodes formatieren (CSS)“

Refus · 26.12.2007

Moin moin,

ich erstell grad ein Wordpress Theme. Die Widgets in der Sidebar werden wie folgt da gestellt:

Code:

<ul>
     <li>
          Überschrift
           <ul>
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
           </ul>
     </li>
</ul>

So jetzt muss ich auf die Style Eigenschaft von Überschrift zugreifen.
ich kann auf <li> zugreifen, wenn ich es dann allerdings unterstreiche wird nicht nur Überschrift unterstrichen sonder auch die komplette folge Liste. Leider kann man Überschrift nicht irgendwie mit <h2> oder wenigstens <span> einschließen (wenn jemand weiß wie ich das automatisch bei allen Widgets mache -> Danke!). :first-child würde auf <ul> Zugreifen und Textknoten kann ich nur über JavaScript manipulieren, aber dass will ich nicht verwenden. Zum ersten weil ich es nicht kann (oder nicht gut genug) und zum 2. weil ich meine CSS-Skills verbessern will und dann einfach um auch Leuten (wie mir) die JS nur anmachen wenn nötig das selbe bieten zu können.

Wäre cool, wenn da jemand eine Antwort wüsste. Mach mir jetzt schon 2 Tage Gedanken drüber. Vllt. ist die Lösung so einfach, dass ich nicht dran gedacht habe oder wie auch immer.

Mit weihnachtlichen Grüßen,

Refus

meganie · 26.12.2007

AW: Text Nodes formatieren (CSS)

Könntest du das Ganze nicht so:

Code:

<ul>
     <li>
           <ul> 
                <li>Überschrift</li>
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
           </ul>
     </li>
</ul>

oder so:

Code:

<ul>
     <li>Überschrift</li>
     <li>
           <ul> 
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
           </ul>
     </li>
</ul>

oder so:

Code:

<ul>
     
     <li>
           <ul>
                <li>Überschrift</li>
           </ul>
           <ul> 
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
           </ul>
     </li>
</ul>

anschreiben?

Ich weiß, es bedeutet semantisch etwas anderes, aber theoretisch müsste es gehen. Allerdings kenne ich mich Wordpress 0,0 aus, um zu wissen, was möglich wäre und was nicht.

Refus · 26.12.2007

AW: Text Nodes formatieren (CSS)

Naja das ist ja eben das Problem.
Das sind Widgets. D.h. ich bekomme den Code so hingesetzt, der wird aus der DB generiert.

Ich zeig mal grad für die Leute die sich mit WP nicht auskennen:

PHP:

// Template
<?php 	
/* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : 
?>
	<li id="search">
		<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
			<input type="text" name="s" id="s" value="Suche" onclick="this.form.s.value = ''" />
			<input type="submit" style="display: none;" />
		</form>
	</li>
</ul>
<ul>
	<?php wp_list_bookmarks(); ?>
 <li id="archives"><h2><?php _e('Archives'); ?></h2>
	<ul>
	 <?php wp_get_archives('type=monthly'); ?>
	</ul>
 </li>

<?php endif; ?>

Sobald hier Widgets im Adminbereich gesetzt sind wird mein Part (der in der mitte zwischen der schleife) nicht mehr beachtet. Dort konnte ich noch halbwegs über das Konstrukt verfügen wie man sieht.
Hier mal das Ergebnis (wie mein HTML) mir Widgets:

HTML:

<!-- begin sidebar -->
<ul>
		<li id="search" class="widget widget_search">			<form id="searchform" method="get" action="https://localhost/docs/Wordpress/latest/wordpress">
			<div>
			<input type="text" name="s" id="s" size="15" /><br />

			<input type="submit" value="Suchen" />
			</div>
			</form>
		</li><li id="mylinkorder" class="widget widget_links">Blogroll
	<ul>
<li><a href="http://doku.wordpress-deutschland.org/">Dokumentation</a></li>
<li><a href="http://blog.wordpress-deutschland.org/">News-Blog</a></li>
<li><a href="http://faq.wordpress-deutschland.org/">FAQ</a></li>
<li><a href="http://forum.wordpress-deutschland.org/">Support-Forum</a></li>

<li><a href="http://blogmap.wordpress-deutschland.org/">Blogmap</a></li>
<li><a href="http://themes.wordpress-deutschland.org/">Themes</a></li>
<li><a href="http://channel.wordpress-deutschland.org/">Channel-WordPress</a></li>

	</ul>
</li>
<li id="archives" class="widget widget_archives">Archiv		<ul>
			<li><a href='https://localhost/docs/Wordpress/latest/wordpress/index.php/2007/11/' title='November 2007'>November 2007</a></li>
		</ul>

</li>
</ul>

<!-- end sidebar -->

Und ich muss mit Widgets arbeiten, da der Endbenutzer irgendwann mal den Inhalt der Sidebar austauschen will und er keine Ahnung von HTML hat und es außerdem eben über ACP gehen soll.
Das ist mein Problem was ich habe. Ich frage mich immer noch, wer son Müll gecodet hat, dass die nicht mal ein einfaches <span></span> was jeder hätte formatieren können davor gemacht haben :'(

//edit
Die Suche hab ich übrigends komplett über die main.css gesteuert, aber das ist auch was anderes, da das Feld dort eine ID hat.

Scoobyd · 26.12.2007

AW: Text Nodes formatieren (CSS)

ul li {*formatier mich mal*} greift auf die überschrift zu

ul li ul li {*formatier mich mal*} greift auf die punkte zu

Refus · 26.12.2007

AW: Text Nodes formatieren (CSS)

Problem ist halt, dass ich die Überschrift unterstreichen möchte und zwar nicht nur die Schrift sondern noch etwa 100px weiter und dann müsste ich ein block-Element formatieren, was nicht da ist, denn wenn ich li formatiere, wird die Unterliste unterstrichen.
Naja, wenn es nicht anders geht werde ich den Strich wohl nur auf die Schrift begrenzen müssen.

Danke dennoch.

edit//

Ok Problem, der Wert will sich nicht überschreiben lassen.
CSS Teil:

HTML:

#menu ul li {
font-size: 25px;
text-decoration: underline;
}
#menu ul li ul li {
font-size: 15px;
text-decoration: none !important; 
}

Jetzt sind die Listenpunkte aber trotz der important-Makierung (und auch ohne) untersrichen. font-size konnte ich wunderbar änder, warum die text-decoration nicht?
Hier mal ein Bild:

Scoobyd · 27.12.2007

AW: Text Nodes formatieren (CSS)

Der Grund das es sich nicht überschreiben lässt dürfte wohl der sein
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : TEXT-DECORATION }

man lernt nie aus leider weis ich da auch keine Lösung für.

Refus · 27.12.2007

AW: Text Nodes formatieren (CSS)

Ok schon mal nicht gut.

Dennoch habe ich den Absatz mit Interesse gelesen:

Dieses Prinzip der Überspannung trifft nicht zu, wenn es sich bei den Nachkommenelementen um floatierte oder absolut positionierte Elemente handelt, oder um Elemente von Typ inline-table oder inline-block.

Allerdings funktioniert das nur, wenn ich li oder ul absolute positioniere.
Nichts mit display: block; Und absolute positionieren kann ich in dem Fall nicht machen oder zumindest wüsste ich nicht wie.
Denn wenn ich li absolute formatiere rutschen alle Punkte zusammen in einen Textknäul . Wenn ich ul formatiere stehen die Punkte zwar unter einander aber die nächste Liste rutscht auf die Punkte drauf.
Alles nicht das wahre und schon gar nicht tauglich für die Endanwender.

Refus · 27.12.2007

AW: Text Nodes formatieren (CSS)

Ok hat sich geklärt.
Hab es meiner eigenen Dummheit zu verdanken, man kann es doch etwas beeinflussen und <h2> vor die Überschrift setzen.
Peinlicher Fehler