Een uitklapbare balk, moet je die het zelfde maken als een scroll over balk?

Status
Niet open voor verdere reacties.
mathijsf

mathijsf

Gebruiker
Lid geworden
12 dec 2010
Berichten
99
Ik weet hoe je een scroll over balk maakt. Dus dat je als je met je muis er over heen gaat een andere kleur krijgt.

Maar nu moet ik bij een opdracht op school een uitklapbare balk maken. Zou dit hetzelfde idee zijn als een scroll over balk?
 
Ik ga er even vanuit dat je met "scroll over balk" (een term die ik in de jaren die ik op dit gebied bezig ben, nog niet eerder heb gehoord), doelt op een of andere hover effect?

En met een "uitklapbare balk" dat er iets tevoorschijn komt bij die hover?

Als je nou eerst een vertelt hoe jij een "scroll over balk" maakt, dan kunnen we je wel vertellen of je op die manier ook een "uitklapbare balk" kunt maken. Waarschijnlijk is jouw beste optie om CSS te gebruiken.
 
Uitklappen met alleen css-hover zal niet gaan, er zal ook wat extra html aan te pas moeten komen.
Maar welk theorie-boek gebruiken jullie op school, en staat het daar niet gewoon in?
Ik zou eens zoeken in het hoofdstuk dat gaat over menu's en submenu's. ;)

Met vriendelijke groet,
CSShunter
 
Wij hebben geen boek, wij moeten alles zelf uitzoeken! met nadruk op alles! We hebben wel een cursus gekregen. http://html.taner.nl maar daar staat bijna niks in.
 
Oef! En wat in die cursus staat, is zwaar verouderd (dan druk ik me voorzichtig uit!):
  • In de voorbeelden wordt Netscape 6 als browser genoemd: dan weet je het eigenlijk al ... :shocked:
    (de laatste versie was Netscape 9, die alleen nog als archief-exemplaar te krijgen is, want de officiële ondersteuning eindigde op 1 maart 2008 en de hele Netscape wordt door niemand -- hoop ik -- meer als browser gebruikt; NS zelf beveelt Firefox aan.)
  • "We kunnen ook de fontgrootte wijzigen. Het is heel simpel! (...) <FONT SIZE=6>grappig</FONT>"
    - Vind ik niet zo grappig, want de <font>-tag is al sinds 1999 afgekeurde html.
    Dat geldt voor meer tags en eigenschappen in die cursus: <CENTER>xxxxx</CENTER>, <BODY BGCOLOR="#xxxxxx">, enz.
  • "de gevorderde cursussen (...) Met de eerste van deze cursussen (...) kun je je pagina opleuken met frames."
    - Frames? Brr!, "Frames Suck Most of the Time" zei usability-goeroe Jakob Nielsen al in 1996.
    Of lees "Who framed the web" uit 2004 van Roger Johansson (456 Berea Street).
  • "De 'finishing touch' op je pagina's kun je maken met tabellen."
    - Hu! "Look, Ma, No Tables!" schreef css-specialist Eric Meijer al in 2002.
    En: "Throwing tables out the window", ook al een gezaghebbend artikel, uit 2004.
Genoeg over die cursus van school. *)
Op pagina 224 van de laatste staat "Creating a drop-down menu". Dat zal je een eind op weg moeten helpen, denk ik.

Met vriendelijke wensen,
CSShunter
____________
*) Je mag bovenstaande kritiek op die cursus gerust aan je school doorgeven: dat doe je je leerlingen toch niet aan! :evil:
(Het is toch niet de leraar zelf, die de cursus geschreven heeft? Dan moet het iets voorzichtiger gebracht worden... :rolleyes: )
 
Laatst bewerkt:
Yes: kort gezegd omdat <center> een opmaak-instructie is (die alleen voor weergave van een site in beeld [scherm, printer] kan werken).

Opmaak-instructies horen niet in de html-code, want die hoort universeel te zijn voor alle mogelijke manieren om een website te bezoeken (bv. ook met een voorleesbrowser, of met een braille-apparaat dat op je toetsenbord is aangesloten).
  • Wat heb je aan een voorleesbrowser, die vertelt: "De nu volgende tekst/afbeelding staat in het midden van de pagina"? Een blind iemand die een webpagina in braille bezoekt, zal ook niet erg geïnteresseerd zijn in de positie van de afbeelding op de pagina. Als zijn/haar braille-apparaat maar meldt wat er op die afbeelding staat!
