curlingthebrackets » oevelse

Tomme menu punkter

admin — Sun, 24 Feb 2008 23:29:17 +0000

#menu {
position:relative;
margin:auto;
width:420px;
}
#menu ul {
display: inline;
}
#menu li {
display: inline;
float: left;
}
#menu li a {
display: block;
width: 105px;
height: 30px;
font-size: 0;
}
#menu li a:link, #menu li a:visited  {
background-color: red;
}
#menu li a:hover, #menu li a:active  {
background-color: yellow;
}

<div id="menu"><ul>
<li><a href="index.html" title="index"> </a></li>
<li><a href="cv.html" title="cv"> </a></li>
<li><a href="musik.html" title="musik"> </a></li>
<li><a href="grafik.html" title="grafik"> </a></li>
</u></div>

Billedbaggrund og “you-are-here” funktionalitet

<li><a id="vi_er_her" href="index.html" title="index"> </a></li>

#menu li a:link, #menu li a:visited  {
background-image: url(sti/til/billede.jpg);
background-position: 0px 0px;/*y-akse x-akse*/
}
#menu li a:hover, #menu li a:active  {
background-position: 50px 50px;
}
#menu li a#vi_er_her:link, #menu li a#vi_er_her:visited  {
background-position: 50px 50px;
}

Ul – li – links

admin — Mon, 19 Feb 2007 21:00:39 +0000

xhtml	css
<ul> <li><a href="#">punkt1</a></li> <li><a href="#">punkt2</a></li> <li><a href="#">punkt3</a></li> <li><a href="#">punkt4</a></li> </ul>	ul { background-color: #000000; padding: 0 8px 0 8px; display: inline; background-image: url(slette_02.gif); } li { display: inline; margin: 0 4px 0 4px; } li a:link, li a:visited { background-color: #CCCCCC; color: #666666; padding: 0 5px 0 5px; text-decoration: none; font-weight: bold; } li a:hover, li a:active { background-color: #eee; color: #000000; }

xhtml

css

<ul>
<li><a href="#">punkt1</a></li>
<li><a href="#">punkt2</a></li>
<li><a href="#">punkt3</a></li>
<li><a href="#">punkt4</a></li>
</ul>

 ul {
background-color: #000000;
padding: 0 8px 0 8px;
display: inline;
background-image: url(slette_02.gif);
}
 
li {
display: inline;
margin: 0 4px 0 4px;
}
 
li a:link, li a:visited {
background-color: #CCCCCC;
color: #666666;
padding: 0 5px 0 5px;
text-decoration: none;
font-weight: bold;
}
 
li a:hover, li a:active {
background-color: #eee;
color: #000000;
}

Puslespil med tags

admin — Mon, 12 Feb 2007 23:17:50 +0000

Skriv(eller paste) en lille tekst i en text-editor og gem den med det rigtige ‘filnavn.html’
Åbn den nye fil i en browser

En moderne browser vil højst sandsynligt vise teksten – bare uden struktur og uden den formatering du havde bestemt. Dermed kan du ikke få kontrol over din tekst.

Pak det hele ind i de rigtige tags-elementer for at få den ønskede og korrekte struktur. Du vil få brug for at pusle-spille mellem føgende elementer – her listet op i en tosset rækkefølge :

Hele din tekst skal forvandles til html: en skøn krop, der sidder et godt hoved på.

Kode er tilgængelig for alle

admin — Mon, 12 Feb 2007 02:36:39 +0000

Åben en hjemmeside i en hvilken som helst browser

Koden er det tekst-sprog som browseren læser og fortolker, for at kunne vise dig det du ser.

Koden ved selvsyn hedder ‘vis kilde’, ‘source’, ‘display source’ eller lignende. Let tilgængelig i menueerne eller ved højreklik.

I virkeligheden er den allerede på din harddisk gennem cache-lageret, som det kan være lidt svært at grave den frem fra igen – men nu, da den er synlig og fremme i en texteditor, er den så let at gemme eller copy/paste fra.

gem filen på harddisken i en vel-navngivet mappe og åbn den påny i en browser.

Du vil da se på adresselinien , at filen nu er lokal..

Der er nu muligt at ændre i koden på kreativ vis – “hvad sker der hvis jeg flytter den tabel længere ned under den div?” (gem, gå til browseren og opdater og chek ud) tilbage til koden og ændre lidt mere – står der align=”left”, så prøv at skrive “right”, (gem – hen og chekke ud – Nååå flot – tilbage igen – mere..)

Husk at markere indhold inclusiv tags – fra start til slut <>…

Det er smart at have flere programmer åbne: texteditor, browser(e) og skifte imellem dem hurtigt med Alt+Tab, hvor du hoder Alt nede mens du dapper med Tab.

Du kan nemt tage bider fra flere forskellige koder, ændre, klippe-klistre dem ind i den fil du bruger som prøveklud.

Nye billeder? så må de gemmes lokalt – i samme mappe som html-filen fx., og refereres til i forhold til den:

Og så kan man jo altid spørge Google om “indsæt billede i html” og på dansk

Fil og Mappestruktur

admin — Sun, 11 Feb 2007 23:52:28 +0000

Et forslag. Strukturen må svare til indholdet og opgaven.

[] Mitnavn_roots
- [] source_files(fx. arbejdsfiler, som ikke skal uploades)
  - my_image.psd
- [] proj1_site_v1 (tilsvarende rodmappe på monline er public_html)
  - index.html
  - [] interface_pix
    - my_image.gif
  - [] gallery
    - index.html
    - [] images
  - [] info
    - index.html
    - [] images
  - [] contact
    - index.html
    - [] images