<div> probleem

Status
Niet open voor verdere reacties.

marc 05

Gebruiker
Lid geworden
5 sep 2006
Berichten
227
Ik probeer even uit te leggen wat ik probeer te maken.

Ik heb een frameset gemaakt, dit bestaat uit 3 stukken.

1) topframe
2) inhoudframe
3) bottomframe


Alleen het inhoudsframe kan scrollen en wijzigt telkens. De achtergronden in ieder frame zijn gefixed. Dit omdat de achtergrond van het topframe precies overloopt op het inhoudsframe.

Het inhoudsframe heeft 2 keer een divisie.

1) devisie aan de linkerkant op plaats gezet met position:absolute;
2) dan nog een devisie aan rechterkant (dit schuift over de gefixte achtergrond van het inhoudsframe, maar tussen een kader) als het scherm normale formaat heeft is het goed omdat de posities goed staan.

Nu het probleem wat ik graag verholpen zou willen hebben met <div>

Op moment dat ik op favorieten klik en dan het uitvouwscherm vastzet en nog wat kleiner maak komt bij het inhoudsframe nog de horizontale scroll in beeld.

Als je deze dan naar rechts schuift beweegt alleen hetgeen wat in de <div> staat.... de tekst wordt dan over het kader zoals ik hierboven omschreven heb getrokken. Dit omdat de achtergrond gefixed is.

Beide <div> moeten dus op de plaats blijven staan ten opzichte van de gefixte achtergrond, ook wanneer ik het scherm kleiner maar.


Is dit op te lossen met een verandering aan de <div>

Alvast bedankt!

Groeten, Marc
 
Hoi marc,
Dat is van een afstand niet goed te zeggen, want het hangt helemaal af van de exacte structuur (de html) van je pagina, en de exacte manier waarop de opmaak in elkaar zit (de css). Allebei hebben we hier niet, dus zou een antwoord een brul in de ruimte zijn. ;)

Heb je een link naar een testpagina waar alles in werking is te zien?

Met vriendelijke groet,
CSShunter
 
Hallo css hunter,

Ik heb de site nog nergens online staan... zal je binnenkort even de link geven naar de site.


Maar kan ik je deze ook ergens prive geven... wil niet dat iedereen de site al bezoekt nu deze nog niet in orde is. :D

Groeten, Marc
 
Hallo csshunter,

De link naar mijn pagina is http://www.digitreport.com


Als je nu de pagina kleiner maakt met het vastzetten van b.v. favorietencentrum in IE en dan scrollt met de horizontale scrollbar dan trek ik de tekst met inhoud over mijn achterliggende kader.



In de index pagina (frame set) staat onderstaande regel:

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


Verder nog heb ik in de eerste pagina de volgende regel staan:

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


Als ik deze verwijder dan werkt de verandering van kleuren in de scrollbar wel.... nu dus niet. Het vreemde is dat ik wel eerder een script heb gezien waar dit wel gewoon in stond.

Is deze regel nodig, zo ja, wat doet deze eigenlijk??


Groeten, Marc
 
Definition and Usage
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.
 
DOCtype MiniWiki ;)

Hoi Marc,
Ja, dat is kort samengevat wat het betekent. Ik doe een poging er wat meer over te vertellen.

Vuistregel: elke zichzelf en de bezoekers respecterende webpagina begint met een geldig DOCtype. Want dit geeft aan hoe de browsers moeten omgaan met alle html-code die daarna komt.
  • Voorafgaand aan de regel met de DOCtype-declaratie mag er helemaal niets aan code staan: geen enkel letterteken, geen spatie, geen nieuwe regel, en geen commentaar-regel. Anders werkt het niet!
  • Hierbij is er voor zover ik weet één uitzondering: er mag eventueel een "php-header" geplaatst worden zonder dat er ongelukken gebeuren.
Met een DOCtype horen alle browsers een pagina op precies dezelfde manier weer te geven. De browser komt in de zogenaamde "Standards mode", en moet werken volgens de standaard-voorschriften die in het DOCtype worden aangegeven. Deze standaarden zijn browser-onafhankelijk. Het is al lastig genoeg dat browsers niet altijd de standaarden volgen! ;)

Een html-pagina zonder DOCtype schiet in de zogenaamde "Quirks mode", vrij vertaald: de "nukken en grillen-toestand", waarin browsers kunnen aanrotzooien wat ze willen. Je moet dan ook niet vreemd staan te kijken als één pagina er op 3 browsers 3 keer anders uitziet. - Dit stamt uit de tijd van de grote browseroorlog van zo'n tien jaar geleden, toen Microsoft (Internet Explorer) probeerde met eigen html-codes en eigen foefjes de andere browsers uit de markt te drukken.
In forums kwam je dan vaak het volgende tegen:

Vraag:
Mijn pagina doet het goed in Internet Explorer, maar fout in Firefox. Wat moet ik doen om Firefox het ook goed te laten doen?
Antwoord:
Het is eigenlijk precies andersom. Firefox volgt de standaarden en doet het goed: je code is verkeerd. Dit wordt in Internet Explorer gemaskeerd, omdat Internet Explorer het gebruik van een aantal ongeldige ("IE only") eigenschappen toejuicht/toestaat. Dit geldt vooral als de pagina met FrontPage (ook van Microsoft) is gemaakt, of als je per ongeluk verkeerde handleidingen hebt gebruikt (die zijn er helaas!). De oplossing is: alle oneigenlijke codes er uit gooien (de html-validator biedt hulp), en dan de pagina werkend maken voor Firefox.
Waarschijnlijk blijven er dan een aantal punten over waarop Internet Explorer (of één of meer van de IE-versies) het niet goed doet, maar dat zijn IE-bugs (daar zijn er helaas veel van!). Er bestaan hacks en omwegen om IE tot de orde te roepen. - Maar kom gerust terug op het forum als je een IE-fout tegenkomt!
Langzamerhand gaat ook IE het steeds beter doen, maar het is nog steeds aan te bevelen: ontwerp een pagina voor Firefox/Opera/Safari/Chrome, en maak daarna noodzakelijke aanpassingen voor Internet Explorer. En: altijd live testen in verschillende browsers!
Maar terug naar het DOCtype.

Je kunt als basistaal html of xhtml gebruiken.
Een aantal jaar geleden kwam xhtml in opkomst, als je het mij vraagt vooral omdat het "in" was en erg "web 2.0": xhtml zou de toekomst worden voor internet. - Wat de meeste o zo moderne xhtml-aanhangers niet wisten, is dat ze geen zuivere xhtml gebruikten. :confused:
Kort gezegd: eigenlijk is xhtml een sub-vorm van xml, dat aan een aantal strenge regels kent. Met het achtervoegsel .xhtml geef je de browser de opdracht om html na te doen, en dan hoeven die strenge regels gedeeltelijk niet. In onderstaande link wordt precies uitgelegd wat er aan de hand is, met als waarschuwing vooraf:
Beginners should acquire in-depth knowledge about both HTML standard and XHTML standards before releasing anything with a doctype-declaration that spells XHTML. HTML and XHTML are two completely different “animals”, but that doesn't show when we use XHTML to mimic HTML in a HTML environment.
Georg Sortun: www.gunlaug.no/contents/wd_1_06_03.html.
In de praktijk komt het er op neer dat de meeste "xhtml"-pagina's gewone html-pagina's zijn, met als grootste verschil een serie extra slashes /> op het eind van een aantal tags, en alle tags en eigenschappen in kleine letters (dat laatste deed ik toch al).
[Edit]Ook een verschil: in xhtml moeten alle andere tags die geopend worden, afgesloten worden met hun eigen eind-tag (en dat doe ik bij html ook al: het hoeft niet in html, maar het kan wel, en is een goede gewoonte; zie toelichting in de reacties hieronder).[/edit]
Verder volgt xhtml voor 99% de richtlijnen van de html4.01-standaard. Dan kan je net zo goed die gewone html gebruiken! :)
Daarbij komt, dat de huidige versie van de gewone html, html4.01, in de lift zit en html5 er aan zit te komen. Het idee dat xhtml de (enige) opvolger van html zou worden, is daarmee zo ongeveer van de baan.
Mijn conclusie: ik gebruik gewoon het html4.01 DOCtype, om later makkelijk naar html5 over te kunnen stappen.
[Edit]Hiervoor is de variant html4.01 Strict DOCtype het meest geschikt, want daar sluit html5 op aan.[/edit]

De drie varianten.
Voor zowel html als voor xhtml kan je kiezen uit 3 varianten DOCtype.
De Frameset variant, voor als je een framewset wilt definieren voor een uit frames op gebouwde site.
De Strict variant, streng maar rechtvaardig, en de beste garantie voor dezelfde pagina in verschillende browsers.
De Transitional variant ("Overgangsvariant"), die vergeeflijker is en een aantal onregelmatigheden slikt. Deze was bedoeld als tussenfase zolang browsers nog niet goed overweg konden met de Strict variant, en voor websites die nog vol zaten met "oude codes" die intussen afgekeurd waren. Voor een nieuw te bouwen website is deze variant dus ernstig af te raden.
  • In de praktijk kan het een enkel keertje nodig zijn om een beroep te doen op deze Transitional variant (als er bv. persé een nieuwe pagina in een nieuw venster moet openen; wat in het algemeen af te raden is), maar dan nog kan de pagina het best ontworpen en getoetst worden met de Strict variant, om het DOCtype op het laatst om te zetten naar Transitional.
Mijn conclusie is dat ik deze gebruik:
Code:
[FONT="Courier New"][SIZE="2"][COLOR="DarkGreen"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">[/COLOR][/SIZE][/FONT]
Het volgende verplichte nummer is een goede omschrijving van de (letter)tekens die in het document gebruikt gaan worden. Anders weet een browser óók niet waar hij/zij aan toe is. Dit wordt opgegeven met de "charset", en ook dat hoort zo hoog mogelijk in de html-code te staan. Als meest universele charset wordt met klem utf-8 aanbevolen, dus dat doe ik.
Daarmee wordt het standaard begin van mijn code:
Code:
[FONT="Courier New"][SIZE="2"][COLOR="DarkGreen"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mijn succescode</title>
enz.[/COLOR][/SIZE][/FONT]
Tot zover: nu jouw pagina nog! ;)
Maar eerst even pauze om op adem te komen: wordt vervolgd.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Da's 'n heldere verhandeling.
Als ik me 'n kleine opmerking mag veroorloven: er is nog 'n reden om, als het enigszins mogelijk is, strict te gebruiken. Dan kun je nu of in de toekomst zonder enige wijziging overstappen op html5, want dat is in feite 'n uitbreiding van html 4.01 strict.

@csshunter: 't enige echte (maar wel grote) voordeel van xhtml vond ik dat je alle tags moest afsluiten, ook <p> en <li> en zo.
 
(a) Da's 'n heldere verhandeling.
(b) Als ik me 'n kleine opmerking mag veroorloven: ...
(c) ... er is nog 'n reden om, als het enigszins mogelijk is, strict te gebruiken. Dan kun je nu of in de toekomst zonder enige wijziging overstappen op html5, want dat is in feite 'n uitbreiding van html 4.01 strict.
Ad (a)
Dank, ik had deze gemaakt met in m'n achterhoofd om 'm bij mijn bladwijzers te zetten, want dat kan tijd en tikwerk besparen op andere soortgelijke vragen. ;)
Ad (b)
Jij altijd, Goeroeboeroe!
Ad (c)
Ja, is een prima aanvulling op:
Mijn conclusie: ik gebruik gewoon het html4.01 DOCtype, om later makkelijk naar html5 over te kunnen stappen.
[In m'n tekst kwam het onderscheid tussen Strict en de rest pas verderop, dus ik kon het er op die plek niet tussen frommelen.]

Over het in xhtml verplicht afsluiten van tags
Dat is waar, was ik helemaal vergeten om erbij te doen. Toen ik tig jaar geleden als onbezoedelde leerling in de handleiding html las:
Elementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer beëindigt. (...)
Van sommige elementen mag [in html, niet in xhtml; CSShunter] de beëindiging worden weggelaten en in een heel enkel geval ook de activering.
Voor de eenduidigheid wordt echter geadviseerd van deze mogelijkheid geen gebruik te maken.
Handleiding html > Introductie > Elementen en attributen
... heb ik me dat goed ingeprent en het sindsdien automatisch toegepast als wet van Meden en Perzen: alles wat een eind-tag kan hebben, ook inderdaad een eind-tag meegeven.

Maar sommigen, ook een aantal z.g. WYSIWYG-editors (!), doen dat "voor het gemak" niet, heb ik gemerkt: soms tot verwarring der browsers. Reden temeer om niet op editors te vertrouwen, en codes met de hand in te kloppen (of op z'n minst in code view te controleren). Waarmee het voordeel "u hoeft helemaal geen html te kennen" van de WYSIWYG-editors weer helemaal verloren gaat: je moet html & css kennen om die dingen te kunnen controleren. :confused:
Ik zet dit er nog even als edit'je bij, dan is het verhaal nog wat completer. :)

Met vriendelijke groet,
CSShiunter

PS:
N.a.v. het handleiding-html citaat: ik ken eigenlijk geen elementen waarbij de start-tag mag ontbreken, maar misschien ligt dat zo voor de hand dat ik het over het hoofd zie. Wat zou zo'n element zijn?
O ja, toch:
De <head> en de <body> mogen gemist worden. Experimenten-tijd:
Rare jongens en meisjes, die van de standaarden-club van w3.org. Je zou toch zeggen dat de meest elementaire zaken in de html-structuur, het hoofd en het lijf, toch wel verplichte code zouden moeten zijn; maar nee dus. :shocked:
Voor de veiligheid stop ik ze er toch maar altijd in. ;)

Offtopic: Hoe zou je zo'n pagina zonder hoofd en lijf moeten noemen? Bestaat die wel? Het is in elk geval geen mens. Waarschijnlijk hoort ie thuis in het rijtje van de spaties, omvallende bomen, zwarte gaten e.a. zaken met zonder bestaansrecht. :D
 
Ja, of 404; maar die bestaat al (niet).

PS: marc 05, ben je er ook nog? Want ik moet "na de pauze" nog terug naar een concreter antwoord op je vraag over de <div>-problemen in je pagina. Dit was alleen het voorafje. ;)

[Edit]O, ik kan alvast deze doen:
Dat zelf-ingekleurde scrollbars soms wel en soms niet werken, kan kloppen.
  • De code daarvoor is ongeldige html, want alleen begrijpelijk voor Internet Explorer.
  • De achtergrond van de ongeldigheid is: webpagina's moeten van de vormgeving van scrollbars afblijven, want scrollbars vormen onderdeel van de interface van de browser, en hebben niets met de opmaak van een webpagina te maken.
  • Het enige dat een webpagina kan doen, is het verbieden of juist toestaan van een scrollbar, als de inhoud van een bepaald element te groot wordt voor de opgegeven maten van dat element.
  • Maar de vormgeving van de scrollbar blijft dan hetzelfde: en die verschilt ook (ietsje) per browser.
  • En los hiervan is het ook wel zo gebruiksvriendelijk voor de surfer, als de scrollbars er op elke pagina hetzelfde uitzien.
[/edit]
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ja, csshunterik ben er nog.... even wat drukker gehad met andere dingen :)



Ik gebruik tot nu dus inderdaad de frameset variant en de transitional varariant in de pagina`s zelf.

Verder in de frameset en frames nog:
<html xmlns="http://www.w3.org/1999/xhtml">

en meta:

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

Heb ik voor het bovenstaande in de framset nog meer meta nodig om de frameset variant goed te kunnen laten werken - ik zag in een vergelijkbare site nog de volgende meta in frame staan:
<meta http-equiv=Page-Enter content=blendTrans(Duration=0.8) />
<meta http-equiv=Page-Exit content=blendTrans(Duration=0.3) />?


Stel ik gebruik later toch de transitional variant moet ik dan ook een bepaalde meta gebruiken net als in je voorbeeld van de strict variant waar je de volgende meta geeft:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


Ik had wel om de kleuren (scrollbar) te kunnen veranderen wat ik van jou las wat niet gebruikelijk is om te doen het volgende voor het doctype geplaatst:

<LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>



Maar even terug komen op mijn <div> probleem.... ik kan er ook voor kiezen om de scrollbar niet meer toe te wijzen aan het mainframe en een aparte toe te wijzen aan de <div>..... dit gaat dan toch of zie ik dat verkeerd en wordt het dan niet door de meeste browsers ondersteund?


Ik wil dus voorkomen dat wanneer de pagina klein geopend wordt en iemand gaat scrollen de tekst dus over de blauwe balk van de achtergrond gaat.

Dan nog even een bijkomend iets:
Hoe kan ik er zeker van zijn dat de site op een pc met een monitor die kleiner/groter goed wordt weergegeven?

Het max. achtergrond bestand wat ik gebruikt heb gaat tot 1280 * 1024 pixels en is het zo dat wanneer ik dezelfde site b.v op een kleinere pc weer ga geven de site evenredig verkleind zal worden?


Groeten, Marc
 
Waarmee de frameset-pagina (index.html) begint met:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>enz.
en een vervolgpagina begint met:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>enz.
  • Het lang-attribuut (="language") slaat hier op de taal van de tekst van de pagina, en niet op een of andere code-taal. Het is o.a. belangrijk voor zoekmachines ("zoek alleen pagina's in het Nederlands...") en voor spraakbrowsers (anders worden de NL zinnen op z'n Engels uitgesproken - dat knauwt wel lekker weg, maar is volstrekt onbegrijpelijk).
  • Dat het lang-attribuut er dubbel in staat, is een schoonheidsfoutje bij W3C, maar het moet wel.
  • De charset=utf-8 is beter dan de charset=iso-8859-1.

De <meta http-equiv=Page-Enter content=blendTrans(Duration=0.8) /> regel is een regel die alleen Internet Explorer snapt. Het betekent dat IE de pagina opent met infaden gedurende de tijd van het opgegeven getal (in seconden).
Gedurende die tijd blijft de oude geopende pagina er nog "onder" staan. Zo'n pagina-overgang is meestal volstrekt overbodig, maar kan soms wel eens van pas komen om een ander verschijnsel van IE te maskeren: het wit opflitsen van een lege background als een pagina geopend wordt die wat meer downloadtijd vergt.
In elk geval: deze regel kan geen kwaad (andere browsers herkennen 'm gewoon niet), en omdat de instructie in een <meta> element zit verpakt, is het geldige html en kan het ook wat dat betreft geen kwaad.
Ik zou alleen wel aanhalingstekens rond de waarden van de eigenschappen zetten:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8)" />

Stel ik gebruik later toch de transitional variant ... enz.
Je bedoelt:
Stel ik gebruik later toch de Strict variant ... enz.
? > dan kan de <meta> regel met de charset gewoon hetzelfde blijven.

Als je <LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%> als allereerste regel gebruikt, en vooraf laat gaan aan de regel met het DOCtype, werkt het DOCtype niet! Er mag helemaal niets voor staan!

Zo, nu het <div> probleem: maar helaas is nu alweer de tijd op... :confused:
Als je geen vragen tussendoor meer stelt, komt dat de volgende keer. ;)

Wordt vervolgd!
CSShunter

[Edit]Nu valt mijn oog er op, dat de javascript-coderegel zoals hierboven eindigt met een % teken voor de afsluitende >. Het lijkt alsof er dan aan het begin een % en een @ teken zijn weggevallen. Als die erbij staan, dus <%@LANGUAGE= enz., zou het een asp-code kunnen zijn, die wel toegestaan is voorafgaand aan de DOCtype-declaratie. Maar dan zouden de pagina's geen .html pagina's moeten zijn, maar .asp pagina's. Bovendien zou de server van je provider het gebruik van .asp pagina's moeten ondersteunen.
Verklaring: .asp is een taal voor server-side script, en de commando's daarin worden door de server opgepikt en uitgevoerd voordat het html-gedeelte van de pagina naar de bezoeker gezonden wordt. Het is een Microsoft alternatief voor pagina's die als .php pagina's zijn gebouwd: ook een server-side scripttaal.
[/edit]
 
Laatst bewerkt:
Ja, dan nu terzake. ;)

Dat de <div>'s niet lekker meescharnieren als de pagina verkleind wordt, zit 'm er in dat je voor de achtergrondkleuren een plaatje hebt gebruikt. Dat zit als achtergrond-image in de body, en dan zit het vastgeschroefd op zijn plaats. Op die manier kan de achtergrond dus niet meeschuiven, als de <div> van de tekst erboven (in de #content-div) verschuift. En er is ook nog het verschijnsel, dat als er veel tekst in de #content staat (of als iemand een grotere lettergrootte wil gebruiken), de tekst dan onderaan uit het achtergrondvlak loopt. Want deze vaste achtergrond kan niet mee-rekken met een <div> die er los van staat. Tenslotte kan de achtergrond niet evenredig verkleind of vergroot worden bij een andere resolutie van het beeldscherm, want dat kunnen achtergrondfiguren niet.

De oplossing is: géén achtergrondfiguur gebruiken! :D

Hoe dan wel? Je kunt veel makkelijker de #content zelf een achtergrondkleur geven, gewoon in de css. Dan gaat het altijd goed. Ook de donkerder blauw gekleurde rand om de #content hoeft geen afbeelding te zijn, die kan opgegeven worden als brede gekleurde border van de #content.
Dan wordt het iets als:
Code:
[FONT="Courier New"][SIZE="2"]#content {
   padding: 20px;              /* afstand tekst tot de rand */
   border: 20px solid #040660; /* dit is de brede rand */
   background: #272882;        /* dit is de achtergrondkleur onder de tekst */
   color: white;               /* en dit is de tekst-kleur */
   }[/SIZE][/FONT]
Dat scheelt meteen zo'n 40kB aan achtergrondfiguur, die de browser van de bezoeker niet meer hoeft te downloaden: snelheidswinst! :)

Verder zou ik adviseren geen frame te gebruiken voor de kop: die paar regeltjes html zijn er makkelijk in te plakken, en dat maakt de site toegankelijker voor zoekmachines en voor mensen.
Het beste is altijd, om eerst een komplete pagina met alles er op en er aan te maken, en pas later te kijken of je terugkomende onderdelen hebt. Die kunnen er dan altijd met php of shtml in gezet worden; en dan hoef je óók maar 1 verandering door te voeren als je iets op alle pagina's tegelijk wilt veranderen (bv. in het menu).

Succes!
Met vriendelijke groet,
CSShunter

PS:
In plaats van te vermelden "Voor de beste weergave druk op F11" (beeldvullend scherm; waar nogal wat mensen de pest aan hebben, want dan raak je o.a. de Start-balk kwijt) kan je beter de site zó ontwerpen dat dat niet nodig is. ;)
O ja, en ik zou de html-validator er nog even naar laten kijken om er wat html-foutjes uit te halen.
 
Laatst bewerkt:
Hallo csshunter,

De reden waarom ik het kader als achtergrond heb ingesteld is dat de tekst dus achter de bovenbalk door scrollt dus ook achter het kopframe. In het kopframe komt nog meer te staan dan wat er nu staat... ook met vaste gegevens. Layout wat frames betref wil ik proberen te handhaven. Wel de achtergrondkleuren veranderen... geen afbeeldingen meer daar.

verder gekeken naar de fouten met de html-validator, volgende o.a. gevonden had laatst overgenomen uit dit topic voor wat betreft het doctype... maar wat is hier nu fout aan... mijn engels is niet zo goed.

dit gebruikt voor frameset:

Code:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
2   "http://www.w3.org/TR/html4/frameset.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>enz.

en dit voor frames zelf: \ Moet loose.dtd hier strict.dtd zijn?
Code:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2   "http://www.w3.org/TR/html4/loose.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>enz.

<body>✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).


Wat wordt nu bedoeld met bovenstaande... ik heb een body maar geen overlapping.. heb wel in de body een (div) met daarin weer een (div) links en rechts is dat overlappen?


wat wil dit zeggen: NET-enabling start-tag requires SHORTTAG YES






Is het dan toch mogelijk op de manier zoals jij het scrijft om te scrollen binnen de brede rand van het content?
dan moet ik dus alsnog een scroll toevoegen aan de div of zie ik dat verkeerd?

Code:
#content {
   padding: 20px;              /* afstand tekst tot de rand */
   border: 20px solid #040660; /* dit is de brede rand */
   background: #272882;        /* dit is de achtergrondkleur onder de tekst */
   color: white;               /* en dit is de tekst-kleur */
   }


Verder heb ik nog een vraag over onderstaand script voor frameset en nog een stukje script wat in de frames zelf staat, of is dit een vraag voor een andere topic?

<script language="javascript" type="text/javascript">
// frameJammer_hp v3.2.2
if (self != top) // frame buster, may be removed
top.location.replace(self.location);

function frameJammer_hp(){
var framedPage = location.search;
if (framedPage.length > 1 && framedPage.indexOf("://") == -1){
framedPage = framedPage.substring(1);
var theSplit = framedPage.lastIndexOf('~');
var thePage = framedPage.substring(0,theSplit);
// insert anchor code here if required (see Help)
var theFrame = framedPage.substring(theSplit+1);
eval("top."+theFrame+".location.replace('"+ thePage+"')");}
}

// frameJammer_hp End
</script>


Vriendelijke groet, Marc
 
Hoi Marc,
Als je de Strict variant voor het DOCtype gebruikt, moet niet alleen het "loose" veranderen, maar ook het "Transitional". De eerste twee regels worden dan:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ik heb de pagina www.w3.org/QA/2002/04/valid-dtd-list.html in mijn Favorieten gezet, en dan kopieer/plak ik daar altijd het DOCtype uit: kan ik ook geen tikfoutjes maken. :)
  • "Waarschuwing: Niet Schrikken". Als je de Strict variant gebruikt, komen er nog wat meer html-onvolkomenheden aan het licht dan nu, maar daar kom je ook wel uit.
Nu de huidige uitslag van de html-validator.
Het <body>-verhaal. De <body> kan inderdaad op de verkeerde plek in het document zitten, maar dat is hier niet het geval. Met de tweede alinea van het verhaal proberen ze te zeggen dat het ook kan liggen aan een tag die erboven staat, maar op de verkeerde manier is afgesloten. Daarom loont het de moeite om bij html-errors van boven naar beneden te werken. Vaak verdwijnen rare meldingen verderop in de pagina als sneeuw voor de zon, als je de verbeteringen erboven hebt gemaakt. En dat is hier het geval!

De fout "Attribute "XMLNS" is not a valid attribute. Did you mean "onmouseup" or "onmouseover"?"
Nee, dat bedoelde je helemaal niet, en dan zou de validator óók een joekel van een fout aangeven. :D
Die fout in de <html>-regel is er bij gebruik van het html-DOCtype, want dan mag je geen xhtml-eigenschappen opgeven zoals "xmlns" (welke "ns"=namespace voor xml gebruikt moet worden). Bij het html-DOCtype moet die regel alleen zijn:
HTML:
<html lang="nl">
Bij gebruik van het xhtml-DOCtype is de regel gewoon wel goed (en verplicht). Het let nogal nauw.

De fout "NET-enabling start-tag requires SHORTTAG YES" (of: "NET-enabling start-tag requires SHORTTAG NO")
Dat is het potjeslatijn-engels-jargon van W3C (ook niet altijd de heldersten als het om taal gaat...) om gewoon te zeggen:
  1. U gebruikt een html-DOCtype, maar u heeft een tag niet goed afgesloten.
    Als het een tag is van een element dat geen eigen einde-tag heeft (zoals <meta ...> of <img ...>), dan staat op het eind ten onrechte een / voor de >. Die moet weg.

  2. U gebruikt een xhtml-DOCtype, maar u heeft een tag niet goed afgesloten.
    Als het een tag is van een element dat geen eigen einde-tag heeft (zoals <meta ...> of <img ...>), dan staat op het eind ten onrechte géén / voor de >. Die moet erbij.
Als dit in orde is gemaakt, dan verdwijnen ook meteen de fouten "end tag for element "HEAD" which is not open" en "document type does not allow element "BODY" here".

(...) Is het dan toch mogelijk op de manier zoals jij het schrijft om te scrollen binnen de brede rand van het content?
Ja, dat moet wel kunnen, maar is nog niet eens zo heel erg eenvoudig als je de pagina geschikt wilt laten zijn voor alle beeldscherm-formaten. Ik wil wel eens kijken of de sterren me binnenkort gunstig gezind zijn om iets in elkaar te fabriekselen. :rolleyes:
Als iemand anders een modelletje klaar heeft liggen, is dat ook goed natuurlijk. ;)

Verder heb ik nog een vraag over onderstaand script voor frameset en nog een stukje script wat in de frames zelf staat, of is dit een vraag voor een andere topic?
Ach, misschien kunnen we dat hier wel in één moeite door doen. Maar wat is de vraag? :p

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo csshunter :D,

(...) Is het dan toch mogelijk op de manier zoals jij het schrijft om te scrollen binnen de brede rand van het content?

Ja, dat moet wel kunnen, maar is nog niet eens zo heel erg eenvoudig als je de pagina geschikt wilt laten zijn voor alle beeldscherm-formaten. Ik wil wel eens kijken of de sterren me binnenkort gunstig gezind zijn om iets in elkaar te fabriekselen.
Als iemand anders een modelletje klaar heeft liggen, is dat ook goed natuurlijk.

Bovenste zou wel mooi zijn... daar kan ik weer veel van leren.


Wat de doctypes betreft is het me wat duidelijker geworden.

In elk geval in de frameset:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

of hetzelfde maar dan op de plaatsen waar html 4.01 en html4 staat dus XHTML 1.0 en xhtml1?


en voor de strict heb je dit voorgedaan dit is van toepassing op alle andere pagina`s in een frameset of gewone pagina`s zonder frame.... verbeter me mocht ik het niet goed zeggen.


verder wordt bij HTML 4.01 aleen maar <html lang="nl">


Dan nu nog het volgende, onderstaande heb ik in de framesetgeplakt (index).

<script language="javascript" type="text/javascript">
// frameJammer_hp v3.2.2
if (self != top) // frame buster, may be removed
top.location.replace(self.location);

function frameJammer_hp(){
var framedPage = location.search;
if (framedPage.length > 1 && framedPage.indexOf("://") == -1){
framedPage = framedPage.substring(1);
var theSplit = framedPage.lastIndexOf('~');
var thePage = framedPage.substring(0,theSplit);
// insert anchor code here if required (see Help)
var theFrame = framedPage.substring(theSplit+1);
eval("top."+theFrame+".location.replace('"+ thePage+"')");}
}

// frameJammer_hp End
</script>


Het volgende heb ik in pag.html geplakt en kop.html.

<script language="javascript" type= "text/javascript">
// frameJammer_hp v3.2.2
if (window.name!='topFrame' && window.name!='booker_'
&& !((self.innerHeight == 0) && (self.innerWidth == 0)))
top.location.replace('index.html?kop.html~topFrame');
// frameJammer_hp End
</script>



In de kop en pag werkt het.... als ik dan pag.html achter mijn domeinnaam zou intikken wordt ik automatisch doorverwezen naar mijn indexpagina.

Maar als ik hetzelfde regeltje toepas in beneden.html en de site dan opnieuw zou openen dan gaat het helemaal mis..... krijg dan twee onderbalken boven mekaar en de zaak begint wat te flipperen. ook de taakbalk knippert dan.


Wat ik gedaan had om te proberen... is gewoon een gelijke frameset gemaakt uit 3 stukken met verder niets in dan een achtergrondkleur.... ook hier werkt het niet op het benedenframe.

Toch kan dit werken heb dit gezien op een andere site. Maar weet niet waarom het hier niet gaat. Dacht eerst even aan het doctype.... maar de andere staat dus in transitional.


Misschien weet jij wat er aan de hand is?


Alvast bedankt tot nu toe voor de fijne uitleg:thumb:
 
Het Aardig Alternatief

Hoi Marc,
Ik geloof dat ik even een vraagje ga overslaan: "frames - Jammer!" :p

Intussen heb ik namelijk een pagina gefabriekseld die zonder frames werkt (en een goed DOCtype heeft), die dus ook geen frame-scripts nodig heeft.
  • Er is een header-<div> die altijd bovenaan staat, en waar nog naar hartelust van alles ingevoegd kan worden. Daarvoor hoeft alleen de hoogte ervan aangepast te worden.
  • Er is een menu-kolom aan de linkerkant, waarin het menu op z'n plekje blijft staan.
  • Er is een content-<div> die een eigen scrollbar heeft, zodat er niets over de header of over het menu heen kan manoeuvreren.
  • De content-<div> heeft een border, waarbinnen de scrollbar zit (dat was nog een aardig klusje om het zover te krijgen).
  • De content-<div> loopt altijd tot aan de onderkant van het scherm, bij alle soorten schermformaten.
  • Ook de breedte past zich aan aan het beeldscherm van de bezoeker.
  • Er is totaal geen javascript gebruikt (en ook achtergrondafbeeldingen zijn niet nodig).
  • Het geheel is zo valid als maar kan, en werkt voor zover ik 't kan bekijken in alle browsers behalve IE6.
  • Daarvoor zou eventueel nog een automatisch werkend alternatief gemaakt kunnen worden, maar het is de vraag of dat nog de moeite waard is - Google e.a. grote clubs maken hun pagina's al niet meer geschikt voor IE6.
  • Ik heb een serie'tje testpagina's gemaakt met verschillende hoeveelheden text in het menu en/of het content-blok.
Dit is het begin: "Pure CSS frames". :) Zie vooral ook de broncode!

Nu zal je misschien vragen: "Moet ik dan op elke pagina opnieuw de css, de header en het menu inplakken?"
Nee, dat hoeft niet! Dat is het laatste voorbeeld: de "php-versie".
  • De hele frame-set sla je over. Er zijn alleen maar "eigen pagina's".
  • De css-styles staan in een apart stylesheet, dat in de <head> van elke pagina opgeroepen wordt. Daar heb je geen omkijken meer naar. Moet er iets in de css veranderen, dan doe je dat in dit stylesheet, en meteen is de hele site voorzien van de vernieuwingen.
  • Met php kan je heel makkelijk zich herhalende onderdelen van de pagina erin monteren.
  • De delen die steeds terug moeten komen, zet je in aparte bestandjes (met alleen de code van dat gedeelte, dus zonder <head>, <body> en andere soesa). - In feite dus een soort uitgeklede frame-pagina's.
  • In de html-code van de paginas zet je alleen op de goede plaats een verwijsregeltje. Dan zorgt de server ervoor dat het losse bestandje ingevoegd wordt. Kan voor de header, voor het menu, enz.
  • Dus als er bv. een menu-onderwerp bij komt, hoef je alleen maar het losse menu-bestandje aan te passen, en dan komt het ook weer vanzelf goed op alle pagina's van de site.
  • Voorwaarde is wel, dat de server van je provider het gebruik van php ondersteunt. Als dat niet zo is, kan iets dergelijks met "shtml" (dat werkt met vergelijkbare verwijsregeltjes, en alleen sommige gratis sites hebben dat niet). Eén van de twee is genoeg!
Op deze manier heb je als webbouwer hetzelfde gemak als bij een frame-opbouw van de site, maar dan zonder alle nadelen die aan frames zitten. Is dat niet wonderbaar?! :D

Met vriendelijke groet,
CSShunter

PS: geen provider die php of shtml ondersteunt? Als je elke maand zo ongeveer één pilsje minder in de kroeg drinkt (of iets van vergelijkbare winkelwaarde), heb je al genoeg gespaard om een heel jaar lang een eigen site met php te kunnen draaien inclusief eigen nl-domeinnaam. :)
 
Laatst bewerkt:
Hallo csshunter,

Allereerst hartelijk dank voor alles wat je uitgezocht en gemaakt hebt voor mij. Het begin is er voor mij nu:D.


Voor dit moment ben ik even geholpen en ik ga eens aan de slag met de voorbeelden die je gemaakt hebt. Eens kijken of ik er voor mezelf iets mooi kan maken.

Denk dat het nog wel de nodige vragen op zal roepen... hoe kan ik dit doen, hoe dat.... hahahaha.


Als ik naar de PHP versie kijk en ik maak dan hier het beeld kleiner door middel van het favorietenscherm vast te zetten..... krijg dan 2 verticale scrollbars te zien in het content.... is dit de bedoeling?


Nog 1 ding voor nu... is het gebruiken van een javascript voor een bewegend plaatje dan ook niet zo`n goede oplossing?


Nogmaals hartelijk bedankt... en ik meld me weer mocht ik vragen hebben.


Wat mij betreft kan erna dit topic gesloten worden.



Groeten, Marc
 
Laatst bewerkt:
Hoi Marc,
ik ga eens aan de slag
Goed zo! ;)

Is het gebruiken van een javascript voor een bewegend plaatje dan ook niet zo`n goede oplossing?
Als je bedoelt dat bv. een plaatjes-knop een ander plaatje te zien geeft als je er met de muis overheen gaat, dan klopt dat. Dat hoeft niet met javascript, en kan heel goed met css. Zie bv. "een blokje knoppen".

Vuistregel: je kan javascript voor toegevoegde functionaliteit op een pagina gebruiken, maar als het goed is moet een pagina ook zonder javascript werken (of er een ingebouwd alternatief voor hebben).

Daar zijn van allerlei redenen voor, van betere structuur van de pagina tot betere vindbaarheid door zoekmachines en betere toegankelijkheid van de pagina voor mensen met een beperking. De handleiding van het Kwaliteitsmodel Webrichtlijnen spreek over "het optionele karakter van javascript" (een "client-side script" = script dat uitgevoerd wordt op de computer van de bezoeker, en niet op de server van de provider). Men geeft tips hoe html-alternatieven voor javascript er uit kunnen zien.

Bijzonder jammer vind ik dat een aantal web-editors er uit eigen beweging javascripts in pl**ren, die de kwaliteit en bruikbaarheid van een site aantasten. Soms gaat dat zo ver, dat een hele site niet meer te zien is als je toevallig niet surft met een browser die Internet Explorer heet, of als javascript bij de browser van de bezoeker uit staat, of als iemand een soort browser gebruikt (bv. een sprekende browser) die er geen javascript op heeft zitten. :confused:
  • Als je als gevonden voorwerp op internet ergens een "moet je kijken, wat een leuk script!" tegenkomt, moet je dat eerst uitgebreid testen om te zien of het behalve leuk ook goed werkend is in alle browsers (na ja, de meest voorkomende), en om te zien wat er gebeurt als javascript uit staat. :rolleyes:
  • Hetzelfde geldt voor het gebruik van Flash, ook daar moet je ontzettend mee uitkijken. :eek:
Nogmaals hartelijk bedankt... en ik meld me weer mocht ik vragen hebben.
Wat mij betreft kan erna dit topic gesloten worden.
Graag gedaan, en we zien je wel weer verschijnen. :)

Het topic afsluiten kan je zelf doen door op deze pagina helemaal naar beneden te scrollen naar het blokje "Status van de vraag" (rechts onder), en daar aan te geven: "Vraag is opgelost". Dan komt er op de overzichtspagina een mooi groen vinkje.

Succes!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hola,
Ik vergat nog een vraag/antwoord.
Als ik naar de PHP versie kijk en ik maak dan hier het beeld kleiner door middel van het favorietenscherm vast te zetten..... krijg dan 2 verticale scrollbars te zien in het content.... is dit de bedoeling?
Je bedoelt: 1 verticale en 1 horizontale scrollbar in Firefox?
En: 2 verticale en 1 horizontale in Internet Explorer?
Ja, dat kan kloppen. Dat heeft niets met php te maken, maar dit wordt veroorzaakt doordat ik in het zwarte blokje op die pagina de codering voor de duidelijkheid zo heb gemaakt dat een regel niet kan afbreken. En er zitten nogal lange aansluitende (spatie-loze) code-brokjes in, dan moet de browser er wel een links-rechts scrollbar aan toevoegen.
  • En Internet Explorer denkt dat de extra hoogte die door de links-rechts scrollbar wordt afgesnoept, gecompenseerd moet worden door een extra omhoog-omlaag scrollbar toe te voegen. Niet gevraagd, en toch gekregen. :shocked:
Maar normaal gesproken gebeurt dat niet met de tekst van een webpagina (de andere voorbeeld-pagina's hebben het niet, en die zijn los van het coderings-blok identiek qua html en css). Eventueel kan het ook gebeuren met een afbeelding die eigenlijk te breed is voor het #content-venster. Dat kan je oplossen door een kleinere afbeelding te gebruiken, of door de afbeelding automatisch te laten meeschalen met de breedte van het #content-blok, of door automatisch een stukje van de afbeelding te laten afsnijden als deze te groot is.
Of door IE te kraken met een uit te vinden css-truc: om IE te verbieden er zo'n dubbele scollbar van te maken.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan