Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: CSS dropdown menu ja IE ongelma

Sivun loppuun

Omasual [08.03.2009 09:29:40]

#

Sunnuntai-aamun pähkinä

Tämä menu toimii hienosti, on juuri sellainen kuin halusinkin, mutta IE:llä heittää aina alas tulevan hoverin pykälän oikealle. Neuvoja?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"
xml:lang="en">
<head>
<title>CSS-Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">

/* CSS-MENU */

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

.divlink a {
display: block;
width: 140px;
background: url(http://www.nordicbirdtours.com/images/9.gif) repeat;
}

.divlink a:hover {
background: url(http://www.nordicbirdtours.com/images/10.gif) repeat;
}

#nav, #nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav a {
	font-weight: bold;
	color: #336699;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #336699;
	/*padding: 0.2em 10px;*/
}

#nav li li a:hover {
	width: 140px;
        background: url(http://www.nordicbirdtours.com/images/10.gif)
	repeat;
}

#nav li {
	float: left;
	position: relative;
	width: 140px;
	text-align: center;
	cursor: default;
	background-color: white;
	border: 1px solid #336699;

}

#nav li#first {
	border-left-width: 1px;
}

#nav li#last {
	border-right-width: 1px;
}

#nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background-color: #fff;
	border-right: solid 1px #666666;
        border-left: solid 1px #666666;
        border-bottom: solid 1px #666666;
}

#nav li>ul {
	top: auto;
	left: auto;
}

#nav li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

#nav li:hover ul, #nav li.over ul {
	display: block;
	position: absolute;
}

</style>
</head>

<body>

<div id="menu">
<ul id="nav">

        <li id="first">

		<div class="divlink"><a
href="">Ylälinkki</a></div>

	</li>


	<li>
		<div class="divlink"><a
href="">Ylälinkki</a></div>

	</li>

<li style="width: 238px;">

		<div class="divlink" style="width: 238px;"><a
href="" style="width:
		238px;">Alalinkki</a></div>

		<ul>
			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
			238px;">Alalinkki</a></li>

			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
			238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>
			<li style="width: 238px;"><a
href="" style="width:
238px;">Alalinkki</a></li>

		</ul>
	</li>

<li>
		<div class="divlink"><a
href="">Ylälinkki</a></div>
		<ul>
			<li><a
href="">Alalinkki</a></li>
			<li><a
href="">Alalinkki</a></li>

		</ul>
	</li>

<li>
		<div class="divlink"><a
href="">Ylälinkki</a></div>
		<ul>
			<li><a
href="">Alalinkki</a></li>
		</ul>

	</li>

<li id="last">
		<div class="divlink"><a
href="">Ylälinkki</a></div>
		<ul>
			<li><a
href="">Alalinkki</a></li>
			<li><a
href="">Alalinkki</a></li>
			<li><a
href="">Alalinkki</a></li>

			<li><a
href="">Alalinkki</a></li>

		</ul>
	</li>

</ul>
</div>

</body>
</html>

kinnala [08.03.2009 15:25:35]

#

Mikä IE:n versio on kyseessä? Kutosella ei toimi ollenkaan koko menu.

Omasual [08.03.2009 15:31:16]

#

IE 7.

Huono juttu tuokin ettei toimi kutosella koko menu, pitänee tehdä joku php if siihen että näyttää sitten "normaalin".

Vinkkejä tuohon "siirtymään"?

Edit: Toimiiko tämä kutosella? http://www.monsanto.com/

kinnala [08.03.2009 15:38:27]

#

Juu, toimii.

Koetan juuri ladata IE7:ää. Useimmiten vika on paddingeissa ja margineissa, jotka IE (ainakin vanhat) ymmärtää väärin.

