Photoshop lay-out naar divs

[Verwijderd]

Hallo,

Ik heb een lay-out gemaakt in Photoshop CS3.
Als je dat dan naar plaatjes en XHTML wil hebben doe je file -> Save for web

Alleen als ik dat doe dan krijg ik de lay-out in tabel's enzo.
dit zou ik graag willen omzetten naar div's, want als ik text in die tabellen typ dan komt dan een stukje van de rand van de tabel te staan.
Dit komt volgens mij door de colspans en de rowspans, deze kun je ook niet weghalen want dan is je lay-out helemaal naar de knoppen.

Iemand een idee ???
Of tips hoe je die text er mooi in kunt krijgen

Groeten Hendrik

[BtM909]

Zoals je al weet hoef je niet onder elke post te groeten, want dat doen wij tweakers al automagisch

Daarnaast snap ik je probleem niet helemaal: je wilt switchen van tables (want dat is foei), naar divs (want dat is hip), maar dan ben je dus alsnog je probleem aan 't verplaatsen. Div's gebruik je niet in plaats van tables, maar je gebruikt de elementen waarvoor ze zijn bedoeld. Simpelweg verwachten dat je een layout van photoshop naar HTML krijgt, is een utopie (of je accepteert de tagsoup die PS levert).

Designen doe je op papier, computer, desnoods in je hoofd, maar ga eens uittekenen hoe je website wordt, welk element het beste geschikt is voor je content (<h1> <h2> <p> <div>, etc), bekijk hoe je je images moet slicen om ze als achtergrond te gebruiken op die elementen en bouw zo je website op.

Kortom: het komt uit de lengte of uit de breedte

[Verwijderd]

Oke, dus tabels is wel de beste opzet voor mijn site
Ik zit nu dus wel met het probleem dat mijn tekst niet aan de rand van de tabel is

Het staat er altijd een stukje onder.

[BtM909]

Lees even wat ik nou net heb lopen typen

http://home.parse.nl/~michiel/semantiek.html

[Verwijderd]

Dat je je lay-out van tabellen naar div's wil omzetten is natuurlijk hardstikke goed, gezien het feit dat tabellen niet bedoelt zijn voor het opmaken van een lay-out (zoek maar eens hier op GoT of op google). De reden waarom jij het echter wilt veranderen naar div's klopt niet . Bij tabellen kun je ook de tekst bovenaan de cel krijgen. Lees je hiervoor even in in CSS (genoeg over te googlen). De HTML die Photoshop uitspugt is echter niet de mooiste en netste code, daarom raadt ik je ook aan om de link van BtM909 even aandachtig door te lezen.

[Verwijderd]

Fireworks CS3... om met de woorden van de presentator van Adobe Live te spreken... caus' Imageready is dead...

deze is zeer goed in staat gelaagde documenten dmv css in geschikte layouts te gieten.

Anders kun je natuurlijk altijd nog zelf wat creeeren wat een meer semantische approach heeft.

[Savantas]

Het idee is dat je voor een lijstje met menu opties daadwerkelijk het html-element ul (unsorted list) gebruikt, h1 tm h6 voor de verschillende koppen, etc, etc. Alleen voor echt tabulaire data (bv een evenementenkalender) gebruik je tables (en dus niet elke vorm van tables vermijden, wat veel mensen denken dat hoort).
Door middel van css kan je de door Photoshop opgeknipte onderdelen weer vastplakken aan bovenstaande elementen, en vaak efficiënter dan direct vanuit Photoshop (denk aan bv een heel blok met alleen links en rechts een pixel als rand, dit kan je in css al afvangen (border: 0 1px solid black) of met een afbeelding van 1 pixel hoog welke je door middel van css laat repeteren over de y-as (repeat-y).

@Bo-oz: Ik was ook op Adobe Live, maar wat voor zin/onzin er uitgekraamd werd staat hier los van. Fireworks is wel netter voor webwerk, maar als je nog steeds geen verstand van CSS hebt kan je nog blijven klooien. Maar ja, Adobe Live was vol van cretologie (niet dat de nieuwe software geen goede nieuwe functies heeft! Maar je moet nog steeds weten hoe je het moet gebruiken... Fireworks levert echt niet automatisch supergeoptimaliseerde html/css code!!!)

[ Voor 24% gewijzigd door Savantas op 14-06-2007 15:43 ]

[Keeper]

Handig artikel van ALA: http://www.alistapart.com...kcssmockupswithphotoshop/