|
| Hjælp til design Fra : Anden_90 | Vist : 432 gange 50 point Dato : 06-09-05 19:45 |
|
Hejsa..
Som nogle nok ved, så har jeg jo en mindeside for min far, men så ville jeg hører om der er en der er frisk på, at hjælpe med at få lavet en andet design. Da jeg synes den hvide baggrund måske er lidt kedelig, så nogen der vil hjælpe? Jeg er virkelig på bare bund hvad grafik angår.
Til dem der ikke kender siden: http://mindesiden.akdc.dk
Med Venlig Hilsen
Mikkel Skovlund
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 20:19 |
| | |
| Kommentar Fra : molokyle |
Dato : 06-09-05 20:25 |
|
Ps. På dansk findes en og kun én guru inden for HTML og CSS, der skriver i et nogenlude letlæseligt sprog : Jørgen Farum Jensen.
Har har skrevet de udmærkede og forholdsvis bille undervisningsbøger :
1.) Webdesign . illustreret håndbog
2.) Webdesign med XHTML
Hans hjemmeside finder du hér : http://webdesign101.dk/
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 20:26 |
|
Har har ??? ...Han har
bille ??? ...billige selvfølgelig = små 200 kr.
</MOLOKYLE>
| |
| Kommentar Fra : Fijala |
Dato : 06-09-05 20:30 |
|
Hej Mikkel
Jeg er sikker på min søn vil hjælpe mod en mindre betaling. Han er ikke hjemme, men jeg skal spørge ham i morgen da han kommer sent hjem
I mellemtiden kan du kigge på en af hans sidste påhit.
http://www.spell-bound.org/
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 20:35 |
|
Pps. Jeg fik ikke fortalt, at på siden i det første link med de smukke mennesker
..skal du prøve at flytte rundt på (..ja du læser rigtigt) de flydende dynamiske vinduer på siden.
Det er dét, der er det nye ..ikke de smukke fjolser der tilmelder sig
</MOLOKYLE>
| |
| Kommentar Fra : Anden_90 |
Dato : 06-09-05 20:40 |
|
Hehe.. Okay..
Molekyle: Jeg kigger på det, men tror nu ikke jeg har lyst til at bevæge mig ud i det, da jeg er i gang med at lære php.. Men ellers tak for siderne, mpske kigger jeg nærmere på det..
| |
| Kommentar Fra : Anden_90 |
Dato : 06-09-05 20:46 |
|
Molekyle: Det er jo et forum.. Sat op fra et opensource system, kaldet phpbb.. Så det er jo ikke hans skyld der er fejl.. Har også selv et forum: http://forum.akdc.dk prøv at se om der ikke er lige så mange fejl, det tror jeg..
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 21:11 |
|
Én fejl hos w3.org på din side Anden_90
..og den lidt 'blødere' validator siger :
Citat Message Summary :
Congratulations! CSE HTML Validator Lite did not find any errors or warnings in this web page. |
Jeg tror Fijala's søn selv har 'leget' webdesigner/-programmør og har rettet en smule i koden
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 21:37 |
|
Kandu.dk kan ikke gengive !DOCTYPE's korrekt ...lige som så meget andet , men hér er min sidste menu kreation.
Dynamisk menu i XHTML med runde hjørner uden brug af grafik eller javascript
Virker ikke helt efter hensigten i IE6 (..endnu. Det kommer den til lover jeg. Lige så snart jeg har grejet; hvorledes jeg implementerer pseudo klasserne til anchor markøren, istedet for til softitem klassen ), men validerer ellers Ok. i såvel Opera, som Safari og Firefox. (Dublin Core meta markørene virker selvfølgelig kun efter hensigten hos min host, men det vedrører ikke funktionaliteten og valideringen af koden )
Gem som pureCSSaccessmenu.html :
Kode <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da" xml:lang="da">
<head>
<title>Molokyle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="../ico/favicon.ico" />
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
<meta name="Title" content="Molokyle" />
<meta name="Description" content="Hjemmeside" />
<meta name="Keywords" content="Molokyle" />
<meta name="Robots" content="ALL" />
<meta name="Revisit-after" content="7" />
<meta name="Author" content="Henrik Mortensen" />
<meta http-equiv="Reply-to" content="molo@pc.dk" />
<meta name="Copyright" content="Henrik Mortensen" />
<meta http-equiv="Content-language" content="dan" />
<meta name="Rating" content="General" />
<meta name="Generator" content="Henrik Mortensen" />
<meta name="ObjectType" content="Text" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="DC.Title" content="Molokyle" />
<meta name="DC.Description" content="Hjemmeside" />
<meta name="DC.Subject" content="Molokyle" />
<meta name="DC.Creator" content="Henrik Mortensen" />
<meta name="DC.Contributor" content="ingen" />
<meta name="DC.Rights" content="Henrik Mortensen" />
<meta name="DC.Identifier" content="http://frip.dk/molokyle/temp/" />
<meta name="DC.Publisher" content="Henrik Mortensen" />
<meta name="DC.Date" scheme="ISO8601" content="2005-05-01" />
<meta name="DC.Language" scheme="NISOZ39.50" content="dan" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" scheme="MIME" content="text/html" />
<style type="text/css">
body
{
background-color:#009999;
font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:0.75em;
}
img {border:0;}
/* softbox Box */
#xsoftbox p {margin:0 10px;letter-spacing:1px;padding-bottom:1em;}
#xsoftbox {display:block;background:transparent;width:180px;}
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#000099;border-left:1px solid #fff; border-right:1px solid #fff}
.xb1 {margin:0 5px; background:#ffffff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent
{
display:block;
background:#000099;
color:#c0c0c0;
border-style:solid;
border-color: #ffffff;
border-width:0 1px;
text-align:center; /* Centering content */
}
/* softitem 3D */
.softitem {background: transparent; width:90%;margin:0 auto; cursor:default;}
.softitem h1, .softitem p {margin:0 10px;}
.softitem h1 {font-size:1em; color:#000000; letter-spacing:1px;}
.softitem p {padding-bottom:0.5em;}
.softitem .top, .softitem .bottom {display:block; background:transparent; font-size:1px;}
.softitem .b1, .softitem .b2, .softitem .b3, .softitem .b4, .softitem .b1b, .softitem .b2b, .softitem .b3b, .softitem .b4b {display:block; overflow:hidden;}
.softitem .b1, .softitem .b2, .softitem .b3, .softitem .b1b, .softitem .b2b, .softitem .b3b {height:1px;}
.softitem .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.softitem .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.softitem .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.softitem .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.softitem .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.softitem .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.softitem .b1 {margin:0 5px; background:#fff;}
.softitem .b2, .softitem .b2b {margin:0 3px; border-width:0 2px;}
.softitem .b3, .softitem .b3b {margin:0 2px;}
.softitem .b4, .softitem .b4b {height:2px; margin:0 1px;}
.softitem .b1b {margin:0 5px; background:#999;}
.softitem .boxcontent
{
display:block;
background:#ccc;
color:#c0c0c0;
border-left:1px solid #fff;
border-right:1px solid #999;
}
.softitem .boxcontent, .boxcontent span {text-decoration:underline;}
a .softitem {cursor:pointer;}
a .softitem, .softitem h1 {text-decoration:none;}
.softitem:hover .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.softitem:hover .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.softitem:hover .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.softitem:hover .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.softitem:hover .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.softitem:hover .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.softitem:hover .b1 {margin:0 5px; background:#999;}
.softitem:hover .b1b {margin:0 5px; background:#fff;}
.softitem:hover .boxcontent
{
border-left:1px solid #999;
border-right:1px solid #fff;
}
</style>
</head>
<body>
<p style="position:absolute;left:32px;top:16px;">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
<div id="xsoftbox" style="position:absolute;left:32px;top:96px;">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p></p>
<div class="softitem">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1 style="color:#009999;">Hjem</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
<a href="pureCSSaccessunder.html" accesskey="n" tabindex="1">
<div class="softitem">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>U<span>n</span>derside</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
</a>
<p></p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html> |
..og dette som; pureCSSaccessunder.html
Kode <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da" xml:lang="da">
<head>
<title>Molokyle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="../ico/favicon.ico" />
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
<meta name="Title" content="Molokyle" />
<meta name="Description" content="Hjemmeside" />
<meta name="Keywords" content="Molokyle" />
<meta name="Robots" content="ALL" />
<meta name="Revisit-after" content="7" />
<meta name="Author" content="Henrik Mortensen" />
<meta http-equiv="Reply-to" content="molo@pc.dk" />
<meta name="Copyright" content="Henrik Mortensen" />
<meta http-equiv="Content-language" content="dan" />
<meta name="Rating" content="General" />
<meta name="Generator" content="Henrik Mortensen" />
<meta name="ObjectType" content="Text" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="DC.Title" content="Molokyle" />
<meta name="DC.Description" content="Hjemmeside" />
<meta name="DC.Subject" content="Molokyle" />
<meta name="DC.Creator" content="Henrik Mortensen" />
<meta name="DC.Contributor" content="ingen" />
<meta name="DC.Rights" content="Henrik Mortensen" />
<meta name="DC.Identifier" content="http://frip.dk/molokyle/temp/" />
<meta name="DC.Publisher" content="Henrik Mortensen" />
<meta name="DC.Date" scheme="ISO8601" content="2005-05-01" />
<meta name="DC.Language" scheme="NISOZ39.50" content="dan" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" scheme="MIME" content="text/html" />
<style type="text/css">
body
{
background-color:#009999;
font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:0.75em;
}
img {border:0;}
/* softbox Box */
#xsoftbox p {margin:0 10px;letter-spacing:1px;padding-bottom:1em;}
#xsoftbox {display:block;background:transparent;width:180px;}
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#000099;border-left:1px solid #fff; border-right:1px solid #fff}
.xb1 {margin:0 5px; background:#ffffff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent
{
display:block;
background:#000099;
color:#c0c0c0;
border-style:solid;
border-color: #ffffff;
border-width:0 1px;
text-align:center; /* Centering content */
}
/* softitem 3D */
.softitem {background: transparent; width:90%;margin:0 auto; cursor:default;}
.softitem h1, .softitem p {margin:0 10px;}
.softitem h1 {font-size:1em; color:#000000; letter-spacing:1px;}
.softitem p {padding-bottom:0.5em;}
.softitem .top, .softitem .bottom {display:block; background:transparent; font-size:1px;}
.softitem .b1, .softitem .b2, .softitem .b3, .softitem .b4, .softitem .b1b, .softitem .b2b, .softitem .b3b, .softitem .b4b {display:block; overflow:hidden;}
.softitem .b1, .softitem .b2, .softitem .b3, .softitem .b1b, .softitem .b2b, .softitem .b3b {height:1px;}
.softitem .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.softitem .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.softitem .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.softitem .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.softitem .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.softitem .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.softitem .b1 {margin:0 5px; background:#fff;}
.softitem .b2, .softitem .b2b {margin:0 3px; border-width:0 2px;}
.softitem .b3, .softitem .b3b {margin:0 2px;}
.softitem .b4, .softitem .b4b {height:2px; margin:0 1px;}
.softitem .b1b {margin:0 5px; background:#999;}
.softitem .boxcontent
{
display:block;
background:#ccc;
color:#c0c0c0;
border-left:1px solid #fff;
border-right:1px solid #999;
}
.softitem .boxcontent, .boxcontent span {text-decoration:underline;}
a .softitem {cursor:pointer;}
a .softitem, .softitem h1 {text-decoration:none;}
.softitem:hover .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.softitem:hover .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.softitem:hover .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.softitem:hover .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.softitem:hover .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.softitem:hover .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.softitem:hover .b1 {margin:0 5px; background:#999;}
.softitem:hover .b1b {margin:0 5px; background:#fff;}
.softitem:hover .boxcontent
{
border-left:1px solid #999;
border-right:1px solid #fff;
}
</style>
</head>
<body>
<p style="position:absolute;left:32px;top:16px;">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
<div id="xsoftbox" style="position:absolute;left:32px;top:96px;">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p></p>
<a href="pureCSSaccessmenu.html" accesskey="j" tabindex="1">
<div class="softitem">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent" style="cursor:pointer">
<h1>H<span>j</span>em</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
</a>
<p></p>
<div class="softitem">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent" style="cursor:default;">
<h1 style="color:#009999;">Underside</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html> |
Når koden bli'r 'færdig' skiller jeg den selvfølgelig ad i en *.css og en *.html fil, så det bli'r lettere at vedligeholde siderne.
Det er ren nørderi ...og lignede er ikke set på nettet endnu
</MOLOKYLE>
| |
| Kommentar Fra : Fijala |
Dato : 06-09-05 21:43 |
|
Molokyle. Det der er nørderi i mine øjne, men det er nok fordi jeg er stået af forlængst.
Jeg var inde og kigge på http://www.beautifulpeople.dk/loading.asp , ret smart med vinduer man kan flytte rundt med.
Er det din hånd. Godt gået
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 22:09 |
|
Anden_90 -> Koden er i øjeblikket til fri afbenyttelse : As is... , men UDEN support, da den ikke er færdig. Derefter vil den blive lagt på min hjemmeside med dokumentation, automatisk klip ud og sæt ind funktion og on-line support, men det bliver først om længe, da jeg vil godkendes til et af de nye pornofri EU godkendte .kid domæner :
http://politiken.dk/VisArtikel.iasp?PageID=395551
..som : http://molo.kid
..og skal have fundet en hosting løsning, samt evt. en partner eller 10
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 22:28 |
|
Anden_90 -> Eyvind er i en anden tråd ved at overtale mig til at hoste siden selv på en ekstra 'gammel' 990 Mhz. 256 Mb. og 20 Gb. HD Fujitsu/Siemens computer jeg har stående at flyde.
...men det bli'r nok en midlertidig løsning
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 22:31 |
|
Ps. Min båndbredde er i bedste fald 4 Gbit, så der sku' være hul nok igennem, selv med kandu.dk på min nuværende 'skrammelkasse' af en 790 Mhz. m. 512 Mb og 10 + 40 GB Hd'ere.
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 06-09-05 22:48 |
| | |
| Kommentar Fra : Fijala |
Dato : 09-09-05 11:17 |
|
(Fijalas søn :))
Hej!
Jeg vil meget gerne hjælpe med at lave en mere spændende side for din far.
Jeg gør det også gerne gratis - du skal bare sige til .
Og molekyle.
Jeg indrømmer blankt at min stærke side helt sikkert er grafik fremfor koder.
Men hoveddelen af de fejl W3 giver er jo CSS fejl, som manglende værdi for eksempelvis FONT-SIZE, hvilket jo ikke er kritisk.
Hvis jeg fjernede disse ting, ville antallet af fejl også blive meget mindre.
| |
| Kommentar Fra : molokyle |
Dato : 14-09-05 09:34 |
|
Fijalas søn -> Rolig nu, det er jo ikke en kritik af dig som person, men blot min måde at gøre opmærksom på at det er 'lidt' dumt at ville redde sig et lille job ved at fremvise fejlbehæftet kode ..om fejlene så er graverende eller ej
Udover at kandu.dk's parser har kludret i !DOCTYPEN har den også ædt nogle CSS a selektorer i min ovenstående kode, der også er behæftet med ALVORLIGE begynderfejl, men jeg gør jo også opmærksom på at koden ikke er færdigudviklet. Dels er der en del 'ubrugte' styles der bare fylder, men det aller aller værste er; at jeg har brugt blokelementer i et inline objekt, hvilket er forbudt.. forbudt.. forbudt !!!
Det skyldes bl.a. jeg lige er skiftet fra HTML 4.01 til XHTML 1.0 ..........til XHTML 1.1
Fijala -> ..at siden vises nogenlunde korrekt og ens på 2 forskellige maskiner fortæller mindre end ingen ting. Man bør teste sin kode på flere platforme : Windows, Unix, Linux, Mac Os i forskellige opløsninger og med flere browsere; IE, Firefox, Opera og Safari og se om resultat ser ens ud alle steder
</MOLOKYLE>
| |
| Kommentar Fra : Anden_90 |
Dato : 14-09-05 13:47 |
|
HMm.. Jeg har faktisk fået lavet et design nu.. http://mindesiden.akdc.dk men hvis det er du kan lave noget, det ville passe bedre end, som jeg ville kunne lide, så er du da meget velkommen til at prøve.. :D
| |
| Kommentar Fra : molokyle |
Dato : 19-09-05 15:27 |
|
Dét ser Ok. ud
Ps. Min ovenstående XHTML kode holder ikke vand. Jeg har konstateret at; i XHTML 1.1 må man ikke indlejre et blok element i et in-line element og der var redundans i CSS'en , såeh... Jeg var selv 'DUM'
CSS filen menu.css :
Kode <!--
body
{
background:#009999;
font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:0.75em;
}
#validation {position:absolute;left:32px;top:8px;}
img {border:0;}
/* menu */
#menu {position:absolute;left:26px;top:80px;display:block;background:transparent;width:180px;}
#menu div.menutitle {margin-top:-16px;}
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#000099;border-left:1px solid #fff; border-right:1px solid #fff}
.xb1 {margin:0 5px; background:#ffffff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
#menu .menucontent
{
display:block;
background:#000099;
color:#c0c0c0;
border-style:solid;
border-color: #ffffff;
border-width:0 1px;
text-align:center;
padding:16px;
}
/* itemup */
.itemup {background: transparent;}
.itemup .top, .itemup .bottom {display:block; background:transparent; font-size:1px;}
.itemup .b1, .itemup .b2, .itemup .b3, .itemup .b4, .itemup .b1b, .itemup .b2b, .itemup .b3b, .itemup .b4b {display:block; overflow:hidden;}
.itemup .b1, .itemup .b2, .itemup .b3, .itemup .b1b, .itemup .b2b, .itemup .b3b {height:1px;}
.itemup .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.itemup .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.itemup .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.itemup .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.itemup .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.itemup .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.itemup .b1 {margin:0 5px; background:#fff;}
.itemup .b2, .itemup .b2b {margin:0 3px; border-width:0 2px;}
.itemup .b3, .itemup .b3b {margin:0 2px;}
.itemup .b4, .itemup .b4b {height:2px; margin:0 1px;}
.itemup .b1b {margin:0 5px; background:#999;}
.itemup .itemcontent
{
display:block;
background:#ccc;
color:#000000;
border-left:1px solid #fff;
border-right:1px solid #999;
font-weight: bold;
}
a .itemup {text-decoration:none;cursor:pointer;}
a .itemup .itemcontent span.u {text-decoration:underline;}
a:hover .itemup .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
a:hover .itemup .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
a:hover .itemup .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
a:hover .itemup .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
a:hover .itemup .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
a:hover .itemup .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
a:hover .itemup .b1 {margin:0 5px; background:#999;}
a:hover .itemup .b1b {margin:0 5px; background:#fff;}
a:hover .itemup .itemcontent
{
border-left:1px solid #999;
border-right:1px solid #fff;
}
/* itemdown */
.itemdown {background: transparent;}
.itemdown .top, .itemdown .bottom {display:block; background:transparent; font-size:1px;}
.itemdown .b1, .itemdown .b2, .itemdown .b3, .itemdown .b4, .itemdown .b1b, .itemdown .b2b, .itemdown .b3b, .itemdown .b4b {display:block; overflow:hidden;}
.itemdown .b1, .itemdown .b2, .itemdown .b3, .itemdown .b1b, .itemdown .b2b, .itemdown .b3b {height:1px;}
.itemdown .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.itemdown .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.itemdown .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.itemdown .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.itemdown .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.itemdown .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.itemdown .b1 {margin:0 5px; background:#999;}
.itemdown .b2, .itemdown .b2b {margin:0 3px; border-width:0 2px;}
.itemdown .b3, .itemdown .b3b {margin:0 2px;}
.itemdown .b4, .itemdown .b4b {height:2px; margin:0 1px;}
.itemdown .b1b {margin:0 5px; background:#fff;}
.itemdown .itemcontent
{
display:block;
background:#ccc;
color:#009999;
border-left:1px solid #999;
border-right:1px solid #fff;
font-weight: bold;
cursor:default;
}
--> |
pureCSSaccessmenu.html :
Kode <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Molokyle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="../ico/favicon.ico" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
<meta name="Title" content="Molokyle" />
<meta name="Description" content="Hjemmeside" />
<meta name="Keywords" content="Molokyle" />
<meta name="Robots" content="ALL" />
<meta name="Revisit-after" content="7" />
<meta name="Author" content="Henrik Mortensen" />
<meta http-equiv="Reply-to" content="molo@pc.dk" />
<meta name="Copyright" content="Henrik Mortensen" />
<meta http-equiv="Content-language" content="dan" />
<meta name="Rating" content="General" />
<meta name="Generator" content="Henrik Mortensen" />
<meta name="ObjectType" content="Text" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="DC.Title" content="Molokyle" />
<meta name="DC.Description" content="Hjemmeside" />
<meta name="DC.Subject" content="Molokyle" />
<meta name="DC.Creator" content="Henrik Mortensen" />
<meta name="DC.Contributor" content="ingen" />
<meta name="DC.Rights" content="Henrik Mortensen" />
<meta name="DC.Identifier" content="http://frip.dk/molokyle/temp/" />
<meta name="DC.Publisher" content="Henrik Mortensen" />
<meta name="DC.Date" scheme="ISO8601" content="2005-05-01" />
<meta name="DC.Language" scheme="NISOZ39.50" content="dan" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" scheme="MIME" content="text/html" />
</head>
<body>
<div id="validation">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a><a href="http://jigsaw.w3.org/css-validator/validator?uri=referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" style="width:88px;height:31px" /></a>
</div>
<div id="menu">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="menucontent">
<div class="menutitle">
<h3>Menu</h3>
</div>
<span class="itemdown">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
Hjem
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
<br/>
<a href="pureCSSaccessunder.html" accesskey="i" tabindex="1" title="Underside">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
Unders<span class="u">i</span>de
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
<br/>
<a href="http://www.dmi.dk/" accesskey="m" tabindex="2" title="DMI">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
D<span class="u">M</span>I
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
<br/>
<a href="http://www.tv2.dk/" accesskey="t" tabindex="3" title="Tv2">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
<span class="u">T</span>v2
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
<br/>
<a href="http://www.dr.dk/" accesskey="r" tabindex="4" title="Dr">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
D<span class="u">r</span>
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html> |
..og; pureCSSaccessunder.html :
Kode <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Molokyle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="../ico/favicon.ico" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
<meta name="Title" content="Molokyle" />
<meta name="Description" content="Hjemmeside" />
<meta name="Keywords" content="Molokyle" />
<meta name="Robots" content="ALL" />
<meta name="Revisit-after" content="7" />
<meta name="Author" content="Henrik Mortensen" />
<meta http-equiv="Reply-to" content="molo@pc.dk" />
<meta name="Copyright" content="Henrik Mortensen" />
<meta http-equiv="Content-language" content="dan" />
<meta name="Rating" content="General" />
<meta name="Generator" content="Henrik Mortensen" />
<meta name="ObjectType" content="Text" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="DC.Title" content="Molokyle" />
<meta name="DC.Description" content="Hjemmeside" />
<meta name="DC.Subject" content="Molokyle" />
<meta name="DC.Creator" content="Henrik Mortensen" />
<meta name="DC.Contributor" content="ingen" />
<meta name="DC.Rights" content="Henrik Mortensen" />
<meta name="DC.Identifier" content="http://frip.dk/molokyle/temp/" />
<meta name="DC.Publisher" content="Henrik Mortensen" />
<meta name="DC.Date" scheme="ISO8601" content="2005-05-01" />
<meta name="DC.Language" scheme="NISOZ39.50" content="dan" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" scheme="MIME" content="text/html" />
</head>
<body>
<div id="validation">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a><a href="http://jigsaw.w3.org/css-validator/validator?uri=referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" style="width:88px;height:31px" /></a>
</div>
<div id="menu">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="menucontent">
<div class="menutitle">
<h3>Menu</h3>
</div>
<a href="pureCSSaccessmenu.html" accesskey="e" tabindex="1" title="Hjem">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
Hj<span class="u">e</span>m
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
<br/>
<span class="itemdown">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
Underside
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
<br/>
<a href="http://www.dmi.dk/" accesskey="m" tabindex="2" title="DMI">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
D<span class="u">M</span>I
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
<br/>
<a href="http://www.tv2.dk/" accesskey="t" tabindex="3" title="Tv2">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
<span class="u">T</span>v2
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
<br/>
<a href="http://www.dr.dk/" accesskey="r" tabindex="4" title="Dr">
<span class="itemup">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<span class="itemcontent">
D<span class="u">r</span>
</span>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</span>
</a>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html> |
Ps. Virker kun efter hensigten i : Safari, Opera og Firefox .....IE ? = STNIKS !!!
</MOLOKYLE>
| |
| Du har følgende muligheder | |
|
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
| |
|
|