Foto positioneren website met HTML.

[marco1800]

Ik gebruik Ubuntu 14.04.1 LTS  en ben bezig met het maken van een kleine website en probeer 2 foto's naast mekaar te krijgen maar dit lukt me niet zo goed.

De foto led042 zou dus rechts van de andere foto moeten komen. Dank bij voorbaat.

<div id="content">
<h1><img style="width: 158px; height: 225px;" alt="gif 41" src="led041.gif" /><br /><BR CLEAR="left">
<h1><img style="width: 158px; height: 225px;" alt="gif 42" src="led042.gif" /><br /></h1><BR CLEAR="right">

[Ron]

De makkelijkste manier:

Code: [Selecteer]

<table border="0" style="width: 100%">
  <caption></caption>
  <col>
  <col>
  <tbody>
    <tr><div id="content">
      <td><h1><img style="width: 158px; height: 225px;" alt="gif 41" src="led041.gif" /><br /></h1><BR CLEAR="left"></td>
      <td><h1><img style="width: 158px; height: 225px;" alt="gif 42" src="led042.gif" /><br /></h1><BR CLEAR="left"></td>
    </div></tr>
  </tbody>
</table>Wanneer je ook het document type had gegeven, dan was het nauwkeuriger geweest ........

[bram103]

Met een tabel is zeker een gemakkelijke oplossing maar niet meer van deze tijd, je kunt dat dan op een echte website beter niet doen. Maar in jouw geval is de oplossing nog eenvoudiger img is een inline element oftewel ze gaan op dezelfde regel staan als de breedte van het scherm dat toelaat. Alleen jouw code voorkomt dit <br /> zorgt ervoor dat naar de volgende regel gegaan wordt.

Code: [Selecteer]

<img style="width: 158px; height: 225px;" alt="gif 41" src="led041.gif" />
<img style="width: 158px; height: 225px;" alt="gif 42" src="led042.gif" />Als je scherm minimaal 320 px breed is zullen de foto's met bovenstaande keurig naast elkaar staan (er van uitgaande dat er tenminste geen stijldeclaraties op je pagina staan die dit verhinderen).

Als je met webpagina's bezig bent is het handig te weten hoe het weergen van HTML werkt. Een van de vele sites waar dit uitgelegd wordt is http://learn.shayhowe.com/html-css/opening-the-box-model/   

[Frederik]

Met een tabel is zeker een gemakkelijke oplossing maar niet meer van deze tijd, je kunt dat dan op een echte website beter niet doen.

Graag een onderbouwing van dit geheel. Niet meer van deze tijd is niet relevant zolang het goed werkt. Voor zoiets simpels als twee afbeeldingen naast elkaar zetten in een tabel zie ik geen enkel bezwaar en geen enkele browser zal daar moeite mee hebben.

[Moob]

Je kan ook de text-align optie gebruiken. Dit moet je dan wel even in de meest gangbare browers testen om zeker te weten dat het wordt weergegeven zoals je het bedoelt hebt. Een tabel is de meest makelijke optie, hier kan elke browser correct mee overweg.

http://www.w3schools.com/cssref/pr_text_text-align.asp

[Ron]

Wanneer de pagina is gedeclareerd als HTML 4.01-Transitional, dan mag je gewoon tabellen gebruiken om uit te lijnen.
Eventueel kan je de pagina (laten) testen op standaarden van het W3C op http://validator.w3.org/

[MKe]

Tabellen zijn idd een beetje ouderwets. Je komt in de problemen als je clients b.v vanaf een mobiel je site willen bezoeken.
Het is waarschijnlijk overkill voor jouw doeleinden, maar je hebt tegenwoordig allerlei frameworks om de opmaak te automatiseren. Ikzelf gebruik graag twitter bootstrap. Daarmee maak je de boel direct flexibel, m.a.w. De website ordend zich naar het beeldscherm van de gebruiker. Erg handig, nooit meer een appart thema voor mobielen.

[Ron]

Je komt in de problemen als je clients b.v vanaf een mobiel je site willen bezoeken.

Nee hoor,
mijn website is met alle browsers, die de W3C standaard ondersteunen goed te bekijken, van telefoon en tablet tot PC, met alle besturingssystemen .........
Kwestie van juist declareren !

[EZ-man]

Engelse sites zijn er inderdaad genoeg, zoals de antwoorden hierboven al aangeven, maar nederlandse .....

@marco1800:  misschien kan je hier eens kijken :   http://www.html-site.nl/?s=tabel&submit=Zoeken

[bram103]

Het gebruik van tabellen voor de opmaak van een pagina werkt en mag volgens de HTML syntax. Wat ik bedoel met ' je kunt dat dan op een echte website beter niet doen' is dat we voor een echte website geacht worden te werken volgens usability richtlijnen zie b.v. http://www.drempelsweg.nl/

