Hoe slecht is Frontpage?

[dit kan niet]

Goeroeboeroe,
Om nog even op tabellen terug te komen;
Wanneer ik naar de bron van diverse "grote en bekende" sites kijk, kom ik toch heel vaak tags tegen als td tr enzo. Dus die maken gebruik van tabellen. Ik ben geen fundamentalist, overigens. Ik heb altijd graag met tabellen gewerkt en het aanpassen ervan gaat vrij eenvoudig, mbv een wysiwyg editor.

Maar jouw raadm heb ik toegepast op de volgende pagina:
http://www.vanalphenbladel.nl/sam-tess/games2.html
Het is idd minder code, maar voor een leek als ik was het wel meer "werk", voordat ik hetzelfde resultaat had bereikt. Ook omdat de footer helemaal verkeerd kwam, zoals je al aangaf. Ook dat is opgelost door je raad, maar ik snap niet dat datgene wat ik in de content verander, invloed kan hebben op de footer. Ik moet beide dus niet zien als apart (nu ik het zo schrijf is het niet zo duidelijk als ik bedoelde, maar ik hoop dat je het snapt?...)

Op de volgende pagina:
http://www.vanalphenbladel.nl/sam-tess/games3.html
heb ik iets anders geprobeerd, op dezelfde wijze, maar nu 3 kolommen (als ik het zo mag noemen) door in de (html)pagina

<div id="driekolommen">

te plaatsen en de volgende code in het css bestand toe te voegen :

#driekolommen {
  width: 607px;
}
#driekolommen li {
  float: left;
  width: 33%;
}

Ik had eerst een probleem doordat het aanmaken van een style regel niet lukte. In de html pagina had ik het volgende:

<div id="3kolommen">

Wanneer ik in Kompozer een regel wou toevoegen aan het css bestand "pakte" hij het gewoon niet, wanneer het met een cijfer begon. Kan dit kloppen? mag een id niet met een cijfer beginnen?

Maar al met al weer iets wijzer! (denk ik dan toch...)
Het volgende is een soort vraag;
Zo zou je dus in het css bestand regels aan kunnen maken als:

#tweekolommen {
  width: 607px;
}
#tweekolommen li (((((of hier iets anders, als p, h1, etc?)))){
  float: left;
  width: 50%;
}

of

#vierkolommen {
  width: 607px;
}
#vierkolommen li (((((of hier iets anders, als p, h1, etc?)))){
  float: left;
  width: 25%;
}

en dan in de html pagina waar je een x aantal kolommen in wil voegen:

<div id="((((hier het aantal in letters)))))kolommen">

En het eindresultaat is dan gelijk aan tabellen?
Door aanpassingen in het css bestand kunnen er allerlei dingen toegevoegd worden als: randen, ander lettertype, vet gedrukt, cursief, en nog meer.?

Is het gebruik van div's onbeperkt? Mag ik binnen <div id="content"> onbeperkt andere div's toevoegen? Ik weet dat het kan, maar "mag" het ook?

 

[Goeroeboeroe]

Dat klopt, er zijn nog ongelooflijk veel sites die tabellen gebruiken voor de lay-out. Omdat dat vroeger gewoon simpelweg de enige manier was. En het ombouwen van een (grote) bestaande site kan behoorlijk kostbaar zijn.
En 't is inderdaad echt wennen, als je afstapt van tabellen. Toch is het, als je er eenmaal aan gewend bent, minder werk maar vooral: als je ooit iets wilt veranderen, scheelt dat echt ongelooflijk veel werk.
Stel dat jij die spelletjes nou 'ns opeens in drie kolommen wilt hebben. Dan hoef je alleen maar de breedte van de <li>'s te veranderen van 50% naar 33% en dan staan er 3 naast elkaar. Met 'n tabel zou je op de pagina zelf de hele tabel moeten gaan ombouwen. Als je 100 pagina's hebt... Of 1000...
Voor lay-outs worden dan ook nog vaak geneste tabellen gebruikt, tot wel 10 niveaus of meer diep. Als je daar iets aan verandert, stort het hele kaartenhuis vaak in elkaar, omdat er niets meer past.

