25 svar · 730 visningar · startad av Knäcke · sida 2 av 2
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 ;)
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 :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...
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:
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 :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