10 svar · 918 visningar · startad av mackek
jag behöver hjälp med hur jag ska koda en iframe så att höjden på den anpassas efter hur mkt innehåll som finns i den. så att man inte behöver ha en extra skroll i framen utan bara "standard scrollen" längst ut till höger för att sidan ska bli lätt att se på och inte behöva bläddra på två ställen.
funkar vanliga html eller ska används css??
väldigt tacksam om någon kan hjälpa till med lite kodning. :)
/M
Du kan göra en iframe 100% hög, men en iframe är kanske inte rätt lösning.
Posta en länk till sidan eller posta din kod om du vill ha förslag som inte använder iframe.
Skulle nog säga att vanlig html och css alltid funkar.
Jag är ganska säker på att du inte kan fixa detta alls. Föreslår att du istället gör en "include" server-side:
1. Kolla med ditt webhotell om du behöver döpa om din "föräldrasida" till "foo.shtml" istället för "foo.html" för att den ska parsas för SSI.
2. I filen som ska inkluderas ("barnet") tar du bort ALL kod utom just den som är aktuell. Dvs alla head, body och html-taggar ska bort. Döp den till t.ex. "foo.include" så du kommer ihåg att det är en include.
3. Sätt in kodsnutten
<!--#include virtual="foo.include" -->
eller
<!--#include file="foo.include" -->
(naturligtvis med giltig sökväg) där du vill att innehållet ska dyka upp.
Klart.
Jag är beredd att hålla med Danne V. En lösning skulle kanske vara att i iframe-filen anropa ett Javascript på "parentsidan" som skickar med .clientHeight för det element som innehåller allt i iframefilen. Parentsidans Javascript sätter sen höjden på iframen.
Pseudokod:
I-frame:
Javascript:
parent.myFunction(contentDiv.clientHeight); // <- Ska alltså köras efter sidan laddats.
HTML:
<div id="myContentDiv">Bla bla bla</div>
-----------------
Parent:
Javascript:
function myFunction(intHeight)
{
document.getElementById('myIframe').style.height = intHeight;
}
Kan vara värt ett försök!
EDIT: Detta är en lösning till ditt problem, men att försöka bli av med iframen helt är en mycket bättre idé, sett ur i princip alla perspektiv.
Har gjort denna sida för en researrangör.
http://idrottforalla.se/
Allt utom själva menyn visas där i iframes som ändar storlek beroende på innehåll
Kanske något för dig
Har gjort denna sida för en researrangör.
http://idrottforalla.se/
Allt utom själva menyn visas där i iframes som ändar storlek beroende på innehåll
Kanske något för dig
Njae... din iframe ändrar inte storlek med innehållet. Du borde lägga till en scrollist eftersom flaggorna längst ner inte syns alls i alla webbläsare - just för att iframen INTE anpassar storleken. ;)
Njae... din iframe ändrar inte storlek med innehållet.
Jaha! Då förstår jag inte vad du menar.
Kolla då t. ex. länken Aktuellt, Nyheter.
Den iframen har fyllts på med nyheter i drygt två år.
Iframen blir högre o högre för varje nytt inlägg.
Jaha! Då förstår jag inte vad du menar.
Kolla då t. ex. länken Aktuellt, Nyheter.
Den iframen har fyllts på med nyheter i drygt två år.
Iframen blir högre o högre för varje nytt inlägg.
Jo, jag menar att det kanske ser bra ut och verka fungera i en del webbläsare, men inte i alla. Som jag skrev, så syns t.ex. inte flaggorna längst ner (Firefox, Safari eller Camino på Mac).
Ramar kan vara bra, men bara i en del, exceptionellt sällsynta fall.
oj många som vill hjälpa till (y) tack..
nästan pinsamt o visa koderna efterso jag verkligen är ny på dethär och det är simpel enkel html med säkerligen massor av fel. men iallafall här är min index kod. många koder som onödigt kommer om och om igen men med tanke på att jag inte börjat titta på css än eller förstår så mycket av det blir det såhär.. :OO
<html>
<head>
<title>Min hemsida</title>
<body>
<style type="text/css">
<!--
a:link { text-decoration: none; color: #FFFFFF}
a:visited { text-decoration: none; color: #FFFFFF}
a:active { text-decoration: none; color: #FFFFFF}
a:hover { text-decoration: none; color: #000000}
-->
</style>
</head>
<font face="Verdana" size="2">
<font color="#FFFFFF">
<body bgcolor=#335577>
<center>
<img src="bilder/banner.jpg">
<center>
<a target="I1" a href="right.htm">HOME</a>
<a target="I1" a href="right.htm">link</a>
</font>
<table>
<center>
<center><table border="1" background="#FFFFFF" width="1000" cellspacing="0" cellpadding="5" height="800" bordercolor="#000000">
<tr><td bgcolor="FFFFFF"> <font face="Verdana" size="1">
<font color="#806341"></font>
<iframe name="I1" height="100%" width="100%" border="0" frameborder="0" src="forstasidan.htm">
Din webbläsare stöder inte inbäddade ramar, eller så är den konfigurerad att inte visa inbäddade ramar.
</iframe>
</td>
</tr>
</table>
</font><center>
</font>
</body>
mackek skrev:
... med tanke på att jag inte börjat titta på css än eller förstår så mycket av det blir det såhär.. :OO
Alla börjar nånstans. Men jag tror inte du behöver en iframe, tvärtom, det blir bättre utan.
Gjorde en enkel template som du kan testa dig fram med, började stoppa in förklaringar i koden men det tog mycket mer tid så du får fråga om det jag missat förklara. Förklaringarna ska du ta bort när du läst dem. Det finns gott om exempelkod ute, men allt vettigt är på engelska.
Apropå engelska taggnamn, det är ok med svenska namn utan prickar. Här är en "start"-sida:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Min Hemsida</title>
<style type="text/css">
/* lista cssreglerna i den ordning elementen kommer i htmlkoden, undantaget alla generiska taggar som du listar först */
html,
body {
padding: 0;
margin: 0;
height:100%; /* referens för min-height på pagewrapper */
}
body {
font: 88%/1.2 verdana, geneva, sans-serif; /* alla fontegenskaper kan sättas samtidigt, men utlämnade värden resettas, font-size i % på body dödar en storlekändrings-bug i IE, /1.2 är line-height: 1.2xfont-size (det är faktorn som ärvs) */
background: #000;
color: #fff;
}
h1, h2, h3, h4, p {
margin: 0 10px; /* webbläsare ger annars olika marginaler */
}
/* tumregel för länkars pseudo-class ordning i IE: LoVe Foils HAte */
a, a:link { text-decoration:none; color:#fff} /* regler för alla länkar, a är alla a-taggar, a:link är de a-taggar som läsaren ser är länkar (det räcker med bara a) */
a:visited { } /* om något ska ändras när länken finns listad i webbläsarens historik */
a:focus { } /* när länken har tangentbordsfocus, stöds inte av IE */
a:hover { color: #000} /* tre färgsiffror är samma som tre dubbla tecken: #abc = #aabbcc */
a:active { } /* när länken har tangentbordsfocus eller under tiden musknappen är nedtryckt, stöds bara av IE */
#pagewrapper {
margin: 0 auto; /* centrerar sidan på större skärmar */
border-right: 200px solid #573; /* borderfärgen blir bakgrund för för sidebar */
min-height: 100%; /* sidan är minst lika hög som fönstret */
width: 800px;
background: #357; /* blir innehållets bakgrund */
}
* html #pagewrapper { /* "the Star-Html-hack" är egentligen inte ett "hack" utan är en fullt giltig selector som bara fungerar i IE5-6 (bygger på att IE tror att det finns en förälder till html)*/
height: 100%; /* IE5-6 låter innehållet öka höjden utöver satt höjd (men inte om divens overflow är satt till hidden, auto eller scroll)*/
}
#header {
position: relative; /* IE6 behöver position för att visa det som flyttas ut me negativ marginal */
margin-right: -200px;
padding-top: 100px; /* ger extra höjd för bakgrundsbilden ovanför navigeringsmenyn */
height: 40px; /* vidd eller höjd behövs för att IE6-7 ska sätta "hasLayout" och rendera blocket som block */
background: #735 url(bilder/banner.jpg) no-repeat 50% 0; /* sätter alla bakgrundsegenskaper, men utlämnade värden resettas. första positionssiffran är hor. andra är höjd */
}
#contactpage #header {
background-image: url(bilder/banner1.jpg); /* byter bakgrundsbild för kontaktsidans header */
}
#navigation {
margin: 0; /* t.ex. IE ger annars listan en vänstermarginal på c:a 30px */
padding: 0; /* andra t.ex. FF ger annars en vänsterpadding på c:a 30px */
height: 40px; /* listan behållare är ett block och tar tillgänglig bredd */
background: #375;
text-align: center; /* centrerar listan om den har display:inline */
}
#navigation li {
display: inline; /* ger listan textegenskaper */
list-style-type: none; /* (bara för kännedom, inline list-items ska inte få bullets när de har display:inline) */
}
#navigation a { /* selectorns specificity: en id, ett element = 100 och 1 */
margin: 0 20px; /* t.ex. noll topp-bottenmarginaler och 20px sidomarginaler */
font-weight: bold;
line-height: 40px; /* höjdcentrerar textraden */
text-transform: uppercase;
text-decoration: none;
color: #fff;
}
#navigation a:hover { /* selectorns specificity: en id, ett element, en klass = 100 och 1 och 10 vilket väger tyngre */
color: #000;
}
#sidebar {
position: relative; /* IE6 */
float: right;
margin-right: -200px; /* drar ut sidebar över den färgade bordern */
padding-bottom: 50px; /* buffert mot överlappning av footer */
width: 200px;
}
#content {
padding-bottom: 50px; /* buffert som större innehåll kan trycka med när footern ska tryckas nedåt, den är ju flyttad upp med en negativ toppmarginal */
}
#footer{
margin: -50px auto 0; /* toppmarginal höger/vänster-marginaler bottenmarginal (samma som -50px auto 0 auto)*/
width: 1000px;
height: 50px;
overflow: hidden; /* skyddar mot "collapsing margins" dvs att marginalen på paragrafen här räknas till förälderns marginal, vilket skulle ge footer en bottenmarginal på 0+10px, hasLayout skyddar i IE6-7 */
background: #537;
text-align: center;
line-height: 50px; /* samma som höjden centrerar textraden */
}
</style>
</head>
<body id="homepage"><!-- sätt unika namn på sidornas bodytagg -->
<div id="pagewrapper">
<div id="header"><!-- samma html på alla sidor, men kan göras olika via css med hjälp av det unika namnet på bodytaggen -->
<ul id="navigation"><!-- horisontell meny på varje sida -->
<li><a href="index.html">home</a></li>
<li><a href="right.html">link</a></li>
</ul>
</div>
<div id="sidebar"><!-- vertikal meny, brukar vara olika på olika sidor -->
<p>Meny med andra länkar eller t.ex. bildlänkar eller annonser.</p>
</div>
<div id="content"><!-- allt eget innehåll för den här sidan -->
<h1>Förstasidan</h1>
<p>Förstasidans innehåll</p>
</div>
</div>
<div id="footer"><!-- information på varje sida -->
<p>© 2009 mackek på wF</p>
</div>
</body>
</html>
tack så mkt för layout koden du skickade, den ser bra ut!
men jag har en fråga (eller väldigt många) :p men..
den här 'annons/bild spalten' syns den bara på första sidan eller visas den vid sidanom alla undersidor?
när jag gör mina undersidor, kan jag göra dom i vanlig html som jag normalt gör länkade från denhär css index sidan eller ligger alla sidors information/innehåll i denna index sidans kodning?
:)