Intergrer design med HTML / CSS

Hej Christian.

Jeg vil sige at du skal starte med at lave noget mark-up tekst, altså helt alm html med nogle div's som du kan bruge til at flytte rundt med.

Lad være med at hænge dig så meget i designet til at starte med.
Men får smidt tingene ind de rigtige steder. (Jeg mener at du skal lave det uden farver mm., lav det kun så du kan se hvor de forskellige ting skal være.).
Når du har nået det, så kan vi arbejde videre med noget CSS og få de rundekanter, gradient mm på.

Jeg har på løs hånd talt mig frem til omtrent 12 div's.
Det er følgende:
- Wrapper (Så du kan centrer siden)
- Header (blot en container)
- Logo (Her skal du bruge dit billede)
- Login (laves som alm form)
- Menu (kan laves i en ul)
- Content (Blot en container)
- Left (venstre boks)
- Right (højre boks)
- Footer (blot en container)
- col1 (venstre boks)
- col2 (midt boks)
- col3 (højre boks)

Du kan evt. tage et kig på denne sides kildekode (kig i content delen hvordan det er bygget op), det minder nemlig lidt om den måde du vil have dine bokse med indhold.

Hej Christian,

Det lyder som om du er meget grøn i HTML og CSS. For at gøre dette kræver det at du ved lidt omkring hvordan de forskellige elementer opføre sig, og hvordan du med CSS kan få dem til at opføre sig.

Eks:

_________________________________________

LOGO MENU1 MENU2 MENU3
_________________________________________

INDHOLD PÅ SIDEN MED EN ARTIKEL
OMKRING NOGET SPÆNDENDE
_________________________________________

COPYRIGHT OG FOOTER STUFF

_________________________________________


En sådan sige består af 3 indholds grupper. Det nemmeste og mest oplagte vil være at dele det ind i 3 <div> blokke.

 <div id="header"></div>
 <div id="content"></div>
 <div id="footer"></div>

Næste skridt er så at lave din top og footer. Overvej positionering af dit indhold, skal din menu floates right osv. Det et er ikke så svært, men det kræver at du har 100% styr på de basale ting i HTML / CSS verdenen.

Hej Frank.

Jeg er nu ikke helt grøn, har da lavet lidt:
www.borup-soepark.dk
www.motinf-kbg.dk
www.bimer.dk

Men min spørgsmål er bare hvordan jeg nemmest slicer min grafik.

Lige nu har jeg i photoshop filen, altså billedet filen valgt at "tegne" login felterne på. Men bør jeg i virkeligheden slice 1px gange højden på feltet ud, og bruge det som background i en klasse eller lign. i CSS?
Eller man kan gøre det på en anden måde? Kan man fx bare i CSS ligge en form ovenpå min grafik, og gøre form felterne 100% gennemsigtige fx ?

Hej Christian.

Er der en grund til at du vil bygge så meget op i billeder?

Var det ikke langt nemmere at lave det i HTML5 og CSS3?
Jeg ved godt det kommer til at gå ud over de personer som ikke har browsere som understøtter dette.

Hej Daniel.

Jo, muligvis. Jeg er dog slet ikke klar over hvordan jeg laver tilsvarende i CSS eller HTML.

Jeg har fået slicet det en del faktisk, så nu virker det efter hensigten.

se her: http://nas.bimer.dk/km

Hvis har nogle links til tutorials eller lign, så vil jeg meget gerne se dem

Tak for svar, din side er en anelse uoverskuelig for mig lige pt måske hvis jeg sætter mig ned og går det slavisk igennem giver det mening, men er stadig på et relativt lav niveau, CSS er nyt for mig, og HTML har jeg ikke rodet med siden jeg var teenager næsten. først inden for det sidste år.

Tror hellere jeg må få læst lidt op på det hele

Det var måske en meget god ide.

Køb evt css og html hæfterne hos libris.

Det har jeg gjort faktisk, har købt CSS hæftet men har ikke fået kigget så meget i det.. er typen der helst bare skal prøve mig frem, ulempen er bare at man ikke altid får det grundlæggende med.

Du skal også prøve dig frem, men du er nød til at have det grundlæggende på plads, har du ikke det, så kan du jo heller ikke prøve dig frem.
Du skal dog være opmærksom på at du ikke skal tro på det hele der står der i, da noget af det er forældet

Alt efter hvor avanceret det er så kunne du jo "spendere" de 25 kroner på det:

http://fiverr.com/n8ght0wl/convert-an-image-or-a-basic-psd-template-to-valid-html

Det behøver ikke gøres sværere end dette - man får ikke ekstra point for det. Hvis ikke de kan på fiver, så find en fra pakistan eller indien på elance.com