Hoi lady,
Heb het menu uit de tabellen gehaald, en de uitlijning op rechts. Maar volgens mij gaat het nog steeds alle kanten op.
Met wat ik op dit moment zie, springt een wissel tussen bv. de
portfolio-pagina en de de
profiel-pagina inderdaad nog wat heen en weer.
Maar het menu is nog niet helemaal uit de tabellen gehaald: het zit nog steeds in de "moedertabel" waar de hele pagina in zit.
=======
...al blijft het pittige kost.
Ja, als je een pagina mooi wilt inrichten zonder tabellen, met alleen een goede html-structuur en verder css voor de opmaak, dan komt er nogal veel op je af.
Maar met het samenvoegen van de cellen in de menu-kolom ben je op de goede weg! :thumb:
Van mij hoef je ook niet in één klap alle tabellen te vergeten.
(zou wel het mooiste zijn, daar niet van; zie bv. de "Total Tabel Make Over" in
dit topic).
We gaan een tabel / css - mix maken!
Met het geven van een ID aan een element kan je dat element later vastpakken om de styles ervan te bepalen; ID = IDentificatie.
We geven dus een ID aan de cel van de menu-kolom. En alle
<p> </p>'s voor het creëren van afstanden gooien we er uit, dat moet/kan ook met css.
Html met tabel
De html-code (in het code-venster van Dreamweaver) is nu bij jou:
HTML:
<body>
<table width="100%" border="0">
<tr>
<td width="360" height="882" align="right" valign="top" nowrap="nowrap"><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="portfolio.html"><img src="portfolio1.jpg" alt="portfolio" width="132" height="39" /></a></p>
<p><a href="profiel.html"><img src="profiel1.jpg" width="103" height="39" alt="profiel" /></a></p>
<p><a href="teksten.html"><img src="teksten1.jpg" width="103" height="42" alt="teksten" /></a></p>
<p><a href="boek.html"><img src="boek1.jpg" width="71" height="44" alt="boek" /></a></p>
<p><a href="contact.php"><img src="contact1.jpg" width="109" height="39" alt="contact" /></a></p>
<p> </p></td>
<td align="left" valign="top" ><!-- InstanceBeginEditable name="paginainhoud" -->
<table ... enz.
Dat gaat vereenvoudigd worden tot dit:
HTML:
<body>
<table width="100%" border="0">
<tr>
<td id="menu">
<p><a href="portfolio.html"><img src="portfolio1.jpg" alt="portfolio" width="132" height="39" /></a></p>
<p><a href="profiel.html"><img src="profiel1.jpg" width="103" height="39" alt="profiel" /></a></p>
<p><a href="teksten.html"><img src="teksten1.jpg" width="103" height="42" alt="teksten" /></a></p>
<p><a href="boek.html"><img src="boek1.jpg" width="71" height="44" alt="boek" /></a></p>
<p><a href="contact.php"><img src="contact1.jpg" width="109" height="39" alt="contact" /></a></p>
</td>
<td align="left" valign="top" ><!-- InstanceBeginEditable name="paginainhoud" -->
<table ... enz.
CSS: algemene maatregelen
Eerst zetten we bij de css in de <head> een paar algemene herstel-operaties. Voor Internet Explorer halen we de vette randen weg, die een afbeelding krijgt als die afbeelding in een link opgenomen is:
IE7: randen om img in een link
Verder hebben een heleboel geneste tabellen en tabel-cellen een opgegeven breedte. Dat zal er door Dreamweaver in gezet zijn, als je in de ontwerp-weergave aan het tekenen van de tabellen bent geweest. Maar dat kan wel de opmaak verstieren, en dat is niet de bedoeling.
Samen met het vermijden van een ongevraagde afbeeldingsrand in IE wordt het in de css:
Code:
table,
table td {
width: auto !important; /* voorrangsregel: sloopt alle opgegeven tabel- en cel-breedtes */
}
a img {
border: 0; /* images in een link krijgen ook in Internet Explorer dan geen vette blauwe rand */
}
CSS pakt de ID
Met een hekje voor de naam van een ID uit de html-code kan nu in de css bij alles de opmaak bepaald worden.
In principe volstaat hier:
Code:
#menu {
vertical-align: top; /* cel niet verticaal in het midden centreren */
width: 340px !important; /* muurvaste breedte */
padding-top: 310px; /* bovenruimte, ipv de riedel <p> </p> */
}
#menu p { /* styles voor alle <p>'s die in het menu zitten */
margin-bottom: 20px; /* afstand voordat de volgende regel begint */
text-align: right; /* alles rechts uitgelijnd */
}
Ook dit moet toegevoegd worden aan het stijl-blokje in de <head> van elke pagina.
Voor het mooi, en voor de bezoeker handig om te zien dat hij/zij op een link zit, kan voor de hovers over een menu-link een gekleurd randje toegevoegd worden. Dat gaat bv. als volgt:
Code:
#menu a { /* styles voor alle links die in het menu zitten */
width: 132px; /* breedte grootste img */
height: 44px; /* hoogte hoogste img */
display: inline-block; /* hele link-gebied aanklikbaar maken */
padding: 2px 4px 2px 0; /* wat opvulling om het img heen, voordat het hover-randje begint */
border: 1px solid #0D0D0D; /* = body-background: onzichtbaar randje voor de gewone link-toestand */
}
#menu a:hover,
#menu a:focus { /* styles voor een hover op een link die in het menu zit */
border: 1px solid yellow; /* randje wordt geel */
}
=======
In de praktijk
Pas je dit toe op de pagina's Portfolio en Profiel, dan krijg je:
Nu wordt er niet meer heen en weer gesprongen door 't menu.
Met vriendelijke groet,
CSShunter
_____________
PS: Door het herstelwerk staan nu de afbeeldingen op de Portfolio-pagina uit zichzelf opeens veel mooier geordend.