Opmaak-codes horen wel in css, want je stylesheet bepaalt hoe de opmaak "er uit ziet", zowel op scherm als op andere manieren.
  • Met css: op scherm kan een img gecentreerd staan, maar bij printje van een pagina kan het aan de zijkant staan (omdat daar geen menu getoond wordt), bij een voorlezer wordt er niets gezegd over centreren, enz.
Zoiets?

Met vriendelijke wensen,
CSShunter
 
Oke, maar hoe wil jij met css de volgende opstelling maken, als je font class ook niet dient te gebruiken. (of dien je alleen size=x) niet meer te gebruiken?

Hallo<br/>
<center>center</center><br/>
Iets
 
<offtopic, hoewel>

't Is toch niet te geloven!
De auteur van de school-Cursus HTML! is Michael Doel, staat er bij:
"Hallo. Ik ben Michael
littlejoe.gif
en ik ga je in een paar simpele minicursussen leren hoe je een eigen homepage moet maken."
Klik om te vergroten...

Kom ik toevallig tegen: "Cursus HTML!", ook van een school (www.boni.nl/bonionline2/vakken/informatica/HTMLcursus/index.html), die er als twee druppels water op lijkt:
"Hallo. Ik ben Sjeng Greefkens
sjeng.gif
en ik ga je in een paar lessen leren hoe je een eigen homepage moet maken."
Klik om te vergroten...
  • De Netscape-illustraties zijn daar vervangen door Internet Explorer-plaatjes. Volgens de pagina-info dateert de cursus van 2004 of eerder.
Twee druppels water? Dat kan, want de tweede cursus is een bewerking door een leraar van een vertaling van een Engelse cursus onder de naam "So, you want to make a Web Page!".
Vertaling door ... Michael Doel; geschreven door Joe Barta van pagetutor.com.
"Hello. My name is Joe
littlejoe.gif
and I'm going to give you a few simple lessons on how to make a Web Page."
Klik om te vergroten...
Dat is kennelijk het origineel: www.pagetutor.com/html_tutor/index.html.

Dan maar eens even terug in de tijd, met de WayBack Machine. Joehoe! Echo: oehoe!
Het originele artikel is van 2000:
Jazeker, mijn nieuwe TV-programma heet "So, you wanna be a top tutorial writer?". :d

CSShunter
__________
PS: Ik heb niet gecheckt in hoeverre het artikel van pagetutor tussentijds een update heeft gehad. Ze hebben daar wel Netscape laten vallen ten gunste van IE (6, aan de plaatjes te zien), en ze maken melding van het bestaan van Firefox. Da's alvast wat.
Maar ja: "In the members area you'll learn much more about HTML tables and how to use them in your web page. You can use them as a layout tool, ... enz."
"The intelligent use of frames can give your pages a cleaner look and make them easier to navigate."
- Daar gaat het circus weer!

PSPS:
Er zijn nog meer klonen van de cursus in omloop: een Google'tje op een trefzin leert dat nog een heel rijtje scholen de cursus op hun site hebben staan of ernaar verwijzen...

</offtopic, hoewel>
 
@Jorryt:
<font .... (font-eigenschappen) ...> hoort helemaal van het toneel te verdwijnen (klik ook maar eens op het vette <center> in de code hieronder).
HTML: 
Hallo<br/>
<center>center</center><br/>
Iets
moet worden:
Code: 
.middenuitlijnen {
   text-align: center;
   }
met:
HTML: 
<p>Hallo!</p>
<p class="middenuitlijnen">Ik ben mooi gecentreerd.</p>
<p>Ik niet.</p>
Probeer maar! :)

(maar we dwalen zo wel erg af van onze vraagsteller mathijsf, die een uitklapbaar menu wil. ;) )
 
Laatst bewerkt:
mathijsf zei:
Wij hebben geen boek, wij moeten alles zelf uitzoeken! met nadruk op alles! We hebben wel een cursus gekregen. http://html.taner.nl maar daar staat bijna niks in.
Klik om te vergroten...

