Gokväll!
Jag håller på med att implementera en CSS-meny (http://www.tanfa.co.uk/css/examples/menu/hs7.asp) på min sida och har kommit en bra bit på väg nu. Dock har jag stött på några problem eller bieffekter som jag vill kalla det.
På sidan jag angav ovan med ett exempel på hur menyn ser ut i dagsläget, kan man se en CONTENT-div ligga uppe i den blå himlen med texten TEST i, vilket är helt fel placering för den. Content-diven utgör den vita stora delen mellan footern och headern. När jag lagt till menyn uppstår detta synnerligen konstiga problem att content-diven flyttas upp i headern.
Så här ser CSS-koden ut:
#menu {
width: 100%;
/*background: #eee;*/
background: transparent;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*background-color: #FF0000;*/
/*width: 12em;*/
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #FF0000;
text-transform: uppercase;
width: auto;
}
#menu a {
color: #FF0000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative; width: 100%;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Så här ser php/html-koden ut:
<?php
include('/sökväg/inc/header.php');
if funktion<=funktion {
?>
<div id="content">TEST</div>
<?php
} else {
#echo "<div id='content'>";
#echo "<p class='text'>Denna sida kräver att du är registrerad!</p>";
#echo "</div>";
#}
?>
<div id="content">
<p class="notregistered">Denna sida/funktion kräver att du är <strong><a href="./registration.php">registrerad</a></strong> medlem!</p>
</div>
<?php
}
?>
<?php
include('/sökväg/inc/footer.php');
?>
Så här ser delar ur headern ut:
<div id="menula">
<?php
######### LÄSER IN MENY ##############################################
#show_menu($_SESSION["username"]);?>
<div id="menu">
<ul>
<li><h2>Artiklar</h2>
<ul>
<li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">Visa artiklar</a></li>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs7.asp">Skriv artikel</a><!-- fully working sample -->
<!--<ul>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
<ul>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Menu - Page 1">Stage 1</a></li>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Menu - Page 2">Stage 2</a></li>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Menu - Page 3">Stage 3</a></li>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Menu - Page 4">Stage 4</a></li>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Menu - Page 5">Stage 5</a></li>
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Menu - Page 6">Stage 6</a></li>
</ul>
</li>
</ul>-->
</li>
</ul>
</li>
</ul>
</div>
</div>
Diven med id "menula" fick jag döpa om till det eftersom menyn använde sig av menu, där av det något konstiga namnet. Hur som helst...diven "menula" utgör den blå raden på sidan som jag i sin tur placerar diven menu i eftersom det är på den platsen jag vill ha CSS-menyn. Nu misstänker jag starkt :e att konflikten skapas någonstans i detta skede. Jag har inte lyckats felsöka allting än och med min kunskapsnivå så är det väldigt lätt att missa något som för en duktig person kan förefalla solklart. Jag hoppas någon har örnögon och kan se vad som är fel :)
Jag bytte css-meny och denna jag använder mig nu är både enklare och verkar fungera bättre.
Dock har jag ett problem. Så här ser huvudkoden ut:
<div id="menu">
<ul class="nav" style="position: relative;">
<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>
<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>
<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>
<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>
</ul>
</div>
Så här css-koden ut:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
Nu till problemet. I den bifogade bilden ser man hur menyn ligger precis på kanten till det gråa och det vita. Menyn vill jag ska ligga helt och hållet i meny-diven (det gråa fältet) men den verkar ha hamnat lite på sniskan. Någon som vet vad som kan vara fel baserat på koden? :)
Nu hade jag precis "tweakat" iordning menyn i Firefox och började känna mig nöjd med integrationen i övriga sidan. Sedan var det som att bli avrättad när jag öppnade menyn och sidan i Internet Explorer. Då såg menyn plötsligt ut som 7 svåra år. Jag bli så förbannad att Microsoft inte ska klara av något som Firefox klarar betydligt bättre.
Nu kanske jag får skrota hela idén med menyn då 50 % av användarna kommer få se denna bedrövelse om jag väljer att ha den kvar. Ni kan se resultatet på den bifogade bilden!
Eftersom de css-baserade menyer som jag nu provat inte fungerar bra samtidigt i både IE och Firefox har jag tittat på ett alternativ som jag haft ögona på tidigare. Menyn är designad av projectseven.com och heter MenuMagic II. Någon som har erfarenhet av denna meny (se bifogad bild)? Är den värd de pengar den kostar?
OlleBoopMedlem sedan feb. 20001 861 inlägg Hur går det brorsan? Löser det sig med menyerna? :q
/J
Vad är det specifikt i CSS-koden som gör att IE tolkar det hela så annorlunda?
Jag har verkligen kört fast :e Nästlande CSS-satser är verkligen inte min grej just nu. Det är rörigt värre i mitt huvud när jag försöker få till denna meny.
Det började bra med en meny (http://www.phoenity.com/newtedge/horizontal_nav/) som jag lyckades implementera. Sedan visade det sig dessvärre att den inte var kompatibel med IE :(
Nåväl...jag fick ett länktips av OlleBoop till htmldog.com där jag nu har försökt att få till ett menyexempel de har. Det fungerar väl relativt bra förutom att jag inte får till utseendet på den nya.
Jag har bifogat en bild av den tidigare och den nuvarande menyn (av Suckerfish) där man tydligt kan se skillnaderna i utseende.
Bifogar den senaste koden för html och css. Om någon har tips på vad som bör ändra i CSS-koden mottages det tacksamt eftersom jag själv gått bet! :stud
HTML:
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</ul>
CSS:
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 10em;
font-weight: none;
color: #000;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-type: none;
}
#nav li ul { /* second-level lists */
position: absolute;
background: #fff;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border: solid 1px #00A0DB;
background: #fff;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Lägesrapport: Äntligen börjar jag se ljuset i tunneln. Har fått hyffsad ordning på menyn. Har ett litet problem som framgår av den bifogade filen med röd pil.
Någon som vet hur man får menytexten att ligga dikt an mot vänsterkanten på ramen?
OlleBoopMedlem sedan feb. 20001 861 inlägg Kan du inte posta den kod du använder alt länka till sidan?
