PDA

Visa fullständig version : Centrera sida

Spider84
2007-01-17, 10:18
Om man har en bakgrund på en sida och sedan själva sidan med text, banner m.m. i mitten, hur kodar man?

Jag vet att det krävs javascript, men jag och javascript är inte världens polare...jag borde verkligen lära mig när jag har tid (när jag nu har det).

Någon som kan hjälpa mig med kodningen?
nidron
2007-01-17, 13:22
Javascript?

Jag lade upp två exempel, och hoppas jag förstått dig rätt :)

Centrerad bild i <body> (http://nidron.net/fixup/center_bakgrund.htm)
Centrerad <div> (http://nidron.net/fixup/center_div.htm)
Spider84
2007-01-17, 13:26
Den centrerade diven var det jag tänkte på främst, men hur tusan har du fått den att bli centrerad? Ser inget i kodningen, eller så är jag blind som vanligt :p
nidron
2007-01-17, 13:39
Hehe, det är nog inte så lätt att se just vad det är som gör den centrerad :D

Först sätter du en bredd på <div>:en (i mitt fall #container som jag tror jag kallat den för) eftersom <div>:ar är blockelement och därför blir så breda som det finns utrymme till.
Därefter sätter du margin till auto i sidled.

Koden kan alltså se ut såhär:

#divnamn {
width:400px;
margin:0 auto;
}

Det första värdet(noll) i margin reglerar utrymmet under och över, det andra värdet(auto) reglerar utrymmet till höger och vänster.
Spider84
2007-01-17, 15:13
Ah margin: auto;
Har jag använt förr någon gång tror jag. Jag har bara glömt bort det. :o

Tack så mycket!! :bow:
nidron
2007-01-17, 16:34
Inga problem :)
Spider84
2007-01-17, 20:40
Så till nästa problem.

Sidan ser ut så här (hoppas det är okej att jag länkar till den för moderatorn då det inte är något på den = ingen reklam).

http://www.akademiskridkonst.se/katrin/index.html

Kodningen för divarna ser ut så här:
#content {
width: 800px;
margin: auto;
height: 620px;
background: #DBE4EB;
border: #000 7px ridge;
overflow: auto;
}


#menu {
width: 200px;
height: 618px;
background: #A2B9CB;
border: 0;
border-right: 2px solid #000;
}

#logo {
width: 200px;
height: 160px;
background: #565D3B;
border: 0;
border-bottom: 2px solid #000;
}

#banner {
width: 600px;
height: 160px;
background: #A2B9CB;
border: 0;
border-bottom: 2px solid;

Banner diven ska såklart ligga bredvid den gröna längst upp. Men jag kan inte lyckas få den dit. Har testat utan position, med position absolute (då stämmer det inte med FF och IE) och relative. Något bra tips för att få den dit den ska som funkar i de flesta webläsare?
nidron
2007-01-17, 22:20
Den snabba lösningen är att du sätter float:left; på #menu, samt margin-left:200px;(eller så bred #menu är) på #banner :)
Spider84
2007-01-18, 08:56
Men åh vad efter jag är ibland. Det där har jag också gjort förr. :crazy:
Suck...för länge sedan jag sysslade med det.

Tack så mycket! :bow:
nidron
2007-01-18, 09:21
(fortfarande) inga problem :)
Spider84
2007-01-18, 10:05
Funkar i FF och Opera, men givetvis ska IE strula...suck...som vanligt.

Samma länk till sidan.
Länken till css'n är:

http://www.akademiskridkonst.se/katrin/content.css
nidron
2007-01-18, 10:11
Problemet uppstår i IE eftersom #banner är några pixlar för bred. Att det ser bra ut i FF, medan du måste minska bredden i IE kan bero på att du råkat ut för box model problem eller att <div>:arna's border tolkas olika.
Spider84
2007-01-18, 10:12
Just det. Det minns jag något om. Man måste koda för att "lura"IE.
men jag minns tusan inte hur man kodade. inherit någonting?
nidron
2007-01-18, 10:17
Använder man rätt doctype och inte skriver ngt i filen ovanför doctypen så brukar IE inte gå in i quirks mode.
För att lösa box model problem kan man istället för att sätta padding på en div, lägga in en div inuti som man sätter margin på istället för padding på den yttre :)

Måste tyvärr kila ut med vovven nu, så jag får titta på koden senare :)
nidron
2007-01-18, 11:46
Jag tror jag kom på vad problemet är. Det beror antagligen inte på box model problem, utan på att du använder overflow:auto; på den yttre <div>:en. IE "snor" ca 10px för att förbereda för en scrollist, medan FF inte gör det(eller så lägger FF till ca 10px på den width som är satt). Jag brukar aldrig råka ut för problemet själv, eftersom jag tycker det räcker med den scrollist som <body> har :)
Spider84
2007-01-19, 13:00
Vad trött jag blir på explorer, som vanligt. :crazy:

Tog bort scrollen, som var helt onödig. Har nog bara använt den för att kolla exakta pixlar på höjden av menyn tror jag.
Det löste en del av problemet, men inte allt.

Om man nu kollar på sidan ser det bra ut i FF och Opera (en pixel för kort på bannern tror jag), men i IE tycker den att bannern är för bred och lägger den nere. Tar jag då bort några pixlar så lägger den upp den, men med ett glapp mellan banner delen och logg delen.