Hoi Pamela,
Jazeker is daar een oplossing voor. :d
Dat is: driftig saneren, vereenvoudigen en aanvullen!
Saneren
- Er zijn in de loop van het knutselen gaandeweg steeds meer <div>'s en styles bijgekomen, vermoed ik, en die zijn niet in alle blokken op dezelfde manier toegepast. Daardoor is de pagina een beetje aan "divitis" gaan lijden: veel te veel div's die alles onoverzichtelijk maken.
- Zo zullen een aantal top-images met de titel niet in een blokje zelf terechtgekomen zijn, maar binnen een div van het voorafgaande blok. Dan is het onmogelijk om uniforme styles toe te passen!
- Internet Explorer 7 weet hier allemaal geen raad mee, die gaat verstoppertje spelen (zie screenshot).
- Waarschijnlijk vanuit het CMS-template zijn er allerlei images in gezet, die niet gebruikt worden. Weg ermee!
- Daarbij komen ook de <br>'s die her en der zijn toegevoegd om verticale afstanden te creëren. Zoals hierboven ook al speelde: die <br>'s zijn vaak bib<br>'s. Je ziet ze niet, en ze spoken vreemde dingen uit. En: <br>'s zijn er om in een tekst naar een nieuwe regel te gaan, en eigenlijk verboden voor opmaak-doeleinden; daarvoor is er css (dat is ook veel makkelijker in de hand te houden).
- Als alle blokken dezelfde structuur hebben, moeten ze ook wel hetzelfde doen!
- Dus eerst grote schoonmaak, en meteen alle html-code goed laten inspringen.
Vereenvoudigen
Eigenlijk is de structuur van elk blokje heel eenvoudig:
- Bovenop zit een titel-image: dat kan in een headertje-div in de html komen (als voorgrond-img).
- Dan komt de inhoud-div, die links, rechts en onderop het groene lijntje moet hebben. Daar zijn geen images voor nodig, dat kan gewoon met een border! Voor de achtergrondkleur van een blokje is ook geen image nodig: dat kan met de background-color eigenschap. De speling onderin kan met een padding-bottom geregeld worden. En de tussenruimte tussen twee blokken met een margin-bottom.
Dus in plaats van dit:
HTML:
<!-- search -->
<img src="images/top-zoeken.png" alt="Zoeken" width="234" height="47" />
<div class="top_box">
<div class="cont_box">
<div class="pad">
<form action="http://mydreamzzz.nl.webhosting26.transurl.nl/index.php" method="get">
... enz.
</form>
</div>
</div>
</div>
<div class="fot_box"><BR><img src="images/top-artikelen.png" alt="Artikelen" width="234" height="47" /></div>
<!-- end:search -->
<BR>
<BR>
<!-- product-->
<div class="top_box">
<div class="cont_box">
<div class="pad">
... enz.
... kan het simpel worden:
HTML:
<!-- search -->
<div class="zijblok_header"><img src="images/top-zoeken.png" alt="Zoeken" width="234" height="47" /></div>
<div class="zijblok_content" id="zoekvak">
<form action="http://mydreamzzz.nl.webhosting26.transurl.nl/index.php" method="get">
... enz.
</form>
</div>
<!-- end:search -->
<!-- product -->
<div class="zijblok_header"><img src="images/top-artikelen.png" alt="Artikelen" width="234" height="47" /></div>
<div class="zijblok_content">
<ul id="submenu">
... enz.
</ul>
</div>
<!-- end:product -->
Alle blokken krijgen zo hetzelfde uiterlijk. Er hoeft ook geen verschil gemaakt te worden voor de vormgeving van de blokken in de linker- en de rechter-sidebar: dat gaat in één moeite door met dezelfde class.
Wat er binnen de blokken aan verschillende opmaak-specialiteiten moet gebeuren, kan bediend worden door aan zo'n div behalve de
class="zijblok_content" ook een eigen ID vast te knopen.
Alleen het laatste blok linksonder is anders dan alle andere: dat is alleen een afbeelding; deze kan via een
class="pad_bottom20px" wat ruimte krijgen om los van de footer-balk te komen.
Aanvullen
Nu de html-structuur krakiehelder is geworden, kunnen de styles er makkelijk bij gemaakt worden, bv.:
Code:
.zijblok_content {
width: 223px;
margin-left: 0; /* ongedaan maken v/d algemene margin-reset * {margin: 0 auto} ! */
margin-bottom: 10px; /* regelbare ruimte tussen de blokken in de sidebars */
padding-bottom: 15px; /* wat ruimte onderin elk blok */
background: #E6FFD5; /* oude kleur van het background-image dat niet meer nodig is */
border: solid #3E9000; /* randkleur dezelfde als de top-images = naadlos aan elkaar */
border-width: 0 1px 1px 1px; /* bovenaan geen randje */
}
.zijblok_header img {
vertical-align: top; /* nodig tegen spleetje bij IE7 */
}
.pad_bottom20px {
padding-bottom: 20px; /* regelbare ruimte tussen onderste blok en footer in de sidebar1 */
}
enz.
=======
Op deze manier is gemaakt:
- Test: drmzzz-nw.htm
Getest in Firefox, Chrome, Opera, Safari en Internet Explorer 7.
Volgens Netrenderer.com gaat het ook goed in IE8 en IE9.
De css die daar in de <head> is opgenomen, kan onderaan in het stylesheet
cataloge.css toegevoegd worden.
Dan worden een paar eerder in dat bestand opgenomen styles overruled, en heb je er geen omkijken meer naar.
Facultatief: ook een paar algemene style-suggesties zijn opgenomen (o.a. breedte pagina in orde maken voor schermen van 1024*768px).
ToDo!
Er moeten nog wel iets gebeuren:
In het origineel zaten zo'n
75 Errors, 80 Warnings, zegt de html-validator.
In de testpagina zijn alvast de meeste weggewerkt: nog
10 Errors over, geen Warnings meer.
- O.a.: van de id="submenu" staan er 2 stuks op de pagina; maar een ID is een unieke IDentificatie van één bepaald element, en daar mag er dus maar 1 van op een pagina staan.
- Te verhelpen door er een class="submenu" van te maken, en dat ook in de css aan te passen.
- De verdere fouten zitten in de middenkolom met de inhoud van de pagina.
Succes!
Met vriendelijke groet,
CSShunter
___________
Nog wat leesvoer:
dit topic over "deprecated" (achterhaalde) code, die beter anders kan.
) voor elkaar om de bovenste twee kopjes "zoeken" en "winkelwagen" gelijk te krijgen net zoals bij de "artikelen" "login" "informatie" en "nieuwsbrief".
