WN - css Zen Garden problem.

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - css Zen Garden problem. (https://www.wn.se/forum/showthread.php?t=20106)

Jag har försökt att

Citat:

unlearn what I have learnt and learn what I learn

...eller vad det nu var som Yoda sade i Star Wars. Genom att glömma tabeller helt och hållet och bara köra CSS för att bygga min hemsida. Men ju mer jag smutsar ner mina händer i CSS desto mer lockande blir det att gå tillbaka till tabeller som bara skulle ta mig 5 min att göra.

Iallafall jag har läst w3schools.com CSS tutorials + lite andra tutorials och försöker nu att studera hur folk har gjort Zen Garden sidorna.
http://www.csszengarden.com/
Det här är vad jag inte fattar...
1.)
Hur får dem "Zen Garden" bilden "h1.gif" att placera sig precis vid bakgrundens utritade vertikala linje?
Är det....

Citat:

#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}

margin-top: 10px - eller - float:left - som gör så att "Zen Garden" bilden inte hamnar över bakgrundsbildens position på 0px, 0px räknat från övre vänstra hörnet?

2.)
Eller är det...

Citat:

#container {
background: url(zen-bg.jpg) no-repeat top left;
padding: 0px 175px 0px 110px;
margin: 0px;
}

padding: x, x, x, x som gör att bilderna inte ligger ovanpå varandra i vänstra hörnet.
Hur ska man tolka padding värdena? Vad står första 0px för, vad står 175px för + resten? Jag kunde inte hitta referens material om den här typen av format i w3schools.com
:(

Installera web developer toolbar i FX och kör "outline block level elements" så kommer saker klarna tror jag.

På sidan så ligger h1 i: <div id="container"> som i sin tur ligger i <div id="intro"> En av dem, nämligen container i detta fall har padding:110px padding till vänster om sig.

såhär fungerar paddingen:
padding: uppe höger nere vänster;

Alltså clockwise fördelning av värdena.

Jag skulle rekommendera att du tar en titt på (http://msdn.microsoft.com/library/de...node_entry.asp)

Citat:

padding: 0px 175px 0px 110px;

är hur mycket "luft" som finns emellan innehållet i #container och 175px står för 175 pixlar. (padding: 0px=toppadding 175px=right padding 0px=bottom padding 110px=left padding;

Coolt en Plugin till min Firefox!
Vet nån förresten om nåt bra plugin som sparar hela innehåll av en CSS hemsida? Hittills måste jag klicka på varje enskild bild för att få med allt inkl. CSS filen.

Jag tror du kan göra det med web developer toolbar som Björn rekommenderade.

Citat:

Originally posted by wizzo@Mar 20 2007, 23:22
Coolt en Plugin till min Firefox
Vet nån förresten om nåt bra plugin som sparar hela innehåll av en CSS hemsida? Hittills måste jag klicka på varje enskild bild för att få med allt inkl. CSS filen.

Annars blir det nice om man tar spara sidan i opera.. Det är mitt standardknep iaf.

Hur gör du exakt för att spara hela innehåll av en CSS hemsida igen?
Jag laddade ner och tröck på meny alternativen Opera> File> Save as
men får fortfarande som i Firefox bara ner html markup filen inte CSS filen eller bild filerna. Vad gör jag för fel?

Har inte opera installerat just nu.. men det finns 3 olika val där under spara, testa dem alla, en av dem gör det du önskar.

eller ta bara "save page as" -> web page complete, i FX.. sen dra hem cssen separat. Den är det ju bara att surfa till i webbläsaren.

Ah jag fattar nu vad som är kruxet. Jag använder Linux: Ubuntu då får jag inte upp samma 3 vals alternativ som i Windows XP. Varken när jag använder Firefox eller Opera :( vad jobbigt!

jag byggde också allt med tabeller.. men nu går det lika snabbt (om inte snabbare) att bygga det med CSS

plus att sidan laddas snabbare då det blir mycket innehåll..

angående padding och margin.. man kan även köra:

padding-left: värde;
padding-right: värde;

etc..

sätter man padding: och sen endast ett värde så blir det värdet satt på alla sidorna..