Als je iets float, zoals je nu bij die <li>'s hebt gedaan, wordt het 'uit de flow' gehaald: het staat niet meer in de normale html-stroom, zeg maar. (Ongeveer hetzelfde gebeurt bij position: absolute en position: fixed). Dat wil zeggen, dat het wel op je scherm komt te staan, maar voor de rest van de pagina is het niet aanwezig.
Je float dus 'n div naar links (of 'n <li> of wat dan ook). De div (of wat dan ook) daaronder komt dan gewoon óver de gefloate div te staan, want die telt niet meer mee.
Bij position: absolute en fixed is dit het. Bij floaten is het nog iets ingewikkelder (hoewel dat uiteindelijk echt heel handig is en veel mogelijkheden biedt). De divs (of wat dan ook) staan over elkaar. Maar de INHOUD van de tweede div wordt naast de INHOUD van de eerste, gefloate div gezet.
Dat is wat er bij jouw footer gebeurde: de INHOUD van de footer werd gelijk neergezet waar er ruimte was. Door clear: both (of clear: left of clear: right) te gebruiken voorkom je dat.
Maar 't is net rekenen: als je 't eenmaal kunt, is 't achteraf heel makkelijk. Om 't in je vingers te krijgen kost wel even wat moeite.

Ha, wat mooi. Zit ik hier 'n heel verhaal over drie kolommen te houden, heb je dat al uitgeprobeerd!

Ja, 'n id móét met 'n letter beginnen. Na die eerste letter mogen wel cijfers volgen en het teken -
Dat heeft te maken met standaardregels of zo die voor (vrijwel) elke taal hetzelfde zijn. Zoiets.

Ja, het onderste deel van je verhaal is precies waar het om gaat. Je ontwerpt het één keer (en dat kan even wat veel werk zijn, meer dan 'n tabel, zeker omdat bijvoorbeeld dat vreselijke IE 6 heel veel bugs heeft met floaten, position, e.d.). En daarna kun je het eindeloos toepassen. Als je nog 100 spelletjes-pagina's wilt maken, is je lay-out klaar. Je hoeft alleen de links te typen, meer niet.

Je mag 'n onbeperkt aantal divs gebruiken. Maar als je er te veel gebruikt wordt dat divitis genoemd (te veel spans heet spannitis). Ook daar heb je weer veel mensen die elke div te veel als 'n ramp zien. Ik ben daar zelf wat pragmatisch in. Als je 'n div (of 'n span) leeg laat en dus alleen gebruikt om er via css iets van de lay-out aan te koppelen, heb ik nooit zo goed begrepen wat daar nou zo vreselijk aan is. Spraakbrowsers e.d. hebben er geen last van, zoekmachines ook niet, dus...

Alleen: als je echt 'n oerwoud van divs gaat maken, dan wordt de code op 'n gegeven moment heel erg moeilijk te begrijpen.
Leuk trouwens om te zien dat je er zo mee bezig bent.

Edit: veel mensen gebruiken voor álles 'n div. Dat is niet de bedoeling.
De belangrijkste kopregel van 'n pagina hoort in 'n <h1> te staan. Als de letter te groot is of zo kun je dat corrigeren met css.
'n Minder belangrijke kopregel <h2>, <h3> enz. Zoekmachines hechten meer waarde aan de inhoud van 'n <h1> voor 't indexeren, en spraakbrowsers e.d voor blinden, programma's voor mensen die niet met de muis kunnen werken, e.d. maken er gebruik van om snel door de pagina te kunnen gaan. Dus als er 'n speciaal element is dat je kunt gebruiken in plaats van 'n div of span, moet je dat in de regel altijd doen.
html 5 gaat nog veel meer elementen geven, zoals <menu> en <header>, zoals het er nu naar uit ziet. Prima, dat maakt de code overzichtelijker en beter hanteerbaar voor zoekmachines en spraakbrowsers e.d.

 

[dit kan niet]

Hallo,

Ja ik probeer maar wat dingetjes uit, dat leert het beste vind ik.

Dus wanneer er html 5 komt, heb ik eindelijk een site klaar en dan is die weer ouderwets? Dus dan weer aanpassen, maar dan moeten dus alle html pagina's aangepast worden.
Ach ja, een mens moet iets te doen hebben.

Maar ik begin het (html en css) een beetje te begrijpen en zie er hier en daar wel de voordelen van in. Het probleem is dat het een andere manier van werken is dan ik gewend ben. Dat ligt niet aan css, maar aan mijzelf. punt.
Het zal nog wel wat voeten in aarde hebben, voordat ik onze site (zie link in de handtekening) "aangepast" heb. dwz, geen frames meer, proberen zonder tabellen... etc. Een dropdownmenu, staat op het verlanglijstje. Evenals goed scoren bij zoekmachines.

Ik ga weer wat proberen...

 

[Goeroeboeroe]

Nee, als html 5 klaar is hoef je als het goed is, niets te veranderen.
html was oorspronkelijk 'n taal voor wetenschappers, met vrijwel geen opmaakmogelijkheden. Op 'n gegeven moment zijn browsermakers er dingen in gaan stoppen als randjes en kleurtjes enz. Dat was tijdens de 'browseroorlog', waarbij elke browser uit concurrentie-overwegingen z'n eigen uitbreidingen erin stopte, die in 'n andere browser niet werkten. Ik word nog wel 'ns gillend wakker na 'n nachtmerrie daarover... Toen moest je dus letterlijk 'n aantal verschillende pagina's maken, voor elke browser een.
Als reactie daarop is de opmaak, lay-out, afgesplitst van de inhoud. css voor de opmaak, html voor de inhoud en de structuur (<h1>, <quote>, <ul>, enz.)
Sinds 'n aantal jaren worden daarom tags als <font> afgeraden. Als je je daaraan hebt gehouden, hoef je bij html 5 (en css 3) niets aan te passen, want dit zijn uitbreidingen.
Als je, ondanks de jarenlange waarschuwingen, toch nog <font> en zo hebt gebruikt, kun je html 5 gewoon niet gebruiken. Punt.
Maar zoals jij nu werkt hoef je dus in principe niets aan te passen. Je zou dan wel, als dat ooit in alle browsers werkt, over jáááren, 'n div met id="menu" kunnen vervangen door <menu>, maar dat hoeft niet.

Daarom zijn die open standaarden zo belangrijk. Als het goed is, kan 'n nieuwe versie gewoon werken met wat al bestaat. Bij html is dat dus in het verleden gigantisch misgegaan vanwege financiële motieven.

 

[dit kan niet]

Ik loop weer tegen een probleem aan met mijn .css bestand.
Deze heb ik nu mbv Kompozer aangepast/aanpassingen aangebracht. Maar wanneer ik het bestand nu open/bewerk in kladblok (in ansi, unicode en/of utf) komt het er niet duidelijk uit te zien. Heel onoverzichtelijk.
Andere css bestanden die niet bewerkt zijn mbv Kompozer zien er wel normaal uit. Ik heb al geprobeerd het bestand anders op te slaan (als ansi, unicode) maar blijft hetzelfde.

EDIT: De vierkantjes verschijnen daar waar de zin een regel lager zou moeten beginnen. Of mogen beginnen...

 

[Goeroeboeroe]

Wat ik al heel lang van plan was maar 'ns gedaan: Kompozer geïnstalleerd, want er komen meer vragen over.
Ik denk dat dat niets met Kompozer te maken heeft. De codes voor 'n nieuwe regel zijn helaas verschillend tussen Linux, WIndows en OS X. Als ik 'n css-bestand binnenhaal vanaf 'n Linux-server op internet in Kompozer, gaat 't goed. Dat wil zeggen: Kompozer kan 't verwerken.
Als ik dan op de knop <HTML> klik in Kompozer opent Notepad met zo'n prachtig abstract schilderij: alles achter elkaar.

Wat bij mij werkt: Bestand -> Opslaan als. En dan onderin kiezen voor Tekstbestand.
Daarna is 't in orde en blijft 't in orde. Kennelijk worden daardoor de regeleindes geconverteerd naar de juiste waarden voor Windows.

 

[dit kan niet]

Bestand opslaan als... en dan textdocument kiezen. Ok, maar daaronder kan ik codering kiezen: ansi, unicode, utf... En achter de bestandsnaam ".css" neem ik aan?

EDIT: Wanneer het met WordPad geopend wordt, lijkt alles wel normaal, alles staat dan netjes onder elkaar.
EDIT2: Nou breekt mijn klomp! Nu heb ik het bestand geopend met WordPad (dus niet kladblok) en dan opent die gewoon duidelijk, ik klik op opslaan, en als ik het dan open in kladblok is het allemaal goed!? Afijn, kan ik vannacht wat beter slapen...

 

[Goeroeboeroe]

Ik zou utf-8 kiezen, maar dan moet je dat ook even in de voorkeuren van Kompozer veranderen. Anders krijg je (mogelijk) daar problemen.
Ook al die verschillende charset hebben te maken met het verleden. Toen was er maar ruimte voor 127, later 255 tekens. ISO maakte daarom voor 'n hoop talen aparte tekensets, maar (uiteraard) vond Microsoft het nodig om eigen, niet-standaard, charsets te maken die nét even anders waren.
Inmiddels kan vrijwel alles met de wereld-standaard utf-8 werken: tekstverwerkers, wysiwyg-editors, browsers, noem maar op. Dus als je gewoon alles daarin opbergt, heb je nooit meer 'n probleem.
Alleen heel oude of echt extreem slechte programma's kunnen daar niet mee overweg.

Extensie zou ik op css houden. Het maakt niet uit, want 'n css-bestand is 'n gewoon tekst-bestand. Maar mogelijk herkennen sommige programma's het niet meer als je 'n andere extensie dan .css neemt.

Wordpad zou ik niet gebruiken. Dat voegt opmaakcodes toe waar alleen Wordpad mee uit de voeten kan. Voor html- en css-bestanden (e.d.) moet je echt alleen 'n speciaal programma als Kompozer of 'n simpele editor als Notepad gebruiken.
Ik denk trouwens dat 't probleem in Notepad zit, want dat heeft wat problemen met het op de juiste manier opslaan van utf-8. Meestal gaat dat goed, maar in zeldzame gevallen krijg je opeens lege regels in IE 7. Tja.
Wordpad zet die regeleindes dan mogelijk wel goed om.

Ik zou anders 'ns Notepad++ proberen. Dat is Notepad met toeters en bellen. Je code krijgt dan bijv. kleurtjes, wat handig is om sneller fouten te herkennen.
Als dat probleem met de regeleinden blijft bestaan, dan zou ik je vraag hier even opnieuw stellen met 'n ander onderwerp (en mogelijk ook in 'n andere sectie). Of de vraag stellen op het forum voor Kompozer:
http://www.mozbrowser.nl/forum/viewforum.php?f=26

 

[Goeroeboeroe]

Jouw post kruiste de mijne.
Dat is mooi. En ik vergis me. Ik verwar Wordpad met Works.
Dan is 't inderdaad denkelijk dat Kladblok op die regeleinden vastloopt en Wordpad niet.
Mooi dat je dan vannacht goed kan slapen.

 

[dit kan niet]

Hallo,

Momenteel ben ik bezig om te kijken wat de mogelijkheden zijn, om de gehele site (link in mijn handtekening) te herzien.
Een eerste opzet:
http://www.vanalphenbladel.nl/nieuwepopeyesite
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>title</title><link rel="stylesheet" type="text/css" href="style.css" />



</head>
<body>
<div id="bg">
<div id="wrap">
<div id="header">
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="nieuwsa"><a href="#">Nieuws</a></li>
<li class="team"><a href="#">Team</a></li>

<li class="techniekc"><a href="#">Techniek</a></li>
<li class="sponsors"><a href="#">Sponsors</a></li>
<li class="wedstrijden"><a href="#">Wedstrijden</a></li>
<li class="videos"><a href="#">Video's</a></li>
<li class="forsale"><a href="#">For sale</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<h1>kop1<br />dsadas<br />sdas</h1>

<h2>kop2</h2>
<h3>k<a href="index.html">op3<br />asdasd<br />asd<br />asd</a></h3>
<h4>kop4</h4>
<h5>kop5</h5>
<h6>kop6</h6>
</div>
<div id="footer">
<p id="copyright">© 2009. All Rights Reserved. Designed by
John van Alphen.

</p>
<img alt="Document made with KompoZer" src="http://kompozer.sourceforge.net/images/kompozer_80x15.png" border="0" /><!-- /footer -->
</div>
</div>
</div>
</body></html>

Style.css:

/* Generated by KompoZer */
html {
  background-repeat: repeat;
  background-position:  0% 0%;
  background-image: url(index/afbeeldingen/achtergrond_carbonlook.jpg);
  background-attachment: fixed;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
}
fieldset, img {
  border:  none;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}
li {
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  margin-right: 8px;
  margin-left: 8px;
}
caption, th {
  text-align: left;
}
h1 {
  font-family: Arial,Helvetica,sans-serif;
  text-transform: none;
  font-weight: normal;
  line-height: 1.1em;
  color: red;
  font-style: italic;
  text-align: left;
  font-size: 20px;
}
h2 {
  border-bottom: 2px solid red;
  font-family: Arial,Helvetica,sans-serif;
  color: black;
  font-style: normal;
  text-transform: none;
  font-weight: normal;
  line-height: 1.1em;
  text-align: left;
  font-size: 14px;
}
h3 {
  color: black;
  line-height: 1.1em;
  font-family: Arial,Helvetica,sans-serif;
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  font-size: 12px;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border:  none;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
legend {
  color: #000000;
}
table {
  font-size: 100%;
}
pre, code, kbd, samp, tt {
  font-family: monospace;
  line-height: 100%;
}
body {
  color: #ffffff;
  font-size: 12px;
  font-family: Arial,Helvetica,sans-serif;
  line-height: 110%;
}
a {
  background-repeat: repeat;
  background-position: 0% 50%;
  background-attachment: fixed;
}
a:hover {
  text-decoration: underline;
}
#bg {
  margin: 0 auto;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: left center;
  width: 800px;
}
#wrap {
  margin: 0 auto;
  width: 800px;
  text-align: left;
  background-color: white;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix {
  clear: both;
}
#header {
  background-repeat: no-repeat;
  background-attachment: scroll;
  height: 150px;
  background-image: url(http://www.vanalphenbladel.nl/index/topNL.png);
  background-position: left top;
}
#nav {
  position: absolute;
  top: 125px;
  width: 800px;
  line-height: 25px;
  background-color: red;
}
#nav li {
  float: left;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #999999;
}
#nav a {
  text-decoration: none;
  display: block;
  text-align: center;
  color: white;
  background-color: red;
}
#nav a:hover {
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 50%;
  color: red;
  background-color: white;
}
#content {
  margin: 0 20px;
  color: black;
}
#content h2 {
  margin: 15px 0;
  font-size: 24px;
}
#content p {
  margin: 10px 0;
}
#footer {
  border-top: 2px solid red;
  color: red;
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

code gevalideerd, geen fouten, wel weer waarschuwingen, maar hoe komt het dat als ik de site bekijk; de h1 tekst kleiner is dan de h2 tekst? In de css code staat toch dat deze 6px groter zou moeten zijn? (20px tov 14px). Zit er ergens iets te "wringen"?

Als ik met de muis over de links ga, veranderd de achtergrond kleur van rood naar wit, okay, dat klopt, maar die blokjes zijn niets groter dan de tekst. Dit moet een instelling zijn, die ik over het hoofd zie?

Bij voorbaat dank!

EDIT:
Na wat prutswerk, zag ik #content h2, deze heb ik maar uit het css bestand gehaald (is een gedownloade template geweest) en nu lijkt het lettergrootte verschil opgelost. #content h2 is dus een aparte "selector" voor h2, welke in de div content staat, denk ik dan.
En Edit2: Ook de blokken in de navigatie, zijn nu iets groter, maar ik weet nu niet meer wat ik precies veranderd had...
Wel mooi om te zien zo, hoe de weergave veranderd wanneer ik de css editor binnen Kompozer gebruik. Dit zocht ik.

 

[Goeroeboeroe]

Bij mij is Kop1 groter dan Kop2, precies zoals het hoort. Zowel in Firefox als in Opera en IE 6, dus ik neem aan overal in.
Even tussendoor: jij hebt 'n bestaande site, dus als je 'm gaat ombouwen zou ik daar lekker de tijd voor nemen en 'm vooral goed testen in minimaal IE 6, 7 en 8 (dat zijn drie totaal verschillende browsers), Safari (en liefst ook Google Chrome), Firefox en Opera.
Dan weet je zeker dat 't goed werkt voor je 'm op internet zet.

Ah, ik zie dat je aan 't knutselen bent en de <h1> <h2> hebt opgelost.
Bij mij zijn de witte blokjes breder dan de tekst (bij hoveren). Ik snap niet helemaal wat je bedoelt.

 

[dit kan niet]

Ah, ik zie dat je aan 't knutselen bent en de <h1> <h2> hebt opgelost.
Bij mij zijn de witte blokjes breder dan de tekst (bij hoveren). Ik snap niet helemaal wat je bedoelt.

Ja dat klopt, dat met die blokjes is inmiddels ook al opgelost, maar ik weet niet meer wat ik precies veranderd had. Dat komt omdat er in dat css bestand zoveel verschillende selectors staan...
Ik heb nu ook een link naar "nieuws" toegevoegd en daar een voorlopige nieuwspagina gemaakt. Door de index pagina te voorzien van het nieuws (dat ik geplakt had in kladblok en van daaruit weer gekopieerd en geplakt in mijn html editor) en deze indexpagina dan opslaan als "nieuwspagina" binnen in de map "nieuws". Makkelijk. Daarna nog de h1, h2, h3 geplaatst en het resultaat is zoals je nu kunt zien op de nieuwspagina.
Foto's zijn nu wel weg... dat moet ik nog bekijken hoe dat moet.

PS: Ik maak eerst de gehele site compleet klaar op de computer, daarna uploaden naar een tijdelijke map, dan kijken of alles werkt bij verschillende browsers en daarna de map hernoemen...

Welterusten en bedankt!

 

[Goeroeboeroe]

Dat 't zoveel code is komt grotendeels omdat je met zo'n wysiwyg-editor werkt. Er staat heel veel in wat niet echt nodig is. Overigens is dit nog een van de betere wat dat betreft, er zijn er die er nog veel meer in zetten.
Bijvoorbeeld iets als 'normal' wat je heel veel ziet, dat is vrijwel nooit nodig. Maar omdat die editor niet 'weet' of het elders is veranderd, wordt dat er voor de zekerheid ingezet.
Je zou niet de eerste zijn die, als hij er lol in heeft, vrij snel overgaat op echt met de hand werken vanwege dit soort redenen.

 

