Aankondiging

**Tom** · 04-03-09, 11:27

Afbeeldingen die bijvoorbeeld 200 pixels breed zijn moet je niet verkleinen of opblazen, dat geeft een slechte kwaliteit (zeker door je browser). Dus gewoon in het originele formaat weergeven. Ik zou dus gaan voor een balk in vaste pixels ipv percentages.

Andere optie is brede afbeeldingen pakken waarbij het onderwerp telkens links/midden/rechts te zien is, en de rest uitvult met omgeving die je niet per se hoeft te zien. Die foto's kun je als achtergrond van je div instellen. Als je div groter is, zie je meer van de foto. Maar dat is erg lastig met het zoeken van foto's.

**Tom** · 04-03-09, 11:32

http://i43.tinypic.com/xgbihl.jpg

Dat bedoelde ik met de tweede alinea.

**Dutch** · 04-03-09, 11:37

Als achtergrond van je div? Hmm, ik zal eens proberen, maar ik vermoed dat 't niet gaat werken. Toch maar naar vaste breedte dan. :)

Wel leuk trouwens, weer eens iets nieuws leren - wat voor de experts uiteraard al heel belegen is...

**Dutch** · 04-03-09, 11:38

Oorspronkelijk geplaatst door Tom Bekijk bericht

http://i43.tinypic.com/xgbihl.jpg
Dat bedoelde ik met de tweede alinea.

Ik snap 'm, maar het gaat hier om landkaartjes waarvan je juist alles erop wilt hebben, vandaar.

**Tom** · 04-03-09, 11:51

#sidebar img { width: 100%; }
Aan je CSS toevoegen.

Afbeeldingen binnen die div worden automatisch opgeblazen of verkleind naar de grootte van de omliggende div (die 20% van het scherm is).
Misschien vind jij de kwaliteit voldoende. Ik zou het nooit in mijn werk gebruiken op die manier :)

**Dutch** · 04-03-09, 12:40

Dank, ik zal eens kijken of ik daar genoegen mee kan nemen. :)

**Dutch** · 04-03-09, 12:45

Verdomd, het w�rkt wel. Maar inderdaad, hier en daar wordt een kaartje iets brokkeliger. OTOH, het zijn toch middeleeuwse kaartjes in bibberend inkt...

**wooter** · 04-03-09, 15:06

Ja, het k�n wel, maar dat betekent niet dat je het ook moet doen :). Veelal ga je net die zijnavigatiebalken een vaste breedtte geven, en je "content" een variabele breedtte geven, met foto's die niet te groot zijn zodat je webpagina op 1024x768 er toch nog netjes uit ziet.

**Dutch** · 05-03-09, 23:39

Nog maar weer een vraagje: waarom komen de kleur en de lijn van 1px in IE7 wel uit de verf, maar niet in FF en Safari?

h1, h2, h3, h4, h5, {font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#336633;border-bottom: 1px solid #336633;padding-bottom: .2em}

**squadracorse** · 07-03-09, 22:13

Een liquid design zou ik niet doen, zelfs bij de nieuwe overheids sites gaan we dat niet doen. Wel kan je rekening houden met lettergroottes en bv dat je makkelijk naar elk platform zou kunnen (monitor,tv,mobiel) bij de basis opzet van je template.

Voor je css heb je ook een validator die je via w3 kan vinden (http://jigsaw.w3.org/css-validator/). Je marge setting is invalide (spatie teveel).

margin: 1.2em 0.3em; padding: 0 0 0.2em 0;

zorg ervoor dat je bij de h's ook de padding voor alles netjes zet omdat IE en FF anders renderen (maw in IE zou je nu anders 1em top hebben en nu dus 0)

Tip2: installeer FIREBUG als extensie in FF zodat je al je attributen makkelijk kan bekijken. Ik doe eigenlijk niet anders meer.... Gelukkig is mijn klus hier klaar en ga ik door naar de volgende maar te lang naar je eigen site kijken gaat uiteindelijk toch vervelen :-)

SUCCESS en laat even je basistemplate hier zien dan kan je misschien nog wat goede tips meekrijgen...

**squadracorse** · 07-03-09, 22:15

Owja indien je toch grote plaatjes erin wil plakken en ze afgesneden mogen worden omdat je liquid wil blijven is overflow: hidden; een uitkomst :-) check maar eens:

HTML-code:

#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 10px solid #ccc;padding: 1px 0 40px 0; overflow: hidden;}

**squadracorse** · 17-04-09, 21:25

Brunnnnnnnnnnnn komop geef even je templates en css dan maken we die paris site even netjesssssssssssssss zonder vormgeving teveel aan te tasten en kan dutch zien hoe het moet :-)

M

**brun** · 17-04-09, 22:35

Hoezo, wat is er mis met die site? :-)

(serieus: tips welkom hoor, ik ben immers geen webbouwer van beroep)

**squadracorse** · 18-04-09, 12:31

2 aanpassingen in je template voor de weergeven van je posts.
enkele css aanpassingen die weergave post aanpassen

resultaat: minder hoogte bij overzicht van je posts onder elkaar zodat compacter. Dus niet een redesign maar enkele tweaks.

**brun** · 18-04-09, 15:05

Ok, hierbij het hoofdsjabloon en de css als tekstbestanden... kun je daar iets mee?

Attached Files

**Dutch** · 10-11-09, 15:27

Okee, daar is-ie weer. :)

Eindelijk begonnen aan de css-ombouw van m'n autosportsites 8W, 6th Gear en MRH. De laatste twee zijn zo goed als klaar, hoewel er op verschillende pagina's nog kleinere tabelletjes zitten die ouderwets zijn opgemaakt. Aan die rotklus kom ik later wel toe. Ik ga me eerst op het omzetten van de eerstgenoemde site richten: die is veruit de grootste, barst van de tekst, de content van elke pagina is waanzinnig anders. Ik hoop het desondanks zo veel mogelijk geautomatiseerd te kunnen doen.

Paar vraagjes alvast:

1. Wie weet een handige manier om list-closetags automatisch toe te voegen? Dus </li> aan het slot, om het helemaal valid te maken. In het vorige oudbakken ontwerp, dat vet quirky is, deed ik daar nooit moeite voor. Het kwam er toch wel goed uit. Maar nu wil ik voor het nette toch wel toevoegen. Maar hoe? En het zijn er echt duizenden, verspreid over tientallen pagina's...

2. Dan nog een detailvraagje. Mijn visited links veranderen nu van kleur - van blauw naar rood - ondanks het feit dat ik dat alleen bij hover heb aangegeven:

a,a:link,a:hover,a:active,a:visited {background:transparent; cursor:pointer;text-decoration: none}
a,a:link,a:active,a:visited {color: #2253A5}
a:hover {color: #cc0033}

Wie haalt de fout eruit, want ik zie 't niet...

M4 · 11-11-09, 01:50

Die css-code doet wat je zegt. Probleem lijkt dus ergens anders te zitten ; misschien een dubbele declaratie van een a/href ? Harde style="blabla" gekoppeld aan de betreffende <a href> in je pagina ? Toekenning van een class aan betreffende <a href> ?

**Dutch** · 11-11-09, 09:08

Nee, niks van dat al. Maar het grappige is dat de browser thuis het goed doet, maar die op het werk gisteren dus niet. En 't is allebei FF 3.5.5! Hmm...

Verder nog steeds geen zoek-en-vervangtrucje voor die list-closetags gevonden. Grr. Heb je compleet XHTML-gevalideerde pagina's behalve die suffe closetags!

M4 · 11-11-09, 23:21

Caching ? Als je CSS files aanpast moet je vaak cache legen anders blijft FF doodleuk die oude css-file inladen.

Daarvoor heb je ideale tooltje "clearcachebutton" die in FF in de balk een gele bezem plaatst en daarmee met 1 druk op de knop je cache leegt. Druk ik een kleine 50 x per dag op ofzo al 3 jr lang dus is wel 'handig' :)

Add-ons for Firefox (en-US)

https://addons.mozilla.org/en-US/firefox/addon/1801

**Dutch** · 12-11-09, 12:13

Zou kunnen, M4. Sterker nog, iets anders kan ik ook niet bedenken. Ik zal morgen nog eens kijken. Toch dacht ik dat ik FF eerst even helemaal verlaten had (automatisch cache wissen na afsluiten staat aan).

Intussen begonnen met een zware search-and-replace-operatie voor 8W zelf. Heb zo veel mogelijk proberen te bedenken wat er automatisch kan, maar ik vrees dat ik nog een boel met de hand moet nalopen...

Verder heb ik een idee over het toevoegen van die close tags. Eerst <li> vervangen door </li><li> en </ul> vervangen door </li></ul>, dan <ul></li><li> vervangen door <ul><li>. Dan moet 't goedkomen.

**squadracorse** · 12-11-09, 14:31

Indien content in je database kan je er de library van TIDY doorheen halen en netjes updaten...

Indien hardcoded maakt elke normale editor daar correcte html van.
Notepad++ heeft bv bij textFX de html TIDY optie om in 1 keer document of map netjes te maken, maakt alles valide zelfs Word troep.

(ter info wat tidy kan doen met je document: online tool: http://valet.htmlhelp.com/tidy/ )

**squadracorse** · 12-11-09, 14:38

overigens je css code kan gewoon zijn:

a, a:visited, a:active, a:hover {text-decoration: none; color: #2253A5 }
a:hover {color: #c03}

een a heeft namelijk standaard nooit een achtergrondkleur en de pointer is altijd standaard, geen zin om te declareren want je overruled er namelijk niets mee.

M4 · 12-11-09, 15:44

Mij boeit die html-perfectie niet zozeer, als je 't dus graag wil ; doen , maar voor je gebruikers zal 't weinig uitmaken.

Het is zoiets als voor een rammeltje je hele motor uitbouwen. Ja het is beter maar weegt de inspanning (en kosten) op tegen het resultaat ? Vaak niet.

Kun je beter 2 leuke nieuwe stukjes schrijven in de tijd die je bespaart, daar trek je meer bezoekers mee dan met schone html. Imho.

**Dutch** · 12-11-09, 16:25

Oorspronkelijk geplaatst door squadracorse Bekijk bericht

Indien hardcoded maakt elke normale editor daar correcte html van.
Notepad++ heeft bv bij textFX de html TIDY optie om in 1 keer document of map netjes te maken, maakt alles valide zelfs Word troep.

(ter info wat tidy kan doen met je document: online tool: http://valet.htmlhelp.com/tidy/ )

Dank, squadra, dat zijn goeie tips. Ik gebruik van oudsher TextPad, maar misschien moet ik dat Notepad++ eens proberen.

**Dutch** · 12-11-09, 20:58

Ideaal, dat HTML Tidy. Scheelt me echt een boel werk. Nogmaals dank voor de tip!

Aankondiging

Css

Css

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment