[css/html] divjes met verkeerde hoogte - Softwareontwikkeling

dinsdag 11 maart 2003 14:43

Acties:

Verwijderd

Topicstarter

ik gebruik voor een menu divjes die een lijn boven en onder het menu item geven. in css heb ik hiervoor een class 'kader' gemaakt waarin ik de hoogte bepaal.

nou geeft hij in IE niet de in css opgegeven hoogte aan de divjes, hij lijkt de hoogte af te stemmen op een onderliggende tr. wanneer nou ik binnen die divjes nog een leeg divje zet, dan krijg ik wel de goede hoogte

code:

.kader {
    position: absolute;
    left: 0px;
    width: 984px;
    height: 20px;
    visibility: hidden;
    border-style: solid;
    border-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: #ffffff;
}

dit werkt niet:

code:

1	<div id='kader1' class='kader' style='top: 84px;'></div>

en dit werkt wel:

code:

1	<div id='kader1' class='kader' style='top: 84px;'><div></div></div>

iemand een idee?

[ Voor 10% gewijzigd door Verwijderd op 11-03-2003 14:44 ]

dinsdag 11 maart 2003 15:46

Acties:

Bosmonster

*zucht*

zet wat in de div.. lege divjes vind IE niet zo fijn

dinsdag 11 maart 2003 16:09

Acties:

Verwijderd

Topicstarter

code:

1	<div id='kader1' class='kader' style='top: 85px;'><span style='font-size: 1px;'> </span></div>

werkt inderdaad (alleen nbsp niet, je moet ook font-size aanpassen). ik vind het er alleen wat onhandiger uitzien dan <div></div>, wat ook werkt.

wat zou je hier nou in zetten als je streng in de leer bent?

dinsdag 11 maart 2003 16:31

Acties:

Bosmonster

*zucht*

Als ik je code los probeer trouwens werkt het prima

Gewoon 20 px hoogte, zelfs zonder inhoud in de div. (IE6)

dinsdag 11 maart 2003 17:03

Acties:

Verwijderd

Topicstarter

hmmm.... ik heb het geheel nu zover mogelijk gestript en het werkt bij mij nog steeds niet
voor de liefhebber de code (linkje bovenin maakt een van de divjes zichtbaar):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>titel</TITLE>
<script>

    var currentMenu = '';//krijgt id van actieve menu
    timerVerbergKader = setTimeout('',0);

    function getHandle (id) {
        //geeft handle naar object bij diverse DOM's
        if (document.getElementById) {
            //w3c DOM
            return (document.getElementById(kaderNaam));
        } else if (document.all) {
            //ie DOM
            return (document.all[kaderNaam]);
        }
    }

    function toonKader (nr) {
        clearTimeout (timerVerbergKader);
        verbergAlleKaders();
        kaderNaam = "kader"+nr;
        ditKader = getHandle(kaderNaam);
        ditKader.style.visibility='visible';
    }

    function verbergKader (nr) {
        if (currentMenu != nr) {
            kaderNaam = "kader"+nr;
            ditKader = getHandle(kaderNaam);
            ditKader.style.visibility='hidden';
        }
    }

    function verbergAlleKaders () {
        i=1;
        while (document.getElementById(i)) {
            verbergKader (i);
            i++;
        }
    }
    function setVerbergTimer () {
        timerVerbergKader = setTimeout('verbergAlleKaders()',500);
    }

</script>

<style>
.kader {
    position: absolute;
    left: 0px;
    width: 984px;
    height: 10px;
    visibility: hidden;
    border-style: solid;
    border-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: #cccccc;
}
</style>

</HEAD>

<BODY marginheight='0px' marginwidth='0px'>


<a href='#' onClick='toonKader(5)';>klik</a>

<!-- divjes voor kaders om menu-items -->
<div id='kader1' class='kader' style='top: 85px;'><span style='font-size: 1px;'></span></div>
<div id='kader2' class='kader' style='top: 104px;'></div>
<div id='kader3' class='kader' style='top: 123px;'></div>
<div id='kader4' class='kader' style='top: 142px;'></div>
<div id='kader5' class='kader' style='top: 161px;'></div>
<div id='kader6' class='kader' style='top: 180px;'></div>
<!-- einde divjes voor kaders om menu-items -->

</BODY>
</HTML>

dinsdag 11 maart 2003 17:27

Acties:

T. van Beek

flickritus

Je zou anders ook in elke div een punt ( . ) neer kunnen zetten.
Deze punt geef je dan de kleur van de achtergrond van het DIVje en voila, weg puntje

Het is geen supermooie oplossing, maar werkt wel

[ Voor 68% gewijzigd door T. van Beek op 11-03-2003 17:28 ]

http://flickr.com/photos/itommy/

woensdag 12 maart 2003 10:00

Acties:

Verwijderd

Topicstarter

er zit een foto achter het divje

dus ik denk dat ik het toch maar bij <div></div> houd