iframes in combinatie met tabellen?

14 april 2010

Ik ben echt niet goed in het maken van websites en dergelijke, mijn codes zijn dus ook volledig fout en ik haal alles door elkaar, maar dat weet ik zelf en dat maakt me niet uit voor mij (: omdat hetgeen ik wil misschien moeilijk uit te leggen, zal ik het even proberen uit te leggen aan de hand van deze afbeelding.

Zo wil ik dat het eruit komt te zien. Het rode vlak is dus mijn layout, die moet los staan van de achtergrond (dit is het witte deel). Ik wil dat de layout bovenaan de pagina staat, maar wel horizontaal gecentreerd.

Het groene vlak is het menu in mijn layout. Stel dat ik bijvoorbeeld 3 categorieën heb, om het nu simpel te houden neem ik 1) Home 2) About 3) Contact. Ik typ deze tekst al OP de layout zelf, zodat de layout zelf er zo uit komt te zien:

Met bovenstaande (proef )layout wil ik dus werken. Om de tekst 1) Home 2) About en 3) Contact 'klikbaar' te maken, importeer ik de afbeelding in Imageready en 'slice' ik de afbeelding. Ik geef als target 'contentframe' in, want ik wil dat mijn frame (dat op de plaats van het blauwe vak moet komen) zo heet, en dat als ik bijvoorbeeld op 1) Home klik, dat deze pagina dan geladen wordt in het 'contentframe', het blauwe vak dus.

Na de layout 'gesliced' te hebben in Imageready, bekom ik de volgende code:

<html>

<head>

<title>Voorbeeld</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">



<table id="Table_01" width="711" height="465" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="4">

<img src="images/_lay1_01.gif" width="711" height="21" alt=""></td>

</tr>

<tr>

<td rowspan="4">

<img src="images/_lay1_02.gif" width="25" height="443" alt=""></td>

<td>

<a href="/home" target="contentframe">

<img src="images/Home.gif" width="148" height="44" border="0" alt=""></a></td>

<td colspan="2" rowspan="2">

<img src="images/_lay1_04.gif" width="538" height="103" alt=""></td>

</tr>

<tr>

<td>

<a href="/about" target="contentframe">

<img src="images/About.gif" width="148" height="59" border="0" alt=""></a></td>

</tr>

<tr>

<td colspan="2">

<a href="/contact" target="contentframe">

<img src="images/Contact.gif" width="152" height="45" border="0" alt=""></a></td>

<td rowspan="2">

<img src="images/_lay1_07.gif" width="534" height="340" alt=""></td>

</tr>

<tr>

<td colspan="2">

<img src="images/_lay1_08.gif" width="152" height="295" alt=""></td>

</tr>

<tr>

<td>

<img src="images/spacer.gif" width="25" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="148" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="4" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="534" height="1" alt=""></td>

</tr>

</table>



</body>

</html>

Nu wil ik dus in het blauwe vlak een iframe, zodat mijn pagina's kunnen geladen worden in dit frame als ik op 1) Home, 2) About of 3) Contact klik. Maar hoe doe ik dit? De layout zelf moet namelijk ook nog gecentreerd blijven. Indien ik gewoon een basis iframe code plak, staat mijn iframe ofwel helemaal bovenaan de layout, ofwel staat hij wél op de layout, maar krijg ik hem niet gecentreerd.

Kan iemand misschien helpen? Groetjes

jv9090 · 14 april 2010

Lang geleden dat ik me met html heb bezig gehouden, maar het gebruik van tabellen is niet meer in. Zeker als je ze gebruikt voor je lay-out. Je kan beter overstappen op DIV.

Dat heb ik nog niet onder de knie dus kan je er ook niet direct mee verder helpen. Het bespaart je alvast heel wat code.

16 april 2010

Okee en weet iemand hoe ik dit dan met div doe? (:

stegisoft · 16 april 2010

Een voorbeeld met div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<!--

*

{

border: #333 0 solid;

margin: 0;

padding: 0;

}

html

{

font-size: 75%;

height: 100%;

}

body

{

background: #CCC;

font: 1em/1.6 Verdana;

height: 100%;

padding: 0 10px;

}

h1

{

font-size: 2em;

}

h2

{

font-size: 1.33em;

}

h1, p

{

margin: 5px 0;

padding: 5px 0;

}

#header

{

background: #66F;

border-width: 1px;

height: 100px;

position: relative;

top: 10px;

}

#content

{

background: #FFF;

border-width: 1px;

bottom: 72px;

left: 210px;

overflow: auto;

padding: 0 10px;

position: absolute;

right: 210px;

top: 122px;

}

#extra, #nav

{

background: #66F;

border-width: 1px;

bottom: 72px;

overflow: auto;

padding: 10px;

position: absolute;

top: 122px;

width: 168px;

}

#extra

{

right: 10px;

}

#nav

{

left: 10px;

}

#nav h2

{

text-align: center;

}

#nav ul

{

list-style: none;

}

#nav li

{

padding-bottom: 4px;

}

#nav a

{

background: #CCC;

border-width: 1px;

color: #333;

display: block;

font-weight: bold;

padding: 5px;

text-decoration: none;

}

#nav a:hover

{

background: #FFF;

}

#footer

{

background: #66F;

border-width: 1px;

bottom: 10px;

font-size: 0.8em;

height: 50px;

left: 10px;

line-height: 50px;

position: absolute;

right: 10px;

text-align: center;

}

-->

</style>

<!--[if IE]>

html

{

overflow: auto;

}

</style>

<![endif]-->

</head>

<body>

<h1>Lorem ipsum</h1>

</div>

</div>

<ul>

</ul>

</div>

<div id="footer">© nope -› geen copyright ;-)</div>

</body>

</html>

leroy · 10 mei 2010

VEEEEEL TE veel code.

Heel simpel met div is hetvolgende. Let wel op. Ik gebruik even GEEN CSS maar ik stop alles in de desbetreffende DIV als style element.

Ik begin bij de body tag dus.

<body>
<div id="website" style="width:600px; border:#9a0000 solid 4px; height:430px; margin:0 auto">
   <div id="menu" style="width:130px; float:left; background:#00FF00; border-right:#9a0000 solid 4px; height:100%">
       <ul>
           <li><a href="">Home</a></li>
           <li><a href="">About</a></li>
           <li><a href="">Contact</a></li>
       </ul>
   </div>
   <div id="content" style="background:#0000FF; height:100%">
       Hier komt je content
   </div>
</div>
</body>
</html>

Getest, en werkt. Ik heb geen linkjes gebruikt, maar dat lukt je denk ik voor de rest wel.

Ik raad het wel af om Frames te gebruiken. Dit is ZEER slecht! Je komt namelijk heel slecht bij google te staan. en Scrollbalken zijn verschrikkelijk!!

Ik heb nog wel een stukje code voor je wat je kan gebruiken.

Op de plek van: "Hier komt je content" (in mijn voorbeeld) zet je de volgende PHP code: (Je vervangt het dus).

<?php
// configuratie
$error404 = "404.html";
$home = "home.html";

// vanaf hier niets veranderen
if(isset($_GET['page'])){
   $bestand = $_GET['page']. ".html";
   if(is_file($bestand)){
       require($bestand);
   }else{
       require($error404);
   }
}else{
   if(is_file($home)){
       require($home);
   }else{
       require($error404);
   }
}
?>

Let op!! Sla index.html nu op als index.php (dit omdat er PHP code in voor komt).

Alle pagina's die je nu maakt moeten .html als extensie hebben EN!!! moeten in dezelfde map staan als je index.php.

De paginas die je maakt, maak je ZONDER menu (dus alleen de content).

In die PHP code die er staat is een stukje configuratie. namelijk:

$error404 en $home

Dit zijn 2 dingen die hij nodig heeft. 404 is een pagina door jou gemaakt als de opgevraagde pagina NIET bestaat. en home is de homepagina.

De linkjes in je menu worden dit:

<a href="?page=test">hallo</a>

test slaat hier op het bestandje test.html

en hallo is het knopje waar de bezoeker op klikt.

de homepagina krijgt gewoon index.php of 2 puntjes (..) als href="".

De pagina werkt NIET op jouw eigen pc als je dit wilt uittesten omdat je geen webserver hebt. Dit moet online uitgetest worden!!

