---
title: "Centrera alla håll, fast det finns en hake..."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/131550-centrera-alla-håll-fast-det-finns-en-hake"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "bassebhu"
published: "2005-07-18T00:29:33.000Z"
updated: "2005-07-27T21:23:44.000Z"
replies: 10
views: 585
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/131550-centrera-alla-håll-fast-det-finns-en-hake"
---
# Centrera alla håll, fast det finns en hake...
## #1 — bassebhu, 2005-07-18T00:29Z
Jag vill ha en bakgrundsfärg på halva vänster skärmsida och en annan på höger sida. 50/50.
Eftersom det ska gå att ändra storleken på webbläsarfönstret så kan jag inte ha fasta storlekar på bilder, divar eller tabeller. I den vänstra diven ska det ligga en bild centrerad till mitten vertikalt och till höger horisontalt. I den högra diven ska det ligga en bild centrerad till mitten vertikalt och till vänster horisontalt.
Jag har fått till det rätt hyfsat, MEN det blir vitt utrymme underst och lite olika resultat när man ändrar storlek på fönstret.
Hur kan jag göra det bättre?
```
Hej
```
Först trodde jag att det var nåt efter sista diven men det är ju tomt. Är det jag vill uppnå omöjligt?
Tackar för svar!
Permalänk: https://www.webforum.nu/p/131550
## #2 — bassebhu, 2005-07-18T20:59Z
Någon som har idéer? Kanske bara det är på mac som detta vita dyker fram längst ner. Det är som att 100% höjd-divarna inte ändras när man ändrar storlek på webbläsarfönstret.
Permalänk: https://www.webforum.nu/p/1646961
## #3 — bassebhu, 2005-07-19T11:24Z
Någon som har förslag idag då? :)
Permalänk: https://www.webforum.nu/p/1647070
## #4 — bassebhu, 2005-07-22T02:33Z
Idag då? :)
Som jag har förstått så är det knepigt (omöjligt?) att centrera vertikalt med CSS och valign="middle" valideras ju inte?
Men min största fundering just nu är om det inte går att sätta 100% vertikalt på en div? Jag vill nämligen ha två färger bredvid varandra som bakgrund och måste då ha två divar som kan ändra storlek men som hela tiden täcker hela ytan. Med koden ovan så får jag massa ofärgat en bit ner på sidan.
Tackar för förslag...
Permalänk: https://www.webforum.nu/p/1647736
## #5 — webbebba, 2005-07-22T09:44Z
Du får bygga utifrån en tvåfärgad bakgrundsbild
Permalänk: https://www.webforum.nu/p/1647800
## #6 — doggelito, 2005-07-22T10:31Z
tycker jag känner igen problemet med att divvarna inte blir 100% hög, utan tar slut vid scrollen.
undrar om inte det har att göra med vilken doctype du använder.
det finns nog mängder med trådar här på wF om 100% höga divvar. :)
Permalänk: https://www.webforum.nu/p/1647812
## #7 — jarvklo, 2005-07-25T21:10Z
Om 100% höjd - Du kör "standards mode" och då behöver du köra med height:100% på html och body via CSS... (se t.ex. )
Rotade lite med din CSS...
Lade bl.a.in standardttrixet med kombination float:left och margin-left. Vertikal centrering gör jag med med absolutpositionering, top:50% och negativtoppm arginal som motsvarar "halva höjden" - också det ett "standardtrix" :)
```
html, body {
margin: 0; padding: 0; height:100%;
}
#left {
float: left;
width: 50%;
height: 100%;
background: #e4c0ad;
margin:0;padding:0;
}
#right {
margin:0 0 0 50%; padding:0;
height: 100%;
background: #cbab9a;
}
#leftContent {
position:absolute;
top:50%; right:50%;
margin:-49px 0 0 0;
height: 98px;
text-align: right;
}
#rightContent {
position:absolute;
top:50%; left:50%;
margin:-49px 0 0 0;
height: 98px;
text-align: left;
}
```
Det kan säkert göras elegantare och förklaras bättre...
Fråga igen om det är någon detalj som behöver mer förklaring... :bire
Permalänk: https://www.webforum.nu/p/1648595
## #8 — bassebhu, 2005-07-26T00:28Z
Tack för att du tog dig tid! Det funkade bättre...
I Safari & OmniWeb var det alldeles lysande. Precis som jag ville ha det.
I Internet Explorer för mac blev det ganska lysande. Blev en lång vertikal scroll nedåt och centrum låg en scrollandes bit ner på sidan, men annars schysst.
I FireFox blev det precis rätt layout, men där funkade inte mina rolloverscript, men det är ett annat problem.
I Opera funkade bakgrunden mycket fint, men där kom leftContent bakom rightContent.
I IE för PC så funkade det bättre än förut då divarna lade sig under varandra, men det är en glipa mellan left & right.
Vad jag ska dra för slutsats vet jag inte. Det kanske går att trimma koden ännu mer. Annars så kör jag som det är eller byter ut alltihop till en enda fast bild eller nåt.
Återigen tack jarvklo! Jag var och nosade efter nåt liknande, men kom inte på att man kunde sätta % även på margin. Absoluta mått måste jag läsa på lite mer om också.
Permalänk: https://www.webforum.nu/p/1648618
## #9 — bassebhu, 2005-07-27T20:42Z
Jag byggde om det så att jag har en hel bakgrund och sedan två små färgade
boxar med fasta mått i stället för 50/50 som bakgrund.
Jag använde det där toptip-scriptet för dead centre som alla snackar om.
Det funkar bra i alla läsare utom IE och Opera till mac. I IE så hamnar det
center horisontalt men halva huvuddiven är utanför toppen av fönstret.
I Opera så kom fortfarande leftContent bakom rightContent av nån anledning.
Är det något man kan göra nåt åt tror ni?
Har bara kollat i IE på pc (via VPC) och det får räcka.
Det kan ju inte finnas nån läsare som är känsligare tycker man :P
Min kod:
```
X
```
Om det är någon som orkar hjälpa till så vore det schysst. Har lyckats att lösa det helt med div nu iaf :D
Den validerar godkänt också!
Förutom de skumma saker jag nämt ovan så fungerar inte rollovern i mozilla/netscape. Är det något man kan fixa på nåt enkelt sätt?
Även andra förslag och alternativ som gör sidan bättre tas tacksamt emot!
Tackar alla som har tagit sig tid!
Permalänk: https://www.webforum.nu/p/1649010
## #10 — bassebhu, 2005-07-27T20:44Z
Den verkade inte gilla script-taggar, men det är ett vanligt rollover-script från dreamweaver som ligger mellan head-taggarna:
```
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
//
```
Permalänk: https://www.webforum.nu/p/1649027
---
Tråden på webben: https://www.webforum.nu/amne/html-css/131550-centrera-alla-håll-fast-det-finns-en-hake
