Hej igen 
Hemma efter en tids arbete. Testade ovanstående men det fungerar inte...heller 
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 
Iframes-centrera hur?
25 svar · 787 visningar · startad av Knäcke · sida 2 av 2
Trådstarten, av Knäcke
Hej alla, Jag är osäker på om jag postar i rätt kategori men om inte kanske admin vill flytta det :) Jag har lite huvudbry med mina iframes. Det ser helt ok ut i lägre upplösningar men i högre bildas kopior på bakgrunden. Jag har lagt in definitiva positioner på båda iframes men det verkar inte fungera. Har även gjort en tabell med 100% height och width som jag placerat innehållet i-men det fung
Läs hela trådstarten →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>
Vet inte 
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...
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:
- Du skapar en div som alltid är centrerad. (#Container)
- 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)...
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
Hmm...
Visst använder du iframes...
Kolla din kod igen så får du se 
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 