Als je nog vragen hebt? stel ze gerust. Ik help je graag verder.

Mocht het script niet werken, zeg het dan ook. Dit is even snel uit het hoofdje gedaan.

Groeten,

Leroy

31 mei 2010 aangepast door leroy

stegisoft · 10 mei 2010

Leroy,

Het trek op niks.

Index.php werkt helemaal niet.

index.html werkt alleen in IE8 en dan nog nogal klein en heel slecht in FF en chrome

leroy · 10 mei 2010

Leroy,
Het trek op niks.

Index.php werkt helemaal niet.

index.html werkt alleen in IE8 en dan nog nogal klein en heel slecht in FF en chrome

Stegisoft: ik citeer:

"De pagina werkt NIET op jouw eigen pc als je dit wilt uittesten omdat je geen webserver hebt. Dit moet online uitgetest worden!!"

Het is PHP, en voor PHP moet je een linux apache webserver hebben of een windows IIS server. Als je dit hebt, moet je ook nog een PHP module toevoegen en een PHP.ini bestand configureren zodat alles werkt. Eer je dit hebt, ben je met linux een uurtje verder, en met windows bijna een halve dag.

of je hebt een online webhosting, en kan het daar op uittesten. Ik zal het voor de gein online zetten op mijn eigen virtuele linux webserver. En mag je beoordelen of het wel of niet werkt.

--- Even tussendoor het opstarten van mijn webserver ---

Layout Uitgetest op Chrome - werkt

Layout Uitgetest op firefox (oud en nieuw) - werkt

Layout Uitgetest op IE7 - Werkt maar geen middle alignment

Layout Uitgetest op IE8 - Werkt maar ook geen middle alignment

Na het toevoegen van een Doctype en de rest van de benodigde HTML tags lijnt hij wel uit in het midden.

De grootte van de div is zo omdat ik dat zelf ingeef.

Width:700px;

-- Server ondertussen opgestart, gaat het script uittesten --

Windows webserver - werkt

Linux webserver - werkt ook

Je kan de pagina terugvinden op:

http://leroy.corneflikweert.nl/hetwerkttoch

Je moet wel alle stappen volgen die ik vertelde.

layout kopieren, doctype toevoegen.

PHP code erin zetten.

Linkjes aanpassen.

online zetten wegen PHP gebruik.

Dus zeg het mij maar of het nou werkt of niet!

Groeten,

Leroy

10 mei 2010 aangepast door leroy

stegisoft · 10 mei 2010

Ik heb wel webserver.

Ik dacht dat position:abosule foutief was en dat het absolute moet zijn.

Bij abosule klopt dat wel maar ik kan nergens in google vinden dat abosule bestaat.

leroy · 10 mei 2010

dat wat je daar zegt is een typfoutje, maar waarschijnlijk handeld hij dat gewoon netjes af zoals het hoort.

Ik vertelde er ook bij dat ik het zo even snel uit de losse hand geschreven had. Zonder HTML of PHP editor die kleurherkenning heeft en sneltoetsen. Maar dat werkt dus gewoon wel. Dat is een typfoutje. Om dan gelijk te zeggen dat het op niks trekt???

Ik gebruik deze manier in al mijn websites die ik maak voor klanten en mensen. Danwel via bestandjes, of een database met een eigen CMS erachter.

maargoed, dit gaat offtopic. Terug naar het topic.

het werkt.. Het wordt over 10 dagen automatisch verwijderd. Dus wees er optijd bij voor het voorbeeld en de volledige broncode.

--edit--

Er moet GEEN absolute bij staan. Heb het net goed ingetypt, en werkt niet naar behoren. Verwijderd.. en werkt nu wel goed. Ook op de website aangepast in de bronpagina.

Groeten,

Leroy

stegisoft · 10 mei 2010

Nu hebt je position:abosule verwijdert en nu werkt het wel.

Dat is prima.

Inloggen

iframes in combinatie met tabellen?

Aanbevolen berichten

Gast shuttle

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Gast shuttle

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Welkom op PC Helpforum

Leden statistieken

OVER ONS

SITEMAP

Belangrijke informatie