Edit:
Koska IE7:n asentaminen alle puolessa tunnissa osoittautui mahdottomaksi, jätän kokeilut kesken. Koeta vaikka kikkailla noitten margin- ja padding-asetusten kanssa tai vaihtoehtoisesti käytä jotain toista CSS menua, jossa on valmiiksi vaadittavat IE-hackit. (esim. http://www.alistapart.com/articles/hybrid/)

Hugo [09.03.2009 01:08:14]

#

Tässä fixi tuohon bugiin. Itse tykkään vääntää HTML:ää ja CSS:ää siten, että mitään turhaa ei ole seassa. Silloin myös toimivuus on parempi useammalla browserilla. Testasin toimivaksi IE8:lla, jolla tuo kertomasi bugi esiintyi myös ennen näitä fixejä. Osaat varmaan kaiken "turhan" (tähän bugiin nähden) sinne css:n sekaan lisäillä, minkä sieltä poistin.

HUOMAATHAN, että tein myös muutaman muutoksen HTML:ään.

En validoinut CSS:ää, enkä HTML:ää, joten siellä voi olla joitain virheitäkin, mutta toimii...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<title>CSS-Menu</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* CSS-MENU */

/* a pseudo's left untouched */
a {
    text-decoration: none;
}

a:link {
    color: #080;
}

a:visited {
    color: #790;
}

a:active {
    color: red;
}

a:hover {
    text-decoration: underline;
}

/* Removed everything unrelated (to this bug) here. Sorry if something important is missing, just fixed the bug. :)*/

#nav, #nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav a {
    font-weight: bold;
    color: #336699;
}

#nav a {
    text-decoration: none;
}

#nav li {
    float: left;
    min-width: 140px;
    text-align: center;
    cursor: default;
    background-color: white;
    border: 1px solid #336699;
}

#nav li#first {
    border-left-width: 1px;
}

#nav li#last {
    border-right-width: 1px;
}

#nav li ul {
    display: none;
    font-weight: normal;
    background-color: #fff;
}

#nav li ul li {
	float: none;
	margin: 0;
	padding: 0;
	border: none;
}

#nav li ul li a {
    font-weight: normal;
    color: #336699;
}

#nav li:hover ul {
    display: block;
}
</style>
</head>

<body>

<div id="menu">
<ul id="nav">
	<li id="first">
        <a href="">Ylälinkki</a>
    </li>

    <li>
        <a href="">Ylänkki</a>
    </li>

	<li style="width: 230px;">
		<a href="#">Alalinkki</a>
        <ul>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
        </ul>
    </li>

	<li>
		<a href="#">Ylänkki</a>
        <ul>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
        </ul>
    </li>

	<li>
		<a href="#">Ylänkki</a>
        <ul>
            <li><a href="#">Alalinkki</a></li>
        </ul>
    </li>

	<li id="last">
		<a href="#">Ylänkki</a>
		<ul>
			<li><a href="#">Alalinkki</a></li>
			<li><a href="#">Alalinkki</a></li>
			<li><a href="#">Alalinkki</a></li>
			<li><a href="#">Alalinkki</a></li>
		</ul>
	</li>

</ul>
</div>

</body>
</html>

Omasual [09.03.2009 22:02:29]

#

Kiitos avusta! Katselin jo toista menua tuolta yllä olevasta linkistä, mutta päädyin kuitenkin vielä tähän :)

Nyt vain on se ongelma, että tuo työntää alla olevaa matskua alaspäin. Kun laitan #nav li:hover ul -kohtaan position: absolute; niin sitten hajoaa taas toimivuus. Firefoxilla toimii mutta IE:llä tekee samantyyppistä heilumista.

Hugo [10.03.2009 00:09:19]

#

Aijaa, juu, eipäs tullut huomattua, kun ei mitään sisältöä ollut siinä alla. Noh, korjasin tuonkin ja koska tämän foorumin ilmeisesti hienoimpiin ominaisuuksiin kuuluu, ettei omia viestejä voi muokata jälkikäteen, spammataan fixi tähän uudestaan.

Eli siis position absoluten kanssa piti kikkailla ja noiden leveyksien ja a:n blocki näytön kanssa, jotta IE suostuu myös ymmärtämään, mitä haetaan. Tuossa jouduin omasta yksinkertaisuudesta ihan IE:n takia karsimaan sen, että tuon eri suuruisen listaitemin saisi ilman kahta erikois style-tagia, mutta pysynee suht yksinkertaisena silti. Esim. Chromessa toimi kyllä ilmankin sitä tuplamäärittelyä, kun se suostui ymmärtämään "min-width: inherit" ominaisuuden, mutta IE ei yllättäen sitä ymmärtänyt.

IE:lle kun yrittää puhua HTML:ää + CSS:ää olisi vähän kuin itse yrittäisin vääntää saksaa, mitä en ole sanaakaan opiskellut.

Se väli menun ja muun contentin välillä saattaa vaihdella eri selainten rendauksessa, mutta tuo kuitenkin nyt pääpiirteittäin toimii myös IE:ssä ilman mitään erillisiä IF IE -kikkailuja, mitkä aina vain tekevät päivittämisestä niin mukavaa. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" xml:encoding="UTF-8">
<head>
<title>CSS-Menu</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* CSS-MENU */

/* a pseudo's left untouched */
a {
    text-decoration: none;
}

a:link {
    color: #080;
}

a:visited {
    color: #790;
}

a:active {
    color: red;
}

a:hover {
    text-decoration: underline;
}

/* Removed everything unrelated (to this bug) here. Sorry if something important is missing, just fixed the bug. :) */
#menu {
	width: 100%;
	padding-bottom: 10px;
	display: block;
}

#nav, #nav ul {
	float: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav a {
    font-weight: bold;
    color: #336699;
}

#nav a {
    text-decoration: none;
}

#nav li {
    float: left;
    min-width: 140px;
    text-align: center;
    cursor: default;
    background-color: white;
    border: 1px solid #336699;
}

#nav li a {
	display: block;
}

#nav li#first {
    border-left-width: 1px;
}

#nav li#last {
    border-right-width: 1px;
}

#nav li ul {
	min-width: inherit;
    display: none;
	position: absolute;
    font-weight: normal;
    background-color: #fff;
	border: 1px solid;
}

#nav li ul li {
	float: none;
	margin: 0;
	padding: 0;
	border: none;
}

#nav li ul li a {
    font-weight: normal;
    color: #336699;
}

#nav li:hover ul {
    display: block;
}
</style>
</head>

<body>

<div id="menu">
<ul id="nav">
	<li id="first">
        <a href="">Ylälinkki</a>
    </li>

    <li>
        <a href="">Ylänkki</a>
    </li>

	<li style="min-width: 230px;">
		<a href="#">Alalinkki</a>
        <ul style="width: 230px;">
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
        </ul>
    </li>

	<li>
		<a href="#">Ylänkki</a>
        <ul>
            <li><a href="#">Alalinkki</a></li>
            <li><a href="#">Alalinkki</a></li>
        </ul>
    </li>

	<li>
		<a href="#">Ylänkki</a>
        <ul>
            <li><a href="#">Alalinkki</a></li>
        </ul>
    </li>

	<li id="last">
		<a href="#">Ylänkki</a>
		<ul>
			<li><a href="#">Alalinkki</a></li>
			<li><a href="#">Alalinkki</a></li>
			<li><a href="#">Alalinkki</a></li>
			<li><a href="#">Alalinkki</a></li>
		</ul>
	</li>

