<li>-grid utan hål, hur göra?

Tråden skapades och har fått 10 svar. Det senaste inlägget skrevs .
1

Sitter och sliter mitt hår för ett grid jag gör med <li>-taggar.

.sidebar li{
	display: table-cell;
	border:1px solid rgba(250, 250, 250, 0.2);
	margin-bottom:1.5em;
	height:200px;
    min-height: 200px;
   	border: 1px solid #000;
    display: -moz-inline-stack; 
    display: inline-block;
	vertical-align:top;
	zoom: 1;
    *display: inline;
	_height: 250px; /*for ie6*/
}
.sidebar > .widget-container{
	background-color:transparent;
	border:1px solid white;
}
.sidebar li:nth-child(5n+0) { 
	border:2px solid red;

}
.sidebar li:nth-child(3n+0) { 
	clear: left;
	margin-left:0;
	border:2px solid green;
}

Jag har läst den här http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ och har nog provat varje kombination, men det här är det närmaste jag kommer. Hur blir jag av med hålet uppe till höger? Någon som kan bistå?

@klarabara: För att cleara det första listelementet på varje rad borde du väl använda :nth-child(3n+1). Ser dock inte vad du har floatat, är all kod med i exemplet? Kan du länka till sidan? Vad har du för funktionskrav som gör att det inte räcker att floata vanliga blocks?

WOW! Nu lärde jag mig något nytt! Tack så väldans!

den är inte live ännu så det är svårt att lägga upp en länk

att ett litet +1 kunde göra så mycket? kommer flina av glädje resten av dagen!

Nu är jag förbryllad igen.. Jag bytte till det här upplägget på ett annat ställe på siten och satte andra spans på dem, bägge har samma och ändå helt olika resultat?

.artist-grid li:nth-child(2n+1) { 
	clear: left;
	margin-left:0;
}
.flattering-sidebar li:nth-child(2n+1) { 
	clear: left;
	margin-left:0;
}
Ursprungligen av klarabara:

Nu är jag förbryllad igen.. Jag bytte till det här upplägget på ett annat ställe på siten och satte andra spans på dem, bägge har samma och ändå helt olika resultat?

Svårt att säga utan att se hela exemplet... Vet inte vad du sitter på för nätverk, men om du har möjlighet att öppna för länkar utifrån, eller i.a.f. hosta det någon annanstans, så skulle det verkligen underlätta. I värsta fall kanske du bara kan lägga det på en pastebin eller i en stor spoiler här på forumet.

http://pastie.org/8177485

De skapas av en modifierad textwidget där jag ville ha titel-fältet under för att det skulle vara namnet på den som skrev citatet. Har inte kunnat göra en egen av den trots flera försök..

Ursprungligen av klarabara:

http://pastie.org/8177485

De skapas av en modifierad textwidget där jag ville ha titel-fältet under för att det skulle vara namnet på den som skrev citatet. Har inte kunnat göra en egen av den trots flera försök..

När du behöver hjälp med kodrelaterade frågor är det ofta bra om du kan bifoga ett minimalt fungerande exempel av problemet. Med det menas ett stycke kod som isolerar problemet, och som de som försöker hjälpa dig kan kopiera och köra för att återskapa det i sin egen testmiljö med minimalt arbete. Förutom att du hjälper andra att hjälpa dig med den metoden så är det en viktig felsökningsteknik, och det är inte ovanligt att man själv hittar lösningen medans man konstruerar ett fristående exempel. Vanliga termer är Short, Self-Contained, Correct Example (SSCCE) och Minimal Working Example (MWE). Se gärna den här och den här sidan för mer information om det, båda är väldigt läsvärda guider.

Jag lyckas tyvärr inte upprepa problemet med koden ovan eftersom att det mesta av både layout och styles tycks saknas. I det här fallet hade det varit hjälpsamt med ett statiskt HTML-dokument som innehåller enbart den grundläggande layouten, ett par listelement och de delar av ditt stylesheet som påverkar dessa. När du väl har identifierat problemen där kan du gå tillbaks till din Wordpress-plugin och justera hur den genererar markupen.

Senast redigerat 2013-07-26 23:11

Jag håller helt klart med Luftvargen här, ett bra sätt är att använda sig av t.ex. http://jsfiddle.net/ för att presentera sitt problem (kopiera in exempel html och css så du återskapar det felaktiga beteendet).

Då det begav sig klistrade jag koden (som jag uppfattade var det som skapade problemet) i -som föreslaget- en pastebin, vilket inte blev rätt. Det går bra att specificera i vilken form ni behöver infon, det var inte helt självklart för mig; se koden plain eller ha ett fungerande exempel. Det kändes inte helt lätt att urskilja och skapa en js-fiddle av en wordpress-widget men jag kan ha fel. Eftersom det handlade om markup och ingen jquery så gissade jag att plain-text skulle hjälpa.

Jag löste det på egen hand, hade missat <ul>-taggarna, tack ändå.

Ursprungligen av klarabara:

Då det begav sig klistrade jag koden (som jag uppfattade var det som skapade problemet) i -som föreslaget- en pastebin, vilket inte blev rätt. Det går bra att specificera i vilken form ni behöver infon, det var inte helt självklart för mig; se koden plain eller ha ett fungerande exempel. Det kändes inte helt lätt att urskilja och skapa en js-fiddle av en wordpress-widget men jag kan ha fel. Eftersom det handlade om markup och ingen jquery så gissade jag att plain-text skulle hjälpa.

Jag löste det på egen hand, hade missat <ul>-taggarna, tack ändå.

Jag tänkte mig en jsfiddle bestående av exempel markup i html och exempel css, dvs, inget javascript alls.

1
Bevaka tråden