hoe begin ik met CSS

[brandlijn]

Hallo
Op de bovenstaande vraag is er nog geen reactie gekomen.
Ik heb er de laatste tijd niet zoveel tijd in kunnen steken maar ik wil toch de draad weer oppakken.
Ik schreef dat alles in IE goed was uitgelijnd, maar dat was nu niet meer zo, totdat ik vandaag weer wat aanpassingen heb gedaan
Ik heb nog steeds het probleem dat het CSS bestand schijnbaar niet goed is gekoppeld, maar ik zie niet hoe dit op te lossen.
Ik wil de hele website opnieuw opzetten, met veel minder tabellen en een CSS bestandje dat er voor zorgt dat de website in alle browser in het midden is uitgelijnd. Om te beginnen heb ik de agenda weer aangepast http://www.woongroep2000.nl/site%20pagi ... genda.html
Nu is deze in IE goed uitgelijnd maar laat FF de rode achtergrond niet zien
Graag nog een reactie, zodat ik weer verder kan.
Jan

[nirwana]

Het enige verschil dat ik zie tussen Firefox en IE is de marge aan de linkerkant. In IE is alles links uitgelijnd en in Firefox is het geheel in het midden uitgelijnd. In beide browsers heeft de kop Agenda een rode achtergrond.

Wel zie ik dat de stylesheet op een verkeerde manier aan de pagina is gekoppeld. Deze verwijst naar file:///C:/Documents%20and%20Settings/All%20Users/Documenten/Celiene/Woongroep%202000/Website/site%20pagina%27s/testcss.css
Dat bestand bevindt zich enkel op jouw eigen PC en niet ergens op het Internet. Kortom, jij bent de enige die op die manier de pagina's ziet en de bezoekers van jouw website zien mogelijk iets anders.
Hier staat het bestand waarnaar verwezen had moeten worden: http://www.woongroep2000.nl/site%20pagi ... estcss.css

Als ik de webpagina lokaal opsla, hetzelfde doe met het testcss.css-bestand en vervolgens de webpagina laat verwijzen naar mijn lokale testcss.css-bestand dan wordt de site zowel in Firefox als ook in IE goed uitgelijnd.

Controleer eens of de inhoud van jouw testcss.css-bestand nog overeen komt met wat er in de online versie staat:

Code: Selecteer alles

body { font-family: Arial;
    opacity: 1;
    text-align: center;
    background-color: rgb(204, 0, 0);
    color: rgb(255, 255, 255);
    }

  table { border-style: none;
    text-align: center;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    font-family: Arial;
    color: rgb(0, 0, 0);
    }

Laat vervolgens de pagina enkel verwijzen naar testcss.css zonder dat hele file://-pad ervoor en publiceer dan de webpagina nogmaals. Ik hoop dan dat deze er in IE en Firefox ongeveer hetzelfde uitziet.

Dan zie ik enkel nog een verschil tussen de dikte van de Agenda-letters. In IE is dit dikker gedrukt dan in Firefox. Ik heb nog niet bekeken waar dat aan kan liggen. Maar eerst is het van belang dat de problemen die ik hierboven heb vermeld worden opgelost. Daarna hebben we een basis om vanuit verder te werken.

[brandlijn]

Martijn bedankt voor je reactie.

Als ik op mijn pc de online versie bekijk dan is in IE de achtergrond van de website rood en in FF niet (ik bedoelde dus niet de kop:Agenda) zie ook de andere pagina's van de site.
Nu is de website in IE wel weer netjes gecentreerd.
als ik vanuit NVU de pagina's bekijk in IE en FF dan zijn bij beide de achtergrond rood.

Het css bestand staat op internet in de zelfde map waar ook de html bestanden staan.
Bij het kiezen van het css bestand in NVU komt er automatisch een file:// koppeling, hoe kan ik dit voorkomen?
De online versie van het css bestand is het zelfde als op mijn pc.

Het probleem lijkt mij dus te ontstaan door het kiezen van het css bestand dit word dus automatisch een file:/// koppeling, en op internet is (hierdoor?) het css bestand niet gekoppeld terwijl het er wel staat.

Ik ben blij dat je me steeds weer een uitgebreid antwoord wilt geven want ik denk dat wanneer je samen met mij achter 1 pc zou zitten het probleem misschien in 5 min. opgelost zou zijn.

mvg Jan

[nirwana]

Het probleem lijkt mij dus te ontstaan door het kiezen van het css bestand dit word dus automatisch een file:/// koppeling,

Tja, dat is een lastig probleem in Nvu.
Maar geen nood: op het Nvu-forum las ik net over Kompozer. Vooral de zin "added: relativize local URLs in the markup cleaner" vond ik interessant. Volgens mij houdt dat in dat aan het menu Tools > Markup Cleaner (ja, Kompozer is vooralsnog in het Engels) een extra optie is toegevoegd: "relativize local url's". Volgens komt dat erop neer dat daarmee in de code van Nvu die file:// dingen vervangen worden door gewone relatieve adressen waar je op het Internet ook nog eens iets aan hebt.

Kortom, als je niets tegen de Engelse taal hebt, probeer Kompozer dan eens uit. Als je niet al teveel Engels kent, maar je kent Nvu inmiddels wel aardig dan kun je natuurlijk ook Kompozer gebruiken. Je weet dan immers al welke knop waarvoor dient.

Ik ben blij dat je me steeds weer een uitgebreid antwoord wilt geven want ik denk dat wanneer je samen met mij achter 1 pc zou zitten het probleem misschien in 5 min. opgelost zou zijn.

Nou, Deventer - Apeldoorn is ook nog eens te doen. Ik kom op weg naar mijn werk vrijwel dagelijks langs Apeldoorn

[brandlijn]

Hallo Martijn,

Weer een stapje verder

Met kompozer lijkt het inderdaad beter te gaan, volgens mij staat nu alles gecentreerd en met een rode achtergrond?

Bij de CSS validator kreeg ik deze foutmelding, waar ik zo niets mee kan:
* Regel: 7 Context : body

Eigenschap opacity bestaat niet : 1
* Regel: 12 Context : table

Eigenschap opacity bestaat niet : 1

Uw gevalideerde Cascading Style Sheet :

* body {
o font-family : Arial;
o text-align : center;
o background-color : rgb(204, 0, 0);
o color : rgb(255, 255, 255);
}
* table {
o border-style : none;
o text-align : center;
o font-family : Arial;
o color : rgb(0, 0, 0);
o background-color : rgb(255, 255, 255);
}


Dat alles gecentreerd staat komt dit door de css instellingen of door de regel body id die ik (op goed geluk) heb ingevoegd.
Ik heb ook bij de css editor tekst uitlijng midden aangegeven maar volgens mij slaat dit niet op de uitlijnning van de websit maar op de tekst.

Ik zag dat je in de wiki bent begonnen met wat meer uitleg over de CSS editor, misschien kun je hier nog wat meer uitleg in toevoegen?

MVG Jan

[nirwana]

Die opacity zal dan wel niet helemaal standaard zijn, neem ik aan. Nvu voegt dat in als je bij CSS op het tabblad Achtergrond iets met doorzichtigheid instelt. Hier zie je een uitgebreid verhaal over opacity, CSS en hoe browsers dat ondersteunen: www.mandarindesign.com/opacity.html