Differences

This shows you the differences between two versions of the page.

--- css_menu [2012-09-12 08:11]
Joakim Forsgren
+++ css_menu [2017-09-01 14:54]
@@ Line 1: / Line 1: @@
-====== CSS-meny ======
-===== Case: =====
-Du jobbar på ett företag och ditt ansvar är layout, HTML och CSS, en av dina kollegor jobbar med programmering och han har skrivit koden nedan, den genererar upp en array från databasen (nedan ser du resultatet) sen har han skrivit en funktion som skapar en lista av denna array.
-===== Uppgift: =====
-Din uppgift är att fixa CSS:n så att det blir en vertikal och en horisontell meny beroende på om arrayen har klassen hmenu eller vmenu. Du skall använda dig av koden nedan för att skapa din meny. Hämta lite lorem ipsum text och gör en CSS-fil som du inkluderar.
-Kör du fast får du söka hjläp via nätet, du är den som kan mest om CSS på din arbetsplats så det finns ingen att fråga.
-Dina HTML kod skall vara validerad som HTML5 och din CSS skall också vara validerad.\\
-  * HTML [[http://validator.w3.org/|validering]]\\
-  * CSS  [[http://jigsaw.w3.org/css-validator/|validering]]\\
-Här är en lite film för att ni skall förstå bättre vad ni skall göra.
-<html>
-<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/gaECAcYLwiY&hl=sv_SE&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/gaECAcYLwiY&hl=sv_SE&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
-</html>
-**OBS!** För att göra det lite enklare så räcker det att menyn fungerar i en webläsare. (chrome/firefox)
-<php>
-highlight_file('../../code/css/menu/menu_data.php');
-if(0) {
-'
-==== Här kommer min CSS.... ====
-<code css>
-div ul { /* tar bort listor och indentering */
-	list-style-type: none;
-	padding: 0;
-}
-div ul li {
-	position: relative; /* för att absolute skall referera hit... */
-	width: 155px;
-}
-div ul li ul {
-	position: absolute; /* ska inte ta någon plats */
-	display: none;
-}
-/* när man för musen över */
-div ul li:hover ul {
-	display: block;
-}
-/*
-Nu kommer de saker som är olika beroende om
-menyn skall vara horisontell eller vertikal
-*/
-/* menyn skall flyta ut åt vänster */
-div.hmenu ul li {
-	float: left;
-}
-/* menyn skall falla ut till höger men inte nedåt */
-div.vmenu ul li ul {
-	left: 100%;   /* flytta till höger om det block som det ligger i */
-	top: 0px;     /* inte ska falla nedåt */
-}
-</code>
-';
-}
-</php>
-<code php>
-// För att skriva ut menyn
-echo print_menu($menu);
-</code>