Taner zei:
Deze minicursus is gemaakt om gebruikt te worden onder Windows 95/98/NT/2000/ME/XP
Ook is het geoptimaliseerd voor Netscape. Geen Windows en/of Netscape? Geen paniek, het werkt
ook met andere browsers en onder andere besturingssystemen, zoals Linux en zelfs MAC OS.
Klik om te vergroten...
... dat is toch om te huilen? Jullie leraar heeft een snelle schop onder zijn derrière nodig, dit kun je je leerlingen niet met een schoon geweten voorzetten. Het is als een natuurkundeleraar die over de Ether en Phlogiston doceert.

csshunter zei:
Uitklappen met alleen css-hover zal niet gaan, er zal ook wat extra html aan te pas moeten komen.
Klik om te vergroten...
Hangt er van af wat hij wil. Als de bedoeling is een div te maken die langer/breder wordt als je er met de muis over heen gaat dan kan dat best met alleen wat extra CSS. (al zal dat in IE6 niet werken denk ik). Voor een uitklapmenu is inderdaad wat meer nodig.

EDIT: tsk, de censor is wel heel preuts
 
Laatst bewerkt:
<offtopic>
Als het preutse woord "kreet" zonder K was, dan kunnen we de censor makkelijk buiten spel zetten:
r​eet, dus! ;)
</offtopic>
 
kun je text-align: center ook bij een afbeelding toepassen?
Just
 
Je kan dingen altijd zelf uitproberen he;)
Of googlen.

Maar het kan wel ;)
 
Just1 zei:
kun je text-align: center ook bij een afbeelding toepassen?
Just
Klik om te vergroten...

Zoals Jorryt al zegt kan het wel, maar je moet er wel rekening mee houden dat je het op de "container" moet toepassen en niet op de afbeelding zelf.

Stel dat je afbeelding in een div zit, dan moet je text-align: center; op de div toepassen.
 
ErikBooy007 zei:
Zoals Jorryt al zegt kan het wel, maar je moet er wel rekening mee houden dat je het op de "container" moet toepassen en niet op de afbeelding zelf.

Stel dat je afbeelding in een div zit, dan moet je text-align: center; op de div toepassen.
Klik om te vergroten...
Dat kan natuurlijk wel maar handig is anders, alles in de paragraaf gaat dan namelijk in het midden staan en dat wil je meestal niet (lange gecentreerde tekst leest heel onprettig door de rafelige linker- en rechtermarges). Als je een plaatje in het midden wilt hebbenkun je het beter een class meegeven, bijvoorbeeld.
HTML: 
<img class="midden" src="urlvanhetplaatje.jpg">
Om het plaatje dan met CSS in het midden van de container te krijgen.
Code: 
.midden{
margin:0 auto;
}
Die 0 kun je ook in iets anders veranderen om de boven- en ondermarges te wijzigen.

EDIT: Om hier nog even op terug te komen.
Jorryt zei:
Zijn de <p> om de niet gecentreerde dingen dat verplicht?
Klik om te vergroten...
De <p></p> tags horen in principe om alle normale tekst te staan,* het geeft namelijk aan dat het om een paragraaf gaat. Als je lappen tekst onder tags neerzet kun je die vervolgens ook veel moeilijker vormgeven met je CSS.

*dus niet om koppen, lijsten, etc.
 
Laatst bewerkt:
Klopt, maar ik zat in m'n hoofd nog met post #10 van CSShunter. Zeg maar een aparte paragraaf voor de afbeelding dan, waar CSShunter zeg maar tekst gebruikte, maar ik ben het met je eens dat jouw oplossing mooier is.
 
Zozo, Erik geeft zich makkelijk over! Ik ben er meer eentje van Eerst Zien, Dan Geloven! :P

In afwachting van de terugkeer van mathijsf, onze TopicStarter met vraag over een uitklapbare balk (o, gaat dit topic daarover? jazeker!):
  • Een paar vrolijke testjes met het centreren van images, waarbij de tekst gewoon ongecentreerd blijft:
    www.developerscorner.nl/csshunter/tests/image-centreren.htm

  • Conclusie alvast: de oplossing van Naarling met img{margin: 0 auto;} werkt niet zonder meer, en een blok-element eromheen met {text-align: center;} is toch ook helemaal niet zo kwaad.
Maar over mooi valt niet te twisten! :)

Met vriendelijke groet,
CSShunter
 
Damn, csshunter, ik ben steeds weer onder de indruk van hoeveel moeite jij doet om ons iets duidelijk te maken. Chapeau!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan