2007-05-14, 13:46
  #1
Medlem
ag har skrivit en sida där jag har själva innehållet uppdelat så att jag alltid har texten i mitten och bilder till höger. Det är uppbyggt så att det är två divar, kolumnen till vänster har marginaljustering, så att texten alltid snyggt slutar vid samma vidd, och sedan till höger kommer nästa kolumn med bilderna i.

Problemet är nu, att jag kan aldrig synka bildernas placering med textstycken. Jag skulle vilja att bilderna hamnade brevid ett visst stycke och de ska då följa med om man ändrar storlek etc... precis som om jag hade haft text + bilder i samma div, fast float right på bilderna. Anledningingen att jag inte har det så är just för att jag inte vet hur jag ska kunna få marginaljustering på texten och bilderna till höger om marginaljusteringen... Någon som har en lösning? Jag hade helst haft dem i samma div...

Ett annat problem jag stött på, är ankare i texten. När jag klickar på en snabbgenväg till vänster i menyn så ska jag hoppa till rätt stycke i texten. Problemet är att jag använt följande lösning till att göra kolumnerna lika långa:

#content, #left, #right {
min-height: 405px;
padding-bottom: 2010px !important;
margin-bottom: -2000px !important;
}

Det blir väldigt snyggt, men när jag hoppar till ett ankare (#-länk) så huggs allt ovanför bort. Det gäller alla webbläsare jag provat i. Ett alternativ vore faux-coloums, men jag är inte fan av den lösningen.... Någon som hittat ett bättre alternativ eller en lösning på problemet med tekniken jag använder?
Citera
2007-05-14, 14:17
  #2
Medlem
Jim-Bobs avatar
Det första problemet förstår jag inte riktigt. Det låter som om du vill ha en horisontell uppdelning av stycken inkl. bilder, men du vill av någon anledning inte uppdela det horisontellt. En obegåvad gissning är att du kanske vill först dela upp horisontellt med en container för varje stycke (inkl. bild), och sedan en vertikal uppdelning i containern mellan text och bild. Men som sagt, jag har förmodligen missförstått problemet.

Personligen föredrar jag att använda Javascript för att få lika höga kolumner hellre än små CSS-hacks, och jag håller med dig om faux-columns. Plocka ut vilken kolumn som är högst i en onload-funktion och sätt storleken på de andra till samma värde.
Jag vet inte varför det försvinner över ankaret, då jag aldrig har råkat ut för det. Om du lägger upp ett exempel kanske det går att lista ut.
Citera
2007-05-14, 14:33
  #3
Medlem
Okej! Jag ska titta närmare på javascript-lösningen. Har lösningen ett namn, om jag nu ville googla fram ett exempel?

Det jag menar med texten är:

Jag har marginaljusterad text. Snyggt. Nu vill jag in och ha bilder till höger om texten. Hur gör jag detta? Säg att all text skall sluta vid en marginal på 200px från högerkanten och i denna marginal vill jag att bilderna skall visas. Det hade varit underbart om jag bara hade kunnat köra in dem ihop med texten med en typ av float: right lösning, men jag vet inte hur jag ska få detta beteende... Jag har löst det med att avgränsa texten och bilderna med två olika kolumner (divar). Problemet med denna lösning är att bilderna inte hör samman med texten - jag vill ju att texten i ett stycke står bredvid själva bilden.
Citera
2007-05-14, 15:06
  #4
Medlem
Jim-Bobs avatar
Hoppas att jag förstått det rätt nu.
Kod:
p { text-align:justify;	margin-right:200px; }
img { float:right; }
Då ska du bara behöva lägga bilder och paragrafer i den ordning du vill ha dem.

Här skrev jag hur man får lika höga objekt i JS en gång i tiden. Den där funktionen är bara för 2 kolumner, så du måste antingen köra den tre gånger eller lägga till ett par rader för att få den att fungera för 3 kolumner.
Jag ser även att jag skrev att den är för Firefox, men när jag tittar på den nu tycker jag att den ser ut att fungera i IE (men jag har inte testat, så jag vet inte säkert).
Citera
2007-05-15, 17:45
  #5
Medlem
Går det att sätta att alla element utom bilder i en div har margin-right: 200px? Jag tänkte något som
#content * {
margin-right: 200px;
}

#content img {
float: right;
margin-right: 10px;
}

men jag vet inte huvuvida * är supportad i fler webbläsare än IE
Citera
2007-05-16, 09:42
  #6
Medlem
Jim-Bobs avatar
Det finns en sådan CSS-selector.
Kod:
#content *:not(img){
margin-right: 200px;
}
Det väljer alla element som inte är ett img-element som är en ättling till ett element med id=content.
Citera

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in