Blijkbaar schalen mijn frames zich ... dit is NIET mijn bedoeling, wie weet raad?

[stegisoft]

In Nederlands zal je niet vlug vinden over html 5, wel over html 4, want de code doet pas zijn intrede.

Je mag gerust html 4 leren maar een beetje kijken naar html 5 of de code nog geldig is.

Ook ik zelf moet dat nog leren want mijn website is gemaakt op basis van html 4

Doch je kan niet alles weten.

Maar op deze site kan je uw website eens laten controleren of alle code correct is.

Ik gebruik dat ook om fouten weg te werken.

[fenna79]

Ik ben er in geslaagd (zichtbaar toch op het scherm) om met DIV mijn frames na te maken, ... voor velen klinkt dit wss niet zo van wauw, voor mij was het wel leuk.

Ik zit nog met enkele (vele) vragen, maar die worden zeker opgelost, ik wil een beetje stap voor stap gaan, daarom.

Ik maakte dus met div in dreamweaver in de code wat div's aan, ik ben uitgegaan van een basis achtergrond kleur (dewelke ik gewoon via de page properties heb ingesteld). En ben daarna div's gaan invoegen.

Omdat ik mijn site eigenlijk het liefst van al centraal op het scherm wil zien, ... maar me nog niet lukte, zou ik graag eens vragen of iemand daar een antwoord op heeft aub?

Mijn divs die links staan bleven allemaal enkele pixels van de kant af, ... omdat ik op een bepaalde hoogte drie div's naast mekaar zette die exact 180 + 540 + 180 px breed moesten zijn, zette ik mijn linker div op left: 0px; de middelste op left: 180px; en de rechtse dus op left: 720px;

Echter heb ik de margin op links naar 0px moeten zetten (page properties), vooraleer alles mooi tegen de linkerkant kwam te staan, maar nu staat alles, het blok in het geheel dus echt links tegen de kant.

Met mijn frames werkte ik links, onder, rechts en boven een frame in dat relatief was, dus die pasten zich automatisch aan aan de breedte zodat mijn ghele blok van menu, banner, content etc altijd mooi in het midden van een pagina stonden. Nu weet ik echter niet hoe ik dit moet bekomen, gezien ik de page properties links op 0px mrge heb gezet, ...

Verder had ik gedacht op mijn scroll in mijn content eventueel aan te passen van kleuren, maar ik las ergens op het net, ja ik ben zeer zeker wat info gaan opzoeken zelf hoor, dat die dingen blijkbaar alleen door IE ondersteunt zouden worden, ... ik weet het dus niet goed, ik weet ook niet welke html versie dit was, soms gaan die informatieve dingen ook al jaren terug etc. Is het mogelijk om met een code mijn scrolbars eventueel aan te passen? Zodat ze grafisch bvb mooi passen in het geheel, ipv zo een grijs scrolbarretje dat soms storend is van kleur alleen al.

In dreamweaver zelf wilde ik (als snelle test) in de design modus, in mijn content div wat tekst tikken om te kijken hoe de scroll etc er zou gaan uitzien, maar blijkbaar kan ik daar niet zomaar tekst in tikken, blijkbaar selecteer ik dan gewoon de hele content div ... en tikken gaat dan niet, alleen via de code kan ik wel tekst intikken, ik veronderstel dat dit ook mogelijk MOET zijn in de design modus, maar ik zal mss iets fout gedaan hebben?

Dit is zowat wat nu in mij opkomt, waar ik nu eerst verder mee wil proberen, experimenteren, ...

Dank voor jullie eventuele advies, bijdrage, info, ...

Wat ik tot nu heb gemaakt (ook met de coderingt van LEROY zoals in een van de vorige posts - heb ik een testlinkje kunnen toevoegen); resultaat kan je hier bekijken: De Beatrijsroedel

Aan leroy, het werkt blijkbaar idd goed ... MAAR ik begrijp niet dat die error file (404.html) die ik dus zelf diende aan te maken meteen op de site te zien is, ... en ook niet wat die home.html in je php code juist moet doen, want ik gebruik helemaal geen home.html code ...) Geen verwijt hoor, je weet dat ik maar een beginner ben. Misschien dat je daar iets over kan zeggen? Aan de hand van de url hierbij had ik ook graag gevraagd hoe ik dit alles mooi in he tmidden zou kunnen zetten ....

27 juni 2011 aangepast door fenna79

[stegisoft]

Je doet het redelijk goed maar de code is vrij slordig.

Ik zou dit ook eens lezen zodat je beter begrijpt

Het beste is dat je per div ook een css maakt en dan resultaat bekijken.

Dan pas de volgende div

[fenna79]

Stegisoft:

alweer mijn dank voor uw reactie.

Voor ik me op de link ga concentreren die u me gaf in uw laatste berichtje had ik toch graag even voor de duidelijkheid gevraagd wat je wil zeggen met een slordige code? Ik gebruikte om eerlijk te zijn, het bestand dat me werd aangeboden op de eerste pagina en heb deeze dan in dreamweaver ns geopend om te kijken hoe het in mekaar zat, ...

