| Schrijver |
Bericht |
proostjoost
Forum Lid
12 posts |
# Geplaatst: 17 Mar 2010 09:03
Ik ben bezig mijn site te herbouwen. De blauwdruk is een Illustrator bestand en dus volledig grafisch.
Technisch gezien is de site een tabelstructuur met tegen elkaar geschoven plaatjes.
Ik wil dat browsers naar het midden van mijn site "pannen" en de zijkanten van mijn site buiten beeld laten.
Reeds geprobeerd: middelste slice centreren, onbelangrijke slices als background definiëren, gehele tabel centreren.
|
| |
|
Sebastiaan Franken
Moderator
3847 posts |
# Geplaatst: 17 Mar 2010 09:21
Even een andere vraag: Waarom werk je nog met tabellen? Tabellen zijn nooit bedoeld om een website layout mee te bouwen. Daar heb je divjes en CSS voor namelijk.
En wat bedoel je met pannen?
|
Pirandello
Forum Lid
172 posts |
# Geplaatst: 17 Mar 2010 09:41 · Aangepast door: Pirandello
Quoting: Sebastiaan Franken En wat bedoel je met pannen?
Klik ;)
Maar ik denk dat hij 'pan' bedoeld zoals bij films: http://en.wikipedia.org/wiki/Pan_and_scan
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 17 Mar 2010 10:15
Dag Sebastiaan,
Ik werk niet met tabellen, ik "slice" de boel op en kan daarbij van ieder sectie aangeven hoe ik het image wil optimaliseren (jpg, png, gif, resolutie, transparantie, aantal kleuren enz.) Dat is slicen.
De code die hier automatisch wordt gegenereerd is feitelijk tabelopmaak zoals je op mijn site kan zien.
Ik heb me bezig gehouden met CSS en div's maar daar gebeurt gewoon niet wat ik wil. HTML is voor wat mij betreft even slecht met plaatjes als MS Word.
|
Sebastiaan Franken
Moderator
3847 posts |
# Geplaatst: 17 Mar 2010 10:47
Quoting: proostjoost HTML is voor wat mij betreft even slecht met plaatjes als MS Word.
lol, hoe krijg jij dan je dingen online? Juist! Met HTML! (Tabellen zijn ook HTML he) Maar goed, ik zie wel dat dit niks voor mij zal zijn.
|
BaZz
Forum Lid
3574 posts |
# Geplaatst: 17 Mar 2010 11:23
Quoting: proostjoost Dat is slicen.
Goh weer wat geleerd ?:-P
geen idee of je een scrollbar in het midden van je venster kan laten starten en of dit ook cross-browser uit te voeren is (en tot welke resolutie zou je het willen?). Er valt met javascript wel wat te truuken met de scrollbars: http://www.google.nl/search?q=scrollbar+position&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:nl:official&client=firefox-a
maar wat je wilt, klinkt meer als iets voor flash.
Quoting: proostjoost HTML is voor wat mij betreft even slecht met plaatjes als MS Word.
misschien moet je even kijken naar hoe een basis html doc er uit hoort te zien volgens moderne webstandaarden:
http://www.html-site.nl/boiler_html401.php met de vergelijking met Word doe je html en css ernstig te kort. Maar het vergt wat oefening om het goed te gebruiken.
De code van jouw (overigens mooie!) site is wel erg 1999/ IE4/ NS4, en kan een stuk moderner/flexibeler/zoekmachinevriendelijker/sneller/meer semantisch.
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 17 Mar 2010 21:01
Bedankt voor je compliment baZz, ik loop natuurlijk ook css en html uit te kafferen uit frustratie omdat het gewoon niet lukt, ik zie dat het dingen kan.... Maar goed.
Ik ga morgen eens even alle tips uitpluizen.
Anyway ik krijg divs met plaatjes niet goed gelayout. Dit heb ik eerder geprobeerd. Ik krijg sterk het gevoel dat het lastig is een Div uit alleen een plaatje te kunnen laten bestaan zonder tekst (Ik heb geen tekst op mijn website, ook al staat er wel tekst=plaatje. Ik zou dus erg gebaat zijn met een tutorial die daar op focust.
|
Superkluns
Forum Lid
736 posts |
# Geplaatst: 17 Mar 2010 21:26
Quoting: proostjoost Div uit alleen een plaatje te kunnen laten bestaan
Dat kan best, en dan zou ik ervoor kiezen om het dan als achtergrond-afbeelding van die div te nemen, en niet met <img src="blaat" /> in de div zetten. Misschien dat dat iets helpt?????
|
Sebastiaan Franken
Moderator
3847 posts |
# Geplaatst: 18 Mar 2010 06:52
Quoting: proostjoost Anyway ik krijg divs met plaatjes niet goed gelayout. Dit heb ik eerder geprobeerd. Ik krijg sterk het gevoel dat het lastig is een Div uit alleen een plaatje te kunnen laten bestaan zonder tekst (Ik heb geen tekst op mijn website, ook al staat er wel tekst=plaatje. Ik zou dus erg gebaat zijn met een tutorial die daar op focust.
Als je div's in CSS een hoogte + breedte + background-image meegeeft is er niks aan de hand
Quoting: proostjoost (Ik heb geen tekst op mijn website, ook al staat er wel tekst=plaatje.
Dat is voor SEO een extreem slecht idee. Geen tekst op je site betekent dus ook dat bijvoorbeeld de google bot niets te indexeren heeft en dus komt je site niet (of heel slecht) in google terug.
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 18 Mar 2010 20:16
Okay, wat Superkluns zegt dat lijkt me wel wat, overigens is de code die slicing genereerd wel <img src="blaat" />
Het niet hebben van text kan ik toch oplossen door mijn teksten buiten de body in de code te plaatsen ? Overigens is dit niet een groot issue. Ik wil alleen er voor zorgen dat ik naar mijn portfolio kan verwijzen.
|
Superkluns
Forum Lid
736 posts |
# Geplaatst: 18 Mar 2010 20:20 · Aangepast door: Superkluns
Quoting: proostjoost de code die slicing genereerd
ik heb het niet zo op programma's e.d. die codes genereren...
Maar ieder zn eigen ding. Mijn voorkeur is om alles helemaal zelf te scripten.
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 18 Mar 2010 20:20
Quoting: proostjoost , overigens is de code die slicing genereerd
nooit laten genereren.
Quoting: proostjoost Het niet hebben van text kan ik toch oplossen door mijn teksten buiten de body in de code te plaatsen ?
Nee
Quoting: proostjoost Overigens is dit niet een groot issue.
als je niet goed wilt gevonden worden door google, niet nee.
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 19 Mar 2010 07:44
Iedereen tot zover heel erg bedankt voor de adviezen, het heeft me gemotiveerd weer in CSS / HTML te beginnen.
Dus Okay, Ik ben weer opnieuw begonnen met bouwen en ik blijf keurig in het CSS keurslijf.
Ik hoop vandaag een proefballonpagina in nette HTML/CSS online te slingeren.
Ik hoop dat ik kan rekenen op jullie adviezen ik heb het tot nu toe erg op prijs gesteld. Dank
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 19 Mar 2010 08:48
Yiehaa!
CSS en HTML doen een beetje wat ik zeg maar de strijd is nog lang niet gestreden.
Resultaten:
http://www.joostverkamman.nl/Untitled-5.html
|
BaZz
Forum Lid
3574 posts |
# Geplaatst: 19 Mar 2010 09:20
lekker bezig!
voor de puntjes op de i:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.joostverkamman.nl%2FUntitled-5.html
een afbeelding hoort een alt="alternatieve omschrijving" mee te krijgen volgens de webstandaarden
<!--[if IE 5]>: ik zou me om zulke oude browsers niet druk maken, die versie is gelukkig behoorlijk uitgestorven...
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 19 Mar 2010 10:31
Wat ik niet voormekaar krijg:
- de blauwe border op 0 te zetten om die vieze randen weg te halen.
- marge boven de buttons te maken.
- infoblok links iets te laten zakken
- de marge boven de navigatie pijlen te verwijderen.
Alle commentaar is welkom op vragen "waarom" ik iets op die manier heb gedaan kan ik geen antwoord geven helaas. Met uitzondering op het niet gebruiken van tekst; ik kom niet weg met een standaard lettertype in mijn vakgebied.
Alvast bedankt
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 19 Mar 2010 10:43
Ja BaZz daar ben ik het roerend mee eens, ook namen van pagina's als index.html en untitled dat kan niet maar voordat ik m'n laatste grote bouwactie begin wil ik graag nog punten onder de knie krijgen waar ik geen raad mee weet.
Daarna ga ik me concentreren op teksten type en spelfouten, syntaxis en logische navigatie, CV oppoetsen.
Als het goed is gaat dan de boel "klok"
|
BaZz
Forum Lid
3574 posts |
# Geplaatst: 19 Mar 2010 10:47 · Aangepast door: BaZz
1) img {border: none;}
2) padding-top / margin-top / top
3) padding-top / margin-top / top
4) #footer img {float: left;}
"ik kom niet weg met een standaard lettertype in mijn vakgebied. "
dikke onzin die uitspraak, alsof geen 1 ontwerper/ ontwerpbureau standaard fonts zou gebruiken online (en ik ben IO-er, dus dat scheelt niet veel van IPO-er, en ik weet wel beter, bekijk de sites van de grotere ontwerpbureaus maar eens)
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 19 Mar 2010 13:03
"ik kom niet weg met een standaard lettertype in mijn vakgebied. "
Laten we het erop houden dat ik prat ga op isocpeur lettertype. Je hebt gelijk maar je moet weten dat ik de afgelopen tijd echt tenenkrommende adviezen heb gekregen over "stijl" van niet ontwerpers om m'n portfolio in de lucht te krijgen.
Ik wist niet dat jij kennis van zaken had.
1) img {border: none;} werkt alleen in het style sheet buiten de brackets van andere stijlblokken (why?) maar het werkt !
2/3) padding-top / margin-top / top heeft even een uurtje gekost voordat ik erachter kwam dat ik hier px moet vermelden, anders is dit geintrepeteerd in "em" denk ik
4) #footer img {float: left;} opgenomen in het stylesheet en het werkt
Het ziet er al heel aardig uit, ik ga het op verschillende schermen bekijken en als ik nog steeds lach dan wordt dit een template.
Thanx BaZz
|
BaZz
Forum Lid
3574 posts |
# Geplaatst: 19 Mar 2010 13:58
Ja die font staat niet op iedere compu... wellicht is dit nog handig:
http://www.apaddedcell.com/web-fonts
1) kan ook als
a img {} voor alle images gebruikt in alle links
#header img voor alle images in de div header
2) eenheden zijn verplicht bij maten: px, pt , em, % oid
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.joostverkamman.nl%2FUntitled-5.html
je zou de achtergrond ook kleiner kunnen maken, als is 45 kB niet heel groot...
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 19 Mar 2010 16:05
voor de fonts kan je natuurlijk cufon, sifr of een andere font replacement script gebruiken.
Maare, dat je niet wegkomt met een standaard lettertype is echt onzin.
Welke branche zit je? Ik gok dan op de grafische.
Waarom zou je op een grafische site geen normale font kunnen gebruiken?
Waarom niet gewoon introtekst, headings in speciale font. En de rest in web save fonts.
Bekijk eens de top sites van grafische bedrijven.
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 23 Mar 2010 08:33
Ja okay, dat ik er niet mee wegkom is inderdaad behoorlijk gechargeerd. Maar ik moet niet teveel concessies doen op gebied van portfolio denk ik. Voor dat je het weet heb je je eigen portfolio gedegradeerd tot een *.txt file so to speak en dat is niet erg persoonlijk.
Punt is; dat ik mijn portfolio qua lay-out zelf een beetje saai vind, en switchen naar een standaard lettertype het er niet minder saai op maakt. Overigens zegt mijn omgeving dat mijn lay-out druk is.
Nu lees ik tussen de regels door dat ik het toepassen van een afwijkend lettertype ook anders kan oplossen, ik denk dat een mooie is voor portfolio 3.0 (1.0=sliced image, 2.0=Layer based CSS). Enfin, ik weer aan de slag.
|
Sebastiaan Franken
Moderator
3847 posts |
# Geplaatst: 23 Mar 2010 08:45
Quoting: proostjoost 1) img {border: none;} werkt alleen in het style sheet buiten de brackets van andere stijlblokken (why?) maar het werkt !
Klopt he, het is een apart element, en moet dusdanig behandeld worden.
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 23 Mar 2010 11:06 · Aangepast door: proostjoost
Hmm, blijkbaar heb ik nog wat problemen te overwinnen met betrekking tot transparantie. De grijze vlakjes zijn in mijn website semitransparant (50% oppacity). Een Gif kan blijkbaar wel transparant maar niet semitransparant zijn.
zie het verschil.
http://www.joostverkamman.nl/Untitled-5.html
http://www.joostverkamman.nl/Hartcaseb.html
Oplossing:
- Ik render mijn gif's met achter de grijze vlakjes een stukkie achtergrond gemaskeerd op grote van het grijze vlak. (qua zicht accepteerd het oog dit wel)
- In het midden: Het kader + logo + grijze vlak als gif renderen en het onderwerp als JPG. Deze twee samenbrengen geprogrammeerd in code.
Het eerste is een eitje, voor het tweede denk ik aan float te gebruiken maar als iemand een tipje van de CSS/HTML sluier kan oplichten dan ben ik zeer dankbaar.
|
BaZz
Forum Lid
3574 posts |
# Geplaatst: 23 Mar 2010 11:51
.png kan wel (semi) alpha-transparantie aan en .gif kent maar 1 transparantiewaarde, maar met transparante .png bestanden heb je voor IE6 wel weer een png-fix nodig
|
zipron
Forum Lid
13 posts |
# Geplaatst: 29 Mar 2010 11:28
omg maat... tabellen... gebruik divs...
|
Pirandello
Forum Lid
172 posts |
# Geplaatst: 29 Mar 2010 11:39
Quoting: zipron omg maat... tabellen... gebruik divs...
Als je het topic even had gelezen, dan had je gezien dat Sebastiaan Franken die opmerking al in de 2e post heeft gemaakt.
|
proostjoost
Forum Lid
12 posts |
# Geplaatst: 1 Apr 2010 09:59
Iedereen bedankt voor het meedenken in het bijzonder bazz, ik heb nu het portfolio deel van mijn site helemaal CSS bijna zonder concessies te doen. De andere pagina's volgen nog. Ik ga me nu richten op het verkrijgen van werk, de rede waarvoor ik die site heb gebouwd. Wat mij betreft kan de mod hier een slotje op doen.
Ciao !
joost.
|
