Vragen

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Vragen

Bericht door J'88 »

Ik weet niet of ik antwoord op mijn vragen zal krijgen, omdat het forum aardig dood lijkt. Maar we wagen het erop.

Ik ben sinds een paar uurtjes bezig met NVU en bouw nu de eerste website die ik ooit gemaakt heb. Nu zit ik met een aantal vragen.

Ik heb de website 1000px breed gemaakt. Maar nu wil ik graag dat de website gecentreerd in de browser komt. Dus met aan beide kanten evenveel ruimte, waar ik dan vervolgens een andere kleur dan de achtergrondkleur van de website in kan doen. Hoe doe ik dit?

Tevens komt er zo nu en dan wat nieuws op de website. Hoe kan ik een mooi nieuwssysteem maken?

Groet
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Vragen

Bericht door nirwana »

Allereerst welkom hier op het forum. Ik denk dat dit de eerste keer is dat je binnen enkele uren reactie hebt ontvangen vanuit een "dood forum". Het ontgaat mij dan ook op basis waarvan je denkt dat dit forum "dood" is, maar dat terzijde.

Een soortgelijk voorbeeld heb ik recent hier als voorbeeld opgezet. En zo kom je in dit forum wel meer websites tegen waar ik dit trucje heb uitgehaald.

Het ligt er een beetje aan hoe je nu jouw website hebt opgezet: met tabellen of met div's.
Zelf werk ik bij voorkeur met div's omdat deze hiervoor zijn gemaakt. Het is echter ook mogelijk om met tabellen te werken, al zal ik dat niet snel aanraden.

Je ziet dat de beide websites die ik hierboven onder de linkjes heb geplaatst aardig op elkaar lijken. Toch is de onderliggende opbouw heel anders.

Of je nu een div of een tabel hebt gebruikt, het belangrijkste zijn deze CSS-instructies:

Code: Selecteer alles

width: 1000px; height: 118px; margin-left: auto; margin-right: auto;
Of in gewoon Nederlands: je geeft aan hoe breed en hoog iets moet worden en geeft vervolgens aan dat de browser zelf de linker- en de rechter-marge mag bepalen. Op die manier moet de browser het geheel horizontaal centreren.

