Frames overlappend scrollen

[Baur]

Hallo luitjes,

Iemand van de oldtimerclub had gevraagd of ik zijn website kon onderhouden. Nu zal me dit ook wel lukken, maar aangezien zijn website ooit door een proffesional in elkaar is gedraaid, begreep ik er geen reet van.

Nu heb ik hem in "jip en janneke"-html in elkaar gezet, wat aardig is gelukt is al zeg ik het zelf.

Nu zit ik echter met een probleem. Zoals ik de website nu heb gemaakt bestaat hij uit 5 frames:
3 hoog,
onderste laag in 3-en gedeeld.

Nu wil ik graag langs deze 3 lagen scrollen, ipv dat elk frame los een scrollbar heeft. Is dit mogelijk?

Origineel:

http://www.trouwvervoerweert.nl/index.html

Kopie (moet nog wat aan geschaafd worden)

http://bmwbaurtc.nl/A/index.htm

Gr Jeroen

[Tom]

Nee dat kan niet.
En frames is ook af te raden. Oude techniek, erg slecht te doorzoeken door searchengines (plus mensen kunnen halverwege je site binnenkomen terwijl ze de complete navigatie missen, al is het op te lossen dmv javascript maar het blijft kut), kut met printen/favorieten (want je slaat het hoofdframe op), etc. Kortom frames is een no-go.

[wooter]

Hmja... Frames slaan echt nergens op... De huidige site werkt, maar jouw versie werkt niet.

Die professional heeft het ook maar in een pakketje geprogrammeerd...

Zo'n sites maak ik tegenwoordig met DIV layers, waarbij de hele opmaak via CSS komt, en het hele zootje dus bv nog leesbaar is op een telefoon, of bij afprinten een gepaste layout krijgt.

[Baur]

En nu in lekentaal?

Het is me duidelijk dat ik beter een ander systeem kan gebruiken, maar DIV/CSS e.d. zegt mij niet direct iets.

Als ik het (na wat googlen) correct begrijp is DIV een manier van schrijven en CSS haalt verschillende elementen bij elkaar (bijv. kleur, lettertype) voor die pagina.

Dus bijvoorbeeld de "home" en " informatie" pagina schrijf ik als DIV, maar middels CSS geef ik aan welke kleur de achtergrond wordt, lettertype?

Gr Jeroen

[Tom]

De pagina zelf moet eigenlijk geen opmaak hebben. Je zet er de elementen op die je nodig hebt met beschrijvende functies. Een div beschrijft nog niets over de inhoud maar is slechts om zaken bij elkaar te houden. Dus headers via <h1> t/m <h6>, een menu bij voorkeur via een lijst (<ul>), tabellen slechts voor tabulaire data en niet om zaken te positioneren (fout van die 'professionele' webbouwer) etc. Zaken die bij elkaar horen en je moet positioneren kun je dus onderscheiden via een <div>.

Vervolgens geef je in de CSS per element aan welke opmaak dit mee moet krijgen. Zo heb je content volledig los van de opmaak staan. In principe moet je de volledige site van een ander jasje kunnen voorzien door alleen de CSS aan te passen, en niet eens de opbouw van je pagina.

[squadracorse]

Als je het ooit goed wilt leren kunnen we/ik hier wel een basis template neerzetten (basisopzet is half uurtje werk)? Frames is kut. Elke pagina eigen title, opzet cleane html, rel=nofollow op je clickouts. En vooral meer teksten (beetje klein lettertype) per auto.

basically:

htmlheader (unieke title, css voor screen,mobiel en print)
body:

Logo
<h1>
Paragraaf met al je teksten
sub links (<ul><li><a href="#">Trouwauto Merk Type</a></li>...</ul>)
sub rechts (<ul><li><a href="#">Trouwauto Merk Type</a></li>...</ul>)
Hoofdmenu (ul opmaak in 1 sprite)

Zeg maar als je echt interesse hebt, indien je het gewoon beetje wilt bijhouden en zelf wil klooien (leukste) kun je gewoon wat online voorbeelden volgen ( http://www.alistapart.com/topics/design ).

Voorbeeld nette structuur die in jouw geval bijna te rippen is: http://www.at-leisure.nl/ (leuke bijkomstigheid is de specifieke css indien je hem via iphone/blackberry/symbian oproept en zelfs bij de iphone het kanteleffectje dat andere layout geeft :-))

[wooter]

Baur,

Het probleem is dat een mooie website de kennis van een beginnende html-student al lang overstijgt. Dat is geen waardeoordeel naar jouw goede bedoelingen, maar een mooie website is niet iets wat je tegenwoordig met twee vingers in de neus op een avondje klaarstoomt. Ondanks alle FrontPage-, Dreamweaver- en andere editors moet je nog altijd weten wat je moet doen om je visie succesvol te vertalen in een werkende webpagina.

Deze site is een van de weinigen die je uitlegt hoe je tegenwoordig degelijke pagina's kan maken, met behulp van de laatste technieken (CSS, bijna W3C-comforme HTML):

http://www.dynamicdeezign.be/cursushtml/

Maar ga ervan uit dat de meeste Nederlandstalige websites met 'lessen' over HTML vreselijk verouderd zijn.

[Dutch]

De pagina zelf moet eigenlijk geen opmaak hebben. Je zet er de elementen op die je nodig hebt met beschrijvende functies. Een div beschrijft nog niets over de inhoud maar is slechts om zaken bij elkaar te houden. Dus headers via <h1> t/m <h6>, een menu bij voorkeur via een lijst (<ul>), tabellen slechts voor tabulaire data en niet om zaken te positioneren (fout van die 'professionele' webbouwer) etc. Zaken die bij elkaar horen en je moet positioneren kun je dus onderscheiden via een <div>.

Het is eens zozeer kennis die de zelfknutselaar boven de pet uitstijgt, 't is meer het niet (kunnen) bijblijven. Ik weet allang dat divs veel handiger zijn (geworden) dan tabellen voor het creëren van een opmaak, maar ik kom er gewoon niet aan toe om me erin te verdiepen. Terwijl het er een keer van zal moeten komen, want veel van de HTML die ik nu gebruik, raakt verouderd. Het punt is dat ik een mega-grote website onderhoud, meer dan tien jaar geleden begonnen, die nu weliswaar met CSS werkt, maar alleen voor de fonts, niet voor de indeling. Het ombouwen naar CSS voor dat gedeelte was al een bereklus een paar jaar geleden (die ik maar gedeeltelijk kon automatiseren met een multiple copy/replace-progje) en ik zie er vreselijk tegenop om dat nog eens te doen, maar dan voor de lay-out.

Met de hand vormgeven vind ik voor de pagina-inhoud zelf nog steeds het prettigst, want zo krijg ik de dingen precies waar ik wil, in plaats van met een CMS met een paar simpele invoerveldjes. Maar met een paar veranderingen je hele lay-out omgooien is toch inderdaad wel erg prettig...

Nou ja, dus binnenkort eens maar eens knutselen met een veel en veel kleinere site. Waar kan ik een 'how to'-site vinden die specifiek ingaat op het vormgeven met divs en CSS i.p.v. tabellen?

[Dutch]

http://www.stylesheets.nl/everything.html

LOL! Hier kom ik al een eind mee! :)

[Tom]

Het is eens zozeer kennis die de zelfknutselaar boven de pet uitstijgt, 't is meer het niet (kunnen) bijblijven. Ik weet allang dat divs veel handiger zijn (geworden) dan tabellen voor het creëren van een opmaak, maar ik kom er gewoon niet aan toe om me erin te verdiepen.

Snap ik. Ook als je weet hoe CSS werkt is het nog lastig om een layout goed te krijgen als je er verder geen ervaring mee hebt. Het is belangrijk om semantisch te werk te gaan, dus dat de tags in je HTML de inhoud al beschrijven en je niet alles wat je wilt opmaken een aparte klasse meegeeft.
Verder passen browsers op sommige punten nog steeds een eigen manier van renderen toe waardoor verschillen kunnen ontstaan. Als je niet weet waar je het moet zoeken (want dat leggen sites/boeken niet uit, kwestie van ervaring) kan dat erg lastig zijn. Ook voor mensen die er dagelijks mee bezig zijn.

Het ombouwen naar CSS voor dat gedeelte was al een bereklus een paar jaar geleden (die ik maar gedeeltelijk kon automatiseren met een multiple copy/replace-progje) en ik zie er vreselijk tegenop om dat nog eens te doen, maar dan voor de lay-out.

Het zijn nu losse HTML bestanden begrijp ik? Dat is inderdaad erg lastig om achteraf aan te passen.
Daarom moet je eigenlijk de structuur in HTML vastleggen, de opmaak in CSS en de inhoud in een CMS. Dan ben je al erg flexibel richting de toekomst :)

Met de hand vormgeven vind ik voor de pagina-inhoud zelf nog steeds het prettigst, want zo krijg ik de dingen precies waar ik wil, in plaats van met een CMS met een paar simpele invoerveldjes.

Met een CMS kun je ook de opmaak bepalen, de meeste systemen hebben een Word-achtige interface. Ik vind CMS soms ook overrated hoor, voor kleine sites vind ik plain html ook prima.

[Baur]

Bij mij is het meer het feit dat ik echt "basic" ben begonnen. Zelf zoeken hoe je uberhaupt een website opzet. En aangezien IK bij mij eigen site alles krijg te zien hoe ik het wilde, vond ik het allang prima.

Maar wat Dutch zegt is natuurlijk ook: het is een pokke-werk om alles om te gaan gooien. Maar mogelijk toch eens aan beginnen! Maar eerst nu maar eens kijken hoe ik die trouw-auto-site in elkaar ga draaien...zonder die site geen gelaste en gespoten Baur deze zomer ;)

Gr Jeroen

[wooter]

Vroeger ontwierp ik websites met tabellen, en had ik alle content in aparte html-pagina's...

Tegenwoordig maak ik een template met div's, doe de opmaak met CSS en gooi alles in een CMS.

Zo wordt het erg eenvoudig om regelmatig "nieuw" voor de dag te komen zonder ook maar één regel tekst te veranderen :).

[Dutch]

Het zijn nu losse HTML bestanden begrijp ik? Dat is inderdaad erg lastig om achteraf aan te passen.

Yep, honderden pagina's. :)

En jaren geleden waren het er al vele tientallen. Dus het wordt elk jaar moeilijker om over te stappen. Hierzo, hier gaat 't om:

http://forix.autosport.com/8w/

Ik heb gratis onbeperkte webspace bij autosport.com. Heerlijk natuurlijk, ook vanwege de toffe domeinnaam, maar ik kan niet meedraaien op hun CMS, want dat is helemaal gebouwd op de nieuws- en resultatenvoorziening. Nadeel is dus dat ik het met de hand moet blijven doen. Op zichzelf niet erg, want oude pagina's veranderen inhoudelijk toch nooit. Maar ja, soms wil je wel eens in de vormgeving toch nog een béétje bijblijven en dan is 't een behoorlijke k*tklus.

Maar misschien moet ik er toch een keer aan beginnen. Dus niet alleen in de HTML de h1's, h2's, ems en strongs erin gooien - het vervangen van de huidige bed & breakfast-tags is nog relatief makkelijk - maar vooral CSS echt onder de knie krijgen, zodat ik weet hoe je daarin een bepaald blok tekst (dat nu in een tabelcel zit) dáár neerzet.

Ach, 't houdt je van de straat...

[_Arthur]

Bij mij is het meer het feit dat ik echt "basic" ben begonnen. Zelf zoeken hoe je uberhaupt een website opzet. En aangezien IK bij mij eigen site alles krijg te zien hoe ik het wilde, vond ik het allang prima.

Maar wat Dutch zegt is natuurlijk ook: het is een pokke-werk om alles om te gaan gooien. Maar mogelijk toch eens aan beginnen! Maar eerst nu maar eens kijken hoe ik die trouw-auto-site in elkaar ga draaien...zonder die site geen gelaste en gespoten Baur deze zomer ;)

Gr Jeroen

De orginele site is trouwens gemaakt met NetObjects Fusion 8 http://www.netobjects.com/

De Essentials versie daarvan is gratis. Ik zou hier eerder mee aan de slag gaan dan met die vieze frames ;)

[Dutch]

Zeg maar als je echt interesse hebt, indien je het gewoon beetje wilt bijhouden en zelf wil klooien (leukste) kun je gewoon wat online voorbeelden volgen ( http://www.alistapart.com/topics/design ).

Hé, daar staan inderdaad goeie artikelen tussen, zoals deze:

http://www.alistapart.com/articles/holygrail

http://www.alistapart.com/articles/conflictingabsolutepositions

Ik begin 't zowaar te snappen. :)

[squadracorse]

Indien je de basis begrijpt kom je al vrij ver!! Kijk code kan meestal wel cleaner en netter, elke site heeft na een review wel verbeterpunten vandaar dat ik nog steeds werk :-) Daarna kijk je eens naar de javascript library jQuery :-) Daarmee kan je alle interactie nog verbeteren zonder inline meuk te schrijven.
Zo heeft een printknop alleen zin indien je javascript aanstaat en zodoende kan je die printknop bij DOM ready ook gaan tonen. Vooral het tonen, verbergen en heel soms enkele json/ajax calls gaat op een vrij leesbare manier. Zo kanje bv raden wat het volgende doet:

jQuery("body").addClass('gummer');