Jedem Widget seine Box

walfish3d

Hallo Leute,

bevor ich zum eigentlichen Problem komme, zuerst einmal ein paar "meta-infos" ;) Ich bin gerade dabei meinen ersten Wordpress-Blog aufzusetzen, bin kein Web-Profi, aber zum "herumpfuschen" reichen meine html/css/php Kenntnisse.

Es ist die default theme von wp 3.0, also twentyten, im Einsatz. In mühsamer Kleinarbeit habe ich inzwischen einige Änderungen vorgenommen, teilweise in style.css, teilweise aber auch in den .php files der theme. Nachdem ich zumindest nicht mehr unzufrieden mit dem Aussehen des Blogs war, habe ich mal spaßhalber angetestet wie das ganze im IE aussieht. Das Ergebnis war katastrophal. Also hab ich den W3-Validator angeschmissen und gleich mal einen Haufen Errors (~20) zurückbekommen. Den Großteil konnte ich inzwischen abstellen (darunter war auch ein fehlender/falscher </span>-Tag der anscheinend für die IE-Katastrophe verantwortlich war).
Doch der Error um den es hier geht, ist der folgende:

Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Der Fehler tritt auf weil ich versucht habe, jedes Widget in eine eigene Box (<div> welches per css-klasse optisch ein bisschen aufpoliert wird) zu pflanzen. Das Problem ist allerdings, dass bevor mein <div> zum Zug kommt automatisch (woher?) eine <ul> geöffnet wird. Um den <div>-Tag einzubauen hab ich mich der twentyten_widgets_init() function in functions.php bedient: Unter before_widget den opening-tag und unter after_widget den end-tag gesetzt. Optisch sieht es eigentlich so aus wie ich es haben wollte (siehe Anhang), allerdings würde ich gern die validation-errors wegbekommen. Nur weiß ich nicht wie :confused: Falls jemand die richtige Stelle oder eine andere Methode kennt um diese Modifikation auch "sauber" zu machen wäre ich sehr dankbar!

Gruß,
walfisch

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Domino5702

Hi,

Die Box lässt sich über CSS am leichtesten realisieren. Hier ein Beispiel, den ich auch im Netz gefunden habe:

Code

[B]HTML[/B]
	<div id="navcontainer">
	<ul id="navlist">
	<li id="active"><a href="#" id="current">Item  one</a></li>
	<li><a href="#">Item two</a></li>
	<li><a href="#">Item three</a></li>
	<li><a href="#">Item four</a></li>
	<li><a href="#">Item five</a></li>
	</ul>
	</div>
	
	[B]CSS[/B]
	ul#navlist
	{
	margin: 0 0 0 30px;
	padding: 0;
	width: 12.5%;
	}
	
	#navlist li
	{
	list-style-type: none;
	background-color: #191970;
	color: #daa520;
	border: .2em solid #daa520;
	font-weight: 600;
	text-align: center;
	padding: .3em;
	margin-bottom: .1em;
	}
	
	#navlist li a
	{
	color: #daa520;
	text-decoration: none;
	display: block;
	}
	
	#navlist li a:hover
	{
	background-color: #faebd7;
	color: #191970;
	}

Alles anzeigen

LG Domi

walfish3d

Hallo Domi,

danke für deine Antwort, aber ich fürchte du hast mich missverstanden. Es geht mir nicht so sehr um die Optik (die ich eigentlich schon hinbekommen habe) als um die richtige Stelle in wordpress/twentyten.

Gruß,
walfisch

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Jedem Widget seine Box

Jetzt mitmachen!