Centrera sida

Posta ny tråd
  • IT & mobiler
  • Trådstartare Trådstartare Spider84
  • Startdatum Startdatum
  • Svar Svar 15
  • Visningar Visningar 875
S

Spider84

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?
 
Sv: Centrera sida

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
 
Sv: Centrera sida

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.
 
Sv: Centrera sida

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:
 
Sv: Centrera sida

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?
 
Sv: Centrera sida

Den snabba lösningen är att du sätter float:left; på #menu, samt margin-left:200px;(eller så bred #menu är) på #banner :)
 
Sv: Centrera sida

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:
 
Sv: Centrera sida

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.
 
Sv: Centrera sida

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?
 
Sv: Centrera sida

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 :)
 
Sv: Centrera sida

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 :)
 
Sv: Centrera sida

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.
 

Liknande trådar

U
NPF- diagnoser och dagens skola
Skola & Jobb Jag har funderat mycket över detta sista tiden. Enligt färska siffror ökade andelen barn som fått en adhd- diagnos med 50% mellan åren... 5 6 7
Svar
122
· Visningar
6 515
Senast: Badger
·
P
Pomeranian med allergiska besvär
Hundhälsa Hej alla! Jag ska försöka att fatta mig så kort jag kan. Jag har en Pomeranianpojke på 4 år. Han har aldrig tidigare haft några problem...
Svar
1
· Visningar
700
Senast: Jeps
·
Gunnar
  • Artikel Artikel
Bukefalos 28 år!
Bukefalosnyheter När det nu är 28 år sedan den här sidan startade kan väl det senaste året sammanfattas med att inte så mycket hänt eller förändrats på...
Svar
4
· Visningar
2 969
Senast: Tilly_85
·
J
Att lämna i smyg
Juridik & Ekonomi Jag vet inte vad jag vill med tråden men,, jag behöver lämna. Jag har koll på alla bostadsköer, privata hyresvärdar och blocket bostad... 3 4 5
Svar
88
· Visningar
16 457
Senast: Johanna1988
·

Välj ämne nedan

Ekonomi & Juridik Anläggning Hästmänniskan Gnägg Utrustning Hästvård Foder & Strö Hästhantering Träning Ridning Avel Tävling Distans Dressyr Fälttävlan Hoppning Islandshäst Körning Trav Western Övr. Grenar Hundhälsa Hundträning Hundavel & Ras Övr. Hund Katthälsa Övr. Katt Lantbruksdjur Däggdjur Övr. Djur Samhälle Juridik & Ekonomi Skola & Jobb Relationer Kropp & Själ Hemmet Trädgård & Växter Mat Kläder & Bli fin Fordon IT & Mobiler Kultur Fritid Tjatter Äldre Gravid - 1år Småbarn Övr. Barn Dagbok Hästnyheter Radannons Företag Bukefalos Bukefalosnyheter

Bukefalos, Hästnyheter, Radannonser

Allmänt, Barn, Dagbok

Hund, Katt, Andra Djur

Hästrelaterat

Tillbaka
Upp