Tekst over een (gesliced) afbeelding

**Stephanie H** · 14-04-2010, 09:12

Hallo iedereen,

Ik ben sinds kort begonnen met het ontwerpen van een website.
Ik ben al een heel eind gekomen. Ik heb een ontwerp gemaakt in photoshop.
Deze heb ik gesliced, en geopend met dreamweaver. Ik probeerde hiermee de tekst op de site te zetten.
Maar het lukt me niet. Er is me verteld dat ik AP Div moest gebruiken, en als ik de tekst hier in zet, en ik open het met internet explorer, dan staat ie in eerste instantie gewoon goed, maar als ik het venster verklein, verschuift mijn tekst ook en dan staat ie niet meer goed. Ik heb voor nood gewoon de tekst in photoshop gezet en gewoon mee-gesliced. Kan iemand mij hiermee helpen? Alvast bedankt!
Het gaat om de website www.stephh.nl

Met vriendelijke groet,

Stephanie

Ps: Hoop dat ik dit bericht bij het goede onderwerp plaats.

**Peter** · 14-04-2010, 09:28

Zowieso bestaat je site nu uit 1 grote table, wat eigenlijk heel erg slecht is. Ik begrijp dat het voor beginners makkelijk is om je website door Photoshop te laten slicen, maar goed is anders..

Als je gebruik maakt van DIV ipv table, dan kun je in de "header" div, waar nu je naam staat zeg maar, die div een achtergrondplaatje geven en in die div ook gewoon text plaatsen.

**Niek A.** · 14-04-2010, 09:31

Als je de site hebt opgeslagen vanuit photoshop (dan heb je een index.html en een images map met de afbeeldingen) moet je de index.html weggooien.
Photoshop maakt namelijk een html bestand waar je niks aan hebt, hij stopt alle slices in tables en dat was het.
Wat je moet doen is een beetje html/css leren en zo je site maken, of iemand aanspreken op SD die het wilt opknappen.

Succes ermee.

**Stefan Visser** · 14-04-2010, 09:32

Ga met divjes werken:
Tabellen zijn gemaakt om tabellen te maken, niet voor templates.

Dit is beetje div idee:

**Peter** · 14-04-2010, 09:32

Zoveel werk is het ook niet. PM maar als ik m ff voor je moet slicen, kost je niks. (Dan moet ik wel de PSD erbij btw ;) )

gast5581 · 14-04-2010, 09:37

Hoe komen jullie erbij dat photoshop in tables exporteert?

Je kan ook gewoon kiezen voor div's, alleen hebben deze een vaste position, deze zou je alleen nog moeten omzetten naar floats.

@Stephanie, kijk even naar je export opties om naar div's te exporteren ipv tables.

**Niek A.** · 14-04-2010, 09:42

Origineel gepost door gast5581

Hoe komen jullie erbij dat photoshop in tables exporteert?

Je kan ook gewoon kiezen voor div's, alleen hebben deze een vaste position, deze zou je alleen nog moeten omzetten naar floats.

@Stephanie, kijk even naar je export opties om naar div's te exporteren ipv tables.

Aah dat wist ik inderdaad niet, maar toch, het kan nooit beter zijn dan handmatig.

gast5581 · 14-04-2010, 09:46

Origineel gepost door Syncmaster

Aah dat wist ik inderdaad niet, maar toch, het kan nooit beter zijn dan handmatig.

Valt wel mee, het meeste wat gegenereerd wordt is zeer goed te gebruiken, je moet er wel genoeg verstand van hebben om hem 100% goed te vormen (zoals de no fixed positions / externe css file etc), maar zoals ik al zei is 70% al erg goed bruikbaar.

Mijn scheelt het iig best wat werk.

**Stephanie H** · 14-04-2010, 10:01

Hm.. Ik snap het nog niet helemaal... Heb ik er eigenlijk een css bij zitten? Dit is mijn code van de home pagina:

Code:

<html>
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 background-color: #000;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p>
  <!-- ImageReady Slices (site.psd) -->
</p>
<p>&nbsp; </p>
<CENTER>
  <table id="Tabel_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="11">
   <img src="afbeeldingen/home_01.gif" width="800" height="150" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="150" alt=""></td>
 </tr>
 <tr>
  <td rowspan="7">
   <img src="afbeeldingen/home_02.gif" width="173" height="450" alt=""></td>
  <td rowspan="2"><a href="http://stephh.nl"><img src="afbeeldingen/home_03.gif" alt="" width="44" height="16" border="0"></a></td>
  <td colspan="2" rowspan="3">
   <img src="afbeeldingen/home_04.gif" width="80" height="73" alt=""></td>
  <td rowspan="2"><a href="http://stephh.nl/overmij"><img src="afbeeldingen/home_05.gif" alt="" width="68" height="16" border="0"></a></td>
  <td rowspan="3">
   <img src="afbeeldingen/home_06.gif" width="72" height="73" alt=""></td>
  <td><a href="http://stephh.nl/portfolio" target="_blank"><img src="afbeeldingen/home_07.gif" alt="" width="67" height="15" border="0"></a></td>
  <td colspan="2" rowspan="3">
   <img src="afbeeldingen/home_08.gif" width="61" height="73" alt=""></td>
  <td rowspan="2"><a href="mailto:info@stephh.nl"><img src="afbeeldingen/home_09.gif" alt="" width="67" height="16" border="0"></a></td>
  <td rowspan="7">
   <img src="afbeeldingen/home_10.gif" width="168" height="450" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="15" alt=""></td>
 </tr>
 <tr>
  <td rowspan="2">
   <img src="afbeeldingen/home_11.gif" width="67" height="58" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="afbeeldingen/home_12.gif" width="44" height="57" alt=""></td>
  <td>
   <img src="afbeeldingen/home_13.gif" width="68" height="57" alt=""></td>
  <td>
   <img src="afbeeldingen/home_14.gif" width="67" height="57" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="57" alt=""></td>
 </tr>
 <tr>
  <td colspan="9">
   <img src="afbeeldingen/home_15.gif" width="459" height="229" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="229" alt=""></td>
 </tr>
 <tr>
  <td colspan="9">
   <img src="afbeeldingen/home_16.gif" width="459" height="29" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="29" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2">
   <img src="afbeeldingen/home_17.gif" width="106" height="119" alt=""></td>
  <td colspan="5">
   <img src="afbeeldingen/home_18.gif" width="242" height="20" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="afbeeldingen/home_19.gif" width="111" height="119" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="20" alt=""></td>
 </tr>
 <tr>
  <td colspan="5">
   <img src="afbeeldingen/home_20.gif" width="242" height="99" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="1" height="99" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="afbeeldingen/spacer.gif" width="173" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="44" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="62" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="18" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="68" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="72" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="67" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="17" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="44" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="67" height="1" alt=""></td>
  <td>
   <img src="afbeeldingen/spacer.gif" width="168" height="1" alt=""></td>
  <td></td>
 </tr>
</table>
<!-- End ImageReady Slices --></CENTER>
</body>
</html>

Wat kan ik nu het beste doen...
Is slicen niet voldoende?
Ik wil eigenlijk gewoon dat de test op de juiste plek blijft staan...

Groetjes, Stephanie :)

**Peter** · 14-04-2010, 10:05

Er zit wel css in dit bestand zelf. Vaak word dit in een extern bestand gezet en daar word dan naar gelinkt. Maar in principe is het niet verplicht natuurlijk.

PHP Code:


<style type="text/css"><!--body { background-color: #000;}--></style>

**Stephanie H** · 14-04-2010, 10:45

Joepie het is me gelukt!

Het zal vast niet de beste manier zijn maar het werkt!
Weet nu iemand hoe ik de grootte van het lettertype kan aanpassen? haha.
En hoe ik de tekst iets verder van de kant krijg van de achtergrondafbeelding van (k geloof) de tabel...?

Heb het volgende gedaan:
Slice waar ik de tekst wil verwijderd
Dubbelklik op overgebleven lege vak zodat ie geselecteerd wordt.
Naar de code gaan, die staat geselecteerd.
Dit was de code toen de slice er nog stond:

Code:

<img src="images/index_16.jpg" width="565" height="302" alt=""></td>

dit was de code toen de slice eruit was:

Code:

<td colspan="7" rowspan="9">&nbsp;</td>

Achter rowspan="9" deed ik een spatie en typte ik background waarna ik mijn slice kon kiezen.
Toen ben ik terug gegaan naar ontwerp en heb ik daar de tekst getypt...

Alleen deze staat nu tegen de kant aan en dat wil ik niet, ander lettertype heb ik al, alleen nu moet t nog kleiner... Anyone???

Thanks voor alle reacties!!

Groetjes Stephanie

**Levi Nijveldt** · 14-04-2010, 11:08

Voor de tekst

h1 {font-size:250%;} of px
h2 {font-size:200%;}
p {font-size:100%;}

**Peter** · 14-04-2010, 12:32

Je hebt die verandering nog niet geupload? Zonder in de code te kunnen kijken word het voor ons wel lastig..

**Stephanie H** · 14-04-2010, 13:22

Heb het bij een subdomein toegepast. Kwiebus.Stephh.nl
Sorry haha!

Tekst over een (gesliced) afbeelding