vlakken schuiven over elkaar

[b bouwens]

hallo
ik heb met dreamweaver een site gemaakt, alles is klaar en geupload naar de server.
Wanneer ik tijdens het ontwerpen van de site in de browser kijk is alles oke en naar wens.
zodra ik via de server mijn site bekijk,schuiven vlaken over elkaar.
Ik heb gewerkt met sjablonen.
wie weet hoe ik de site elastisch kan maken zodat hij ook bij grotere schremen zich automatisch aanpast, en geen vlakken over elkaar heen schuiven.
B.Bouwens

 

[city guy]

Hi,
het lijkt er op dat je de posities in percentages aangeeft (van de containing DIV).

Als dat het geval is zul je met wat CSS de echte posities moeten aangeven en {position: absolute} moeten geberuiken

 

[b bouwens]

volstaat het dan als ik alleen de template aanpas ?
Ik heb n.l. op de template een ap div gemaakt met hierin het bewerkbare gebied ( editlble region)
Het lijkt dat de editble region de boosdoener is.
b.bouwens

 

[Naarling]

*zucht* hoe kunnen we je vraag in vredesnaam beantwoorden zonder de site te zien?

 

[b bouwens]

mag ik die dan hier door geven?Dacht gelezen te hebben dat het verboden is op het forum url van je site doortegeven.

b.bouwens

 

[Naarling]

mag ik die dan hier door geven?Dacht gelezen te hebben dat het verboden is op het forum url van je site doortegeven.

b.bouwens

Nee hoor, da's absoluut niet verboden, dat zou nogal raar zijn. Kijk, alleen een link posten om je site te promoten mag niet, daar is het forum niet voor. Maar als je een vraag hebt over het maken van je site is natuurlijk het geen probleem. het zou erg moeilijk worden mensen te helpen als ze de url van hun site niet mochten opgeven.

 

[b bouwens]

www.bocustitch.nl

