Randen en kleuren transparant

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Randen en kleuren transparant

Bericht door schilder »

Een paar kleine dingen misschien weet iemand een oplossing.

1. Ik geef divs soms een achtergrondkleur via css en maak deze dan transparant zodat de kleur doorschijnt. In Chrome en Firefox wordt dit prima weergegeven maar in IE is de kleur dan niet transparant.

2. Bij afbeeldingen voeg ik soms via css een rand toe met kleur op oudere computers tenminste dat denk ik wordt de rand zwart weergegeven.

Zijn hier oplossingen voor?

Met vriendelijke groet
Ger
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

Ger,

Kun je wat meer informatie hierover geven ?
ad 1: welke CSS-code gebruik je voor het transparant maken van de div ?

Overigens moest ik hier denken aan een gedeelte van een website die ik onlangs heb gemaakt. Daar wilde iemand ook een semi-transparante achtergrond, dus moest ik even zoeken hoe ik dat kon bereiken. Zo ben ik uiteindelijk op www.daltonlp.com/view/217 terecht gekomen.

Moet je alleen even kijken hoe je zo'n transparante afbeelding maakt. Ik heb de afbeelding toen met GIMP gemaakt.
Volgens mij is dat een kwestie van een laag maken, deze de gewenste kleur geven en dan in de eigenschappen van de laag aangeven hoeveel transparantie (opacity) je wilt hebben.

ad 2: welke CSS-code gebruik je voor die rand ? En waar dient die rand voor ? Is het een soort dropshadow ?
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

Het gaat om deze site http://www.satya-travel.com/filosofie.php

Onder de foto zit een balk deze moet doorschijnen nu doe ik het door in de div een transparant plaatje te nemen va 5px X 5px die zich in alle richtingen herhaald.

In kompozer kan je in de div ook een kleur als achtergrond kiezen en deze doorschijnend maken, dit werkt in bijna alle browser behalve IE van microsoft, volgens mij is dit inderdaad alleen op te lossen door een transparant plaatje als png of gif te kiezen.

Tot zover heb ik het dus al opgelost, bedankt voor je antwoord

Met vriendelijke groet
Ger
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

Die site ziet er mooi uit, ook al is die nog niet helemaal af.

En wat jouw tweede vraag betreft ?
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

nirwana schreef:En wat jouw tweede vraag betreft ?
Dat gaat over de randen van de foto's, deze zijn rood door middel van een class in de css. Het geval is dat ik soms hoor dat deze zwart worden weergegeven. Ik denk zelf dat dit bij wat oudere browsers is, dit weet ik niet zeker.

Groeten
Ger
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

Ger,

Iets anders wat ik opmerk bij het bekijken van de code van de webpagina.
Opeens wordt dit stuk HTML in de webpagina opgenomen:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><!-- <editor name="Hoofdmenu" height="300" owners="ger"> --></head><body>

<ul id="awmULLI-menu">

  <li><a href="./indexxx.php">Home</a></li>
  <li><a href="over-ons.php">Over ons</a></li>
  <li><a href="filosofie.php">Filosofie</a></li>
  <li><a href="Reizigers_van_Satya_Travel.php">Onze Reizigers</a></li>
  <li><a href="./#">Praktische Info</a></li>

  <li>Reizen <br>
    <ul>
      <li><a href="#">Reis 1</a></li>
      <li><a href="#">Reis 2</a></li>
      <li><a href="#">Reis 3</a></li>
    </ul>
  </li>

  <li><a href="./#">Boeken</a></li>
  <li><a href="./#">Contact</a></li>
</ul>

<!-- </editor> -->
</body></html></div>
Dat is een complete webpagina (met de DOCTYPE erbij) in een andere pagina.
Heb je enig idee waarom hier de doctype, html en body ook nog bij in staan ?
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

schilder schreef:
nirwana schreef:En wat jouw tweede vraag betreft ?
Dat gaat over de randen van de foto's, deze zijn rood door middel van een class in de css. Het geval is dat ik soms hoor dat deze zwart worden weergegeven. Ik denk zelf dat dit bij wat oudere browsers is, dit weet ik niet zeker.
Als die zwart worden weergegeven dan moet men de eigen monitor maar eens nakijken. Waarschijnlijk stamt die dan nog uit het tijdperk dat een computer een monochrome beeldscherm had.

Zonder gekheid: voor die randen gebruik je een eenvoudige border-instructie. Dat moet elke browser die CSS begrijpt kunnen begrijpen. Voor de zekerheid heb ik de website net ergens op een webserver in IE6 bekeken. Goed, je webdesign gaat aan gort, maar de foto's hebben wel rode randen. Wat dat "webdesign aan gort" betreft:
- oudere IE-versies begrijpen het alpha-kanaal in PNG-afbeeldingen niet, dus de transparantie die daarin zit wordt als grijs getoond
- vergeet de transparante afbeeldingen bovenaan de website maar, want ook die begrijpt IE6 niet

