webForumDet fria alternativet

Iframes-centrera hur?

25 svar · 730 visningar · startad av Knäcke

KnäckeMedlem sedan jan. 200597 inlägg
#1

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 fungerar inte heller. I sin helhet ser det ut så här

Koden som så:

<div id="Layer1" style="position:absolute; width:424px; height:430px; z-index:1; left: 161px; top: 105px;">
<iframe src="center.htm" name="iframe2" width="410" height="415" scrolling="auto" allowtransparency="true" style="border:4px double #666666;"></iframe>
</div>
<div align="center"></div>
<div id="Layer2" style="position:absolute; width:167px; height:316px; z-index:2; left: 693px; top: 159px;">
<iframe src="menu.htm" name="iframe3" width="150" height="300" scrolling="auto" allowtransparency="true" style="border:4px double #666666;"></iframe>
</div>

Hjälp emottages tacksamt och ödmjukast :r

jarvkloMedlem sedan juli 20013 378 inlägg
#2

Visst - tar du bort högerklickspärren så...
(Även om den inte hindrar någon från att komma åt din kod, är det lättare att hjälpa till om man kan titta på hela koden utan att anstränga sig ;) )

Välkommen till wF förresten!

frankofMedlem sedan jan. 20016 874 inlägg
#3

Varför gör du inte bakgrunden i lagren?
Gör en bakgrund i huvudsidan som tål att repeteras och egena bakgrunder till dina div'ar.

och ta bort det löjliga hö.klickskyddet ;)

KnäckeMedlem sedan jan. 200597 inlägg
#4

Hoppla-sorry :( Jag tar bort det genast :) Tack för välkomnandet! Ser ut att vara ett bra forum med bra folk ;) Men Frankof-jag förstår inte vad du menar-skriv lite saktare ;) Vill du utveckla lite mer vad du menar? takkitakki ;)

(Nu är det högerklick tramset borttaget ;)

jarvkloMedlem sedan juli 20013 378 inlägg
#5

Hmm..

Om du ändrar lite i CSS:en på sidan som innehåller dina iframes så ser du vad frankof menar...

body {
	background-image: url(bg2.jpg);
[b]	background-repeat: no-repeat;[/b]
}

Problemet är alltså att bakgrundsbilden i huvudfönstret repeterar sig och har inte så mycket med dina iframes att göra ;)

KnäckeMedlem sedan jan. 200597 inlägg
#6

Aha-där ser man! Vad ska jag skriva i taggen i stället då? Bara Repeat? Eller ska jag ta bort den raden helt?

(Hihi Så dum jag känner mig NU då :) Du menar givetvis att jag ska lägga till kod! jojo-ibland är man trög :p

jarvkloMedlem sedan juli 20013 378 inlägg
#7

Inga problem, vem har inte fått hjärnsläpp ibland ;)

Ett sätt att få till bakgrunden så att den täcker hela fönstret oavsett upplösning (också i linje med vad frankof föreslår) är att prova att ta isär bilden så att du har "stenplattorna utan hundar" som bakgrund (repeterande) i huvudfönstret, och sedan lägga de två vita partierna som separata bakgrundsbilder på alla de sidor du laddar in i dina iframes eller i de divar som innehåller dina iframes...

KnäckeMedlem sedan jan. 200597 inlägg
#8

Jag ser det nu ja-det är vitt runtomkring. Nåja-en sak i sänder :) Vill du utveckla lite hur du menar? Jag läser ju så långsamt ;)

Går offline ett tag-så har du lite tid att skriva ;) Tack så länge-kommer strax tillbaka :) Detta är ju ett kanonforum!

jarvkloMedlem sedan juli 20013 378 inlägg
#9

Hmm...

Det är inte så svårt egentligen (när man en gång greppat principen villsäga ;) )...

Du skapar tre bilder:
En på dina "stenplattor" gjord på ett sätt så att denna kan repeteras. Den använder du sedan som bakgrund på din "huvudsida".
Två olika vita ("stora hunden och "lilla hunden") som du använder som bakgrund på de <div>-taggar du har runt dina <iframe>-taggar på huvudsidan...

För den första (huvudsidans bakgrund) har du redan koden klar...
För de andra två lägger du t.ex. till "background-image:url(storahund.jpg);" resp "background-image:url(lillahund.jpg);" i de style="..." som <div id="Layer1"> och <div id="Layer2"> redan har

:birp

frankofMedlem sedan jan. 20016 874 inlägg
#10

*överlåter förklarandet till "jarvklo"* :e
Det hela är egentligen rätt enkelt ;)
Skall du använda "no-repeat" bör du se till att bakrundsbilden tonar ut snygt mot bakgrundsfärgen.(och då kan du ju med fördel avända positionering också)
Det smidigaste är att använda tre bilder(som jag var inne på och jarvklo förklarade), det blir då minst "upplösningskänsligt" och flexibelt när sidan ändrar storlek av olika anledningar(mera text o.l.)

