Tässä on taulukkoni, kuinka saan kehyksiksi vaikka: inset tai dashed? Kuinka juttu sijoitetaan css osioon?
Työpaikkoja
Tv ohjelmat1
Tv ohjelmat2
Html opas1
Html opas2
Dvd
Sähköposti
Kännyt
Kännyt2
Kiitän.....
Työpaikkoja
Tv ohjelmat1
Tv ohjelmat2
Html opas1
Html opas2
Dvd
Sähköposti
Kännyt
Kännyt2
Kiitän.....
Vastaukset 3
Vanhimmat
Ensin ihan suorat törkeät virheet koodissa:
Taulukoissa ei voi saa olla sisältöä muualla kuin soluissa, joten nuo br-tagit ovat kyllä aivan väärässä paikassa.
Elementit voivat olla sisäkkäin mutta eivät ristissä ei siis saa tehdä näin:
Työpaikkoja
vaan näin:
Työpaikkoja
tai näin:
Työpaikkoja
Ja oikeastaan tuo small kannattaa tehdä css:llä (tietenkin).
Sitten muuta.
Kun käytät css:ää niin ei kannata käyttää samalla vanhentuneita html-attribuutteja. bgcolor ja border ovat sellaisia ja ne kannattaa korvata css:llä
Kun käytät css:ää niin css-määritteet kannattaa kerätä kaikki yhteen paikkaan eikä käyttää elementeissä.
pois siis kaikki turha.
Katos kun tulikin paljon siistimpi html -osuus:
Työpaikkoja
Tv ohjelmat1
Tv ohjelmat2
Html opas1
Html opas2
Dvd
Sähköposti
Kännyt
Kännyt2
Eikä css:kään ole paha:
#linkit3 {
border: 1px dashed Fuchsia;
background-color: White;
position: absolute;
top: 50px;
left: 20px;
}
#linkit3 td {
border: 3px inset Red;
height: 35px;
width: 130px;
background: url(right.gif) no-repeat 1px center;
}
#linkit3 td a:link {
padding-left: 15px;
font-size: smaller;
}
..kehyksistä puhuminen on hieman harhaanjohtavaa sillä kehyksillä tarkoitetaan frameja ja nythän oli kyse reunuksista (bordereista).
Mitä jos haluatkin muuttaa sivujesi ulkoasua ja päätät laittaa tuon linkkilistan vaakasuuntaan?
Saat muuttaa koko taulukon.
Jospa et määräisikään html:llä miten ne linkit tulevat, vaan jättäisit tuon kokonaan css:n hoidettavaksi:
Työpaikkoja
Tv ohjelmat1
Tv ohjelmat2
Html opas1
Html opas2
Dvd
Sähköposti
Kännyt
Kännyt2
Sitten vaan haluttu tyyli, esim:
#linkit3 {
border: 1px dashed Fuchsia;
background-color: White;
position: absolute;
top: 50px;
left: 20px;
}
#linkit3 a {
border: 3px inset Red;
width: 130px;
height: 25px;
background: url(right.gif) no-repeat 5px center;
display: block;
margin: 2px;
vertical-align: auto;
font-size: smaller;
padding-top: 6px;
padding-left: 20px;
}
tai sitten vaikka näin:
#linkit3 {
border: 1px dashed Fuchsia;
background-color: White;
position: absolute;
top: 50px;
left: 20px;
padding: 6px;
padding-top: 10px;
padding-bottom: 12px;
}
#linkit3 a {
border: 3px inset Red;
width: 100px;
height: 25px;
background: url(right.gif) no-repeat 5px center;
display: table-header-group;
vertical-align: auto;
font-size: smaller;
padding: 6px;
padding-left: 20px;
}
tai sitten ihan jotain muuta..