</ul>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu turpis nec massa porta elementum. Donec fringilla sagittis turpis. Mauris quis velit eget enim molestie dictum. Quisque magna est, semper ac, congue quis, pellentesque quis, tortor. Nullam iaculis. Nullam tortor. Donec fringilla vehicula metus. Aenean velit est, ultrices in, auctor nec, eleifend sed, libero. In a turpis at diam tempor euismod. Aliquam sit amet nulla. Integer quam mi, sollicitudin sit amet, convallis eget, facilisis ut, sapien.</p>
<p>Curabitur arcu augue, iaculis non, fringilla non, molestie vitae, nunc. In vel libero vitae sem congue pharetra. Pellentesque mollis justo vel dolor. Vestibulum sed diam. Suspendisse potenti. Etiam ultricies. Sed venenatis, nunc sit amet facilisis lacinia, mauris leo condimentum elit, eu pretium quam nulla vitae arcu. Donec nisi libero, pulvinar id, vehicula at, condimentum at, lectus. In tempus tempor magna. Integer augue tellus, aliquam vel, lacinia non, tempor ut, quam. Praesent sagittis, purus id lacinia mattis, augue sem suscipit diam, in hendrerit tellus turpis non urna. Etiam faucibus. Vestibulum commodo tempor quam. Sed posuere. Donec vulputate mauris id diam. Aenean semper blandit sapien.</p>
<p>Cras elit. Aliquam ut sapien eu diam imperdiet fringilla. Vivamus ut sem. Sed mauris arcu, bibendum at, commodo nec, sodales ac, dui. Suspendisse tincidunt erat vitae sem. Nullam odio tortor, rhoncus eu, commodo vel, blandit id, nibh. Sed fringilla sapien sit amet nulla. Nullam sem. Nullam sollicitudin ligula quis massa condimentum fermentum. Pellentesque ultrices urna ut magna. Morbi iaculis libero a lacus. Vivamus dui mi, lobortis et, feugiat in, ornare in, nulla. Pellentesque metus. Sed at magna.</p>
<p>Phasellus ac urna. In hac habitasse platea dictumst. Quisque in neque quis erat pretium commodo. Sed nisl. Sed lobortis. Vestibulum odio mi, sollicitudin a, mollis et, luctus non, magna. Suspendisse potenti. Mauris diam. Morbi euismod ante nec sapien. Sed rhoncus neque non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque commodo, augue ut scelerisque eleifend, diam leo pharetra quam, a venenatis sapien libero in mauris. Vivamus eu elit. Fusce egestas convallis odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin odio nunc, dictum sed, ullamcorper sed, molestie sit amet, erat. Fusce condimentum aliquet augue.</p>
<p>Maecenas tristique. Fusce fringilla, libero commodo tristique lacinia, tellus massa sagittis dolor, nec venenatis nisi tellus ut lorem. Quisque eleifend vehicula diam. Suspendisse pellentesque consectetur lorem. Etiam dui tellus, fermentum non, facilisis interdum, iaculis vitae, nulla. Fusce semper. Etiam orci elit, mollis eget, ullamcorper ut, bibendum a, metus. Integer consectetur pulvinar purus. In vitae elit. Suspendisse convallis volutpat magna. Morbi eu tellus tincidunt elit interdum auctor. Aliquam erat volutpat. Morbi suscipit leo quis elit. Nullam fermentum dictum mi.</p>

</body>
</html>

Merri [10.03.2009 00:44:38]

#

Korjataan tuo nyt kerralla kunnolla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="fi">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>CSS-Menu</title>
		<style type="text/css">/*<![CDATA[*/

a { text-decoration: none; }
a:link { color: #080; }
a:visited { color: #790; }
a:active { color: red; }
a:hover { text-decoration: underline; }

#menu { text-align: center; width: 100%; }
#menu:after,#nav:after { clear: both; content: ''; display: block; }

#nav,#nav li,#nav ul { list-style: none; padding: 0; margin: 0; }

#nav { float: left; position: relative; z-index: 1; }
#nav,#nav ul { background: #FFF; border: 1px solid #369; }

#nav li { display: inline; position: relative; }
#nav ul { margin-left: -1px; padding-left: 1px; min-width: 100%; }
#nav a { color: #369; display: block; padding: 3px 13px; }

#nav > li { float: left; }

#nav > li > a { border-left: 1px solid #369; font-weight: bold; }
#nav > li:first-child > a { border-left: 0; margin-left: 0; }

#nav > li > a + ul { border-top: 0; display: none; left: 0; position: absolute; top: 100%; }
#nav > li:hover > a + ul { display: block; }

#content { background: #000; color: #FFF; }

		/*]]>*/</style>
		<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->
	</head>
	<body>
		<div id="menu">
			<ul id="nav">
				<li>
					<a href="">Ylälinkki</a>
				</li>
				<li>
					<a href="">Ylälinkki</a>
				</li>
				<li>
					<a href="#">Alalinkki</a>
					<ul>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Ylälinkki</a>
					<ul>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Ylälinkki</a>
					<ul>
						<li><a href="#">Alalinkki</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Ylälinkki</a>
					<ul>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
						<li><a href="#">Alalinkki</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div id="content">
			<h1>Terve</h1>
			<p>En siirry.</p>
		</div>
	</body>
</html>

Linkki sivuun

Heitin vesilintua vanhalla CSS:llä ja siistin HTML:ää vielä lisää. Toiminee identtisesti kaikilla graafisilla selaimilla, jotka pystyt kaivamaan käsiisi viimeisen kolmen vuoden ajalta. IE6-toimivuustuki tuli IE7:n korjaamisen myötä, lisäsin vaan Dean Edwardsin IE7-skriptin, joka lisää mukaan tuen niille CSS-valitsimille, joita IE6 ei tue. Sen enempää tarvitse sille vaivaa nähdä, renderöinti saa bugittaa.

Tein joitakin valikolle ominaisia lisäyksiä, esim. z-indeksin muutoksen korkeammalle tasolle, jotta se on aina sisällön päällä. Sikäli jos se ei tiedossa ole, niin muu position-asetus kuin static nostaa elementin heti johonkin tasoon static-elementtien ylle.

Perusvinkki listavalikkojen tekoon IE:n tehokkaaseen taltuttamiseen: laita li-elementeille display: inline; ja jos tarpeellista, myös floatit. Toinen hyvä vinkki on relativen hyväksikäyttö.

Merri [10.03.2009 11:57:21]

#

Tässä vielä vähän päivitystä CSS:ään, muutin vähän yksinkertaisemmaksi temppuilut linkkien ympärillä olevien reunuksien kanssa:

a { text-decoration: none; }

a:link { color: #080; }

a:visited { color: #790; }

a:active { color: red; }

a:hover { text-decoration: underline; }



#menu { text-align: center; width: 100%; }

#menu:after,#nav:after { clear: both; content: ''; display: block; }



#nav,#nav li,#nav ul { list-style: none; padding: 0; margin: 0; }



#nav { float: left; position: relative; z-index: 1; }

#nav,#nav ul { background: #369; border: 1px solid #BCD; }



#nav li { display: inline; position: relative; }

#nav ul { min-width: 100%; }

#nav a { background: #FFF; color: #369; display: block; padding: 9px 19px; }



#nav > li { float: left; }



#nav > li > a { margin: 1px; font-weight: bold; }

#nav > li:hover > a { text-decoration: underline; }


#nav > li > a + ul { display: none; left: 0; margin-top: -1px; position: absolute; top: 100%; }

#nav > li:hover > a + ul { display: block; }



#content { background: #000; color: #FFF; }

ankzilla [10.03.2009 14:14:07]

#

Bravó!

Merri [10.03.2009 19:27:33]

#

Edellinen esimerkki

Kolmas esimerkki

Tässä viimeisessä olen lisännyt uuden toiminnon: vihjeen siitä, että alavalikon voi avata. Graafisesti selkeintä olisi toteuttaa vaikka jonkinlainen nuoli, mutta tein tuommoisen yksinkertaisen paksumman palkin ihan vain näyttääkseni, miten tempun voi tehdä ilman ylimääräisten classien yms. määrittelyä. Samalla tuli yksi ongelma korjattua: linkkeihin pääsee nyt käsiksi myös näppiksellä (mikä on hyvä juttu, jos sivuston sisältö voi kiinnostaa myös sokeita tai näkövammaisia).


Muoks!
Lisäsin CSS:ään kommentit, jotta hitaammat voivat pysyä paremmin kärryillä.

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta