[xhtml/css] table gebaseerde navigatie dmv. CSS

[Verwijderd]

Hoi peoplez,

Ik ben helemaal verliefd op css sinds ik er over ben gaan lezen.

Voor een studie-project moeten we een site bouwen die gebruik maakt van frames en tables voor opmaak, dont' even ask me why !! Nu wil ik een navigatie maken waarbij de background-color veranderd bij a:hover. Ik heb op diverse sites informatie gevonden hoe dit met behulp van unordered lists kan worden gerealiseerd, mag dus niet

Ik heb het volgende code getokkeld, werkt van geen centimeter. Hoe kan ik toch met CSS in xhtml1.0 Frameset -DTD dit bouwen met tables?

html;

<table id="nav">
<tr>
<td><a href="#">home</a></td>
</tr>
<tr>
<td><a href="#">webwinkel</a></td>
</tr>
<tr>
<td><a href="#">contact</a></td>
</tr>
<tr>
<td><strong>designed by</strong></td>
</tr>
</table>

css;

body, td {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #E9991F;}

#nav {} /* Heb hier niets gedefinieerd!!!!!! */

#nav tr {
display: block;}

#nav tr td {
float: left;
display: block;
margin: 0px;
text-align: left;}

#nav tr td a {
color: #FFFFFF;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;}

#nav tr td a:active{
color: #FFFFFF;
list-style: none;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
backround-color: #754D10;}

#nav tr td a:hover{
color: #FFFFFF;
list-style: none;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
backround-color: #754D10;}

[ Voor 33% gewijzigd door Verwijderd op 27-11-2004 20:05 . Reden: foutje ]

[Rowanov]

In welke browser werkt het niet? IE doet niet aan hover....

[cutter]

Wat hebben framesets en css en tables im gotteswillen met elkaar te maken?? Ik zie ook helemaal geen unordered list.

[CrashOne]

Rowanov schreef op zaterdag 27 november 2004 @ 20:07:
In welke browser werkt het niet? IE doet niet aan hover....

Sinds wanneer?

IE kan perfect omgaan met hovers op een a element.

[Verwijderd]

cutter schreef op zaterdag 27 november 2004 @ 20:09:
Wat hebben framesets en css en tables im gotteswillen met elkaar te maken?? Ik zie ook helemaal geen unordered list.

Alles!!! Ik geef puur aan wat ik gebruik!
<bijdehand>Wat het godsnaam met elkaar te maken heeft? Je kan hier een webpaina mee opmaken </bijdehand> frameset-DTD kan niet met alle elementen omgaan en kan ook andere default values aan properties bij selectors toekennen/ andere values aan attributen bij elementen.

[ Voor 19% gewijzigd door Verwijderd op 27-11-2004 20:26 ]

[Genoil]

dus als ik het goed begrijp ben je een tabel die je verplicht moet gebruiken aan het slopen met CSS in een document met een frameset DTD?

een frameset dtd hoef je alleen te gebruiken in het document waar de <frameset> in staat. en zeg maar tegen degene die je verteld heeft dat je tabellen moet gebruiken dat tabellen zijn voor tabulaire data . je css kan trouwens ook veel korter en list-style is geen property van <td>

[Rowanov]

CrashOne schreef op zaterdag 27 november 2004 @ 20:13:

Sinds wanneer?

IE kan perfect omgaan met hovers op een a element.

Alcohol maakt meer kapot dan je lief is

[Verwijderd]

OK, ik zal war duidelijker zijn ik gebruik een frameset. Ik wil dmv. een tabel een navigatie maken met hyperlinks. Dmv. veranderen van background-color bij a:hover en evt. a:visited, wil ik een leuke navigatie maken. einde verhaal.

[Rowanov]

Als voorbeeld kan je de navigatie van dit artikel denk ik wel gebruiken:
www.alistapart.com/articles/eatcake

[ Voor 7% gewijzigd door Rowanov op 28-11-2004 13:10 ]

[Johnny]

Mijn ervaring is dat wanneer je een opdracht voor school op een alternatieve manier uitvoert, omdat bijvoorbeeld de voorgeschreven techniek achterhaald is (tabellen en frames), en dat ook goed beargumenteerd je een hogere waardering krijgt...

[Verwijderd]

Ik wil dmv. een tabel een navigatie maken met hyperlinks. Dmv. veranderen van background-color bij a:hover en evt. a:visited, wil ik een leuke navigatie maken. einde verhaal.

a {color: #FFFFFF;}
a:hover {color: #EFEFEF;background-color: #754D10;}
a:visited {color: #333333;background-color: #754D10;}


????

[Verwijderd]

Verwijderd schreef op zondag 28 november 2004 @ 14:13:
[...]


a {color: #FFFFFF;}
a:hover {color: #EFEFEF;background-color: #754D10;}
a:visited {color: #333333;background-color: #754D10;}


????

Nu wil ik dat de hele tabelcel-achtergrond van kleur veranderd. Wat ik over unordered-lists navigatie heb gelezen, moet je van de td een block-element maken, of is het nu de anchor??!!!!
hoe vertaalt dit zich terug in mijn css?

Johnny schreef op zondag 28 november 2004 @ 13:25:
Mijn ervaring is dat wanneer je een opdracht voor school op een alternatieve manier uitvoert, omdat bijvoorbeeld de voorgeschreven techniek achterhaald is (tabellen en frames), en dat ook goed beargumenteerd je een hogere waardering krijgt...

Ik heb het voorgelegd, maar het mag gewoonweg niet

Oh ja, er mag geen dhtml gebruikt worden, moet dus statisch zijn

[ Voor 39% gewijzigd door Verwijderd op 28-11-2004 14:43 ]

[Genoil]

Verwijderd schreef op zondag 28 november 2004 @ 14:28:
[...]


Nu wil ik dat de hele tabelcel-achtergrond van kleur veranderd. Wat ik over unordered-lists navigatie heb gelezen, moet je van de td een block-element maken, of is het nu de anchor??!!!!
hoe vertaalt dit zich terug in mijn css?


[...]


Ik heb het voorgelegd, maar het mag gewoonweg niet

Oh ja, er mag geen dhtml gebruikt worden, moet dus statisch zijn

code:

#nav a {
   display:block;
    width:100%;
    height:100%;
}

moet je wel je td een breedte en hoogte geven

[Verwijderd]

Ik heb nu er nu het volgende van gemaakt;


#nav tr td {
margin: 0px;
text-align: left;
color: #FFFFFF;}

#nav tr td a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
color: #FFFFFF;
/* padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px; */}

#nav tr td a:active{
text-decoration: none;
display: block;
width: 100%;
height: 100%;
color: #FF6600;
/* padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px; */
backround-color: #754D10;}

#nav tr td a:hover{
text-decoration: none;
display: block;
width: 100%;
height: 100%;
color: #666666;
/* padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px; */
backround-color: #754D10;}

Echter a:active werkt niet bij Firefox , IE6 kan er wel mee overweg.
background-color wordt als een foute property gezien EN height en width zijn volgens property inspector van Top Style niet OK, ik ben wel al een eind verder

Hoe nu verder voor background-color?

[Thijsmans]

Als je echt een stap terug in de tijd wilt doen doe je het met mouseovers

HTML:

<table>
    <tr>
        <td onmouseover="this.bgcolor='#ff0000'" onmouseout="this.bgcolor='#ffffff'">
            spef
        </td>
     </tr>
</table>

Overigens is background-color een perfect geldige property

/edit: hmmz, voorbeeld werkt niet Ik doe het dan ook al tijden niet meer op deze manier...

---

edit2:

Dit werkt prima bij mij, lijkt me dat het ook in FF werkt. Zo even testen, ook nog testen met xhtml-doctype...

code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
table#nav td a {
    display         :   block;
    width           :   100%;
    padding         :   5px;
    background-color:   #E9991F;
    font-family     :   verdana;
    color           :   white;
}

table#nav td a:hover{
    background-color:   #754D10;
    color           :   #666666;
}

table#nav td a:active{
    background-color:   #FF6600;
    color           :   #FF6600;
}
</style>
</head>

<body>
    <table id="nav" cellspacing="0" cellpadding="0">
        <tr>
            <td><a href="#">home</a>
            </td>
        </tr>
        <tr>
            <td><a href="#">webwinkel</a>
            </td>
        </tr>
        <tr>
            <td><a href="#">contact</a>
            </td>
        </tr>
        <tr>
            <td><strong>designed by</strong>
            </td>
        </tr>
    </table>
    
</body>
</html>

[hredit3 (sught )
Werkt met doctype html4.01 in IE en FF, werkt ook met xhtml-frameset doctype in IE en FF

[ Voor 130% gewijzigd door Thijsmans op 28-11-2004 18:00 ]

[Verwijderd]

Prammenhanger schreef op zondag 28 november 2004 @ 17:48:
Als je echt een stap terug in de tijd wilt doen doe je het met mouseovers

HTML:

<table>
    <tr>
        <td onmouseover="this.bgcolor='#ff0000'" onmouseout="this.bgcolor='#ffffff'">spef</td>
     </tr>
</table>

Overigens is background-color een perfect geldige property

/edit: hmmz, voorbeeld werkt niet Ik doe het dan ook al tijden niet meer op deze manier...

Mag geen javascript gebruiken. Volgens Top Style is background-color geen goede property bij <a> ook al heb deze als display: block aangegeven, zie css hierboven.

[Johnny]

Wat voor studie is dat dan wel niet? Je moet een website maken maar mag geen normale technieken gebruiken

[Verwijderd]

Johnny schreef op zondag 28 november 2004 @ 18:26:
Wat voor studie is dat dan wel niet? Je moet een website maken maar mag geen normale technieken gebruiken

Ik weet het!!! Ik ben begonnen aan een deeltijd studie op Hogeschool Arhem & Nijmegen. Volgens mij is dit puur omdat de leraar het anders niet meer begrijpt. Er worden voorbeelden gebrukt die Julius Caesar al antiek vond

Ps. Prammenhanger, lijkt erop dat je gelijk hebt. Moet nu ff checken wat er fout zit in mijn code.

[ Voor 11% gewijzigd door Verwijderd op 28-11-2004 19:23 ]