[dit kan niet]

Goeroeboeroe,

Dat er zoveel selectors in de css staan, is omdat ik een template had gedownload en deze ben ik aan het aanpassen. Al die selectors stonden er al in. Maar er staan er ook in die niet gebruikt worden en die doe ik verwijderen, want wat niet gebruikt wordt moet weg vind ik. Dan wordt het duidelijker. Ik ben nog maar nieuw met dit alles en Kompozer, maar binnen Kompozer ben ik vrij vaak binnen de bronbewerkingsstand bezig.

Als ik een afbeelding invoeg zou ik er graag tekst links of rechts langs willen hebben. Met tabellen is dat makkelijk, maar hoe gaat dat zonder de tabellen? En is er een mogelijkheid om dit via css te veranderen, zonder dat de hele layout door elkaar gehutseld wordt?
Zo invoegen:
<img src="naam van afbeelding.extensie">
of:
<p align="left" valign="top">1.<img...></p>
En de tag "title" er bij zodat men tekst ziet wanneer men er met de muis over gaat, want met de "alt" tag werkt dat niet in FF, omdat de "alt" tag hier niet voor bedoeld is, toch?

Oja, ik wil graag kleine afbeeldingen (minder dataverkeer) en wanneer men daar op klikt dat men dan een grotere te zien krijgt, welke in picasa webalbum staat. (kost mij geen dataverkeer dan)

Nu staat het zo in de huidige site:

<a href="http://lh3.ggpht.com/_7Z9e4qFVaGE/ShZdJ9clcbI/AAAAAAAABEU/sqLwe2EiCUI/s800/20090520dichtschroevenAllison1.jpg"><img src="20090520dichtschroevenAllison1_small.jpg" alt="20090520dichtschroevenAllison1.jpg (470118 bytes)" title="click for an enlargement" width="133" border="2" height="100"></a>

Afbeelding is zo ingevoegd, maar staat dmv tabel precies daar waar ik wil, netjes met tekst erlangs. Om voor iedere foto een aparte div id aan te maken is niet te doen, denk ik.

EDIT: Even een kleine toevoeging. Ik heb zojuist een link aangemaakt in de tekst binnen de content, maar ik kreeg links en rechts ervan lege ruimte, alsof er veel spaties stonden. Bij het aanpassen van het css bestand; a margin (stond op 10px) kwam de tekstlink goed, maar het menu bovenaan de pagina werd smaller.... Nu heb ik een regel erbij gemaakt; "#header a" en daar de marge op 10px gezet. Het ziet er nu weer goed uit, maar mag zoiets eigenlijk wel? Of ben je helemaal vrij in wat je als selector gebruikt?

 

[Goeroeboeroe]

Aha, de template was verantwoordelijk voor al die code. Zie je gelijk dat ik Kompozer niet goed ken
Afbeeldingen invoegen en er tekst langs laten lopen met tabellen makkelijk? Da's toch 'n grapje... Als je dat al makkelijk vindt, dan vind je dit (na enige oefening misschien) supermakkelijk.

<p>... tekst ...<img class="links" src enz.> ...tekst...<img class="rechts" src enz.> ... tekst ...</p>

In de <p> staat gewoon je tekst. Je kunt natuurlijk veel meer <p>'s maken.
De <img> zet je gewoon neer waar je hem hebben wilt in de tekst. Dat is even uitproberen. Bijbehorende css:

img.links {float: left; margin: 10px 10px 10px 0;}
img.rechts {float: right; margin: 10px 0 10px 10px;}

float: left laat het plaatje naar links gaan. De tekst komt er dan gewoon rechts naast te staan. float: right: precies omgekeerd.
De margin is voor 'n afstand tussen tekst en afbeelding. Da's alles.
De <img>'s hebben 'n class en geen id. 'n id mag maar één keer gebruikt worden op 'n pagina, 'n class onbeperkt.
Als je nou al je afbeeldingen ineens links wilt hebben, verander je float: right gewoon ook in float: left en hoppa: gebeurd. Of als je de marges groter wilt hebben. Of 'n randje eromheen. Of... Op één centrale plaats: je stylesheet. Doe dat maar 'ns met tabellen...

