Webbteknik 1

Laboration L5

Exempel

Webbplatsen har nu utökats med användning av en del av det som tagits upp i föreläsning F5 och laboration L5.

HTML- och CSS-kod

Det har tillkommit en del sidor om mat, så länkarna i HTML-koden har utökats. I avdelningen mat, finns det också en lokal navigering.

I CSS-koden används float för justera kartan som finns på den första sidan. I den sista media queryn tas sedan float bort och bilden centreras istället.

Den globala och lokala navigeringen kigger i varsin nav inom body och kan därmed placeras i olika rutor i layouten. De stilsätts också lite olika.

De olika media queries har utökats för att nu också göra förändringar i navigeringen. Ta fram Följsamt designläge och testa olika storlek på fönstret.

I en media query görs den globala navigeringen om till en meny som kan visas och döljas.

Se i övrigt kommentarer i CSS-koden.