05. CSS

Css drop-down med bonus

2010-10-22 17:29 #0 av: johan-ahlback

Jag ska visa hur man kan göra en drop-down meny med enbart html och css. När den är klar kommer jag visa hur man kan göra den bättre med lite jquery magi. I den här här artikeln antar jag att du kan lite grundläggande css och html. Om du inte hänger med ordentligt kan du kopiera all kod i slutet av artikeln så har du en fungerande meny. Men vill du lära dig så rekommenderar jag att du läser.

Varför skapar jag menyn i css innan jag börjar med jquery?

När man skapar en hemsida ska man inte lägga till javascript fören man vet att allt fungerar utan javascript. För det finns personer som inte har javascript aktiverat. Så om man skapar en fungerande meny i html och css först vet man att den kommer att fungera för alla.

Nackdelar med drop-down med css

Den största nackdelen är att de som använder internet explorer 6 inte kommer att se undermenyerna på grund av att internet explorer 6 bara kan ha :hover på länkar. Men de kommer att kunna använda menyn när man lagt till javascript.

Grunden för menyn.

För att kunna bygga en drop-down behöver vi en lista i html. För att skapa en undermeny behöver vi bara lägga en ul tagg i en li tagg. Till exempel:

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a>
<!-- Undermeny --->
<ul>
<li><a href="#"></a></li>
</ul>
<!-- Undermeny slut --->
</li>
<li><a href="#"></a></li>
</ul>

Så här ser min html kod ut:

<div id="access">
<div class="menu">
<ul>
<li><a href="#">hem</a>
<ul>
<li><a href="#">arkiv</a></li>
<li><a href="#">taggar</a></li>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>
</li>
<li><a href="#">Blogg</a></li>
<li><a href="#">Om mig</a></li>

<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">annat</a>
<ul>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Joomla</a></li>
<li><a href="#">drupal</a></li>
<li><a href="#">photoshop</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">länk</a></li>
<li><a href="#">länk</a></li>
<li><a href="#">länk</a></li>
</ul>
</div>
</div>

Jag har även två div element som du också kommer att behöva. Du ser dem högst upp och de är #access och .menu. Jag använder dem för att kunna bestämma bredd och annat i css.

Just nu ser det inte mycket ut för världen. Det är en vanlig lista bara. Så skapa ett css dokument så kan vi börja skriva css som gör att menyn ser ut och fungerar som den ska.

Först bestämmer vi bredd och bakgrundsfärg. Vi bestämmer även tecken storleken.

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access,
div.menu {
font-size: 13px;
width: 928px;
}

Sen bestämmer vi att listorna inte ska någon list stil och att de inte ska någon margin.

#access ul{
list-style: none;
margin: 0;
}

Efter det säger vi att att list element ska flyta till vänster, vara relativt positionerade och ha en bredd på 100 pixlar. Anledningen till att vi vill att de ska flyta till vänster är att de hamnar på rad.

#access li {
float: left;
position: relative;
width:100px;
}

Om du kollar på menyn nu kan du se att vi är en bit på vägen:

Css drop-down med bonus 1


Nu bestämmer vi hur länkarna ska se ut. Line-height används för att få större yta på länken. Man kan använda padding men line-height har en tendens att bli lite bättre.

#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}

Nu ska vi fixa till alla listor som är nästlade. Vi anger skuggor för att få en snyggare effekt. Vi döljer dem och positionerar dem. Z-index gör så att de hamnar högst upp.

#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding:0;
}

nu ser vi till att de listor som är nästlade hamnar rätt. #access ul ul ul är den tredje nivån. Left gör så att de hamnar vid sidan av och inte under den listan som är förälder.

#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}

Sen fixar vi länkarna i andra nivån-

#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}

Nu kommer vi till det som internet explorer får problem med, vi ska använda hover på li element. Vi väljer alla a element som finns under ett li element som man hovrar över.

#access li:hover > a,
#access ul ul :hover > a {
background: #999;
color: #fff;
}

Nu till den sista biten som bestämmer att när man hovrar över ett li element som har en child som är en annan lista så ska den visas:

#access ul li:hover > ul {
display: block;
}

Nu är menyn klar.

Css drop-down med bonus 2

Kan man lägga till fler steg?

Ja det kan man men jag råder till att inte göra det. En tre stegs meny är användarvänligt men inte en fyra stegs. Det är bättre att organisera länkarna bättre.

Förbättra menyn med jquery.

Nu har vi en helt fungerande meny men den kan göras bättre med lite jquery magi. Så ladda ner jquery om du inte redan gjort det: http://jquery.com/. Länka in det genom att skriva det här i head taggen:

<script type="text/javascript" src="jquery.js"></script>

sen skapar du ett nytt js dokument och länkar in det på samma sätt.Det är i det dokumentet vi ska skriva all jquery.

Nya css klasser och bilder.

Vi ska lägga till lite klasser i css dokumentet som vi kommer att använda med jquery. Vi behöver en som stoppar att andra nivån öppnas vid hover och sen fyra klasser som vi kommer att använda till bilder:

/* klassen menuitem läggst till av jquery */
#access ul li.menuitem:hover > ul {
display: none;
}

span.opendown{
width:12px;
height:9px;
background: url(images/opendown.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeup{
width:12px;
height:9px;
background: url(images/closeup.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.openright{
width:9px;
height:12px;
background: url(images/openright.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeleft{
width:9px;
height:12px;
background: url(images/closeleft.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}

bilden jag använder ser ut såhär:

Css drop-down med bonus 3

Sen har jag roterat den så att den ligger i alla fyra vinklar.

Ladda scriptet när sidan när DOM är redo.

Som vanligt när man ska manipulera DOM måste man vänta på att hela dokumentet laddat klart. Därför anväder vi document ready function. All jquery vi skriver ska skrivas innan den funktionen:

$(function(){
//koden här
});

Nu vet vi att scriptet inte körs fören DOM är klart. Nu ska vi ge alla top länkar klassen menuitem så att submenyerna öppnas vid hover:

$(".menu > ul > li").addClass("menuitem");

Där väljer vi alla li som ligger direkt under ul som i sin tur ligger direkt under menu.

Nu ska vi lägga till bilden som visas när en submeny är stängd. Vi vill att bilderna bara ska visas om det finns en submeny. Därför använder vi "has()" som kollar om elementet har en child. Sen letar vi efter det första a elementet och lägger till en span med ett klass namn som vi lagt till i css.

$(".menu > ul > li.menuitem").has("ul").find("a:first").append('<span class="opendown"></span>');

Css drop-down med bonus 4

Nu ska vi fixa så att submenyn öppnas när man klickar på bilden. Jag använder toggle för att göra det så enkelt som möjligt. Om jag inte hade använt toggle hade jag fått använda två olika click event och kollat vilken klass span hade för att sedan andra klassen. Toggle gör det enkelt genom att man kan använda flera funktioner i toggle som körs varannan gång till exempel:

$("#knapp").toggle(function(){
gör något
},function(){
gör nått annat
});

Om man klickar på #knapp en gång kommer det första hända, den andra gången kommer nått annat hända. Klickar man igen kommer det första hända igen. Så här ser toggle ut för menyn:
Först väljer vi vad som man ska klicka på. I den första funktionen så har jag en hover funktion som ändrar css värde för ul. Om vi utelämnar den biten kommer det inte fungera på grund av #access ul li.menuitem:hover > ul {display: none;}. Listan skulle döljas igen på en gång. Sen letar vi på den ul som ska visas genom att använda this som är det element vi klickat på. Till sist ändrar vi klassen för span så att bilden ändras när man klickar på den. I andra funktionen döljer vi listan och andrar klassnamnet igen

//toggle funktion
$(".menu > ul > li > a span").toggle(function(){
//css fix
$(".menu > ul > li > ul").hover(function(){
$(this).css("display", "block")
})
//visar submenyn
$(this).parent().parent().find("ul:first").slideDown("fast");
//ändrar klass
$(this).removeClass("opendown").addClass("closeup");
},function(){
//döljer
$(this).parent().parent().find("ul:first").slideUp("fast");
//ändrar klass
$(this).removeClass("closeup").addClass("opendown");
});

Css drop-down med bonus 5

Nu ska vi lägga till bilder för de element som har submenyer i andra nivån:

$(".menu > ul > li > ul > li").has("ul").find("a:first").append('<span class="openright"></span>');

Nu ska vi använda hover för att ändra bild. Förman ska inte behöva klicka för att få upp tredje nivån. Hover kan ha två funktioner, en som är nar man hovrar in över elementet det andra när man hovrar ut:

$(".menu > ul > li > ul > li").has("ul").hover(function(){
$(this).find("a:first span").removeClass("openright").addClass("closeleft");
},function(){
$(this).find("a:first span").removeClass("closeleft").addClass("openright");
});

Css drop-down med bonus 6

Css drop-down med bonus 7

Nu är menyn helt klar. Den funger med och utan javascript aktiverat. Om man dock har ie6 och javascript avaktiverat fungerar den inte.

Exprimentera med det här och visa upp dem här under.

Alla koder:

html:

<div id="access">
<div class="menu">
<ul>
<li><a href="#">hem</a>
<ul>
<li><a href="#">arkiv</a></li>
<li><a href="#">taggar</a></li>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>
</li>

<li><a href="#">Blogg</a></li>
<li><a href="#">Om mig</a></li>

<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">annat</a>
<ul>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Joomla</a></li>
<li><a href="#">drupal</a></li>
<li><a href="#">photoshop</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">länk</a></li>
<li><a href="#">länk</a></li>
<li><a href="#">länk</a></li>
</ul>
</div>
</div>

Css:

 

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access,
div.menu {
font-size: 13px;
width: 928px;
}
#access ul{
list-style: none;
margin: 0;
}
#access li {
float: left;
position: relative;
width:100px;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding:0;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #999;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}


#access ul li.menuitem:hover > ul {
display: none;
}

span.opendown{
width:12px;
height:9px;
background: url(images/opendown.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeup{
width:12px;
height:9px;
background: url(images/closeup.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.openright{
width:9px;
height:12px;
background: url(images/openright.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeleft{
width:9px;
height:12px;
background: url(images/closeleft.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}

Jquery:

$(function(){
$(".menu > ul > li").addClass("menuitem");

$(".menu > ul > li.menuitem").has("ul").find("a:first").append('<span class="opendown"></span>');

$(".menu > ul > li > a span").toggle(function(){
$(".menu > ul > li > ul").hover(function(){
$(this).css("display", "block")
})
$(this).parent().parent().find("ul:first").slideDown("fast");
$(this).removeClass("opendown").addClass("closeup");
},function(){
$(this).parent().parent().find("ul:first").slideUp("fast");
$(this).removeClass("closeup").addClass("opendown");
});
$(".menu > ul > li > ul > li").has("ul").find("a:first").append('<span class="openright"></span>');
$(".menu > ul > li > ul > li").has("ul").hover(function(){
$(this).find("a:first span").removeClass("openright").addClass("closeleft");
},function(){
$(this).find("a:first span").removeClass("closeleft").addClass("openright");
});
});

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-22 20:47 #1 av: [Beavis]

hej johan

Tack för denna tutorial. Jag funderar bara på om du kunde lägga till någon liten text som klargör Vart koden skall läggas?

I <body> eller <style> alt <head> taggarna? Detta för kompletta idioter som jag ska förstå och göra rätt.

Sen får du gärna lägga in en skärmdump på färdiga resultatet, så jag kan se hur det skulle ha sett ut? Skrattande

Tack /beavis

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-22 21:54 #2 av: [Beavis]

Nästa idiotfråga som kommer när jag är nyböjare och fegar är "    <script type="text/javascript" src="jquery.js"></script> ska det sättas in i <head><script type="text/javascript" src="jquery.js"></script><style type text/css>

eller " <head><style type= text/css><script type="text/javascript" src="jquery.js"></script> massa annan kod </style></head> ?

Bara några funderingar (jag e nog kvalificerad för html for dummies?)

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-22 23:36 #3 av: johan-ahlback

script och style ska vara åtskilda. Dela hellst upp det i olika dokument och länka in dem istället.

<head>

<link rel="stylesheet" type="text/css" href="sökväg/till/css.css" media="screen" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="sökväg/till/mitt/js/dokument.js"></script>

</head>

screenshots finns den med ren css är under "Nu är menyn klar." och den med jquery finns innan all kod på slutet.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-23 02:56 #4 av: [Beavis]

ok jag har kört med stylesheets i dokumentet i head som du såg ovan. det är så jag gjort med css tidigare då jag  aldrig lyckats med separata stylesheets.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-23 18:01 #5 av: MichaelE

Ser att det finns css3 med i koden. Tyvärr är det ju bara två webbläsare hittills som stödjer både CSS3/html 5 fullt ut och det är ju opera och firefox 4. Påpekar bara, annars är det en intressant artikel. Kommer nog själv få användning av det någon gång.

Anmäl
2010-10-23 20:06 #6 av: johan-ahlback

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

De här stödj av chrome, firefox 3.6, safari, opera(?) och internet explorer 9 beta. mycket av css3 fungerar i många webbläsare om man använder prefix.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-23 20:39 #7 av: [Beavis]

Jag lyckas inte ladda ner jquery på sajten du loggade till??

När jag klickar på "Download" kommer det bara upp en massa kod i rutan.... skumt jag kör firefoxver. 3.6.11  IE 8,0.6001.18702 och har xp som OS. jag testar även i chrome ibland.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-23 20:57 #8 av: MichaelE

#6 jag syftade även html5. Visst stödjer de senaste webbläsarna css3 men IE9 kommer enbart, såvitt jag vet, till W7. Dåligt drag av MS men det gör fortfarande att tusentals personer blir tvungna att installera en annan webläsare än IE8 pga css3. Ska man bygga en hemsida som passar även de som använder XP (de är fler än vista) så borde man göra en sida uppbyggd med css2 ifall de inte vill installera någon annan webbläsare.

Anmäl
2010-10-23 22:37 #9 av: johan-ahlback

ingenting i css3 används för att skapa en sida. css3 används till olika effekter och den innehåller nya selektorer. Html5 är i princip samma sak. Jag bygger sidor i css nivå 2.1 för att sedan lägga till css3 nivå. Och det finns saker som gör att gamla webbläsare får stöd för de nya selektorerna, effekterna och html5. Så att man ska sluta göra sidor snyggare med css3 bara för att det finns vissa webbläsare som inte stödjer det låter inte så roligt.

Dessutom vill jag säga att css3 inte är en ny version av css utan bara en påbyggnad. css3 är tredje nivån. Gå in på min sida och kolla med ie6. Jag använder css3 där och det är inga problem

 

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-24 00:18 #10 av: MichaelE

Okej. HTML5 vet jag är svårare med för jag har testat en och samma sida i olika webbläsare och IE9 kuggar ganska ordentligt på dem såhär långt.

Jag är medveten om att css3 är en påbyggnad, samma sak som html är en nyare version av html 4.01.

Men om de ändå fungerar så pass med gamla webbläsare så har jag inget mer att säga.

Anmäl
2010-10-26 01:17 #11 av: [Beavis]

jag lyckades ladda ner och installera jquery med IE(gick inte med ff) men det öppnades ändå en fil med js i dreamweaver?

Jag kör vidare iaf så får jag se hur det går?

Men måste fråga en grej om ni kan svara på det? Skall det vara en bild eller ett block över "menyraden" när jag öppnar filen i ff och chrom får jag ett tomrum ovanför menyn med några prickar i?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-26 02:57 #12 av: johan-ahlback

installera jquery? vad menar du med det?

Ta ett screenshot på menyn så kan jag lista ut vad som är fel.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-26 14:10 #13 av: [Beavis]

#12 ok ska försöka se vad jag kan göra med screenshots

Alltså som jag förstod det av din artikel behöver jag jquery installerad på min dator för att effekterna av koden skall synas?

Så jag gick in på adressen du refererar till och försökte ladda ner jquery. Det gick inte bra i firefox men däremot gick det i IE.

Den textmassa som dök upp på skärmen direkt när jag fösökte i Firefox dök upp när jag instalerat jquery på datorn istället men jag tror att det fungerar som det ska?

(Jag kan inte javascript så jag gör som det står i instruktionerna)

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-26 14:28 #14 av: MichaelE

jquery är en fil som ska ligga i målmappen för din hemsida, den länkas från html filen via

<script type="text/javascript" src="jquery.js"></script>

Anmäl
2010-10-26 15:04 #15 av: [Beavis]
screenshot-dd.pdf

Okej nu har jag en screenshot på min dropdown meny som den ser ut just nu med mitt js.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-26 15:19 #16 av: MichaelE

Det visar att det är fel i din css kodning, publicera gärna hela din kod så vi kan se var felet ligger.

Anmäl
2010-10-26 16:31 #17 av: johan-ahlback

du råkar inte ha en tom lista i html koden? det är det enda jag kan komma på. För om du har lagt till all css så ska det inte finnas list-style kvar.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-26 21:18 #18 av: [Beavis]

Jag håller på och pillar med det sista men har svårt att lokalisera vart visa av koderna skall ligga som ni kanske förstått av ,mina tidigare inlägg??

Nu undrar jag var denna raden skall ligga?                                   $(".menu > ul > li").addClass("menuitem");

i scriptet eller i html dokumentet? om det är i js scriptet är det alldeles först i det eller i slutet?

Sen har du delat upp jquery delen i två i "Alla koder". ska det var två separata jquery med de koderna?

Jag försöker följa instruktionena men e osäker och antagligen lite pantad? så jag behöver lite nogrannare förklaring.

jag är konfunderad

<hr> strecket i min skärmdump har jag lagt till på eget bevåg

Det är så här långt jag kommit btw

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-27 01:41 #19 av: johan-ahlback

scriptet. Alla koder som är i slutet är javascript.

Om du har svårt att se skillnad på css och javascript ska du tänka såhär:
Utför koden en handling? då är det javascript.
Bestämmer koden hur något ska se ut? då är det css.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-29 00:28 #20 av: [Beavis]

#19 Jag har aldrig kört javascript och har altid lagt min css i <style> ie <head> Därför är det ovant att länka till fristående dokument.

Men jag kollade i ditt Facit och ändrade till hur det var där så gott jag kunde se.

 

Så blev det nu iaf.

 

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-29 00:37 #21 av: johan-ahlback

det ser rätt ut. Men det ser ut som att du har en tom lista över menyn

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-29 00:38 #22 av: [Beavis]

här är min andrq kod i jquery. Men jag kanske har misuppfattat allt?

 

som jag sa är jag trög så jag behöver tydliga anvisningar för o haja i början.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-29 01:04 #23 av: [Beavis]

#21 Ja det var det tomma utrymmet jag undrade över? jag har mer eller mindr bara kopierat din kod och lagt in. Men någonstans har det blivit fel för mig och jag undrar vart? om det är i css eller i html alt jquery? om det nu skulle användas?

Får sätta mig och kolla buggar för de doken är förstora för att lägga in

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-29 01:10 #24 av: [Beavis]

Jag har lagt in denna koden i det hela

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a>
<!-- Undermeny --->
<ul>
<li><a href="#"></a></li>
</ul>
<!-- Undermeny slut --->
</li>
<li><a href="#"></a></li>
</ul>

Som du kanske bara hade som exempel i din artikel? om jag tar bort den kanske det blir som det ska?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-29 01:30 #25 av: [Beavis]

Det var den koden ovan som spökade, jag hade lagt in den i början på min htmlkod precis som det stå där i texten. jag hajade inte att den bara var en exempelkod. här e min slutliga kod

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-29 01:36 #26 av: [Beavis]

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-29 02:54 #27 av: johan-ahlback

du ska få en liten uppgift av mig. Ändra färger på menyn i css. ändra även teckenstorlek och lite andra saker. pilla med koden och lär dig vad allt gör. Och du ska lova att från och med nu så ska du använda externt länkad css Glad

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-10-29 13:39 #28 av: [Beavis]

Nu kör jag faktiskt internt i <style> vet inte riktigt hur man länkar css koden. Men ska ändra lite färger och så så får du se. men det görs ju i css koden det med så det borde funka det var jquery som spökade för mig. jag återkommer.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-07 19:45 #29 av: [Beavis]

jag önskar man kunde bokmärka artiklar här, jag har problem med detta.

Fick det att funka någorlunda i grundutförandet till slut men sen när jag skulle laborera... oh well nu har jag hittat artikeln igen så jag kan gör om förhoppningsvis.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-09 20:41 #30 av: [Beavis]

#27 Okej. nu har jag följt beskrivningarna och förhoppningsvis gjort rätt.

Har ändrat färger och storlek på texten.

Jag bifogar en skärmdump.

Har försökt hitta vart man ställer in bredden på dd meny och verktygsradlänkarna...

Men har inte hittat det ännu. behöver det för en egen sida, så vore glad om du kan hjälpa mig där.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-18 18:52 #31 av: IdaT

Är det bara för mig drop-down effekten inte fungerar i IE? Jag använder IE8 och i FF fungerar den som den ska.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-18 21:01 #32 av: [Beavis]

Jag har IE8 och där fungerar det för mig, Som du kan se ovan hade jag även lite problem innan jag fick det att fungera. Men lägger man koderna på rätt ställe fungerar det.

Även i Firefox 3.6.12 fungerar det för mig.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-19 00:46 #33 av: IdaT

#32 Jag har kopierat in koderna härifrån (och lagt dom på rätt ställe), bortsett från att jag inte lade in något Jquery och tog bort css3, då min meny ser annorlunda ut. Just det, har inte heller någon tredje nivå i min meny, då jag inte har något behov av det.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 11:45 #34 av: [Beavis]

okej då är det nog något som Johan får hjälpa dig med. Men lägg gärna upp en skärmdump på ditt resultat så kan man kanske se vad som är problemet.

Men har jag fattat saken rätt är ju CSS och jquery avgörande för att det ska fungera?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-19 16:13 #35 av: johan-ahlback

jquery ska inte vara nödvändigt men har lyckats lokalisera en liten bugg tror jag. håller på att kolla på det nu.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-11-19 16:15 #36 av: IdaT

#35 Väntar med spänning på resultatet... Skrattande

Edit: Om det hjälper så fungerar inte hovereffekten på min meny när jag testar den i IE heller, men den fungerar som den ska i FF.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 17:35 #37 av: johan-ahlback

hmm hover ska fungera i ie8. jag har nog lyckats få fel i källkoden. det är kanske där buggen ligger.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-11-19 18:56 #38 av: [Beavis]

hover funkar för mig iaf. som ni kan se av mina dumpar.

Men just den där demonstrationen av en nästlad lista i början där kan du nog markera att det inte ingår i koden på dd menyn.

Det var ju den jag la in så det såg konstigt ut.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-19 19:07 #39 av: IdaT

#38 Dina dumpar är i FF, hover fungerar för mig också i FF men inte i IE. Det är inte den tomma listan som jag lade in.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 19:23 #40 av: johan-ahlback

det var bara en egenskap som hade försvunnit. Nu är koden uppdaterad och ska fungera i ie 8 men inte i 6 eller 7 då man bara kan ha :hover på länkar i dem.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-11-19 20:47 #41 av: [Beavis]

okej här kommer en i IE

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-11-19 21:05 #42 av: IdaT

#40 Ändringen jag hittar är denna "#access ul li.menuitem:hover > ul {
display: none;
}" Men menyn fungerar fortfarande inte för mig i IE8 (fungerar fortfarande som den ska i FF). Har jag missat någon mer ändring?

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 21:29 #43 av: johan-ahlback

för mig funkar det nu. #access ul li.menuitem:hover > ul {
display: none; är för när man lägger in javascript för menyn så att cssen inte gå igång.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-11-19 21:52 #44 av: IdaT

#43 För mig fungerar det fortfarande inte. Jag har testat både den verionen jag modifierat och testat att kopiera din rakt av. Jag har testat den både lokalt och på mitt webbhotell (din version). Har även testat att ta bort min historik om det är någon rest där som störde, vilket inte var fallet.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 22:01 #45 av: johan-ahlback

vilken version av ie använder du?

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-11-19 22:02 #46 av: IdaT

#45 8, eller för att vara exakt: 8.0.7600.16385...

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 22:04 #47 av: johan-ahlback

hade du den på hotell?

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-11-19 22:10 #48 av: IdaT

#47 http://idatorneberg.se/test.html

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-11-19 23:52 #49 av: [Beavis]

#48 Det är något skumt med din kod. för den fungerar inte i IE för mig heller men som du säger i FF????

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-13 22:55 #50 av: [Beavis]
dropdown-med-js.bmp

Nu fungerar den i båda för mig, vad jag vet iaf min provsida.

Det enda som inte verkar fungera är med pilarna??

Någon som har tips på ad jag gör fel?

Som ni ser har jag experimenterat med färgerna och lagt in en rubrik till sidan ovanför också.

Jag undrar också hur man lägger in en bildbakgrund i menylisten? ändra färgerna går bra men har försökt att lägga in en bildbakgrund jag vill ha där utan lyckat resultat. Tack på förhand

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-14 07:42 #51 av: IdaT

#50 Vad har du gjort för att få den att fungera? För somsagt, på sidan ovan är det Johans kod rakt av, och den fungerar inte i IE för mig.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-12-14 23:53 #52 av: [Beavis]

Jag lägger css koden direkt i style Det är viktigt att du har rätt doctype ovanför <HTML> jag upptäckte att om jag missade att skriva in den så funkade inte sidan. Det måste dessutom vara rätt version för css.

kolla om du glömt lägga in doctype först.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-15 00:56 #53 av: johan-ahlback

Det är som #52 säger. om man inte har doctype så visas sidan enligt ie5 och då fungerar ingenting som det ska.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-12-16 00:19 #54 av: [Beavis]

Jag har försökt att byta "färg" i menyn med att lägga in en bakgrund green_redmarble.gif

#access {
background: #greenred_marble.gif;
display: block;
float: left;
margin: 0 auto;
width:100%;
}

Det lyckades inte menyn blev vitaktig. går inte detta? eller gjorde jag fel?  Att bara ändra färg går ju men om jag lägger in en bakgrund istället?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-16 09:12 #55 av: IdaT

#52 Tackar, nu fungerar det!

#54 Testa

#access {
background: url(greenred_marble.gif);
display: block;
float: left;
margin: 0 auto;
width:100%;
}

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2010-12-16 16:43 #56 av: [Beavis]

#55 will do, återkommer med reultatet

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-16 23:26 #57 av: [Beavis]

Det fungerade alldeles utmärkt. tack för tipset

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-19 16:17 #58 av: [Beavis]

Om jag vill ha en border runt menyerna specifikt dropdown listorna. hur skriver jag det?

Jag drar ett exempel där jag tror att det skall in?

#access li:hover > a,
#access ul ul :hover > a {

background: #FFF;                                                                    color: #006400;

border:   1px;                                                                                              color:#333;
}

Detta är min tes men stämmer nog inte? tips?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-19 16:21 #59 av: [Beavis]

det funkade inte för mig så det är uppenbarligen fel

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-19 17:57 #60 av: johan-ahlback

#access ul li:hover > ul ska den ligga

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-12-19 20:59 #61 av: [Beavis]

#60

Aha så här alltså?:

#access ul   li:hover  > ul {

background: #FFF;                                                                        color: #006400;{
display: block;
}

Detta är alltså en helt annan del av css koden än den jag föreslog ovan och börjar på rad 73 i min text.

 

 

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-19 21:56 #62 av: johan-ahlback

japp för uö är det som är lådan som dyker upp

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-12-19 23:02 #63 av: [Beavis]

ser att det blev fel inklistrat  i mitt inlägg ovan tyvärr blir det ibland knas med klipp och klistra för mig här och då försöker man fixa , det funkar inte så till slut glömmer man vad man höll på med till slut.

Naturligtvis skulle det stå:

#access ul   li:hover  > ul {

border:   1px;                                                                                              color:#333;
display: block;
}

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-19 23:18 #64 av: [Beavis]

jag ökade t o m till 2px men ser ingen kant på dropboxarna?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-19 23:53 #65 av: johan-ahlback

#access ul li:hover > ul {
display: block;
border:1px solid #F00;
}

det där fungerar i alla fall

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-12-20 01:06 #66 av: [Beavis]

ok ska testa det också

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-20 01:16 #67 av: [Beavis]

jag ger nog upp snart

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-12-27 00:05 #68 av: [Beavis]

Jag försöker ändra så att menyraden inte "hovrar" när jag för pekaren över den samt att texten skall vara bold/fetstil.

edit--> jag löste detta med att göra texten i bold i listdelen, men det är kanske inte rätt?

Gör jag det i denna koddel?

#access a {
color: #B80;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}

eller gör jag det manuellt i listan?

Men just hur jag delar upp hover så att det bara hovrar i dropdown menyn är det någon som vet hur man gör det?

Tack på förhand

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-01-04 01:45 #69 av: johan-ahlback

vad menar du med inte hovrar

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2011-01-04 17:31 #70 av: [Beavis]

Jag menar att bakgrunden på menytexten inte ska ändra färg när jag för muspekaren över den.

Som nu i firefox tex blir bakgrunden blå i menyraden när man för pekaren över den.

a link background:"blue"; eller nåt blir väl koden då?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-01-05 00:38 #71 av: johan-ahlback

ändra på någon av :hover

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2011-01-05 01:54 #72 av: [Beavis]

ska försöka.  knepigt det här...

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-22 22:48 #73 av: [Beavis]

Hej igen.

Nu har jag ett nytt problem som jag hoppas att någon av er kan hjälpa mig med i detta ämne.

Det är så att när jag klickar på "minimera" i  i övre högra hörnet i webbläsaren så "skrynklas" menyn ihop. (Se bifogad dump)

Hur kan jag göra så att menyn fortsätter vara normal men med rullningslistor i höjd och bredd? som på vanliga hemsidor.

Tack på förhand.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-23 01:46 #74 av: johan-ahlback

sätt en fast bredd på menyn så löser det sig nog

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2011-02-23 01:49 #75 av: [Beavis]

ok, jag har kört mycket med % för att kunna anpassa efter olika upplösningar. Ska testa det

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-23 21:12 #76 av: SweetCheeks

#75 Försökte skriva svar igår men det ville sig icke.

En idé kan vara att ange 100% som width och sedan ange ett bestämt antal pixlar som min-width. Då anpassar sig menyn efter resten av sidlayouten men blir aldrig smalare än antalet pixlar i min-width.

Huruvida detta är en bra lösning beror lite på hur du har strukturerat dina element men i teorin bör det åstadkomma det jag uppfattar att du vill åstadkomma. Glad

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-02-23 23:01 #77 av: [Beavis]

#76 min-width sätter jag den i css koden eller i bodyn? Måste fråga för att vara säker.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-23 23:53 #78 av: SweetCheeks

#77 Det är "CSS-kod" och vart du skall skriva den beror ju på om du använder dig av en extern css-fil eller kör inline css. Förslagsvis där du även skriver width och så vidare för menyn. Jag vet ju inte hur du har strukturerat dina element, men min-width-egenskapen bör appliceras på antingen ul-elementet (om du har gjort menyn med en onumrerad lista) eller diven (eller liknande) som innehåller menylänkarna.

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-02-27 17:49 #79 av: [Beavis]

Jag har gjort menyn helt efter instruktionerna ovan, Doch har jag gjort css koden "inline" i <head> ändrat färgerna och storlekar lite. Jag är skitdålig på css det är därför jag frågar. Man lär sig genom att fråga sägs det. Ska kolla om jag hittar.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-27 18:44 #80 av: SweetCheeks

#79 Ah, självklart, tänkte inte så långt...

Om jag inte tar fel kallas det för embedded CSS när det skrivs innanför head --> style.

Gör så och fråga igen om det inte vill sig. :)

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-02-27 20:44 #81 av: [Beavis]

Är det alltså någonstans i detta kodstycke jag skall lägga in det?

#access ul{
list-style: none;
margin: 0;
}
#access li {
float: left;
position: relative;
width: 200px;
}

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-27 20:54 #82 av: SweetCheeks

#81 Så som menyn är uppbyggd skall du nog lägga in det i

#access {

background: #000;

display: block;

float: left;

margin: 0 auto;

width: 100%;

min-width: 500px;

max-width: 940px;

}

Nu utgår jag ifrån att du har placerat diven med id acess i minst en ytterligare div som du har begränsat bredden på, annars sträcker sig ju menyn över hela webbläsarens fönster.

Min- och max-width får du ju välja bredd på själv. :)

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-02-27 22:03 #83 av: [Beavis]

ah okej, jag gick helt utan att tänka, har för mig du eller johan sa att man gjorde det under ul.

Här ser man väll det negativa med procent kanske? har alltid tyckt % var bättre än pixlar.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-28 02:12 #84 av: SweetCheeks

#83 Jag skrev ul innan jag snappade upp att du använder menyn i artkeln... Tungan ute

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-02-28 12:35 #85 av: [Beavis]

Jag leade som fan efter ul uttalandet men hitade det inte så jag anklagade både dig och johan för att vara säker. Jag ska testa och se om det blir bättre. Har varit svårt förkyld en tid, men börjar känna mig redo igen.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-02-28 13:28 #86 av: SweetCheeks

#85 Jag är den skyldige...

"#78 ... Jag vet ju inte hur du har strukturerat dina element, men min-width-egenskapen bör appliceras på antingen ul-elementet (om du har gjort menyn med en onumrerad lista) eller diven (eller liknande) som innehåller menylänkarna."

Så i det här fallet hade jag halvt rätt, menyn är byggd med en lista men som den ser ut är det lämpligast att applicera min-width etc på container-diven (#access). Glad

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-03-02 00:59 #87 av: [Beavis]

#86 Jag har nu provat att ändra min css kod i <style typ="text/css">         till detta:

#access {
background: url(bluegreen-marble.png);
display: block;
float: left;
margin: 0 auto;
width:100%;
min-width: 500px;
max-width: 940px;

Om jag förstod saken rätt skulle det stå så? problemet nu blev istället att hela menyn blev ihopklämd och bakgrundsbilden blev förkortad. och den blir fortfarande mosad vid förminskning.... hmm?

Se ny skärmdump

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-03-02 16:47 #88 av: SweetCheeks

#87 Min- och max-width får du anpassa efter din layout.

Hur ser din html ut (innanför body det vill säga)?

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-03-02 23:31 #89 av: [Beavis]

Okej ska testa igen, för det blev ju totalknas med de föreslagna inställningarna. Men det är ju riskerna antar jag när man blandar. Du såg ju att allt annat var bredare än menyn. men det kan vara enligt johans mått. För mig blev originalmåtten för små så jag ökade och satte % för att sliippa problemet med olika upplösningar.

- innannför body finns ju tabeller och listor listan utgör ju menyn sedan gillar jag tabeller så har msånt för att placera info mm.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-03-03 01:44 #90 av: SweetCheeks

#89 Aha, jag rekommenderar å det bestämdaste att du positionerar innehållet med div istället för table. Det är ovant i början men när man väl behärskar det får man en mer semantisk och lättladdad sida. Glad

Så som (jag tror att) det ser ut nu kan du testa att ange width:100%; och min-width:Xpx; för #access, där X är det antal pixlar menyn precis behöver för att inte bli så ihoptryckt att länkarna hamnar på mer än en rad.

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-03-07 22:29 #91 av: [Beavis]

Tack för tipset. Jag ska försöka. Det är ju ett kosmetiskt problem men det är skillnaden för att det ska se bra ut och jag ska våga lämna den ifrån mig om jag kan få menyn att se bra ut även när fönstret är förminskat.

När jag en gång i tiden lärde mig grunderna i html var inte div så vanligt så det fastnade inte i skallen när jg höll på men jag borde lära mig mer om det.

Ska prova med min width och width 100% i alla fall. jag får öka min hlt enkelt och se.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-03-07 22:41 #92 av: [Beavis]

Jag skrev det så här:

#access {background: url(bluegreen-marble.png);

display: block;float: left;

margin: 0 auto;

width:100%

;min-width: 700px;

max-width: 1300px;

Menyn blir fortfarande ihoptryckt istället för att få en "scroll" vid förminskning. Hur skriver jag för att få in det?

Sen undrar jag om jag kan få bort bakgrunds hover i menyraden men ha kvar den i undermenyerna?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-03-08 23:31 #93 av: SweetCheeks

#92 Om du vill ha en scroll för själva menyn (?) så skrivr du overflow:auto; för #access.

Det bör du absolut kunna få, är dock inte så insatt i menyn så kan inte svara på exakt hur du skall göra men principen är att ge undermenyerna en annan klass änmenyraden och sedan styla dessa annorlunda.

 

Tilda

Värd på Dvärghamster i Fokus och medarbetare på Hemsidor i Fokus

Aka Lakritsugglan, lakritsugglan.eu, webbsidemakare/utvecklare/designer med F-skattsedel

Virka-amigurumi.se - Japanska ergonomiska virknålar

Anmäl
2011-03-11 09:21 #94 av: johan-ahlback

du kan skriva #menu > ul > li för astt bara välja de li som ligger först

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2011-03-16 21:45 #95 av: [Beavis]

Alltså bara för att försöka specifiera vad jag är ute efter igen: Jag vill inte att menyn knycklarihop sig när fönstret/bilden/sidan när jag klickar på "återställ nedåt" (firefox,explorer,chrome,safari).

Och då få en scroll list eller liknande så att menyn är konstant. Detta kanske är överkurs? men det skulle vara snyggare.

Att jämföra med hur tex hemsidor.ifokus ser ut när ma klickar på denna knapp.

Ska prova SweetC förslag tack för hjälpen.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-03-17 12:52 #96 av: johan-ahlback

man skulle kunna skriva en function som scrollar när man för muspekaren nedåt och ha samma höjd på alla undermenyer

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2011-05-08 16:25 #97 av: [Beavis]

jag har försökt att ändra bredden på en undermeny. Alltså inte den första som droppar ner utan den andra som kommer när man kommer till ett ämne... Hoppas ni förstår vad jag menar?

Jag förökte göra det i denna sektion:

#access ul ul a {
background: #009999;
line-height: 1em;
padding: 10px;
width: 200px;
height: auto;

Genom att öka width ifrån 180px till 200px

Problemet blev att den ökade bredden på båda "droparna" Detta var inte min avsikt då jag bara vill bredda på unde undermenyn då ett ämnesnman blev långt.

Grunden till min meny ligger i denna tutorial jag har bara ändrat på färger och vissa mått och självklart ämnena.

Tack på förhand

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-08-14 23:12 #98 av: [Beavis]

En annan fråga någon kanske kan svara på?

Jag får inte upp pilarna i dd menyerna?

Så här ser koden ut:

#access ul li.menuitem:hover > ul

{display: none;

}

span.opendown{

width:12px;

height:9px;

background: url(images/opendown.png) center center no-repeat;

display:inline-block;

margin-left:10px;                                                                        }

span.closeup{

width:12px;

height:9px;

background: url(images/closeup.png) center center no-repeat;

display:inline-block;

margin-left:10px;

}

span.openright{

width:9px;

height:12px;

background: url(images/openright.png) center center no-repeat;

display:inline-block;

margin-left:10px;

}

span.closeleft

{

width:9px;

height:12px;

background: url(images/closeleft.png) center center no-repeat;

display:inline-block;

margin-left:10px;

}

Vet inte om felet ligger här men hoppas någon ser felet.

Tack på förhand

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-12-14 18:57 #99 av: selfrejection

Jag har fått lite problem med min meny. Ibland fungerar den som den ska men ibland så syns undermenyerna som de ska, men så fort man rör musen neråt för att försöka klicka på någon av dem så försvinner de. Man ser alltså bara "grundmenyn". Har kopierat koderna härifrån och bara andrat utseende och lite sånt. Vad ska jag göra?

Anmäl
2011-12-14 19:11 #100 av: IdaT

#99 Du har förmodligen för stort mellanrum (margin/padding) mellan menyn och undermenyn, så att när du ska klicka på någon av länkarna i undermenyn hinner du röra dig från länken i huvudmenyn innan du kommer till undermenyn, vilket gr att undermenyn försvinner.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2011-12-14 19:20 #101 av: [Beavis]

Ingen som har något svar på min senaste fundering angående pilarna? de ligger i en undermapp kallad images

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-12-14 19:27 #102 av: IdaT

#101 Efter bara en snabbtitt: får du upp dom om du lägger till -image efter background (backgrpund-image: url();)?

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2011-12-17 22:35 #103 av: [Beavis]

#102 Så här ser koden för pilarna ut i min CSS:

span.opendown{
width:12px;
height:9px;
background: url(images/opendown.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeup{
width:12px;
height:9px;
background: url(images/closeup.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.openright{
width:9px;
height:12px;
background: url(images/openright.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeleft{
width:9px;
height:12px;
background: url(images/closeleft.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}

Pilbilderna som jag kopierade härifrån om jag minns rätt? ligger i en egen mapp kallad "images" i mappen med sajten.

Jag är lite trög toligen därfr jag inte får det att funka?

Är det efter background: url(images/opendown.png) center center no-repeat; jag ska lägga till  "-image"?

Så här alltså: background: url(images/opendown.png) center center no-repeat; -image

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-12-18 09:16 #104 av: IdaT

#103 Nej. Lägg till -image som jag skrev i mitt exempel i #102. Allstå: background-image: url(images/opendown.png) center center no-repeat;

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2011-12-19 21:09 #105 av: [Beavis]

#104 okej jag ska testa det.  Pilarna är ju inte jäteviktiga men kul om jag kunde få det rätt äntligen. Tack

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.