De title is inderdaad bedoeld om te laten zien als je met de cursor eroverheen gaat. IE 6 en 7 deden dat fout, die toonden de alt, zelfs als er 'n title was. IE 8 doet 't wel zoals 't hoort.
De alt is bedoeld om te laten zien als de afbeelding om een of andere reden niet getoond kan worden. Hij is ook uiterst belangrijk voor spraakbrowsers, want dan wordt hij voorgelezen. En voor zoekmachines is hij ook belangrijk, want die 'zien' ook geen afbeeldingen. De title is daar trouwens ook enigszins belangrijk voor.

Met 'n link naar elders wordt 't dan zoiets:

<a class="left" href="http://verweggistan.html"><img src="..." width="100" height="100" title="Ik ben een plaatje" alt="Ik zou een plaatje moeten zijn"></a>

En de css iets als

a.left {float: left;}
a.left img {border: black solid 1px; margin: 10px 10px 10px 0;}

Het is dus absoluut niet nodig 'n aparte div voor elke foto te maken. Gewoon op de juiste plek in de tekst zetten (moet je even in je vingers krijgen) en floaten, da's alles.

Ha, 'n kruispost.
Ja, je mag selectors precies gebruiken zoals je wilt. Er zijn wel regels die aangeven welke 'wint' als er twee tegenstrijdig zijn, maar dat is vaak meer rekenwerk dan dat je 't gewoon even probeert. (Als je nou niet begrijpt wat ik bedoel, maak je geen zorgen, je gaat dit gegarandeerd tegenkomen. O.a. dat 'n id belangrijker is dan 'n class, maar er zijn meer regels.)
't Enige belangrijke is, hoewel dat geen voorschrift is: gebruik logische namen. 'links' en 'rechts' zijn eigenlijk al dubieus, want als je alles naar links wilt zetten is 'rechts' 'n wat vreemde classnaam. Maar je ziet nogal 'ns classnamen als 'xyz' of 'aa17'. Ik durf wel te wedden dat je over 'n halfjaar echt niet meer weet wat dat was, en dat werkt heel lastig. #header weet je over 20 jaar ook nog.

En nog 'n aanvulling:
Als je iets fout hebt en daardoor 'n te grote marge, dan is 't niet handig om die te verkleinen met css. En dan vervolgens elders weer te vergroten, enz., want dat wordt heel onoverzichtelijk. Maar meestal zie je wel waardoor iets ontstaat, dus met 'n beetje opletten voorkom je dat.
Voor zoiets is Firebug heel handig, want die laat de WERKENDE css zien, en niet wat je had bedoeld (hier spreekt afdeling schade en schande en zo...)

 

[dit kan niet]

Goeroeboeroe,

Op deze pagina, bij het bericht van 1 nov 2009, heb voorlopig ik een plaatje bijgevoegd, en in het css bestand een regel met "a.left", niet met "a.left img". en het werkt ook nog. Met de css editor heb ik wat aanpassingen gedaan aan marge of is dat padding?
Wel moet ik opletten denk ik dat ik de afbeelding niet binnen de tags <h3> (gebruik ik nu voor de tekst) plaats, wanneer daar ook marge aan gegeven is?

 

[Goeroeboeroe]

Even voor de goede orde: er kan natuurlijk ook door iemand anders worden gereageerd, er lopen hier veel meer mensen rond die iets van css en zo weten.

Je float de <a>, en de inhoud gaat dan mee. De a.links img was voor de marges rondom de afbeelding, maar in dit geval kan dat ook rondom de <a>.
Je hebt margin gegeven, dus dat is margin, geen padding.
Ik zou toch nog 'ns willen adviseren 'n korte, gerichte cursus te volgen, want 't verschil tussen dingen als margin en padding en hoe selectors werken is echt belangrijk.

De afbeelding kan onmogelijk binnen de tekst komen. De tekst staat binnen 'n <p> (bij jou niet, kom ik zo op). Omdat de <a> met de afbeelding is gefloat, komt die <p> gewoon over de <a> te staan, want die <a> 'bestaat niet' voor de rest van de pagina, als het ware, door het floaten.
Maar de INHOUD van die <p>, de tekst, komt NAAST de gefloate <a> te staan. Die kan onmogelijk eroverheen komen te staan, tenzij je dat zelf opzettelijk doet.

'n Andere reden om je even structureel in css/html te verdiepen heeft met zoekmachines te maken. Je gebruikt nu <h3> (en andere <h>'s) waar ze absoluut niet voor zijn bedoeld.
<h1> is bedoeld voor de belangrijkste titel van 'n pagina, zeg maar de titel van 'n boek. Die mag je ook maar 1x gebruiken.
<h2> Is voor iets minder belangrijke ondertitels.
(h1 en h2 gebruik je trouwens goed op die pagina onder de link.)
<h3> voor nog minder belangrijk, enz.
Als jij nu je tekst in 'n <h3> zet, begrijpt 'n zoekmachine er helemaal niets meer van en is er grote kans dat die tekst genegeerd gaat worden omdat de spider van de zoekmachine 'denkt' dat je probeert hoger te komen door al je tekst belangrijk te maken.
Of erger: je wordt lager geplaatst omdat ze denken dat je op 'n stiekeme manier probeert hoger te komen. Dit gebeurt aan de lopende band, dus is echt iets om rekening mee te houden. Echt smerige trucs kunnen zelfs tot verwijdering leiden, zelfs bij grote sites als Trouw (jaar geleden, ongeveer 'n volle week). Hoe dat precies werkt is geheim, maar ongeveer is 't wel bekend.
Los daarvan is je pagina op deze manier veel minder toegankelijk voor mensen met 'n handicap. Toegankelijkheid voor spraakbrowsers e.d. loopt gelijk op met of 'n spider je pagina goed kan indexeren. 'n Spider is ruwweg te vergelijken met 'n blinde die wordt voorgelezen.

Je gebruikt <h5> voor Stay tuned. <h5> is voor 'n (tamelijk lage) subtitel. Zelfde verhaal als hierboven. Beter is:

<p class="stay">Stay tuned</p>

en dan opmaken met css.
Je hoeft dan ook geen spaties onder Stay Tuned te geven, bijvoorbeeld, maar gewoon p.stay {margin-bottom: 20px;} of zoiets. Als je 't dan ooit wilt veranderen, is dat zo gebeurd.

Binnen je tekst gebruik je tamelijk vaak <br>
Als je de tekst in 'n <p> zou zetten (daar is de <p>aragraph voor), zie je dat bij elke <p> automatisch 'n regel wordt tussengevoegd. Die enkele keer dat je dat niet wilt geef je gewoon 'n class aan de <p> en margin-top: 0.
Ah, dat klopt niet want de marge bij <p> is op 0 gezet, mogelijk in die template. Maar als je dat weghaalt heb je die open ruimte wel. Bovendien kun je dan aangeven hoe groot hij moet zijn.

Ik zie (vluchtig) dat na 'n <h2> geen lege ruimte komt.
Als 'n <p> 'n marge heeft, kun je zoiets doen:

h2 + p {margin-top: 0;}

Nu krijgt 'n <p> gelijk na 'n <h2> geen marge.

Maar dat zijn alleen dingen die 't makkelijker maken. (Achteraf dan, als je 't geleerd hebt ) En die vooral wijzigingen veel makkelijker maken.
Belangrijker is om <p>, <h3> en zo te gebruiken waar 't voor is bedoeld. Dat is voor spraakbrowsers e.d. echt enorm belangrijk, en dús ook voor zoekmachines.

Als je belangstelling hebt, op deze site staat een uitstekende gratis Nederlandstalige cursus, die behoorlijk goed leert waar 'n <p>, <h>, enz. voor zijn en hoe margin, flat, padding, enz. werken:
http://www.web-garden.be/

 

[dit kan niet]

Hallo,
Ik ben er weer en heb aanpassingen gedaan Aan de pagina's home en nieuws. Ik heb ook op web garden gekeken, altijd interessant en nooit te oud om iets te leren.
Wat heb ik gedaan? Aanpassingen in css, regels erbij gemaakt, maar vooral in de html aanpassingen gedaan. <h3> wordt nu niet gebruikt voor tekst, (ik wist dus niet dat dat niet hoorde) maar tekst gaat nu binnen <p>. Ik ben er achter gekomen dat ik binnen Kompozer op de "html tags" modus kan ik "p", "img" of wat dan ook selecteren en dan eigenschappen-> geavanceerd bewerken-> en zo kan ik "class" en meer toevoegen. Maar het is veel werk om zo een hele site (opgemaakt met frames, tabellen en met Frontpage) om te bouwen.
Om een beetje "ontopic" te blijven; Ik persoonlijk vindt Frontpage niet slecht, maar zoals meerdere vertellen, het wordt niet meer ondersteund, en zal dus niet bij de tijd blijven.
Momenteel ben ik de mogelijkheden van Kompozer aan het verkennen en de CSS editor (als ik het zo mag noemen) die daar ingebouwd is, heeft me al veel geholpen. Frontpage heeft geen CSS editor en ik moet toegeven: een beetje site kan niet zonder.
Voor mij is de vraag beantwoord of Frontpage slecht is, en om "ontopic" te blijven ga ik hier niet verder met mijn vraagstellingen, maar >>>hier<<<.