frames vastzetten en een gedeelte lijnen weg krijgen van de frame

johan79 · 30 jun 2014

hallo,

ik probeer een website te maken met frames.
nu kom ik al een stukje verder, veel ervaring heb ik er niet in.

nu heb ik alleen dat de frames een eigen leven leiden als ik het beeld verklein of op een kleinere laptop ga bekijken.
wie kan me uitleggen hoe ik ze vast moet zetten??

ik heb een plaatje toegevoegd.
nu wil ik de gele lijnen weg hebben, kan dat??

gr. johan

Jedi · 30 jun 2014

Die procenten dat is een probleem.
Wil je dat de verhoudingen gelijk blijven gebruik dan vaste waarden.
En frames....... ooit dacht ik dat ik nooit css zou kunnen leren, maar ik zou nu niet anders meer willen.
Frames zijn echt achterhaald. Als je wilt dan wil ik je wel helpen om te leren hoe je met css je frames kunt vervangen.

johan79 · 30 jun 2014

ik weet dat het achterhaald is, 10 jaar terug ooit een halve cursus website desing gedaan.
maar nooit java of css gehad of gedaan.
lijkt ingewikkeld, maar zoals met alles moet je het gewoon vaak en veel doen.
mocht het niet veel werk zijn mag je het wel uitleggen hoe je frames maakt met css

Jedi · 30 jun 2014

Goed,

allereerst maak je 2 textbestanden aan en die noem je css.css en index.html
Ik gebruik notepad++, een heel fijn hulpje tijdens het programmeren.

de index.html vul je met

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Frames, maar dan met CSS !</title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>

</body>
</html>

Er hoort standaard meer in, maar dat is nu niet van belang.

In css.css zet je

body, html{
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%; /* = 10px */
}

#blok {
height: 234px;
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #000000
}

#links {
float: left;
height: 134px;
width: 100px;
background-color: #3ADF00
}

#rechts {
float: right;
height: 134px;
width: 175px;
background-color: #8904B1
}

door die verschillende kleuren zie je straks beter wat er bedoeld wordt.

in index.html zet je nu tussen <body> en </body>

<div id="blok">
<div id="links"></div>
<div id="rechts"></div>
</div>

start nu index.html

Je ziet nu in het midden een zwart blok, met aan de linkerkant een groen blok en aan de rechterkant een paars blok.

Het blok is het deel waar je hele website in komt. De gekleurde blokken zijn je frames, maar dan in css.

Speel eens wat met de hoogte en breedte en kijk of je snapt wat er gebeurt.

johan79 · 1 jul 2014

hey,

ben een beetje aan het spelen geweest.
ik weet hoe ik met getallen de hoogte en wijdte kan aanpassen.
maar hoe krijg ik nu een <div id> voor de tussenstuk, tussen de groen en paars?
en hoe kan ik die horizon delen zodat ik bovenste stuk bedrijfsnaam kan zetten en daar onder het adres enz...

Jedi · 1 jul 2014

Hoho, jij wilt wel heel erg snel gaan.

Dat komt allemaal aan de beurt, maar het is echt belangrijk dat je de basis heel goed doorhebt.

Je hebt dus al gespeeld met de hoogte en breedte.
Heb je ook ontdekt, dat als je de linker div groot maakt, dat dan de rechter div naar beneden gaat ?
Ook kun je ze allebei float:left meegeven. Dit geeft weer hele andere inzichten.

Goed, de pagina indeling, want daar ging het tenslotte om.

Pas het blok aan:

#blok {
height: 800px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #000000
}

Ook links en recht aanpassen:

#links {
float: left;
height: 400px;
width: 1000px;
background-color: #3ADF00
}

#rechts {
float: left;
height: 400px;
width: 1000px;
background-color: #8904B1
}

en voila: 2 frames !!!!!!!!.

Om de frames te vullen, zet je tekst tussen de begin en eind div:
<div id="links">hier komt heel veel tekst, maar nu even niet</div>
<div id="rechts">deze tekst komt in het onderste blok te staan.</div>

Als je nu van beide divs de achtergrond wit maakt (#ffffff), dan zie je het effect beter.

Mocht je meerdere lagen willen hebben, dan weet je nu hoe dat moet.
Zorg er wel voor dat de opgetelde hoogte niet de hoogte van het blok overschrijdt. Dat staat niet mooi.

Mocht het niet geheel duidelijk zijn, dit bedoel ik:

#laag1 {
float: left;
height: 200px;
width: 1000px;
background-color: #8904B1
}
#laag2 {
float: left;
height: 200px;
width: 1000px;
background-color: #000000
}
#laag3 {
float: left;
height: 100px;
width: 1000px;
background-color: #8904B1
}
#laag4 {
float: left;
height: 100px;
width: 1000px;
background-color: #ffffff
}
#laag5 {
float: left;
height: 200px;
width: 1000px;
background-color: #8904B1
}

en dan in je index.html:

<div id="laag1"></div>
<div id="laag2"></div>
<div id="laag3"></div>
<div id="laag4"></div>
<div id="laag5"></div>

Jedi · 1 jul 2014

Goed, als je in het begin goed gekeken hebt, dan zag ja al, dat links en rechts IN blok zaten.
Nesten noemt men dat.
Op dezelfde manier gaan we nu de bovenrand vullen.

Zeg dat je de bovenrand voor de bedrijfsnaam 100 pixels wilt hebben met aan de linkerkant een blok van 100x100 pixels:
Blok blijft hetzelfde

#boven {
float: left;
height: 100px;
width: 1000px;
background-color: #E0F8E0
}

Nu gaan we deze weer onderverdelen in 100 en 900 pixels.

#bovenlinks {
float: left;
height: 100px;
width: 100px;
background-color: #2E64FE
}

#bovenrechts {
float: left;
height: 100px;
width: 900px;
background-color: #FE9A2E
}

en in index.html:

<div id="blok">
<div id="boven">
<div id="bovenlinks"></div>
<div id="bovenrechts"></div>
</div>

zie je hoe het in elkaar steekt ? blok omvat alles, daarbinnen zit boven en daar weer binnen zit bovenlinks en bovenrechts.
Nu gaan we de bedrijfsgegevensbalk maken. Zeg 30 hoog.
Om even te laten zien wat er allemaal mogelijk is, maak ik hier 1 laag van:

#bedrijfsgegevensbalk {
float: left;
height: 30px;
width: 1000px;
background-color: #0B3B0B
}

<div id="bedrijfsgegevensbalk"></div>

Omdat deze ONDER "boven" komt, moet je dus ook zorgen dat de div BUITEN "boven" komt!.

<div id="blok">
<div id="boven">
<div id="bovenlinks"></div>
<div id="bovenrechts"></div>
</div>
<div id="bedrijfsgegevensbalk"></div>
</div>

Zo, weer genoeg om mee te experimenteren.

Ik wacht je reactie weer af.

johan79 · 1 jul 2014

super van je uitleg.
ik wist dus niet dat je eigenlijk van buiten naar binnen aan het opbouwen was.
eerst een boven balk, die je daarna weer onderverdeeld.

vorige keer zag ik wel als je met getallen speelt soms ook de vensters ergens anders kwam te staan

Jedi · 1 jul 2014

Ja dat klopt. Afhankelijk van wat je wilt moet je zorgen dat de totale breedte en hoogte binnen het blok blijven.

Door met kleuren te werken zie je beter hoe de verschillende "frames" er uit zien.

Later als je klaar bent maak je er 1 kleur van.

Zoals ik het uitleg zal het niet allemaal volgens de richtlijnen zijn, maar het gaat er om dat je begrijpt wat er bedoeld word.
Als je er straks beter in thuis bent kun je op internet cursussen zoeken die er veel dieper op ingaan en meer volgens de richtlijnen werken. :d
Je begrijpt dan beter waar ze het over hebben.

johan79 · 1 jul 2014

ik wilde even kijken of ik het begreep.
nu wilde ik onder de bedrijfsgegevensbalk aan de linkerkant een menu gedeelte hebben en daarnaast aan de rechterkant een "doel" venster waar later de linken van het menu in geopend moeten gaan worden.

denk dat ik het wel goed heb gedaan:

body, html{
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%; /* = 10px */
}

#blok {
height: 800px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #000000
}

#boven {
float: left;
height: 100px;
width: 1000px;
background-color: #E0F8E0
}

#bovenlinks {
float: left;
height: 100px;
width: 100px;
background-color: #2E64FE
}

#bovenrechts {
float: left;
height: 100px;
width: 900px;
background-color: #FE9A2E
}

#bedrijfsgegevensbalk {
float: left;
height: 30px;
width: 1000px;
background-color: #0B3B0B
}

#midden {
float:left;
height:670px;
width:1000px;
background-color:#3F0;
}

#menu {
float:left;
height:670px;
width:200px;
background-color:#09F;
}