Ter info: op basis van mijn geheel-niet-wetenschappelijk-verantwoorde statistieken gebruikt ongeveer 2 procent van de websurfers nog IE6. Waarschijnlijk is dit omdat die browser met Windows XP mee is gekomen en nooit is vervangen door iets wat zich een moderne webbrowser mag noemen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

Ter info: op basis van mijn geheel-niet-wetenschappelijk-verantwoorde statistieken gebruikt ongeveer 2 procent van de websurfers nog IE6. Waarschijnlijk is dit omdat die browser met Windows XP mee is gekomen en nooit is vervangen door iets wat zich een moderne webbrowser mag noemen.
Hierover hoef ik me dus niet echt druk te maken voor tweeprocent aan gort dus.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

schilder schreef:Hierover hoef ik me dus niet echt druk te maken voor tweeprocent aan gort dus.
Ik heb je voor de zekerheid een mail gestuurd met een screenshot van IE6.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

Dat is een complete webpagina (met de DOCTYPE erbij) in een andere pagina.
Heb je enig idee waarom hier de doctype, html en body ook nog bij in staan ?
Dit komt doordat ik dit gedeelte inlees met PHP include zo is het menu op één plaats te wijzigen in een CMS.
Alleen moet ik nog kijken of er html te maken is zonder al die gegevens die niet hoeven.

Groeten
Ger
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

Ik heb je voor de zekerheid een mail gestuurd met een screenshot van IE6.
Ja ziet er niet mooi uit, maar voor 2% begrijp ik. Ik weet niet of er hier rekening mee moet gehouden worden het wordt anders toch moeilijk een site te maken die aan eisen van nu voldoen, deze mensen moet maar Firefox downloaden Grapje. Maar ik denk wel dat dit niet echte computer gebruikers zijn. Toch??

Bedankt voor de mail ik kan zo wel mijn keuze maken.

Met vriendelijke groet
Ger
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

Halo Martijn.

Ik heb het menu nu in Notepad+ gemaakt zo kan ik de head en body weg laten, heb je enig idee of dit ook in kompozer kan.

Met vriendelijke groet
Ger
schilder
Berichten: 39
Lid geworden op: 3 maart 2011, 21:26
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door schilder »

nirwana schreef:
schilder schreef:Hierover hoef ik me dus niet echt druk te maken voor tweeprocent aan gort dus.
Ik heb je voor de zekerheid een mail gestuurd met een screenshot van IE6.
Ik heb IETester geinstaleed. En nu schik ik eigenlijk ook IE7 is niet goed (en ook een andere site die ik gemaakt heb met kompozer).
Ik ben divs gaan gebruiken met css maar IE lager dan 7 geven deze niet goed weer wat die ik fout?

Met vriendelijke groet,
Ger
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

schilder schreef:
nirwana schreef:
schilder schreef:Hierover hoef ik me dus niet echt druk te maken voor tweeprocent aan gort dus.
Ik heb je voor de zekerheid een mail gestuurd met een screenshot van IE6.
Ik heb IETester geïnstalleerd. En nu schik ik eigenlijk ook IE7 is niet goed (en ook een andere site die ik gemaakt heb met kompozer). Ik ben divs gaan gebruiken met css maar IE lager dan 7 geven deze niet goed weer wat die ik fout?
Ger,

Vaak valt het uiteindelijk wel mee, hoor.

IE houdt niet van transparante PNG-afbeeldingen met een RGB-kleurenpalet. Als je de transparante PNG met een geïndexeerd kleurenpalet (=maximaal 256 kleuren) opslaat dan wordt het al beter.

Ook IE ondersteunt wel div's; alleen zul je dan wat moeten experimenteren met wat de betreffende IE-versie wel/niet ondersteund. Dit kan bijvoorbeeld te maken hebben met aan een div bijvoorbeeld een extra width en height meegeven. Of dat volgende het box-model van IE een bepaalde breedte niet past. Dan kunnen bijvoorbeeld enkele pixels al het verschil maken.

Om dit uit te proberen geef ik een div bijvoorbeeld nogal eens een gekleurd randje (1 pixel) mee. Wel moet je uitkijken met deze randen, want die kunnen er ook voor zorgen dat iets net niet meer past. Door zo'n rand wordt een div namelijk weer net enkele pixels breder. Wel kan dit helpen bij het uitzoeken van op welke div je je aandacht moet richten.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Randen en kleuren transparant

Bericht door nirwana »

schilder schreef:Ik heb het menu nu in Notepad+ gemaakt zo kan ik de head en body weg laten, heb je enig idee of dit ook in kompozer kan.
Ger,

Kompozer werkt altijd met een volledige HTML-pagina, dus een brokje HTML-code is dan geen optie.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu