Hulp met CSS a:hover ie/ff

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Patrick van Kampen

Patrick van Kampen

13/01/2008 16:17:00
Quote Anchor link
Ik wil een cell hover uitvoeren, ik gebruik gewoon een background image, maar het werkt niet zoals ik wil, vooral niet in firefox. Ik ben nog niet enorm bekend met CSS maar wil dit dus wel even uitvogelen!

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!
 
PHP hulp

PHP hulp

26/02/2024 13:05:06
 
Onbekend Onbekend

Onbekend Onbekend

13/01/2008 16:19:00
Quote Anchor link
Gebruik div's.
 
Patrick van Kampen

Patrick van Kampen

13/01/2008 16:49:00
 
J V

J V

13/01/2008 22:37:00
Quote Anchor link
Dat is fout. Heel fout. Je gebruikt geen divs, maar tabellen. Ga hier even zoeken naar een tutorial van Jan Koehoorn over html en css. Daar leer je wel een hoop van.
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!!!
 
Bart van der veen

bart van der veen

13/01/2008 23:21:00
Quote Anchor link
misschien kun je hier wat mee

http://bart.ugins.com/phphulp/
 
Jan Koehoorn

Jan Koehoorn

13/01/2008 23:23:00
 
Patrick van Kampen

Patrick van Kampen

15/01/2008 13:55:00
Quote Anchor link
Ik heb dit inderdaad hiervan afgeleid. en het werkt nu allemaal naar mijn zin. CSS is best wel nuttig daar ben ik nu wel achter gekomen. Geen elle lange code met nuteloze opmaak codes erin, ben nu mijn eigen CSS file aan het bouwen en het komt er allemaal steeds beter uit te zien :)

Bedankt voor jullie hulp!
 
Patrick van Kampen

Patrick van Kampen

16/01/2008 12:27:00
Quote Anchor link
Nog 1 ding, ik ben nu bezig met een vet hover script voor mijn portfolio. Hier was ik gister op mijn werk mee bezig ik dacht dit werkt super, kom ik thuis open ik het met firefox, en natuurlijk ziet het er volledig naar de klote uit.

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!
 
Winkie

winkie

16/01/2008 12:41:00
Quote Anchor link
<body bgcolor="#131514" topmargin="0" bottommargin="0" leftmargin="20" rightmargin="0">

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.
 
J V

J V

16/01/2008 12:46:00
Quote Anchor link
Ja stop werken met tabellen en doe het met divs ;). Zodra je je lay-out hebt in divs kunnen we je verder helpen. Plus dat je moet designen in Firefox en daarna pas moet kijken hoe het er in IE uitziet.

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.
 
Patrick van Kampen

Patrick van Kampen

16/01/2008 12:55:00
Quote Anchor link
Oké ik zal me dus wat meer in DIV's moeten verdiepen :D maar hoe kan ik met divs hetzelfde opbouwen als met een tabel? Je zit dan natuurlijk met allerlei verschillende div's naast elkaar / onder elkaar? Volgens mij heb ik wat op de site van Jan Koehoorn zien staan, ik ga daar eens even rondkijken
 
Patrick van Kampen

Patrick van Kampen

16/01/2008 17:19:00
Quote Anchor link
Ik heb mijn website nu dus totaal met DIV's opgemaakt dus als jullie me zouden willen helpen om mijn link volledig te krijgen in firefox, dan zou ik dit zeer op prijs stellen.

Het gaat dus om: http://perkele.nl/portfolio.htm

mijn CSS van de portfolio hover is:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 */
 
J V

J V

16/01/2008 18:34:00
Quote Anchor link
Je hebt op je spacer een mooi plaatje, met het witte links, waar je de tekst in wilt hebben en nog een stukje daarnaast met die tijger.
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.
 
Jurgen assaasas

Jurgen assaasas

16/01/2008 19:12:00
Quote Anchor link
Menu's doen we over het algemeen dus zo:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<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.
 
Wouter reyntjens

wouter reyntjens

16/01/2008 19:42:00
Quote Anchor link
Idd gebruik een list en geen tables of divs hiervoor
 
Patrick van Kampen

Patrick van Kampen

16/01/2008 23:36:00
Quote Anchor link
Die list moet ik inderdaad nog even aanpassen. maar dat wilde ik in een later stadium doen. Als ik deze week tijd heb zal ik even kijken hoever ik met jou tips kan komen jordy, als ik er niet uitkom dan kom ik er uiteraard op terug.
 
J V

J V

17/01/2008 00:29:00
 
Patrick van Kampen

Patrick van Kampen

18/01/2008 10:25:00
Quote Anchor link
Heb even snel iets gemaakt in mijn content van http://perkele.nl, zie source van de pagina voor de CSS. Heb de tut doorgenomen maar geen van de manieren daar helpt mij om de list horizontaal te krijgen.

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 ;).
 
J V

J V

18/01/2008 14:43:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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.
 
Patrick van Kampen

Patrick van Kampen

19/01/2008 12:50:00
Quote Anchor link
Jordy, ik heb het zo goed als aan de praat gekregen. Maar denk toch dat ik nog 1 klein helpend handje nodig heb voor mijn menu.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
/* <-------------------- 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 */


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
 
J V

J V

19/01/2008 13:43:00
Quote Anchor link
Ga altijd vanuit dat Firefox het goed doet en IE fout ;).
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.
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.