CSS background border
Op een website met meerdere pagina's is er vaak een menu aanwezig.
Een beetje leuk menu maakt het navigeren een stuk makkelijker.
Hoe je onder een menu een achtergrondje maakt, zal ik hieronder uitleggen.
In de html bestand staat de volgende 'unsorted list'.
Een lijstje met daar je hoofdpagina's zonder sub-menu's om het simpel te houden.
Lijstje ziet er als volgt uit:
<![CDATA[<nav>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Fotografie</a></li>
<li><a href="#">Home></a></li>
</ul>
<nav>
]]>
<![CDATA[nav ul li:hover {
color:#000;
background-color:#FF5;
cursor:pointer;
border: medium none #000;
border-radius: 10px 0px 10px 0px; future proofing
-khtml-border-radius: 10px 0px 10px 0px;
-webkit-transition: background-color 1s;
opacity:0.5;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
]]>
Als je wilt testen?!
Eerste opzet.Fri Jan 20 14:03:08 CET 2012 Als het scherm kleiner is of het venster wordt kleiner gemaakt dan 1024 pixels,
dan zal het menu verplaatst worden naar links en onder elkaar. Deze tekst zal onderaan geplaatst worden.
Afhankelijk van de browser zal dit via een animatie verlopen. Heb nog niet getest welke browser dit ondersteunen. In ieder geval onder Apple/OSX : Safari, Chrome en FireFox 9.
Opera ondersteund de animatie NIET.
SQL aan het toevoegenFri Jan 20 14:06:03 CET 2012 Lekker aan het spelen met MySQL. Eerste test doe ik onder
fotografie tab.
klikPagina met URLsFri Jan 20 14:20:07 CET 2012 Een extra pagina gemaakt met links - zijn verwijzingen naar ander pagina's, oftewel URL's
Je ziet het, het gaat niet hard met deze site.. maar ik vind hem wel goed, vooral de dingen die je niet ziet!!
Home pagina NU met SQL contentFri Jan 20 15:37:48 CET 2012 Deze berichten worden opgeslagen in een SQL database.
Vooralsnog ziet het er goed uit en is snel.
Maar eens verder kijken wat SQL en PHP nog meer kan.
SQL mailSun Jan 22 23:37:38 CET 2012 Heel even bezig geweest in deze drukke tijden. Veel verjaardagen ;-)
Deze tekst komt rechtstreeks op de voorpagina.
De beheerder (ik) wordt doormiddel van een mail op de hoogte gebracht dat er iets geplaatst is... Best wel cool...
Bezig...Wed Jan 25 9:53:12 CET 2012 Ben bezig met een andere website.
Ook daar zijn een aantal leuke uitdagingen.