dreamweaver, tekst verschuift horizontaal over het beeld

Status
Niet open voor verdere reacties.
S

SandraTX

Gebruiker
Lid geworden
9 mrt 2011
Berichten
8
De tekst die ik bovenop een image plaats verschuift horizontaal in beeld. De tekst blijft als het ware statisch en de rest van de site schuift telkens naar het midden.
Ik heb geprobeerd de positie te veranderen maar dan gaat de tekst boven, schuin of naast de image staan.
Heeft iemand de oplossing?

<body>

<div id="apDiv1">
<div>
<div id="MText-Bodytext-255" title="Klik om deze tekst aan te passen!" jquery1299615432331="27" editing="false" revert="&lt;P&gt;&lt;STRONG&gt;Dit jaar staan we op de *voorjaarsbeurs Trade Mart , Kitchen &amp; Dining van 13 maart 2011*tot en met 15 maart 2011,*in het Beatrix-gebouw te Utrecht.*U kunt ons vinden *op de derde etage, standnr. 250. U kunt ons daar bezoeken en aldaar *kunnen we U vrijblijvend informatie* verstrekken over de schalen van Dishes &amp; Deco.&lt;BR&gt;&lt;BR&gt;&lt;/STRONG&gt;&lt;/P&gt; &lt;P&gt;&lt;STRONG&gt;Dishes &amp; Deco is een klein bedrijf dat ambachtelijk*vervaardigd en handbeschilderd aardewerken schalen verkoopt. De schalen van Dishes &amp; Deco geven een leuke toevoeging aan gezellig tafelen. &lt;/STRONG&gt;&lt;/P&gt; &lt;P&gt;&lt;STRONG&gt;&lt;/STRONG&gt;*&lt;/P&gt; &lt;P&gt;&lt;STRONG&gt;Steeds meer mensen maken gebruik van een buiten-keuken, om tijdens een gezellige zomerse dag buiten te genieten van een heerlijke maaltijd. De mooie gedecoreerde schalen van Dishes &amp; Deco geven iets extra's aan Uw gedekte tafel.&lt;/STRONG&gt;&lt;/P&gt; &lt;P&gt;&lt;STRONG&gt;&lt;BR&gt;Voor bij een gezellige borrel met vrienden of familie zijn de tapas-schalen, voorzien van lekkere borrelhapjes een* echte aanrader! &lt;BR&gt;Maar ook als decoratie zijn de schalen een toevoeging aan Uw interieur.&lt;/STRONG&gt;&lt;/P&gt; &lt;P&gt;&lt;/P&gt; &lt;P&gt;&lt;BR&gt;&lt;STRONG&gt;&lt;/STRONG&gt;&lt;/P&gt;">
<p><strong>Dit jaar staan we op de voorjaarsbeurs Trade Mart, Kitchen &amp; Dining van 13 maart 2011*tot en met 15 maart 2011,*in het Beatrix-gebouw te Utrecht.*U kunt ons vinden op de derde etage, standnr. 250. U kunt ons daar bezoeken en aldaar kunnen we U vrijblijvend informatie verstrekken over de schalen van Dishes &amp; Deco.</strong></p>
<p><strong><br />
</strong><strong>Dishes &amp; Deco is een klein bedrijf dat ambachtelijk*vervaardigd en handbeschilderd aardewerken schalen verkoopt. De schalen van Dishes &amp; Deco geven een leuke toevoeging aan gezellig tafelen. </strong></p>
<p><strong>Steeds meer mensen maken gebruik van een buiten-keuken, om tijdens een gezellige zomerse dag buiten te genieten van een heerlijke maaltijd. De mooie gedecoreerde schalen van Dishes &amp; Deco geven iets extra's aan Uw gedekte tafel.</strong><strong><br />
Voor bij een gezellige borrel met vrienden of familie zijn de tapas-schalen, voorzien van lekkere borrelhapjes een echte aanrader! <br />
Maar ook als decoratie zijn de schalen een toevoeging aan Uw interieur.</strong></p>
</div>
</div>
<div oldblock="block">
<div jquery1299615432331="26"></div>
</div>
</div>
 
Heeft iemand de oplossing?
Klik om te vergroten...
Nee, die is zonder de bijbehorende css niet uit te vinden.
Heb je een link naar een testpagina?

Met vriendelijke groet,
CSShunter
__________
PS:
Als je hier html-code post, moet je even deze
html.png
uit het pictogrammen-rijtje boven het reactie-invulvakje gebruiken, dan wordt het leesbaar.
Voor css-code moet je deze
code.png
nemen.
 
Hallo CSShunter,

Bedankt voor je reactie. Ik heb even een testpagina gekoppeld aan mijn huidige eigen website
http://www.samfotografie.nl/testpagina.html
De bedoeling van mij om een site te maken die altijd mooi in het midden staat ipv mijn andere site die ik vast gezet heb op een vast punt zoals www.samfotografie.nl
Ik begrijp zoverre wat ik gedaan heb, dat de achtergrond en het achtergrondje dat ik als basis voor de site wilde maken die naar het midden schuiven, maar dat de tekst wel vast op een punt blijft staan. Op de een of andere manier moet ik de tekst vast kunnen koppelen aan de ondergrond of de image, zodat alles wat ik bouw op elkaar blijft staan zoals de lagen in photoshop, maar ik weet niet hoe. De positie van de tekst staat op absolute, maar als ik een van de andere opties kies, dan gaat de tekst boven aan of op een heel andere plaats staan.
de website die ik nu gemaakt heb voor dit bedrijf is puur gemaakt op een image en voor de rest hotspots http://www.dishes-deco.nl/ maar dit is geen mooie oplossing en zeker niet mijn bedoeling.
Ik hoop dat je zo meer informatie hebt, die alles duidelijker heeft gemaakt.

Alvast bedankt voor het meedenken,
Sandra
 
Hoi Sandra,
Het euvel zit 'm in de absoluut gegeven positie voor de <div id="apDiv1"> waar de eigenlijke content in zit, in combinatie met de <div class="container"><div class="content">...</div</div> waar de achtergrond-afbeelding in zit als voorgrond-afbeelding (een gewoon img).
De absolute positie is absoluut opgegeven ten opzichte van punt (0,0): de linkerbovenhoek van de pagina. Bij een gecentreerde pagina zit de tekst echter bij elke resolutie op een andere plekje = dan gaat het altijd mis.
  • De achtergrond-afbeelding moet een echte achtergrond-afbeelding worden, en de oude <div id="apDiv1"> moet een gewone <div> worden. Niet apart, maar binnen de container waar die achtergrond-afbeelding in zit.
  • Om te vermijden dat bij tekst-vergroting door de bezoeker de tekst uit de afbeelding gaat lopen, kan de nieuwe content-div een hoogte krijgen, en een overflow:auto. Als de tekst dan te hoog wordt, komt er een net scrollbalkje naast.
  • Tenslotte kun je het geheel van de pagina centreren door de <body> een breedte te geven, plus een margin:auto voor links en rechts. Dan wordt auto(matisch) de overblijvende ruimte van de breedte eerlijk verdeeld tussen links en rechts, bij elke resolutie.
  • In dit geval kan de achtergrond-afbeelding in de <body>.
  • Het verloop om de afbeelding heen kan als achtergrond-afbeelding aan de html-tag vastgeknoopt worden. Daarbij kan de huidige verloop.jpg van 2551*2026px en 562kB ingeruild worden voor een verloop-nw.png van 2kB, die je horizontaal laat herhalen.
    Dat scheelt nogal in download-snelheid van de pagina! :)
Nieuwe test:
Succes!
Met vriendelijke groet,
CSShunter
__________
PS: Voor het Doctype kan het beste de Strict variant gebruikt worden, die is eigenlijk al 10 jaar de nieuwe standaard, en die geeft de beste crossbrowser resultaten.
 
Laatst bewerkt:
Hallo Css hunter

Dat met die achtergrond is zo logisch als je het leest. ik denk nog veel te veel in photoshop. Dit is zo anders. Ik had in dreamweaver een standaard html 1 kolom vloeibaar gecentreerd gebruikt, daar alles weg gehaald wat ik niet dacht nodig te hebben en van daaruit wilde ik bouwen. Ik kan dus beter helemaal een nieuwe pagina bouwen en daar alles inzetten. Ik had het verloop gebruikt als achtergrond in de body, zonder deze te laten herhalen. Ik had je pagina even gedownload om de code te kunnen vergelijken en precies te zien wat alles is, maar dat is niet gelukt. Is het mogelijk dat je mij de code kunt laten zien, zodat ik weet waar alle verschillen in zitten. Dat is duidelijker voor mij.
Zou ik mijn eigen website www.samfotografie.nl nog kunnen veranderen als ik de body een margin auto voor links en rechts geef of krijg ik dan problemen met alle elementen die ik erop geplaatst heb?

Alvast weer hartelijk dank voor je hulp.
Groetjes, Sandra
 
Is het mogelijk dat je mij de code kunt laten zien, zodat ik weet waar alle verschillen in zitten?
Klik om te vergroten...
  • Ja hoor, je kunt die meteen zien via menu Beeld > Paginabron (of: Beeld > Bron). ;)
  • En anders hier ook.
  • Of ingezipt, voor het betere downloadwerk, hier.
Zou ik mijn eigen website www.samfotografie.nl nog kunnen veranderen...
Klik om te vergroten...
Nop, ook daar zijn het allemaal APdiv's die Dreamweaver er in gezet heeft (niet echt handig, die DW met zijn APdiv's. Die hebben al heel wat ellende veroorzaakt!).
Dus ook daar zal eerst renovatie/nieuwbouw moeten plaatsvinden voordat de pagina in alle resoluties gecentreerd op scherm kan staan.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo CSShunter,

Er gaat een wereld voor me open met de beeld-paginabron. Geweldig, dan kun je overal zien hoe iets opgebouwd is.
Komende week moet ik voor iemand een website maken. In photoshop heb ik hem al helemaal voorbereid. Ik ga proberen alles te gebruiken wat je me verteld hebt.
Hartelijk dank daarvoor.

Met vriendelijke groet,
Sandra
 
achtergrond

Ik hoop dat ik het nou goed gedaan heb met de code tekens.
Ik kreeg deze oplossing gisteren door voor de achtergrond van iemand. Is dit iets waar jij voor zou kiezen of kom ik juist daardoor weer valkuilen tegen?

HTML: 
<style>#gradient { margin:0;height: 612px;padding: 0;/* For WebKit (Safari, Google Chrome etc) */background: -webkit-gradient(linear, left top, left bottom,from(#D2E0FB), to(#97B0E6));/* For Mozilla/Gecko (Firefox etc) */background: -moz-linear-gradient(top, #D2E0FB, #97B0E6);/* For Internet Explorer 5.5 - 7 */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D2E0FB,endColorstr=#97B0E6);/* For Internet Explorer 8 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D2E0FB,endColorstr=#97B0E6)";}</style>
 
Aha, hier staat dus:
HTML: 
<style>
#gradient { 
    margin:0;
    height: 612px;
    padding: 0;
    /* For WebKit (Safari, Google Chrome etc) */
    background: -webkit-gradient(linear, left top, left bottom,from(#D2E0FB), to(#97B0E6));
    /* For Mozilla/Gecko (Firefox etc) */
    background: -moz-linear-gradient(top, #D2E0FB, #97B0E6);
    /* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D2E0FB,endColorstr=#97B0E6);
    /* For Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D2E0FB,endColorstr=#97B0E6)";
}
</style>
.
Om te beginnen hoort er bij <style> een type="txt/css" bij:
HTML: 
<style type="text/css">
    ...
</style>
Maar ik zou hier niet voor kiezen:
  • Het kan waarschijnlijk wel, maar dit loopt vooruit op css3, en alle browsers hebben op dit moment nog zo hun eigen manier van omgaan met een gradiënt-eigenschap.
  • Vandaar ook al die voorvoegsels om de browsers de voor hen geschikte goede methode toe te dienen.
  • Die voorvoegsels zijn dus browser-gebonden, en volgens de standaard is dat niet toegestaan: hiermee wordt het invalid css, zal de css-validator zeggen.
  • De Mozilla-variant werkt nog niet in Firefox 3.5; hetzelfde kan gelden voor oudere versies van andere browsers.
  • In de toekomst moet het de dan geaccepteerde css3 formule worden.
Met een gradiënt-img loop je geen enkel risico dat het nu of in de toekomst niet getoond kan worden. En het img is maar 2kB groot, dat is te verwaarlozen als het om de pagina-snelheid gaat.

Met vriendelijke groet,
CSShunter
 
Hallo Csshunter,

Ik heb met bovenstaande adviezen geprobeerd de andere site wel zo op te bouwen. Helaas loop ik tegen de zelfde fouten aan (denk ik) en weet ik niet hoe deze aan te passen. Ik heb hem even in een test gezet
http://www.samfotografie.nl/testpagina2.html
Ik heb jouw code gebruikt, maar als ik de rechtse margin naast de foto in de body op auto zet, dan springt de tekst met foto wel in het midden, maar de achtergrond foto in de body niet.
Verder heb ik geprobeerd de onderste teksten in een gewone div te plaatsten in plaats van nu div id, maar dan kwam de tekst links op gelijke hoogte als de andere teksten te staan en kreeg ik deze niet individueel geplaatst op de juiste plek. Ook al gaf ik deze een andere css naam.
Ik krijg in DW de plaats van de img en teksten ook niet goed te zien en met live vieuw zet ik alles in princiepe op de juiste plek, hoewel dat een andere plaats is dan in DW. Maar dat is natuurlijk niet echt de oplossing.
Als je zin en tijd hebt, wil je dan nog een keer kijken wat mijn fouten zijn.

Met vriendelijke groeten,
Sandra
 
Hoei! Het zijn weer allemaal #apDiv's met absolute posities die DW er in geslingerd heeft...
Wat geven die dingen toch een ellende! :shocked:
Zit nu wat krap in m'n tijd, misschien later meer.

Met vriendelijke groet,
CSShunter
 
Fijn dat je toch wilt kijken, dat je de moed nog niet opgegeven hebt ;-). In welk programma maak jij de websites? Of kun jij gewoon heel gemakkelijk alle valkuilen omzeilen?
Ik zie vanzelf wanneer je tijd hebt gehad.
Alvast bedankt.
Groetjes, sandra
 
In welk programma maak jij de websites?
Klik om te vergroten...
Geen snif-snaf-snufjes webeditor met ontwerpweergave, maar zelf op de hand de broncodes inkloppen, met Notepad++ (veredeld Kladblok). :d

En daarbij stug de Golden Rules of CSS toepassen.

Gaat er dan iets fout, dan heb ik het helemaal zelf gedaan, en hoef ik niet op te sporen wat een WhatYouSeeIsWhatYouHopeYouGet programma er automatisch aan verknald heeft. ;)
 
Zoals die andere al zei; je bent een held ;-)
Bedankt. Ik ga komende week alles bestuderen.
Groetjes, Sandra
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan