[HTML/CSS] CSS code werkt niet

[Wackmack]

Goedemorgen,

Voor een website moet ik een bepaalde tekst rechts naast een afbeelding krijgen. Dit is te veranderen door de CSS aan te passen.

Nu verandert CSS in het programma (TopStyle 5.0) als ik de posities aanpas alleen wordt dit niet uitgevoerd in het html bestand. Hoe kan dit? Alle verwijzingen kloppen alleen krijg ik een bepaalde tekst niet naar rechts ipv links. In de editor staat het wel goed onder CSS, het gaat sixoText.


CSS positie is goed zoals te zien op de foto.


HTML pakt steeds de oude positie van 45px terwijl ik duidelijk left 820px heb aangegeven voor de tekst Opening Skydeck.

Als ik index.html open in Firefox dan pakt hij left 45px. In de firebug van Firefox kan ik de code aanpassen naar left 820px en dan springt de tekst direct naar de goede positie alleen dit wordt natuurlijk niet opslagen.

Cascading Stylesheet:

#sixoText {
    position: absolute;
    
    width: 190px;
    
    left: 820px;
    top: 440px;
}

HTML:

<div id="sixoText">
            <h2>Opening Skydeck</h2>
            Bekijk de video van de opening van The Skydeck hiernaast door op de link te klikken.
        </div>

Mijn vraag, waarom worden de veranderingen van CSS niet uitgevoerd in de HTML? Het bronbestand global.css is aangepast. Verder heb ik geprobeerd een nieuwe CSS textcode in te voeren maar dit wordt ook niet opgepakt in HTML echter laat de editor wel netjes de nieuwe textcode zien.

[hiekikowan]

Het zou kunnen dat de 'left:820px' overschreven wordt door een later gedeclareerde waarde... Probeer eens 'left: 820px !important'' waarmee je aangeeft dat deze waarde over andere waardes geprefereerd is.

[Wackmack]

Werkt helaas ook niet. Test de code voor de zekerheid in verschillende browsers maar nog geen resultaat.

Cascading Stylesheet:

#sixoText {
    position: absolute;
    
    width: 190px;
     
    left: 820px!important;
    top: 440px;
}

[Grijze Vos]

Zet ergens (bijv. op jsfiddle) een testcase neer waarin het fout gaat. Desnoods een linkje naar je testwebsite die je ergens neerzet. Je geeft nu precies te weinig informatie waardoor we niet echt mee kunnen kijken.

[Wackmack]

Ga ik doen, hopelijk is het probleem dan op te lossen.

Als ik beide bestanden laad in jsFiddle is het probleem opgelost
In TopStyle 5.0 alleen weer niet, heel vaag. Even testen op de server.

[ Voor 57% gewijzigd door Wackmack op 24-07-2013 11:07 ]

[incaz]

Als je in firefox met 'inspect element' de properties bekijkt zie je ook waar die vandaan komen (bestand / css-rule / regelnummer.) Daarmee zou je het moeten kunnen opsporen.
Worden er geen bestanden gecachet ergens onderweg?

[Bosmonster]

Zo te zien is je site gecentreerd. Heb je wel position:relative op je omliggende, gecentreerde, container?

jsFiddle geeft je een vrij smalle viewport, waar het probleem zich daardoor mogelijk niet voordoet.

[ Voor 32% gewijzigd door Bosmonster op 24-07-2013 12:52 ]

[FotW]

Als ik je een tip mag geven; vermijdt het gebruik van id's in css, je zet jezelf hierdoor vast met css specificiteit en dan krijg je ranzige "oplossingen" als het gebruik van !important

[Wackmack]

Het probleem is opgelost. Zal je tip onthouden FotW. De site is gemaakt door een reclame bureau alleen ik voer nu het onderhoud uit. Wat is het alternatief voor ID? Opzich werkt ID toch vrij makkelijk met de verwijzing in de html? Alles werkt nu, ook de link in het plaatje. Mijn dank is groot.

Verder ben ik nu veel aan het lezen op deze site http://www.handleidinghtml.nl/css/inhoud-css.html en http://www.w3schools.com/css/default.asp

[ Voor 12% gewijzigd door Wackmack op 24-07-2013 14:18 ]

[Bosmonster]

FotW schreef op woensdag 24 juli 2013 @ 13:25:
Als ik je een tip mag geven; vermijdt het gebruik van id's in css, je zet jezelf hierdoor vast met css specificiteit en dan krijg je ranzige "oplossingen" als het gebruik van !important

Nee, ID's zijn prima, zolang je ze goed gebruikt (voor specifieke onderdelen dus, of onderdelen die je individueel wilt kunnen identificeren).

Overal classes voor gebruiken is juist een bad practice.

Dat je jezelf vast-schrijft door specificity en !importants heeft meer te maken met een gebrek aan css-kennis.

[ Voor 10% gewijzigd door Bosmonster op 24-07-2013 14:20 ]

[MueR]

Bosmonster schreef op woensdag 24 juli 2013 @ 14:19:
Dat je jezelf vast-schrijft door specificity en !importants heeft meer te maken met een gebrek aan css-kennis.

Ik wil dit even onderstrepen (dus doen we dat ).. Sowieso is het vermijden van !important altijd een goed uitgangspunt. Bij een enkele uitzonderingssituatie is het heel handig, maar over het algemeen heb je important niet nodig als je CSS goed in elkaar zit.

[Verwijderd]

Ik gebruik !important voornamelijk voor het overrulen van de standaard CSS van frameworks, b.v. jQuery UI etc.