Is de url van mijn site ( gelijk bij de eerste pagina zie je al dat de tekst die naar beneden komt niet meer mooi naast elkaar staat ,maar het laatste woordje staat eroner.
Als je dan doorklikt op BORDUREN kom je gelijk bij luiertaarten en zie je dat de vlakken over elkaar heen schuiven, kijk ook maar eens bij de andere pagina's.

opmijn laptop ziet het er wel goed uit ,maar zodra ik vanaf een groter beeldscherm de site inzie loopt het dus overelkaar.
B.bouwens

 

[Naarling]

tabellen in tabellen in tabellen... waarom misbruiken mensen nog steeds tabellen...

Het probleem komt in feite door die apdiv (apdiv is geen HTML element, het is gewoon een div waaraan dreamweaver position:absolute; toekent). Doordat hij position absolute heeft zal hij altijd dezelfde positie op de pagina innemen, ongeacht wat de rest van de site doet. In dit geval blijft hij dus altijd 273 pixels van de linkerkant van de site staan en 154 pixels van de bovenkant. De tabel met het menu erin daarentegen heeft position:relative; en probeert dus zo goed en zo kwaad als het kan zijn positie ten opzichte van de andere elementen van de site (behalve dus de apdiv) te behouden. Als het scherm precies de goede grote heeft maakt dit niet uit, maar zodra het scherm te groot of te klein is gaan de dingen over elkaar heen schuiven. De simpelste oplossing zou zijn om van die apdiv een gewone div met position:relative; te maken maar omdat, in de HTML, het menu onder de inhoud staat geeft ook dat geen goed resultaat, dus je kunt ze beter omdraaien.

 

[b bouwens]

ik merk dat jij een professionel bent, maar je laatste opmerking kan ik totaal niet bevatten -----wat moet ik omdraaien ?????????????
b.bouwens

 

[Naarling]

ik merk dat jij een professionel bent, maar je laatste opmerking kan ik totaal niet bevatten -----wat moet ik omdraaien ?????????????
b.bouwens

hah, meer hobbyist dan professional. Met omdraaien bedoelde ik het menu boven de inhoud zetten in de html. Hoe dat in dreamweaver in zijn werk gaat weet ik niet, ik gebruik het programma nooit.

 

[city guy]

volstaat het dan als ik alleen de template aanpas ?
Ik heb n.l. op de template een ap div gemaakt met hierin het bewerkbare gebied ( editlble region)
Het lijkt dat de editble region de boosdoener is.
b.bouwens

als je in dreamweaver een template maakt heb je editable en non-editable regions.
templates zijn de basis voor webpagina's. Non-editable kun je niet meer aanpassen in de op de template gebaseerde pagina's, tenzij je de template aanpast.
Editable is bedoeld voor jouw eigen content. De template blijft ongewijzigd.

Dat is het dreamweaver deel.
Ik heb hier geen problemen ondervonden met jouw site, behalve dat je met padding de leesbaarheid iets zou kunnen verbeteren omdat de ruimte naar de border onprettig is.

Voor nou: l8ter

 

[b bouwens]

heb het probleem kunnen oplossen,bedankt voor je geduld en uitleg, ik ga nu verder met het volgende euvel.
op detemplate staat als achtergrond afb. een balk met kleuren achter de tekst Bocustitch, als ik kijk in de browser is deze kleuren balk verdwenen op de HTML pagina's, enig idee hoe dit kan ?
groetjes B.Bouwens

 

[Naarling]

heb het probleem kunnen oplossen,bedankt voor je geduld en uitleg, ik ga nu verder met het volgende euvel.
op detemplate staat als achtergrond afb. een balk met kleuren achter de tekst Bocustitch, als ik kijk in de browser is deze kleuren balk verdwenen op de HTML pagina's, enig idee hoe dit kan ?
groetjes B.Bouwens

Grappig, het probleem met de drijvende vlakken zie ik nog steeds, maar die gekleurde balk werkt wel gewoon. (alleen de tekst "welkom op mijn site" op de eerste pagina gedraagt zich niet goed omdat die ook position:absolute; heeft)

 

[b bouwens]

klopt heb ook nog niet opnieuw naar de server geupload ( wil eerst alle fouten eruit hebben)
Maar als ik kijk op de server naar de site die er nu nog opstaat ,is de gekleurde blak op de site luiertaarten knuffels en ook de andere html pagina's weg achter het woord BOCUSTICH.
b.bouwens

 

[Naarling]

klopt heb ook nog niet opnieuw naar de server geupload ( wil eerst alle fouten eruit hebben)
Maar als ik kijk op de server naar de site die er nu nog opstaat ,is de gekleurde blak op de site luiertaarten knuffels en ook de andere html pagina's weg achter het woord BOCUSTICH.
b.bouwens

Ah, nu ik in IE kijk zie ik inderdaad het probleem. In Opera was die balk wel normaal te zien. Ik ben een beetje gaan graven en het lijkt er op dat IE problemen heeft met achtergronden voor <tr> (het zal ook eens niet IE zijn dat roet in het eten gooit) Aangezien er in die rij toch maar één cel zit lijkt me dat je het probleem op kunt lossen door die achtergrond mee te geven aan de <td> in plaats van de <tr>, kortom, net zoals je op de voorpagina gedaan hebt.

(nog beter zou zijn om geen tabellen te gebruiken maar dat zou overnieuw beginnen betekenen)

 

[city guy]

Hi,
toch even iets om over na te denken.

Allereerst: pas de title in de <HEAD> even aan bijv: met Bocustitch, dan is op de tabs in de browser te zien waar je verstopt zit.

Dan het volgende:
de bedachte constructie voor de site lijkt mij op den duur onhandig te onderhouden.

Het menu zou ik liever in een unordered list hebben geplaatst, die weer in de <DIV> staat, De fotoindex zou je in een table kunnen zetten, maar eventueel ook onder elkaar waarbij zelfs elke foto uit de index een eigen DIV met CLASS attribuut (class="fotoindex"?)

Het contactformulier is niet consistent in het gebruik van verplicht-veld sterretje, de tekst heeft aan de kanten ruimte nodig.

Als je veel "leven" op de site verwacht is het gebruik van een database-je aan te bevelen.

Tot slot: denk even na over de toekomst. Probeer dapper te zijn en nu te concluderen dat het idee goed is:thumb: maar de uitvoering niet helemaal ok is. Investeer dan nu tijd in een overzichtelijk opzet met gemakkelijk onderhoud. Als je het huidige structuurtje als uitgangspunt houdt raak je in de toekomst in de knoei qua onderhoudsgemak en moet je alsnog een nieuwe opzet kiezen.

PS. Ik denk dat je het probleem met de schuivende vlakken dan ook universeler kan oplossen. Ik zag dat in mijn Firefox e.e.a. zich ook voordoet

 

[Naarling]

Het menu zou ik liever in een unordered list hebben geplaatst, die weer in de <DIV> staat, De fotoindex zou je in een table kunnen zetten, maar eventueel ook onder elkaar waarbij zelfs elke foto uit de index een eigen DIV met CLASS attribuut (class="fotoindex"?)

Verder goede adviezen hoor, maar waarom zou je een enkele <ul> of een enkel plaatje in een div plaatsen? Als je een lijst of een afbeelding een class mee wilt geven kun je dat gewoon zo doen.

<ul class="menu">
<li><a href="url">home</a></li>
<li><a href="url">taarten</a></li>
<li><a href="url">knuffels</a></li>
</ul>
<img src="urlnaarplaatje" alt="dit is een plaatje van een luiertaart" class="fotoindex" />

Daar nog eens divs omheen zetten is niet alleen onnodig, het makt de broncode ook minder overzichtelijk.

 

[city guy]

Verder goede adviezen hoor, maar waarom zou je een enkele <ul> of een enkel plaatje in een div plaatsen? Als je een lijst of een afbeelding een class mee wilt geven kun je dat gewoon zo doen.

<ul class="menu">
<li><a href="url">home</a></li>
<li><a href="url">taarten</a></li>
<li><a href="url">knuffels</a></li>
</ul>
<img src="urlnaarplaatje" alt="dit is een plaatje van een luiertaart" class="fotoindex" />

Daar nog eens divs omheen zetten is niet alleen onnodig, het makt de broncode ook minder overzichtelijk.

Ik geef er zelf de voorkeur eeen navigatiedeel in een aparte DIV te zetten (Daar kan ik zonodig nog wat banners achter kwijt). De content blijft dan verder gescheiden van de navigatie.

De indeling van de pagina's is eenvoudig, maar wat het bezwaar zou om het menu in een aparte div te zetten om daarmee te voorkomen dat de plaatsing van andere block en inline elementen weer tot vragen leidt is mij een raadsel. Juist het niet gebruiken van de DIV als container geeft onduidelijkheid omdat je verdere content zich niet makkelijk t.o.v. ander blokken laat plaatsen. En dat de site van de vraagsteller erg kolom- en blokgericht is wel duidelijk neem ik aan. Reden te meer om daar handig gebruik van te maken en niet terughoudend te zijn die indeling in een DIV-structuur vast te leggen. Bovendien staat Dreamweaver het gebruik van meerdere templates voor (delen van) de site toe.

Overigens: met de fotoindex bedoel ik de kolommen met fotootjes wat eigenlijk de DIV class="inhoud" zou moeten zijn.

Let ook op het volgende: de uitlijning van de teksten is rommelig.De kolommen (in Firefox/Ubuntu) beginnen niet op gelijke hoogte. De tussenruimte tussen de indexfotootjes is niet overal gelijk. Met een simpel gebruik van CSS en DIV (en misschien een enkele table) is dat op te vangen.

Dan, ten aanzien van de andere componenten: kennelijk zien we een bedrijfsactiviteit die deels werkt in de grafische sector. De website als visitekaartje moet er gewoon strak uitzien. De achtergrond kleur zou per onderdeel van de pagina net iets in nuance moeten verschillen om de zaak wat levendiger te maken. Dat doe je niet met het geven van alleen een css-attribuut aan een UL, dat wordt lelijk. Voor deze doeleinden is juist de aanwezigheid van de DIV noodzaak.


Althans: zo zou ik beginnen met de opbouw

 

[Naarling]

De indeling van de pagina's is eenvoudig, maar wat het bezwaar zou om het menu in een aparte div te zetten om daarmee te voorkomen dat de plaatsing van andere block en inline elementen weer tot vragen leidt is mij een raadsel. Juist het niet gebruiken van de DIV als container geeft onduidelijkheid omdat je verdere content zich niet makkelijk t.o.v. ander blokken laat plaatsen. En dat de site van de vraagsteller erg kolom- en blokgericht is wel duidelijk neem ik aan. Reden te meer om daar handig gebruik van te maken en niet terughoudend te zijn die indeling in een DIV-structuur vast te leggen. Bovendien staat Dreamweaver het gebruik van meerdere templates voor (delen van) de site toe.

Kijk, als er meer dan alleen die lijst in de menubalk staat is het natuurlijk een ander verhaal, dan is het inderdaad wel handig om het geheel netjes in een div in te pakken. Ik wilde alleen aangeven dat het, naar mijn mening, weinig zin heeft om een enkel element (of dat nu een <ul> of een <img> is) in een een div te plaatsen.

 

[city guy]

Kijk, als er meer dan alleen die lijst in de menubalk staat is het natuurlijk een ander verhaal, dan is het inderdaad wel handig om het geheel netjes in een div in te pakken. Ik wilde alleen aangeven dat het, naar mijn mening, weinig zin heeft om een enkel element (of dat nu een <ul> of een <img> is) in een een div te plaatsen.

zo gesteld denk ik dat je voor statische webpagina's dat kan zo kan stellen, maar ook dan nog per situatie bekijken. Bij de dynamische pagina's (asp/php) is het eigenlijk nauwelijks een bezwaar omdat dan ook veel HTML door de server gegenereerd wordt

(.. en nou ga ik weer terug naar vraagsteller bowens)