[CSS] CSS aanpassen of dynamic CSS - Softwareontwikkeling

vrijdag 8 september 2006 22:41

Acties:

Topicstarter

Hieronder heb ik een stuk HTML ingevoegd. Hierbij zie je dat diverse id's later door een style weer aangepast worden. Dit is natuurlijk geen goede wijze van programmeren (style binnen de body tag) maar het werkt wel en misschien wel de enige oplossing voor mijn probleem.

Case:
Er zijn een aantal dingen die ik niet kan en niet ga veranderen:
1. De wijze van template opbouw. (hierover hieronder meer)
2. Ik wil geen javascript gaan gebruiken.

Verder moet het W3C valid XHTML 1.0 transitional en CSS2.0 zijn.

De basis van de site wordt met een (in de template) vaste layout aangemaakt. Er zijn een aantal pagina's in de site waar deze layout niet gewenst is.

Het template systeem maakt eerst een pagina aan met de basis layout. Vervolgens bekijkt het welke pagina (op dit punt is het pas duidelijk dat de layout evt niet goed is) het moet worden en vult deze dan verder in. Zoals al gezegd, dit systeem kan en zal niet aangepast worden.
Tussen de HTML heb ik een regel ingevoegd wat het punt is in de php code wanneer het duidelijk is welke pagina dit gaat worden.

Wat zijn de mogelijkheden om hier toch correcte HTML van te maken?

########################################################

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en_US" lang="en_US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>FHS E-Commerce: Pro PHP Security</title>

<base href="http://mijnsite.nl/" />

<link rel="stylesheet" type="text/css" href="templates/site/stylesheet.css" />

<script language="javascript" type="text/javascript" src="includes/general.js"></script>
<script language="javascript" type="text/javascript" src="ext/prototype/prototype.js"></script>
<script language="javascript" type="text/javascript" src="ext/scriptaculous/scriptaculous.js"></script>

</head>

<body>

<div id="pageBlockLeft">
<div id="pageContent">

<style type="text/css">

</style>

<script language="javascript" type="text/javascript">

</script>

<div class="moduleBox">

<div id="productImageLargeBlock" style="position: absolute; left: 10px; top: 10px; text-align: center; width: 375px;">

<img src="images/php_boek.jpg" border="0" alt="PHP Boek" title="PHP Boek" id="productImageLarge" />
</div>
</div>

<div style="clear: both;"></div>

</div>

<style type="text/css"></style>

</div>

<style type="text/css"></style>

</body>

</html>

vrijdag 8 september 2006 22:59

Acties:

crisp

Devver

Pixelated

Als je op dat punt in je layout inline style kan plaatsen dan kan je ook een bepaald element plaatsen met een id en daar in je stylesheet een extra rule voor aanmaken, vergelijk:

HTML:

1	<p>Een paragraaf in de normale pagina</p>

HTML:

1
2
3

<div id="special">
  <p>Een speciale paragraaf</p>
</div>

Cascading Stylesheet:

1 2	p { /* stylerules voor normale paragraaf / } #special p { / stylerules voor speciale paragraaf */ }

Als dat niet mogelijk is dan zal je toch je systeem zo moeten aanpassen dat je pas als laatste je head-sectie samensteld; style-elementen horen nu eenmaal niet in de body, daarbij zal het de rendersnelheid ook niet ten goede komen zoals je het nu doet.

En je snapt overduidelijk nog weinig van XHTML (buiten het feit dat ik zo al fouten zie in je markup); als je je pagina ook als XHTML verstuurd dan zorgen de HTML comments in je script- en stylecontent ervoor dat die compleet genegeerd worden (waar ze al niet genegeerd zouden worden aangezien XHTML casesensitive is).
Verder is CSS2 revisie 0 achterhaald en wordt aangeraden revisie 1 te gebruiken; ook browservendors houden die versie aan.

Oh, en gebruik aub ook de [code]-tags

[ Voor 12% gewijzigd door crisp op 08-09-2006 23:06 ]

Intentionally left blank

vrijdag 8 september 2006 23:40

Acties:

f.heinen

Topicstarter

Ik met opzet niet het hele verhaal vertelt omdat niet aan mijn vraag iets toevoegd. Maar ja ik ben nog geen specialist en al helemaal geen (X)HTML/CSS guru. Echter is dit ook niet mijn code. En het is mij ook overduidelijk dat dit alles behalve nette HTML & CSS is. Wij maken dit met een team en ik wil dit betere HTML/CSS maken.

Ik ben me druk aan het verdiepen wat de ins en outs zijn van HTML afgezien van 'foutloze' HTML en goed werkende HTML.

Wat betreft de CSS2.1, je hebt natuurlijk helemaal gelijk. Ik weet ook niet hoe ik daar aan kom....

Wat betreft mijn probleem. Het is eigenlijk een kip ei verhaal. Wat ik uit je woorden begrijp kun je nooit CSS van een div aanpassen nadat deze aangemaakt is (zonder gebruik van JS).

Is het wat om !important in de CSS te gebruiken om zo de layout te forceren?

vrijdag 8 september 2006 23:54

Acties:

crisp

Devver

Pixelated

Style definieer je vantevoren zodat de renderengine dat tijdens het renderen al kan toepassen. Als je achteraf nog stylerules definieerd dan moet de renderengine dat met terugwerkende kracht nog gaan toepassen op al gerenderde content hetgeen sowieso een performance-penalty met zich meebrengt, maar nog belangrijker is dat dergelijke behavior (toch met terugwerkende kracht toepassen) niet gedefinieerd is en dus al helemaal niet wordt opgedrongen door specificaties. In principe mag een browser in standards-compliant rendering mode elementen buiten toegestaande context gewoon negeren.
De methode die je nu toepast werkt wel bij de gratie van browsers die toch losjes met de regels omgaan (de een wat meer als de ander), maar het blijft niet netjes.

!important gebruiken om een rule specifieker te maken is een moker gebruiken om een kleine spijker ergens in te slaan. Alleen in noodgevallen zou ik dat toepassen en verder gewoon beschikbaar houden voor bijvoorbeeld userstylesheets, in de meeste gevallen kan je een rule toch al eenvoudig specifieker maken door de toevoeging van een selector als de rule om een of andere reden niet later in de cascade kan worden gedefinieerd waar hij eerdere properties van rules met dezelfde specificity ook zal overschrijven.

In bijna alle gevallen van een systeem voor dynamische webpagina's heeft het voordelen om eerst de content te genereren en dat later pas te wrappen met een head-sectie e.d. Hoe doe je dat nu bijvoorbeeld met het <title>-element? en wat als je bijvoorbeeld support voor specifieke meta-elementen wilt toevoegen op basis van je content? Of je content helemaal niet wilt voorzien van html, head en body-tags omdat je het als response op een Ajax-call wilt terugsturen die het in een reeds bestaande pagina gaat mikken?

Intentionally left blank

zaterdag 9 september 2006 11:57

Acties:

Rowanov

Kop eens wat anders...

Je hebt het hier over een template systeem, welke naar ik verwacht door php wordt gevuld. Dan moet het ook mogelijk zijn om met een simpele if/else dan wel case/switch aan de hand van de pagina te bepalen welke stylesheet moet echo'en. Kijk anders eens hoe ze dit in bestaande systeem (bijv. Wordpress) oplossen.