Afbeelding toont online anders dan in dreamweaver

[me hartje music]

Halooo,

Op http://vangrailfans.awardspace.us/ zie je twee dezelfde afbeeldingen, alleen staan ze van elkaar af. in dreamweaver staan ze precies tegen elkaar. hoe kan het dat ze online anders staan dan in dreamweaver en hoe los je dat op ?

x

 

[Hewt]

Hallo,

Bij mij staan de plaatjes onder elkaar omdat de plaatjes niet naast elkaar op het scherm passen. Het is aan te raden er rekening mee te houden dat niet alle bezoekers dezelfde resolutie hebben als jij. Hierdoor zal de website er ook anders uitzien in dreamweaver, de breedte van de 'voorbeeld website' is niet gelijk aan die in je browser.
Voordat je verder gaat met het maken van deze website is het misschien goed te weten dat tegenwoordig <table> niet meer wordt gebruikt voor layouts. Het is 'standaard' om de layout op te maken in CSS. Dit kan je veel problemen schelen in de toekomst wanneer je iets wil wijzigen op de pagina's.

Wanneer je engels spreekt is dit een goede website om meer over het programmeren van websites te leren.

Veel succes.

 

[city guy]

Hi,
ik zie dat je een table voor de lay-out gebruikt. Het is beter om DIV's te gebruiken, dan ben je gewoon flexibeler bezig.

Jouw probleem:
je moet gaan rekenen. Stel de afmetingen van de site vast. Kijk wat je wilt plaatsen en reken uit of het past en maak het anders passend. Let daarbij op borders, margins en padding. Werk met CSS. Stijl en inhoud moet je gescheiden houden tegenwoordig. Kijk voor een indruk even op FAKTER DWA, een favoriet van mij. Maar kijk ook naar de source van de pagina. Je hoeft geen russisch/duits te spreken om de site-indeling te snappen.

 

[me hartje music]

Ik vind het heel aardig van jullie, dat jullie meedenken aan mijn probleem. maar ik ben echt een beginner, en het is gewoon een hobby die ik doe. als ik weer eens een vrije uurtje heb

 

[city guy]

Dan hou ik het simpel.

Zorg dat je een HTML pagina maakt met de INHOUD. Zorg dat je een CSS-bestand maakt waarin staat HOE de INHOUD zichtbaar wordt.

Probeer ook de afbeelding wat minder breed te maken. (Photoshop, GIMP)

Maar de combinatie DREAMWEAVER-Beginner-GEENCSS voor deze site is niet de meest geslaagde. Ook een beginner met af en toe een uurtje heeft behoefte aan leesmateriaal en bestudering, omdat anders geen enkele vooruitgang geboekt kan worden.

Ik zit me af te vragen: is wordpress misschien niet een betere oplossing voor je ?

 

[csshunter]

Hoi me hartje music,
Ik ga even terug naar je beginvraag:

hoe kan het dat ze online anders staan dan in dreamweaver en hoe los je dat op ?

Hoe het komt.
De preview van Dreamweaver is soms niet helemaal betrouwbaar. Bovendien staan ze ook online niet altijd hetzelfde: in Internet Explorer 7 staan ze wel naast elkaar. Maar dan is op een resolutie van 1024*768px (nog vaak gebruikt) de site méér dan beeldvullend en moet je links-rechts scrollen om het rechterdeel van de rechterafbeelding te zien. In Firefox komen ze onder elkaar terecht, net als bij Safari en Chrome. Maar in Opera weer naast elkaar. Dat heeft met de code te maken!

Hoe los je het op?

1. Structureel: een nieuw sjabloon voor de pagina maken, met betere codes. En dan inderdaad met <div>'s i.p.v. <table>'s, en de styles in een apart stylesheet (dan zijn ze meteen bruikbaar voor de vervolgpagina's). Daar heb je wat html- en css-kennis voor nodig, want Dreamweaver doet niet alles uit zichzelf goed.
   Naast de links hierboven is ook een aardig (NL) startpunt: www.web-garden.be/cursus-html/cursus-html/
   
   
2. Snel: een EHBO-maatregel treffen, zonder aan de paginastructuur met de tabellen te komen. Daarna kan je optie 1 gaan doen!

EHBO
Ga naar de code-weergave in Dreamweaver. Er staat ergens (regel 70):

<td width="1273" height="180"><img src="images/Home/Home-top-image.jpg" alt="" width="637" align="left" height="176"><img src="images/Home/Home-top-image.jpg" width="626" align="right" height="176"></td>

Vervang dit door:

<td height="180" style="background: url(images/Home/Home-top-image.jpg) 50% 0;"></td>

Wat er nu gebeurt, is:

• de afbeelding wordt er als achtergrond-afbeelding in gezet,;
• achtergrond-afbeeldingen kunnen zich automatisch herhalen (horizontaal en/of verticaal);
• de herhaalde afbeeldingen kunnen nooit buiten het element komen waar ze in zitten (en kunnen dat element ook niet oprekken zoals IE dat doet);
• door de hoogte op te geven, worden ze niet verticaal herhaald;
• door een (X Y) waarde op te geven (hier: 50% 0) kunnen ze op de juiste positie gezet worden;
• door de hor. 50% beginnen ze hier altijd vanaf het midden getekend te worden (zowel naar links als naar rechts);
• waarmee de strook net zo breed wordt als het scherm nodig heeft.

Met vriendelijke groet,
CSShunter