P.S. glöm inte att uppdater sidan också, så vi ser ändringen ;)

KnäckeMedlem sedan jan. 200597 inlägg
#11

Menar du att jag ska ha 2 olika bakgrunder i mina 2 layers då? Samt en stor bakgrund med nävern ;) på? (de jag sedan har iframen i)?

frankofMedlem sedan jan. 20016 874 inlägg
#12

Knäcke skrev:

Menar du att jag ska ha 2 olika bakgrunder i mina 2 layers då? Samt en stor bakgrund med nävern ;) på? (de jag sedan har iframen i)?

Boom, där satt den :e
Jajamen.
nävern tål ju att repeteras och kan då med fördel göras mindre (100 X100 px typ...)

jarvkloMedlem sedan juli 20013 378 inlägg
#13

Just så
Du har ju olika stora hundlogotyper där redan idag - därför är det enklaste att du använder två olika vita bilder, en i varje "layer", och sedan har en "naken näver" eller vad vi nu skall kalla det som repeterande bakgrund på den sida som innehåller layerkoden ;)

KnäckeMedlem sedan jan. 200597 inlägg
#14

Hej igen, jag testar detta. Återkommer-tack snälla :) Liten fråga bara...ser ni det transparenta? Dvs att i bakgrunden på varje iframe finns samma bakgrund som i hela fönstret-bara att i iframes är den ljusare (nävern). Kan ni se detta? (annars har jag fler problem där... ;)

KnäckeMedlem sedan jan. 200597 inlägg
#15

Hej, nu börjar jag nog få rätt på det :) Har lagt upp en test här http://www.classic-doguedebordeaux.nu/main.htm men som ni ser så ser man streck mellan varje "ruta" i bakgrunden-hur får jag rätt på det så att det ser ut som en hel bakgrund-inte flera ihop? Det repeteras iof inte längre i högre upplösningar, men det blir "snett"..Finns det något sätt att få mina iframes i mitten av webbläsaren i alla upplösningar? Tack på förhand från ett stormigt Skåne :)

frankofMedlem sedan jan. 20016 874 inlägg
#16

Det är något du inte kommer undan med en oregelbunden bakgrund, du får helt enkelt putsa lite på bakgrunden så den repeteras sömlöst.
Rikta upp bilden, plocka 4x4 rutor (t.ex.) och använd det som bakgrundsbild, sedan flyttar du lagren innåt/uppåt tills den bakgrunden passar med sidans bakgrund, enkelt ;) (inte min förklaring, men kodandet ;) )

R: satt å "lekte lite" med bilden, det var inte så lätt att få det snygt :e så om det är något du kan leva med skit i att ändra(eller hitta en snällare bakgrund ;) )

KnäckeMedlem sedan jan. 200597 inlägg
#17

Det kan jag leva med :) Har ändrat tillbaka nu till den större bakgrunden-det ser bättre ut. Så får jag fila lite på det med 4x4 :) Hur kan jag få det hela centrerat i alla upplösningar tro? Tack-ni är ena klippor!

frankofMedlem sedan jan. 20016 874 inlägg
#18

centrerad horisontellt är enkelt:

margin-left:auto; margin-right:auto;

sätts med fördel på huvudelementet(body t.ex.)
Centrera vertikalt ser jag ingen nytta med(och är mera "upplösningskänsligt" IMO), och är lite jobbigare, gör en sökning här så får du en del förslag

P.s. du vet om att din meny försvinner vid 800x600? (fast det går att scrolla till den ;) )

R2: hittade ett smidigt sätt att test olika fönsterstorlekar: http://tantek.com/favelets/
(jarvklos tips i en annan tråd)

KnäckeMedlem sedan jan. 200597 inlägg
#19

Okidoki-jag la in som såhär
body {
background-image: url(); margin-left:auto; margin-right:auto;
}

men det blir ingen skillnad alls. Härligheten hamnar för långt till vänster i alla högre upplösningar. Bra tips om länken där-men först måste jag ju förstå hur jag ska få det centrerat :) Det finns så många tips att jag blir förvirrad...Dina har ju funkat hittills så liiite mer hjälp tack ;) Visste inte att min meny försvinner där i 800x600 men det är ju irriterande-ge mig en lösning på hur jag ska få det att se bra ut i alla upplösningar...;)

frankofMedlem sedan jan. 20016 874 inlägg
#20

Glömde det, du bör sätta en storlek på elementet du skall centrera.

body {
background-image: url(); margin-left:auto; margin-right:auto;width:100%;
}
135 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)