---
title: "Iframes-centrera hur?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/119545-iframes-centrera-hur/page2"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Knäcke"
published: "2005-01-07T12:14:18.000Z"
updated: "2005-01-17T14:59:37.000Z"
replies: 25
views: 787
page: 2
pages: 2
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/119545-iframes-centrera-hur"
---

# Iframes-centrera hur?

_Sida 2 av 2._

## #21 — Knäcke, 2005-01-16T16:21Z

Hej igen :)

Hemma efter en tids arbete. Testade ovanstående men det fungerar inte...heller :l 
Hur ska jag få siten att bli centrerad i alla upplösningar? Jag blir alldeles strax helt förtvivlad och börjar gråta ohejdat om jag inte får det att fungera  :l  ;)

Permalänk: https://www.webforum.nu/p/1530961

## #22 — jarvklo, 2005-01-16T20:35Z

Hmm..

Är det såhär du menar (typ) ?

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ett exempel</title>
<style type="text/css">
<!--
html,body {
	margin:0;padding:0;height:100%;
}
#Layer1 {
	width:424px; height:430px;
	float: left;
	background-color:blue;
}
#Layer2{
  width:167px; height:316px;
  float: right;
	background-color:navy;
 }
#Container {
  position:absolute;
	height:430px;
	top:50%; margin-top:-215px; /* halva height */
	width:650px;
	left:50%; margin-left:-325px; /*halva width */
}
-->
</style>
</head>

<body>
<div id="Container">
  <div id="Layer1">Layer 1 med iframe</div>
  <div id="Layer2">Layer 2 med iframe</div>
</div>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/1531084

## #23 — Knäcke, 2005-01-16T21:03Z

Vet inte :q Vilken del av denna kod centrerar sidan i de olika upplösningarna? Är inte hemma just nu så jag kan inte lägga in koden i en test-sida för att se...

Permalänk: https://www.webforum.nu/p/1531099

## #24 — jarvklo, 2005-01-16T22:14Z

Hmm..

Det enda du behöver göra är att lägga in dina två \<iframe\>-taggar (precis som de är kodade på <http://www.classic-doguedebordeaux.nu/main.htm>)  inuti #Layer1 och #Layer2 och sedan lägga till dina bakgrundsbilder med background-image på "respektive" ställe där du har dem idag ;)

I princip funkar koden såhär:
1) Du skapar en div som alltid är centrerad. (#Container)
2) I denna lägger du de två "block" du vill ha på fast avstånd från varandra "limmade" mot #Containers vänster- resp högerkant...

CSS-Koden för #Container positionerar \<div id="Container"\> mitt på sidan genom att ange positionen för dess övre vänstra hörn till exakta mitten på sidan, och därefter justera (mha negativa marginalvärden) den "uppåt-vänster"med  "halva höjden uppåt" och "halva bredden åt vänster" pixlar 
På så sätt fås mittpunkten i \<div id=Container"\> exakt mitt på sidan.

Den här metoden funkar bara på fyrkanter med känd höjd och bredd eftersom man justerar med exakta pixelvärden...

NÅväl - När nu #Container ligger exakt mitt på sidan, läggs #Layer1 och #Layer2 ut "flytande" (med float:left resp float:right)  mot vänster- respektive högerkanten av fyrkanten #Container (de håller sig alltid där pga att #Container har fast bredd som är större än summan av bredderna på #Layer1 och #layer2)...

Permalänk: https://www.webforum.nu/p/1531143

## #25 — Knäcke, 2005-01-17T00:08Z

Hmmm..jag har inte iframes längre på siten...Enligt tips här så gjorde jag istället 3 olika bakgrundsbilder som lades i layers. Se det hela här <http://www.classic-doguedebordeaux.nu/main.htm>

Jag använder inte iframes längre på denna site...OCH framför allt....jag kodar inte själv..dreamweaver.....

Så lite långsammare förklaring så denna förstår..Tackarrrrr ;)

Permalänk: https://www.webforum.nu/p/1531183

## #26 — jarvklo, 2005-01-17T14:59Z

Hmm...

Visst använder du iframes...
Kolla din kod igen så får du se :e

Såhär ser delar av koden för <http://www.classic-doguedebordeaux.nu/main.htm> ut idag: 

```
<body>
<div id="Layer1" style="position:absolute; width:424px; height:430px; z-index:1; left: 198px; top: 101px; [b]background-image: url(storahund.jpg);[/b] layer-background-image: url(storahund.jpg); border: 1px none #000000;">
[b]  <iframe src="center.htm" name="iframe2" width="410" height="415" scrolling="auto" allowtransparency="true" style="border:4px double #666666;"></iframe>[/b]
</div>
<div align="center"></div>
<div id="Layer2" style="position:absolute; width:167px; height:316px; z-index:2; left: 765px; top: 156px; [b]background-image: url(lillahund.jpg); [/b]layer-background-image: url(lillahund.jpg); border: 1px none #000000;">
[b]    <iframe src="menu.htm" name="iframe3" width="150" height="300" scrolling="auto" allowtransparency="true" style="border:4px double #666666;"></iframe>[/b]
</div>
<p>
</p>
</body>
```

Tag de två fetmarkerade \<iframe\>-taggarna och lägg in dem i \<div id="Layer1"\> och \<div id="Layer2"\> i mitt exempel...

Tag sedan de fetmarkerade **background-image:......** från #Layer1 och #Layer2 från din nuvarande kod och lägg in dem också i mitt exempel.

Avsluta sedan med att kopiera background-image för "nävern" till  \<body\> i mitt exempel  så skall du se :birp

Permalänk: https://www.webforum.nu/p/1531445

---

Tråden på webben: https://www.webforum.nu/amne/html-css/119545-iframes-centrera-hur/page2  
Föregående sida: https://www.webforum.nu/amne/html-css/119545-iframes-centrera-hur.md
