Ta bort left-margin vid behov.

Tråden skapades och har fått 7 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Stockholm
  • 2010-07-29 14:22

Ok. Nu ska vi se. Detta är, misstänker jag, väldigt basic, men jag har inte lyckats få till det ännu.

Jag har en div-tagg som omsluter allt mitt innehåll på sidan, och för att placera min hemsida på olika avstånd ifrån vänsterkanten och toppen på fönstret så manipulerar jag css-koden för denna tagg.

Vad jag önskar göra är att hemsidan alltid ska vara placerad på ett visst avstånd ifrån vänsterkanten så länge fönstret hos användaren inte är så litet att hela hemsidan inte syns. I sådana fall vill jag att hemsidan ska börja squeesas (ursäkta uttrycket) in mot vänsterkanten ända tills det inte finns någon marginal kvar. Sedan vill jag dessutom ha en maxgräns, där hemsidan inte flyttas ut mer åt höger efter att storleken på webläsarfönstret har överstigit en viss gräns.

Jag kan få till någonting liknande om jag helt enkelt sätter "margin-left: 5%" men detta uppfyller, som ni förstår, inte helt mitt önskemål.

Är det någon som (1) förstår min förvirrande beskrivning och (2) har något förslag på vad jag bör göra?

Jag tror att jag förstår! Jag slängde ihop ett litet exempel, men det har vissa nackdelar. De olika delarna är absolut positionerade, vilket kan vara lite mekkigt i vissa situationer. Men det är svårt att säga om det är något du behöver bry dig om utan att veta mer om sidan.

  • Medlem
  • Stockholm
  • 2010-07-29 17:04

Det där är precis vad jag var ute efter. Jag positionerar redan mina delar absolut, så det torde inte innebära några problem.

Tack så jättemycket! Jag ska titta på källkoden och försöka mig på att replikera det hela på min design. Jag återkommer!

  • Medlem
  • Stockholm
  • 2010-07-29 18:15

Jag måste erkänna att jag inte riktigt förstår vilken komponent i denna kod som gör det magiska tricket så att säga. Jag försökte applicera det hela på min hemsida utan något vidare resultat.

Vad är det som gör att left-margin liksom kapitulerar för det andra elementet?

Min hemsida finns här:
http://dl.dropbox.com/u/3394117/Hemsida/Psykologiska%20F%C3%B6reningen/Index.html

Och här är min CSS-kod:
http://dl.dropbox.com/u/3394117/Hemsida/Psykologiska%20F%C3%B6reningen/web.css

Containern (#wrap i mitt fall) har en max-bredd (max-width: 800px) och relativ position. Den relativa positionen gör så att element inuti positioneras utifrån den, men den är fortfarande kvar där den skulle vara i vanliga fall. (vilket du säkert redan vet) Innehålls-diven (#content) har också en max-bredd, och positioneras absolut utifrån den övre högra hörnet (utav #wrap). Diven med marginalen behövs egentligen inte, den är mest bara för att visa hur något kan försvinna bakom, iom att den har ett lägre z-index än #content.

Hmm, det kanske inte blev så mycket bättre...

  • Medlem
  • Stockholm
  • 2010-07-30 00:56

Jodå. Jag tror att jag är med. Det jag inte uppmärksammade var att innehållslådan var positionerad utifrån det översta högra hörnet. När jag blev uppmärksammad på det så trillade polletten ner.

Jag ändrade nu (på index-sidan då bara) och jag lyckades typ få till det antar jag.

Jag gjorde helt enkelt så att jag lade på en wrapper runt hela min tidigare div-tagg (wholepage) som omslöt allt innehåll. Sedan placerade jag denna wholepage absolut uppe i högra hörnet av min wrapper och satte wrapper max-width till 42em. Detta resulterade i den något lustiga effekten att hela sidan fortsatte att krympa så att länkmenyn försvann till vänster (snarare än att innehåll klipptes ifrån höger sida). Detta fixade jag genom att sätta en min-width på wrappern vilket gjorde susen. Varför jag var tvungen att göra detta medan du inte behövde det gör mig dock fortfarande lite förvirrad

Men nu verkar det som att jag åtminstone har löst det här rent praktiskt. Nu gäller det bara att fundera lite till på det så att jag förstår exakt vad jag har gjort. Jag är helt färsk i det här med HTML/CSS-programmering och jag måste erkänna att hela det här positioneringssystemet är det som förvirrar mig mest.

  • Medlem
  • Örebro
  • 2010-07-30 02:02

Ett tips är att använda Safaris utmärkta utvecklarverktyg Webbgranskaren. Där kan man fiffla runt lite på css-koden och direkt se resultatet av förändringen. På så sätt kan man få en känsla för hur olika instruktioner påverkar utseendet på sidan.

Man kan väl likna det vid denna Larson-strip.

  • Medlem
  • Stockholm
  • 2010-07-30 10:00

Tack för tipset! Jag använder mig utav "Developer Tools" i Chrome och antar att denna funktion är likvärdig med den du nämner. Den hjälper i alla fall mig rätt mycket när jag försöker att förstå vad sjutton jag har gjort, speciellt beträffande javascript.

1
Bevaka tråden