Kenents CSS SKOLA -iFrame med div. Nivå; - medel - Del 5

skapa en layout med iframe div och css

Det är enkelt och praktiskt att lägga in en I-frame i sin sida.

Innan vi börjar att koda, så planera och "rita" ut din layout - SE exempel


Den färdiga filen med iframen i - se hur det ser ut!


Jag visar hela min css-kod i min css-fil

se koden nedan

@charset "utf-8";
/* CSS Document */

#ybermorsan {
width: 900px;
height: auto;
overflow: auto;
border: 2px solid #999999;
margin-left: auto;
margin-right: auto;
}

#banner {
width: 900px;
height: 150px;
background-image: url(banner_css_skola.jpg);
}

#leftcol {
width: 178px;
height: 600px;
padding: 10px;
float: left;
border-right: 2px solid #999;
}

#maincol { /* i denna div ligger min i-frame */
width: 680px;
height: 600px;
padding: 10px;
float: left;
}

#footer {
width: 900px;
height: 50px;
clear: both;
}

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #000000;
background-color: #ffffff;
margin-top: 0px;
}

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
ont-weight: lighter;
color: #000000;
text-transform: uppercase;
}

h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #000000;
letter-spacing: 0.4em;
text-transform: uppercase;
}

a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #1322b8;
text-decoration: none;
}

a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #1322b8;
text-decoration: none;
}

a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #d20202;
text-decoration: underline;
}

a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #1322b8;
text-decoration: none;
}

.bruno a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #000000;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

.bruno a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #000000;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

.bruno a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #da894b;
text-decoration: underline overline;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

.bruno a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #000000;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}




Nu koden i HTML-dokumentet

Divarna ska ligga mellan taggarna <body> och </body>
Jag visar ALL min kod som ligger mellan taggarna <body> så kanske det blir lättare att förstå hur jag kodat.


<div id="ybermorsan"> <!-- start ybermorsan -->
<div id="banner"> <!-- start banner -->
</div> <!-- slut banner -->
<div id="leftcol"> <!-- start leftcol -->
<h2> Navigera</h2>
se att länkar har ett annat utseende här där jag gjorde länkarna till en class
<br />
<br />
<div class="bruno"><a href="start_iframe1.html"target="min_iframe">hem</a></div><br />
<div class="bruno"><a href="aa9bilder.html" target="min_iframe">bilder </a></div><br />
<div class="bruno"><a href="aa9robinson.html" target="min_iframe">robinsson</a></div><br />
<div class="bruno"><a href="aa9idol.html" target="min_iframe">idol</a></div>
</div> <!-- slut leftcol -->
<div id="maincol"> <!-- start maincol -->
<iframe src="start_iframe1.html" name="min_iframe" width="100%" marginwidth="10" height="100%" marginheight="10" scrolling="auto" frameborder="0"> <!-- koden för din Iframe -->
</iframe>
</div> <!-- slut maincol -->
<div id="footer"> <!-- start footer -->
<br />
<div align="center"> DIV - CSS - IFRAME / css-skolan En Övning av Kennet Dyrvik - www.tullangen.se - senast ändrad: 2009-11-24 </div>
</div> <!-- slut footer -->
</div> <!-- slut ybermorsan -->


Se hur min Iframe kod ser ut:( den ligger även i koden ovan.

<iframe src="start_iframe1.html" name="min_iframe" width="100%" marginwidth="10" height="100%" marginheight="10" scrolling="auto" frameborder="0"> </iframe> <!-- koden för din Iframe -->

Du måste göra en html fil som visas första gången, min fil heter: start_iframe1.html
När du ska peka in länkarna i din iframe så måste du ange: target min_iframe annars läses inte sidorna in i din Iframe.

Jag har satt width="100%" och height="100%" eftersom min div id #maincol håller min iframe på plats

En Övning av Kennet Dyrvik - www.tullangen.se - 2009-11-25