Geef maar even aan of je div's of tabellen hebt gebruikt, dan kunnen we wel aangeven hoe je het beste dit kunt centreren.
In Nvu (overigens zou ik aanraden om Kompozer te gebruiken, want dit is nieuwer en daarin zitten wat extra bugfixes) kun je zowel op functionele wijze (via de menu's en werkbalken) een pagina bewerken als ook rechtstreeks in de broncode van de pagina. Zelf werk ik bij voorkeur in de broncode, maar dat was niet direct de bedoeling van Nvu/Kompozer. Aan de andere kant kan ik - denkend vanuit hoe ik de broncode wil hebben - ook wel aangeven hoe je iets in Nvu/Kompozer voor elkaar kunt krijgen via de werkbalken en de menu's.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Excuses. Ik dacht dat de laatste reactie hier van maart 2010 was. Zie nu ik inderdaad dat er dit jaar ook nog gepost is. Laten we het er maar op houden dat het laat was.

Dank voor je antwoord. Ik heb mijn website tot nog toe met tabellen gemaakt. Maar ik ben nog niet heel ver, dus ik kan zo nog overstappen. Wel heb ik geen idee hoe ik met div's zou moeten werken, is hier een handleiding voor? Ik ga nu Kompozer downloaden, kan ik daar gelijk mee aan de slag. Ik zou zelf geen broncode op kunnen stellen, maar als er eenmaal wat staat ben ik wel in staat om enkele aanpassingen te doen, dat moet dus lukken. Hartelijk dank!
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Ik ben nu even een tijdje met Kompozer in de weer geweest. Ik heb via Websonic een template (deze: http://www.websonic.nl/tutorials/websit ... index.html) uitgezocht. Heb het al voor elkaar gekregen om het linkermenu helemaal goed te hebben.

Omdat dit voor het eerst is dat ik dit doe zou ik graag eerst de startpagina goed in orde willen hebben. Dan kan ik daarna de andere pagina's eenvoudig opzetten. De puntjes waar ik nu mee zit. Ik zou graag onderaan de pagina nog een footer willen hebben. Ik heb dit al geprobeerd door de tekst voor een footer uit een ander document te halen en deze in het bestand te plakken van het template die ik nu gebruik. Helaas komt er dan niets in beeld.

Daarnaast ben ik bezig geweest met de header. In de eerste versie, die met tabellen, had ik wel wat aardigs gemaakt middels een handleiding. Twee tabellen, de linker op 25% en de rechter, logischerwijs, op 75%. Links het loge, rechts de tekst. Nu heb ik hier ook al een banner van gemaakt, maar mijn probleem is, ik heb geen enkel idee hoe ik dat er in moet krijgen. Heb al gezocht op internet, maar dat biedt geen soelaas.
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Wat verder aangeknoeid, maar de header is nu goed. De footer staat er ook al in, maar moet nog een beetje aangepast worden.

Dan heb ik nog een vraag. Ik wil in de footer tekst zowel links (copyright, naam website plus jaartal) als rechts (contact e.d.) uitgelijnd hebben. Is dit op de één of andere manier voor elkaar te krijgen?

Tevens heb ik nog twee wat grotere vragen, maar ik denk dat het beter is om eerste dit dingetje even op te lossen.

Vriendelijke groet
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: Vragen

Bericht door knorretje »

J'88 schreef:Ik wil in de footer tekst zowel links als rechts uitgelijnd hebben.
Ik zou als eerste het volgende proberen:
De footer onderverdelen in 2 divjes naast elkaar en dan de linkerdiv links uitlijnen en de rechterdiv rechts met de css-eigenschap text-align.
https://developer.mozilla.org/en/CSS/text-align
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Dank voor uw antwoord. Dan is mijn vraag, hoe maak ik zo'n div? En waar te plaatsen? Ik heb uw link doorgelezen, maar dat gaat mij de pet te boven.
novaflash
Berichten: 336
Lid geworden op: 5 mei 2010, 15:56
    Windows 7 Chrome

Re: Vragen

Bericht door novaflash »

Op zich is het niet zo moeilijk. Dit is het principe;

Je maakt een blok (div) met de juiste breedte, ik kies 100%:
<div style="width: 100%;">(hier komt inhoud)</div>

Daarna zet ik er 2 blokken in die naast elkaar komen te staan - het linkerdeel ingesteld om tekst LINKS uit te lijnen, en het rechterdeel ingesteld om tekst RECHTS uit te lijnen;
<div style="width: 50%; text-align: left;">dit gaat links uitgelijnd</div>
<div style="width: 50%; text-align: right;">dit gaat rechts</div>

Het resultaat wordt dan;
<div style="width: 100%;">
<div style="width: 50%; text-align: left;">dit gaat links uitgelijnd</div>
<div style="width: 50%; text-align: right;">dit gaat rechts</div>
</div>

Ik heb dit even uit mijn hoofd getypt dus geen garanties ;)
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Dit is het inderdaad. Alleen komen de twee divs onder elkaar te staan in plaats van naast elkaar.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Vragen

Bericht door nirwana »

knorretje schreef:
J'88 schreef:Ik wil in de footer tekst zowel links als rechts uitgelijnd hebben.
Ik zou als eerste het volgende proberen:
De footer onderverdelen in 2 divjes naast elkaar en dan de linkerdiv links uitlijnen en de rechterdiv rechts met de css-eigenschap text-align.
https://developer.mozilla.org/en/CSS/text-align
Even een gewetensvraag: waarom zou je text-align gebruiken als je de elementen ook kunt laten floaten ? Text-align zie ik vooral voor het uitlijnen van tekst in een element.

Ik zou de linker-div een float: left mee geven en de rechter een float: right. Volgens mij zou dat goed moeten gaan.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Dit komt zeer in de buurt. Dank! Ik heb nu alleen geen ruimte tussen het centrale vlak en de footer.

Ik gebruik deze template: http://www.websonic.nl/tutorials/websit ... index.html. En zou de footer exact hetzelfde willen hebben als de menubalk onder de header.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Vragen

Bericht door nirwana »

Als ik in de bovenstaande code float gebruik in plaats van text-align dan komen de beide elementen wel naast elkaar te staan:

Code: Selecteer alles

<div style="width: 80%; margin-left: auto; margin-right: auto;">
	<div style="width: 48%; float: left; text-align: left; border: 1px solid red;">dit gaat links uitgelijnd</div>
	<div style="width: 48%; float: right; text-align: right; border: 1px solid blue;">dit gaat rechts</div>
</div>
Je ziet dat ik hier ook de margin-left en margin-right in heb verwerkt om het geheel horizontaal te centreren.
Verder heb ik aan de beide helften een lijntje toegevoegd om aan te geven waar deze precies beginnen en tot waar ze gaan. Zo zie je ook waar je een text-align goed voor kunt gebruiken: de tekst uitlijnen binnen een div.

Vanwege dat lijntje heb ik de helften slechts 48% breed gemaakt, want anders vallen ze door dat extra lijntje net weer langs elkaar heen. Als een div namelijk te groot wordt en eigenlijk niet past in de ruimte die je ervoor hebt gereserveerd dan gaat-ie gekke dingen doen. Uiteindelijk kun je dat lijntje het beste verwijderen en dan kun je ook de beide helften weer 50% maken (of welke verdeling jou het beste past).
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
J'88
Berichten: 62
Lid geworden op: 13 januari 2011, 1:38
    Windows 7 Chrome

Re: Vragen

Bericht door J'88 »

Oké, heb hem erin geplakt en staat nu goed. De divs zitten nog wel steeds vast aan de centrale kolom. Is het mogelijk om die nog los te krijgen daarvan? Net zoals de menubalk in mijn post van 23:15.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Vragen

Bericht door nirwana »

Als ik het goed begrijp dan wil je zoiets: http://www.mozbrowser.nl/web/j88/index.html

Hiervoor heb ik eerst de volgende code toegevoegd aan de pagina:

Code: Selecteer alles

           <div class="footer">            
<a href="http://www.websonic.nl">Footer item 1</a> -
<a href="http://www.websonic.nl">Footer item 2</a> -
<a href="http://www.websonic.nl">Footer item 3</a> -
<a href="http://www.websonic.nl">Footer item 4</a> -
<a href="http://www.websonic.nl">Footer item 5</a>            
            </div>
Deze code heb ik op het eind toegevoegd, maar wel binnen de container-div (zodat deze nog wel horizontaal gecentreerd wordt).

Maar daarmee komt het nog niet goed. Dan komen de linkjes direct rechts onder het advertentie-gedeelte te staan. Daarom heb ik daarboven de volgende code tussengevoegd:

Code: Selecteer alles

<div style="clear: both;"></div>
Daarmee hef je het float van elementen op een pagina op, waardoor het volgende element in feite "op een nieuwe regel" begint. Zo staat die nu onderaan in een footer.

Zoals je ziet heb ik voor deze footer ook een class="footer" aangemaakt. Dit is in het styles.css bestand gewoon een regelrechte kopie van de menu-class. Overigens had ik hier ook een class="menu" in kunnen plaatsen, maar het leek me toch handiger om hier een aparte klasse voor aan te maken. Op die manier kun je nog eens de opmaak van de footer laten afwijken van de menu-items. Zo kun je deze bijvoorbeeld een andere achtergrondkleur geven of een andere link-kleur of misschien wil je daar nog wel eens iets anders mee doen.

Ik hoop dat het je zo wat duidelijk is geworden wat je zoal met CSS en div-elementen kunt doen. In eerste instantie betekent een div-element eigenlijk niets. Maar door daar CSS-eigenschappen aan toe te kennen krijgt de div een betekenis en kun je deze ten opzichte van andere elementen positioneren.

Overigens vind ik CSS niet altijd even makkelijk. Inmiddels ken ik steeds beter de nukken van CSS, maar dat heeft ook wel enkele jaren gekost. Maar volgens mij worden diverse van deze zaken ook wel eenvoudiger gemaakt door versie 3 van de CSS-standaard. Zo kun je daarmee bijvoorbeeld kolommen op een webpagina definiëren. Wie weet wordt dat dan het einde van de CSS-hacks die je nu wel eens ziet om een website er in de diverse browser-versies goed uit te laten zien. Maar het zal nog wel diverse jaren duren voordat alle browsers CSS3 voldoende ondersteunen zodat je er in een website van uit mag gaan dat de meeste browsers die de site bezoeken deze goed kunnen weergeven.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: Vragen

Bericht door knorretje »

nirwana schreef:Even een gewetensvraag: waarom zou je text-align gebruiken als je de elementen ook kunt laten floaten?
Deze vraag begrijp ik niet zo goed.
Als je de linker-div een float: left meegeeft en de rechter een float: right, dan heb je nog steeds text-align nodig om de tekst helemaal tegen de buitenrand te zetten, anders wordt er in de rechter div alsnog links uitgelijnd. Alleen floaten is in ieder geval aan de rechterkant niet voldoende volgens mij. Voor wat de linkerkant betreft heb je natuurlijk helemaal gelijk.