Hulp met CSS a:hover ie/ff
website:
http://perkele.nl/phphulp/hover/test.htm
In internet explorer doet de roll-over het wel maar bij de rollover veranderd de tekst van plek. En als je de rollover in firefox doet verander alleen de achtergrond waar de tekst staat, de rest van de cel blijft gewoon leeg.
Als je me kunt helpen graag, check de broncode voor de CSS, ik hoop dat er mensen zijn die me tips kunnen geven en me kunnen helpen de CSS op orde te krijgen.
Als laatste zou het helemaal fantastisch zijn als je zodra je in de cell komt op de link kunt drukken, zodat je dus niet persee op de tekst hoeft te klikken.
Alvast bedankt voor jullie hulp!
Zoek op google eens op horizontaal menu css, dan zie je hoe je een menu kunt maken met rollovers bestaande uit div's en css. Verder gebruik je voor je tekstjes een lijst. Dat zie je wel als je op google zoekt.
Maar gebruik dus geen tabellen!!!
Bedankt voor jullie hulp!
Check: http://perkele.nl/portfolio.htm met firefox / ie en zie het verschil
Enig idee of het in Firefox mogelijk is zo een soort van grote href te maken? zonder dat hij er verminkt uitziet ? :)
Let me know!
Dit soort dingen moet je ook in je CSS gooien.
En maak de pagina nog eens, maar dan met div's. Dan moet het lukken.
Klik hier als je je site in divjes hebt en je je hele div als link wilt hebben
Voor tabellen heb ik niets gezocht maar voor een div is er dus een oplossing.
Het gaat dus om: http://perkele.nl/portfolio.htm
mijn CSS van de portfolio hover is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* <-------------------- START PORTFOLIO CSS --------------------> */
.hover{
font: 11px Calibri;
overflow: hidden;
}
.hover a{
color: #000000;
text-decoration: none;
text-shadow: 1px;
width: 404;
height: 204;
padding: 5;
}
.hover a:hover,
.hover a:active{
overflow: hidden;
background: url(../images/enlarge.gif)
}
/* END PORTFOLIO CSS */
.hover{
font: 11px Calibri;
overflow: hidden;
}
.hover a{
color: #000000;
text-decoration: none;
text-shadow: 1px;
width: 404;
height: 204;
padding: 5;
}
.hover a:hover,
.hover a:active{
overflow: hidden;
background: url(../images/enlarge.gif)
}
/* END PORTFOLIO CSS */
Maak een div in je spaver die exact de groote heeft van je witte vlak.
Die divs met de class hover, zorg ervoor dat die een float: left hebben.
Dan kunnen we alles al een stuk beter zien. Kijk daarna nog even naar de link die ik hierboven ergens heb gegeven om een hele div klikbaar te maken.
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
vervolgens kun je deze zo stylen als je wil met CSS.
Als je vragen hebt hoor ik het vanzelf wel ;).
Ideeën?
Jordy schreef op 17.01.2008 00:29:
Hier een linkje voor het maken van een horizontaal menu dmv een lijst.
Als je vragen hebt hoor ik het vanzelf wel ;).
Als je vragen hebt hoor ik het vanzelf wel ;).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<title>horizontaal menu - Jordy Vleugel</title>
<style type="text/css">
#menu
{
/* de marges zetten we op nul */
margin: 0;
padding: 0;
}
#menu li
{
/* type van de style zetten we op 'none' */
list-style-type: none;
/* Naar links laten floaten */
float: left;
/* breedte en hoogte opgeven */
width: 100px;
height: 30px;
/* marges instellen */
margin: 2px;
padding: 0;
/* en eventueel een randje */
border: 1px dashed blue;
}
#menu li a
{
/* van de links een block-element maken voor het :hover effect */
display: block;
/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */
width: 100%;
height: 100%;
/* een uiteraard een leuk achtergrondkleurtje */
background-color: lightyellow;
}
#menu li a:hover
{
/* kleur voor het :hover effect */
background-color: lightblue;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
</ul>
</body>
</html>
<head>
<title>horizontaal menu - Jordy Vleugel</title>
<style type="text/css">
#menu
{
/* de marges zetten we op nul */
margin: 0;
padding: 0;
}
#menu li
{
/* type van de style zetten we op 'none' */
list-style-type: none;
/* Naar links laten floaten */
float: left;
/* breedte en hoogte opgeven */
width: 100px;
height: 30px;
/* marges instellen */
margin: 2px;
padding: 0;
/* en eventueel een randje */
border: 1px dashed blue;
}
#menu li a
{
/* van de links een block-element maken voor het :hover effect */
display: block;
/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */
width: 100%;
height: 100%;
/* een uiteraard een leuk achtergrondkleurtje */
background-color: lightyellow;
}
#menu li a:hover
{
/* kleur voor het :hover effect */
background-color: lightblue;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
</ul>
</body>
</html>
Firebug werkte niet zoals ik wilde hier, dus aanpassen etc ging niet. Probeer het eens met deze code.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* <-------------------- START NAVIGATION CSS --------------------> */
.nav {
/* de marges zetten we op nul */
margin: 0;
}
.nav li {
/* type van de style zetten we op 'none' */
list-style-type: none;
/* Naar links laten floaten */
float: right;
/* breedte en hoogte opgeven */
width: 100px;
height: 30px;
}
.nav strong {
font: bold 12px Calibri;
color: #FFFFFF;
background: url(../images/button.gif) left top repeat-x;
}
.nav li a {
/* Standaard font aan de list toewijzen */
font: bold 12px Calibri;
/* font color toewijzen */
color: white;
/* Text in het midden van de cel centreren */
text-align: center;
/* Text underlinement weghalen d.m.v. text-decoration */
text-decoration: none;
/* van de links een block-element maken voor het :hover effect */
display: block;
/* Padding op 8px zetten zodat de tekst in het midden komt (verticaal gezien) */
padding: 8px;
/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */
width: 100%;
height: 100%;
}
.nav li a:hover {
/* achtergrond toewijzen aan hover */
background: url(../images/button.gif) left top repeat-x;
}
/* END NAVIGATION CSS */
.nav {
/* de marges zetten we op nul */
margin: 0;
}
.nav li {
/* type van de style zetten we op 'none' */
list-style-type: none;
/* Naar links laten floaten */
float: right;
/* breedte en hoogte opgeven */
width: 100px;
height: 30px;
}
.nav strong {
font: bold 12px Calibri;
color: #FFFFFF;
background: url(../images/button.gif) left top repeat-x;
}
.nav li a {
/* Standaard font aan de list toewijzen */
font: bold 12px Calibri;
/* font color toewijzen */
color: white;
/* Text in het midden van de cel centreren */
text-align: center;
/* Text underlinement weghalen d.m.v. text-decoration */
text-decoration: none;
/* van de links een block-element maken voor het :hover effect */
display: block;
/* Padding op 8px zetten zodat de tekst in het midden komt (verticaal gezien) */
padding: 8px;
/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */
width: 100%;
height: 100%;
}
.nav li a:hover {
/* achtergrond toewijzen aan hover */
background: url(../images/button.gif) left top repeat-x;
}
/* END NAVIGATION CSS */
Het werkt in principe goed, maar zodra ik de padding 8px aan het :a element toevoeg dan rekken mijn divs van me menu weer uit in firefox, terwijl dit naar mijn idee niet zou kunnen?
In internet explorer werkt de padding netjes naar binnen toe maar in firefox werkt de padding naar buiten ..., ik gebruik de padding om mijn tekst verticaal in het midden uit te lijnen.
een idee? www.perkele.nl
Gewijzigd op 01/01/1970 01:00:00 door Patrick van Kampen
Maar wat gebeurd er als je alleen een padding-top: 8px meegeeft, ipv padding: 8px;
Want die padding van nu geld voor alle kanten, dus boven, links, rechts en onder. Padding-top alleen voor de bovenkant.
Hoe kom je eigenlijk aan die 8px? Want hij is totaal 30px hoog, maar zitten ze dan verticaal gecentreerd als je een padding van 8px meegeeft? (ik denk dat die 8px maar een gokje is of niet?)
Wat je nog meer kunt proberen is: vertical-align: middle;
Of je moet met je line-heigt gaan spelen.
Ik zie verschillende oplossingen voor verticaal centreren, maar die gelden voor in divs.
Als ik iets vind wat ook in lijsten werkt, meld ik dat weer hier. (probeer zelf wel even met die padding, vertical-align en line-height. Je weet maar nooit.