Ik zou dus echt een file moeten openen, een eerste div toevoegen en dan een css maken? Bedoel je daarmee boven in de file zelf aub? Of echt een aparte css maken (gn idee hoe je dat doet of hoe je dat definieert, ... en vooral niet hoe je dat zou koppelen aan een div.

Misschien dat je me wat meer duidelijkere info kan geven aub?

Ik ga vooreerst nu een keer die link bezoeken ... hopeliujk kan ik ook daar wat uit leren.

Dank alvast

[jv9090]

Om alles overzichtelijk te houden kan je inderdaad beter een apart css-bestand aanmaken.

Dat kan heel eenvoudig.

In jou voorbeeld moet je dan alles vanaf body { .....} tot en met #onder{....} in het css-bestand plaatsen.

In je html bestand mag je vanaf <style type="text/css"> tot en met </style> alles verwijderen.

Een css-bestand kan je eenvoudig maken in kladblok. Je slaat het daarna op als bijvoorbeeld mijnstijl.css

Kies bij het opslaan wel voor de optie "Alle bestanden".

Nu moet je in je html-bestand nog verwijzen naar het css-bestand.

Dit doe je door in het <head>-gedeelte volgende code te plaatsen:

<link rel="stylesheet" type="text/css" href="mijnstijl.css" />

Zorg er voor dat beide bestanden wel in dezelfde map staan, anders moet je je link aanpassen.

Nu staat de inhoud in je html-bestand en de lay-out in je css.

[fenna79]

Dank Jurgen!!! Ik ga dat zeker opvolgen.

@ Stegisoft (en of anderen), ik heb die link naar die div element pagina gevolgd, heb dit een keer gelezen, maar het overweldigde me blijkbaar, ... ik kan er alvast ook geen antwoord of oplossing uithalen hoe ik mijn geheel mooi in het midden van een pagina kan plaatsen bvb? Zoals ik het begrijp heb ik die floated div code helemaal niet nodig?! Ik wil gewoon drie (of evt meer) dvi's naast mekaar in het midden, zoals je kan zien op mijn voorbeeld ontwerp (www.impressus.be/dennis/welkom.php) en dus het geheel daarbij (alle divs die je ziet, niet links maar mooi in het midden van de pagina. Iemand die daar een oplossing voor weet aub?

In de link naar die div element pagina (tutorial) die je me gaf Stegisoft, begint men plots over een container etc, ... voor mij, als beginner komt dit uit het niets vallen, en is het moeilijk om te volgen bijvoorbeeld. Het lijkt me een beetje geschreven door een echte kenner die er van uit gaat dat dit voor een leek als ik vanzelfsprekend is ...

[jv9090]

Bedoel je een containerdiv? Hiermee wordt een allesomvattende div bedoeld. Met zo'n div kan je bijvoorbeeld bepalen dat alle tekst van je webpagina moet gecentreerd worden.

Ik heb dit toegepast op jou voorbeeld( via een div met de naam "wrapper")In de bijlage zal je zowel een html als css bestand vinden. Lay-out en inhoud van je webpagina zijn dus al gescheiden. Verder heb ik je code gedeeltelijk "opgeruimd". Je html-bestand bevatte immers twee keer een doc-type, header en body.

Je zal in het css-bestand zien dat alle div's van je pagina's tot op de pixel zijn geplaatst. Dit is niet de ideale manier van werken, maar zo kan het misschien wel duidelijker worden voor je wat er wordt bedoeld met een containerdiv.

Pak de zip-map uit om het voorbeeld te kunnen bekijken.

voorbeeld.zip

[fenna79]

Jürgen, kan het zijn dat er selchts 1 bestabd ub he zuo zut aub? Blijkbaar kan ik de file ook niet openen, uitgepakt, krijg ik gewoon een -bestand, ... dus geen html blijkbaar en er is ook geen css bestandje bij als ik het goed heb?

De reden waarom ik al mijn divs mooi tegen mekaar heb staan is omdat ik dit ook zo met frames deed, maar zoals al meteen in mijn topic duidelijk werd gezegd, vermeld, zijn frames blijkbaar niet meer zo interessant, ... daarom probeerde ik met mijn divs ongeveer hetzelfde resultaat te bekomen, ...

Groeten

[jv9090]

De map bevat twee bestanden: index.html en voorbeeldcss.css

Je moet rechtsklikken op de map en dan kiezen voor de optie "Alles uitpakken". Daarna gewoon de instructies volgen.

[jv9090]

Inhoud html-bestand:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>De Beatrijsroedel</title>
<link rel="stylesheet" type="text/css" href="voorbeeldcss.css" />
</head>
<body>

<div id="wrapper">
<div id="header">Hier komt de header</div>
<div id="boven"><a href="?page=testfile">Testlinkje</a></div>
<div id="content"> Hier komt de inhoud</div>
<div id="links">Links</div>
<div id="rechts">Rechts</div>
<div id="onder">Onder</div>
</div>
</body>
</html>

Inhoud css-bestand. Sla volgende code op als voorbeeldcss.css via kladblok. Kies bij Opslaan als voor "Alle bestanden":

body 

{
background-color: #333;
margin-left: 0px;
}
#wrapper
{
width: 800px; 
background: #333;
margin: 0 auto 0 auto;
}
#header
{
background: #000;

border-width: 0px;
height: 120px;
width: 900px;
top: 20px;
position: absolute;

}

#boven
{
background: yellow;
border-width: 0px;
height: 30px;
width: 900px;
top: 140px;
position: absolute;
}
#content

{
background: #fff;
border-width: 0px;
left: 447px;
height: 600px;
width: 540px;
overflow: auto;
top: 170px;
position: absolute;

}
#links

{
background: #0066FF; /*blauw*/
top: 170px;
width: 180px;
border-width: 0px;
height: 600px;
position: absolute;

}

#rechts

{
background: #0066FF; /*blauw*/
top: 170px;
width: 180px;
border-width: 0px;
left: 986px;
height: 600px;
position: absolute;

}

#onder

{
background: #9900FF;
top:770px;
height: 30px;
width: 900px;
position: absolute;

}