#doel {
float:left;
height:670px;
width:800px;
background-color:#C06;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Frames, maar dan met CSS !</title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>

<div id="blok">
<div id="boven">
<div id="bovenlinks"></div>
<div id="bovenrechts"></div>
</div>

<div id="bedrijfsgegevensbalk"></div>

<div id="midden">

<div id="menu"></div>
<div id="doel"></div>
</div>
</body>
</html>

ben benieuwd

Jedi · 1 jul 2014

Okee, iets te laat geplaatst zie ik ;-)
Ja het klopt bijna zoals je het hebt gemaakt.
Je bent je sluitdiv van blok kwijt.

Kijk hier hoe je het middenstuk ook op kunt delen.

Goed, het middenstuk nog, met het menu en dan nog de footer.

Even zien, hoogte 800 waarvan al 130 gebruikt is en we 30 voor de footer gebruiken.
Houden we 640 over:

#midden {
float: left;
height: 640px;
width: 1000px;
background-color: #2E64FE
}

en

<div id="midden"></div>

Dit midden gaan we echter niet opdelen zoals met d ebovenbalk, maar we gaan gelijk 2 delen maken:

bovenlinks was 100 breed, dus we maken middenlinks ook 100 breed:

#middenlinks {
float: left;
height: 640px;
width: 100px;
background-color: #2E64FE
}

en

<div id="middenlinks"></div>

Kijk naar het resultaat en vul nu de rest op:

#middenrechts {
float: left;
height: 640px;
width: 900px;
background-color: #FE9A2E
}

en uiteraard weer

<div id="middenrechts"></div>

We doen het trucje ook in de footer:

#onderlinks {
float: left;
height: 30px;
width: 100px;
background-color: #2E64FE
}

#onderrechts {
float: left;
height: 30px;
width: 900px;
background-color: #D7DF01
}

<div id="onderlinks"></div>
<div id="onderrechts"><center><font size="4" color="#000000">Dit is de footer</font></center></div>

(even een totaaloverzicht:

<div id="blok">
<div id="boven">
<div id="bovenlinks"></div>
<div id="bovenrechts"></div>
</div>
<div id="bedrijfsgegevensbalk"><center><font size="5" color="#ffffff">hier kun je uiteraard ook weer inzetten wat je wilt</font></center></div>
<div id="middenlinks"></div>
<div id="middenrechts"></div>
<div id="onderlinks"></div>
<div id="onderrechts"><center><font size="4" color="#000000">Dit is de footer</font></center></div>
</div>

)

johan79 · 1 jul 2014

waarom heb je boven wel gedeeld en wil je het midden niet doen?

valt me op dat je "blok en boven" niet afsluit met </div>
is dat omdat dit niet in een venster/frame komt? als het wel ergens in een venster/frame moet komen dat je dan juist moet sluiten met </div>?

Jedi · 2 jul 2014

Jawel, ik sluit ze beiden wel degelijk af.

Zo geef je aan wat er IN zo'n <div id> </div> zit. Nesten noemen ze dat.

Waarom ik midden niet indeel zoals boven ? Om te laten zien dat er meer mogelijkheden zijn om een siteopbouw te doen.
Ikzelf vind het makkelijk om het scherm eerst globaal in te delen en dan pas in die blokken zelf de vakken in te delen.
Zo kun je die blokken onafhankelijk van elkaar invullen.
Je zou dus eerst de footer kunnen invullen voor je met boven begint.

Als je dit onder de knie hebt, dan heb je de basis voor frames in css.
Als je naar je oude frameset kijkt, dan heb je zéker al 7 html files, terwijl je er nu maar 2 hebt. (ok, 1 html, 1 css)
Ik wacht je vragen af. :thumb:

johan79 · 2 jul 2014

het is helemaal duidelijk, al zou het soms nog wel even stoeien zijn.
maar je uitleg is wel erg duidelijk, bedakt daar voor!!

maar hoe gaan we dat nu invullen en verwijzen?

Jedi · 2 jul 2014

laten we beginnen met het menu te maken aan de linkerkant.

Even de meest makkelijke manier, met een tabel:

openen:

<div id="middenlinks">
<center>
<table>
<tr>
<td>

en weer sluiten:

</td>
</tr>
</table>
</center>
</div>

Je ziet dat het eigenlijk spiegelbeeld is met een / er bij.
Per regel gebruik je <tr><td> hier je menuknop </td></tr>

<center><table>
<tr><td>
<a href="info.html" target="middenrechts">Info</a>
</td></tr>
</table></center>

Bij 2 menuknoppen dus:

<center><table>
<tr><td>
<a href="info.html" target="middenrechts">Info</a>
</td></tr>
<tr><td>
<a href="contact.html" target="middenrechts">Contact</a>
</td></tr>
</table></center>

compleet:

<div id="middenlinks">
<center><table>
<tr><td><a href="info.html" target="middenrechts">Info</a></td></tr>
<tr><td><a href="contact.html" target="middenrechts">Contact</a></td></tr>
</table></center>
</div>

johan79 · 2 jul 2014

dat heb ik zover aangepast.
alleen had ik een map aangemaakt met info.html
tussen <body> </body> heb ik staan test info.
maar dan wordt de link geopend in een nieuw venster :-(

Jedi · 2 jul 2014

Ja dat moet ik thuis even nakijken wat er precies moet staan.

Kun je de broncode eens posten, dan kan ik zien wat er niet goed staat.

johan79 · 2 jul 2014

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Frames, maar dan met CSS !</title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>

<div id="blok">
<div id="boven">
<div id="bovenlinks"></div>
<div id="bovenrechts"></div>
</div>

<div id="bedrijfsgegevensbalk"></div>

<div id="middenlinks">
<center><table>
<tr><td><a href="info.html" target="middenrechts">Info</a></td></tr>
<tr><td><a href="contact.html" target="middenrechts">Contact</a></td></tr>
</table></center>
</div>

<div id="middenrechts"></div>

<div id="onderlinks"></div>
<div id="onderrechts"><center><font size="4" color="#000000">Dit is de footer</font></center></div>
</div>

</body>
</html>

hier de broncode

Jedi · 2 jul 2014

Ok, het blijkt dat ik al te ver heen ben en daardoor dingen te simpel zie.

Maar geen nood, het gaat goed komen !. :thumb:

Eerst het slechte nieuws:
1) je kunt met puur html niet net als bij frames een link in een ander frame openen.
2) wat ik nu uit ga leggen kun je niet op je eigen pc draaien, dit zul je op een (thuis)server moeten doen.

Het goede nieuws: er staat je zoveel moois te wachten !.

Je zult echter wel een stukje php moeten leren. Maar daar heb je alleen maar profijt van, geloof me.

Allereerst, maak van index.html index.php
Maak 2 andere php files aan met inhoud, bv contact.php, info.php
Wat je er in zet is niet van belang, het gaat er om, dat je kunt zien dat de pagina wijzigt als je op een link klikt.

Nu gaan we de linken maken/aanpassen:
Verander dit:

<center><table>
<tr><td><a href="contact.html" target="middenrechts">Contact</a></td></tr>
<tr><td><a href="info.html" target="middenrechts">Info</a></td></tr>
</table></center>

in dit:

<center><table>
<tr><td><a href="index.php?inhoud=tekst.php" target="_parent">Contact</a></td></tr>
<tr><td><a href="index.php?inhoud=info.php" target="_parent">Info</a></td></tr>
</table></center>

Je vertelt de link nu wat hij in inhoud moet laden als je op de link klikt.

PHP is een serverside scripttaal, gewoon dat je het weet.

<div id="middenrechts">
</div>

verander je nu in

<div id="middenrechts">
<?php
$css = $_REQUEST['inhoud'];
include($css);
?>
</div>

<?php
?>
hetzelfde als bij de div: het begin en het eind van iets.

$css = $_REQUEST['midden-rechts'];
$css is een variabele die je met iets kunt vullen : a = 1 a=a+1 geeft 1,2,3,4,5 enz
in dit geval laad je $css met wat er in de link staat: $_REQUEST['midden-rechts']; tekst.php of info.php

include($css); zet op deze plaats neer wat er in de php file van $css staat.

Hopelijk is het zo een beetje duidelijk, anders gewoon eens doen en proberen. Iets zien gebeuren is vaak duidelijker dan het te lezen.

johan79 · 2 jul 2014

deze regel snap ik niet echt: include($css); zet op deze plaats neer wat er in de php file van $css staat.

ik heb de dingen aangepast, maar de linken openen nog steeds in een nieuw venster ;-(

misschien doe ik iets fout?

kan ik het wel testen in XAMPP ?
daar kan ik alleen geen index.php in laden, dan opent hij gewoon dreamweaver

frames vastzetten en een gedeelte lijnen weg krijgen van de frame

Gebruiker

Bijlagen

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Wij waarderen jouw privacy