[Frederik]

Nee! Want een gewone website hoeft niet te voldoen aan de voorwaarden van drempels weg. Het is zoals Ron zegt dat als je website goed gevalideerd wordt door W3C je zoveel tabellen mag gebruiken als je wilt, ook al is dat wat ouderwets.  Het probleem met tabellen is (maar dat is een andere discussie) dat deze statisch worden weergegeven en zich niet automatisch aanpassen aan de verschillende schermformaten van tablets en slimme telefoons (ze bewegen niet mee zoals elastiek dat doet). Websites die het goed worden weergegeven op alle beeldschermformaten worden responsive genoemd en in een responsive ontwerp worden geen tabellen meer gebruikt.
Ik beheer tientallen websites waar met tabellen wordt gewerkt zonder enig probleem. Leef je lekker uit.

[Ron]

Het probleem met tabellen is (maar dat is een andere discussie) dat deze statisch worden weergegeven en zich niet automatisch aanpassen aan de verschillende schermformaten van tablets en slimme telefoons (ze bewegen niet mee zoals elastiek dat doet).

Kijk dan nog maar eens op één van mijn websites, de tabellen passen zich wel degelijk aan !

[EZ-man]

@bram: Drempelvrij neemt zelf niet alle richtlijnen over ;-)  Heb je het commentaar onder het volgende artikel ook gelezen.   :
       http://www.drempelsweg.nl/gebruiksvriendelijke-websites/

[Ron]

Ach, een aantal site die ik beheer hebben ook tabellen. Het mag dan ouderwets zijn volgens sommige, het werkt nog altijd goed.
Ze zijn trouwens ook goed te zien op tablets en mobieltjes.

W3C zegt: 14 Errors, 3 warning(s),
waarom heb je een HTML-5 site, dat is (in jouw geval) toch niet nodig?

[MKe]

Het probleem met tabellen is (maar dat is een andere discussie) dat deze statisch worden weergegeven en zich niet automatisch aanpassen aan de verschillende schermformaten van tablets en slimme telefoons (ze bewegen niet mee zoals elastiek dat doet).

Kijk dan nog maar eens op één van mijn websites, de tabellen passen zich wel degelijk aan !

Welke website is dat?
Ik bedoel dat het aantal kolommen zich normaal gesproken niet aanpast op de breedte van het scherm. Misschien heb je daar een oplossing voor. Bij Bootstrap krijg je dat er 'gratis' bij.

[Frederik]

Kijk dan nog maar eens op één van mijn websites, de tabellen passen zich wel degelijk aan !

Gelukkig heb ik geen tablet of slimpie telefoon dus dat kan ik niet controleren, maar een statisch ontwerp past zich niet automatisch aan de diverse beeldschermformaten, mogelijk dat in je ontwerp code is verwerkt die daar voor zorgt. Dat staat los van een W3C validatie. Het is voor mij net zoals femke98 zegt: het zal deze senior verder een biet zijn.

[EZ-man]

... maar eh, lekker roomser dan de paus. Ubuntu-nl wordt ook een dagje ouder: de tabellen / div etc zijn niet echt flexibel.

Als table goed wordt toegepast (zie bv. opmerking Ron ) dan is er niets op tegen. Veel ergenis ontstond zo'n 12 -14 jaar geleden toen de serverside dynamic pages werden geintroduceerd en een heeeeel grooooot tabel door telefoonlijn ging. Je zat 2-3 minuten te wachten tot de tekst verscheen (en jaaaaaaa daaaaaar zijn de plaaaaatjes).

Inmiddels worden andere technieken gebruikt voor lange pagina's. De term ben ik even kwijt endless pages (?).

[EZ-man]

Terug naar de eerder gestelde vraag:
is het als low-end oplossing wat om de ruwe Html-code m.b.v. LibreWriter  op te zetten en dit in Geany te bewerken. Je moet dan wel goed omschrijven wat je onder ruwe pagina opmaak verstaat, want als je plaatjes en kleurtjes aan het ontwerp toevoegd in LibreWriter introduceer je wat ellendige code. (Maar toch ook weer niet zo ellendig als met msWord.)

[Ron]

Welke website is dat?

o.a. zie mijn ondertekening : http://www.dwarsligger.org

Ik bedoel dat het aantal kolommen zich normaal gesproken niet aanpast op de breedte van het scherm. Misschien heb je daar een oplossing voor. Bij Bootstrap krijg je dat er 'gratis' bij.

Er zijn vele wegen die naar Rome leiden, ik doe het als volgt:
De tabel-breedte definieer ik als 100% (dus niet in het aantal pixels).
De breedte van het "<TD" element geeft ik alleen op, wanneer er een plaatje van een aantal pixels in moet passen, anders werk ik ook met procenten (%), of laat ik het de browser uitzoeken.
Tekst regels krijgen alleen aan het einde een harde return (<br> of <p> en </p>), waardoor de browser zelf de tekst kan en mag formatteren, dit is geheel volgens de W3C standaard.
Verder gebruik ik nooit een browser-herkenning om de formattering browser afhankelijk te maken, dit is m.i. de grootst mogelijke onzin die er is.
Ook Java(script) wordt geweerd van mijn websites, alles gebeurt in de server (met PHP) en de communicatie naar de cliënt is puur HTML.
Het gebruikte script heb ik in 2008 gemaakt, maar sindsdien zijn er al duizenden update geweest, om het script te laten doen, wat ik op dat moment nuttig vond (ik ben geen programmeur, het is gewoon een hobby).
Kijk ook eens op http://www.algemeenbelangtholen.nl om te zien wat mogelijk is.
Mocht er interesse zijn, dan wil ik het script best opsturen ........

[Ron]

Maar wees eerlijk Ron, hoe vind je je eigen website?

In één woord? duidelijk
Deze website is ook bedoeld puur en alleen voor de informatie die er op staat.
De andere site die ik noemde, is mooier, maar die is ook bedoeld om mensen te informeren.

Het nadeel van jouw website is, dat in de breedte 30% niet gebruikt wordt, iets dat een hoop CMS systemen hebben.
Dit is echter mijn persoonlijke mening en ik kan behoorlijk eigenwijs zijn

Verder ben ik van mening, dat wanneer je gebruik maakt van een openstandaard,  je dit dan ook moet volgen en niet eigenwijs zijn en gaan afwijken van deze standaard (dat laat ik aan MS over).
Mogelijk dat ik er ooit anders over ga denken, maar tot die tijd volg ik het W3C, die tenslotte de HTML standaarden bewaakt en beheert.

[MKe]

Ron, natuurlijk werkt dat tot op zeker hoogte, alleen als iemand je website met een telefoon bezoekt dan werkt het niet. Op een scherm van b.v 320 pixels breed wordt het onleesbaar of de plaatjes schalen tot een postzegel formaat en je zijmenu  wordt heel klein. Of je moet dn steeds in alle richtingen scrollen, wat het verzicht niet ten goede komt. Wat responsive betekend is dat de pagina daarop reageerd en desnoods terug schaalt naar 1 kolom in plaats van alles naast elkaar. Zo blijft de site prettig bruikbaar, zelfs op een telefoon. Dat is wat nieuwe frameworks als bootstrap je geven. Thema's zoals Femke gebruikt gebruiken dit soort frameworks ook. En waarom zou dat niet volgenw de W3C standaard zijn?

[Ron]

En waarom zou dat niet volgens de W3C standaard zijn?

Op de test pagina van het W3C kan je websites testen op correct gebruik van de web-standaarden.
Begin maar eens ergens te testen en ga je dan verbazen, dat hooguit 1% van de websites aan de standaard voldoet.
Van de websites van overheden, die aan de standaarden moeten voldoen, heb ik tot nu toe maar één gemeente en de rijksoverheid.nl site gevonden, die foutloos zijn.
Er zijn veel websites van gemeenten, die alleen op de startpagina al meer dan 50 syntax fouten hebben.

Het bekende verhaal van ICT en overheden ?

[Frederik]

Ron ziet één ding over het hoofd, wat MKe ook aangeeft. Ook al voldoet je website aan de W3C standaard dan nog kan die website op een slimpie telefoon uiterst beroerd worden weergeven omdat die niet 'responsive' is. Daarmee niks ten nadele van W3C die alleen controleert op correct html- en CCS gebruik.

[Ron]

Wanneer je de websites bekijkt, die ik gemaakt heb, op je telefoon en/of tablet, dan zal je zien, dat regels bij het draaien van het scherm, op een ander punt worden afgebroken.
Voor foto's gaat dat niet op, maar voor tekst werkt het uitstekend!
Alle sites die ik maak, test ik met 10 browsers in Linux, met een Android foon, met een Android tablet en met een iPad.

[Frederik]

Wanneer je de websites bekijkt, die ik gemaakt heb, op je telefoon en/of tablet.....

Lees jij eigenlijk wel ?
Ben even naar de buren gerend voor hun Samsung Galaxy slimpie telefoon: je website ziet er gewoon niet uit en ik veeg me een ongeluk. Ik had andere verwachtingen 

Zodra ik het toestel kantel om de tekst te vergroten om goed te kunnen lezen vliegt het menu weg, ga ik verkleinen om terug te kunnen keren naar het menu kan ik de tekst weer niet lezen. En dat is wat je dus met een 'responsive' ontwerp niet overkomt, eigenwijze dwarsligger!