Søg
Avatar billede kasper77 Nybegynder
03. maj 2002 - 23:06 Der er 27 kommentarer og
1 løsning

Menu i css

Hejsa...

Der der nogen af jer der kan lave en menu til mig i css. Jeg har fået af vide at man med css kan lave en menu der ligner den der er på www.cliche.dk - og det er lige præcis sådan en jeg gerne vil have. Jeg ved godt at den på cliche.dk ikke er lavet i css, men det skulle kunne lade sig gøre. Håber at der er nogen der kan hjælpe.

Menuen skal laves så jeg selv kan smide nye menupunkter ind, og smide gamle ud.
Avatar billede repsac Nybegynder
03. maj 2002 - 23:08 #1
Hvad vil du give for denne menu?
Avatar billede kasper77 Nybegynder
03. maj 2002 - 23:09 #2
repsac >> Hvad skal du have?
Avatar billede werd Nybegynder
03. maj 2002 - 23:10 #3
det er jo skide nemt!! 60pts burde være nok!! Det er bare for simpelt til at jeg gider lave det!!! Læs evt. om css på www.html.dk/tutorials/css
Avatar billede repsac Nybegynder
03. maj 2002 - 23:12 #4
Hvis jeg skal arbejdet koster jeg penge, men det er nok ikke det du er interesseret i... Mit bedste råd vil være at du lærer det selv. Det bliver betydelig mere omfattende hvis du nemt (v.hj.a. eks. et admin-tool (eks. bare en txt-fil)) skal kunne sætte din menu op.

du kan lære css på www.html.dk --> css-tutorial. Desuden har du nok brug for lidt JavaScript. Færdighederne til dette kan du læse dig til på www.echoecho.com/dk --> JavaScript-haløj...
Avatar billede kasper77 Nybegynder
03. maj 2002 - 23:13 #5
werd>> Ja, alt er jo nemt når man kan ;-)
Avatar billede zob Nybegynder
03. maj 2002 - 23:13 #6
VIl du give ham det direkte link??? Werd??
Avatar billede repsac Nybegynder
03. maj 2002 - 23:14 #7
=>werd: godt du fik postet et svar! Respect lost.
Muligvis mener du det er nemt, men det kan virke aldeles nedladende på spørgsmålsstilleren at du nedgør hans spørgsmål. Jeg finder ej heller stort besvær ved at løse opgaven, men det er betydeligt sjovere at kunne lave sin egen menu og ikke mindst forstå hvordan den skal laves etc.
Avatar billede zob Nybegynder
03. maj 2002 - 23:51 #8
KAsper.....
Der er ingen som gider....
Jo de gider kan bare ik HAHA lol
Det er nogle  dovne hunde hoveder som ik tør indrømme at de er dårlige
jeg er dårlig....
MEn menu består jo bare af onmouseover og nogle links ik?
Avatar billede prodic Mester
03. maj 2002 - 23:56 #9
http://activedeveloper.dk/locator.asp?guid=001000000276

Så kan du selv forme din menu ved at gennemgå den lektion.
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:06 #10
Hej,

Der findes et par måder at gøre det på J

Først vil jeg dog anbefale du ser på CSS2 dokumationen, http://www.w3.org/TR/CSS2/ og HTML dokumationen, http://www.w3.org/TR/html4/.

Og det som vi skal have fat i er links J
CSS2 links: http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes
HTMl4 links: http://www.w3.org/TR/html4/struct/links.html

Du kan så lave f.eks.
a {
color: red;
}
a:hover {
color: yellow;
}
som betyder at på alle links i et HTMl dokument med det stylesheet der, at et alm, link uden mussen er over er farven rød (a{}), og er den (a:hover{}) er den gul.
Det kan så laves om på mange andre måder, og kombineres.

Et lille eksempel på det du spørger om kunne være:
a.menu {
width: 100px;
background-color: red;
color: white;
display: block;
}
a.menu:hover {
width: 100px;
background-color: #4B0303;
color: white;
display: block;
}
hvis vi tager dem 1 får 1,
width: 100px; gør linket 100px; bredt på skærmen;
background-color: red; gør baggrundsfarven på linket rødt
color: white; gør teksten hvid
display: block; hviser linket som et block element (eller ville .f.eks. width ikke kunne være sat, eller jo det kunne godt, men ville ikke blive vidst i f.eks. Mozilla).

Mere om background: http://www.w3.org/TR/CSS2/colors.html#background-properties
Mere om width: http://www.w3.org/TR/CSS2/visudet.html#the-width-property
Mere om color: http://www.w3.org/TR/CSS2/colors.html#colors
Mere om display: http://www.w3.org/TR/CSS2/visuren.html#display-prop


Et helt eksempel lige til at copy’n’paste:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>X</title>
<style type="text/css">
a.menu {
width: 100px;
background-color: red;
color: white;
display: blocK;
}
a.menu:hover {
width: 100px;
background-color: #4B0303;
color: white;
display: blocK;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<a href="gogo.html" class="menu">menu</a>


</body>
</html>


men jeg vil da lige nævne en løsning til J
<div style="background-color: red; cursor: hand; color: white; width: 200px;" OnClick="location.href='hej.html'">
test
</div>

sådan kan du også lave et link, selvom jeg ikke lige vil anbefale det J


Casper S // http://www.ildstorm.dk
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:07 #11
Underligt, den indsætter nogle J hidst og her J'erne skulle have været :-) (det må være mit skrive program)
Avatar billede kasper77 Nybegynder
04. maj 2002 - 00:16 #12
Det er jo perfekt! Hvordan får jeg menuen til at være vandret, når jeg indsætter flere af disse: <a href="gogo.html" class="menu">menu</a>

Så fortsætter menuen nedaf, jeg vil gerne have den til at fortsætte henaf siden, så menuen er som en linie i toppen, og linien går helt ud til højre i siden.
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:22 #13
sidte margin: 0px; i dit body tag.
så kan de bruges old dirthy tabeller, så det gør vi.

lav en tabel, med 3 celler i, lig width: 33%; i hver celle, i din a {} og a:hover{} ændre du width: 100px; til width: 100%;

hvis du vil, sidter du  cellpadding, cellspacing, border, til 0 i den table.

sådan!
Avatar billede kasper77 Nybegynder
04. maj 2002 - 00:24 #14
xzxzx-kan-ikke-logge >> Det fattede jeg ikke helt, kan du prøve at forklare det på en anden måde, eller sætte det ind i kildekoden hvor det skal være?
Avatar billede zob Nybegynder
04. maj 2002 - 00:26 #15
Lukker og slukker det er nok det mest fornuftige.....
Skal spillle bordtennis kl 9.30 YES MAN
Avatar billede zob Nybegynder
04. maj 2002 - 00:30 #16
Vil du se hvordan den skal se ud kasper??
så er den her...
www.friserverplads.dk/zob/menu.html
Avatar billede kasper77 Nybegynder
04. maj 2002 - 00:32 #17
zob >> Ja, det har jeg fundet ud af. Problemet er at jeg skal have flere links vandret. Sætter jeg flere links ind kommer de nedenunder.
Avatar billede zob Nybegynder
04. maj 2002 - 00:33 #18
der er den med center....
og noget andet en RØD
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:33 #19
kasper77 >> ja kan godt forklare det på en anden måde,
brug <table>

ex.
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>

<td></td> hvert set af den er placeret på en linie, <tr></tr> er en ny linie. For at den skal gå fra højre til venstre side, må vi fortæller at <table> skal være 100% lang, det gøres med style="width:100%;".

så skal vi for tæller at hvert <td> skal være 33% lang, du får 3. gæt til det :).

Så langt så godt, hvis du brøver at indsætte border="1" i din <table> skulle der gerne være noget 3 firkanter.

Så kan du indsætte <a href="gogo.html" class="menu">menu</a> i hvert af de 3. <td></td>'er ex.
<td><a href="gogo.html" class="menu">menu</a></td>.

Nu har vi så i midt tidligere eksempel fortalt at alle <a> tags med classen menu, er 100px lang (width: 100px;) det skal laves om til at den skal være width: 100%; lang. altså width: 100px; skal erstattes med width: 100%;

Resultatet skulle gerne være at alle <a> tags bliver 100% lange af den 33% lange <table> celle (<td>). Hvis du vil indæstte f.eks. 4 <a> tags i skal den laves om til 25%, selvfølgelig :).


prøv ev. at ligge cellspacing="0" og cellpadding="0" i dit <table> tag.







et færdigt eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>X</title>
<style type="text/css">
a.menu {
width: 100%;
background-color: red;
color: white;
text-align: center;
display: blocK;
}
a.menu:hover {
width: 100%;
background-color: #4B0303;
color: white;
text-align: center;
display: blocK;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="margin: 0px;">
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 33%;">
<a href="gogo.html" class="menu">menu</a>
</td>
<td style="width: 33%;">
<a href="gogo.html" class="menu">menu</a>
</td>
<td style="width: 33%;">
<a href="gogo.html" class="menu">menu</a>
</td>
</tr>
</table>


</body>
</html>
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:36 #20
Syntes du ikke at dit eksempel, www.friserverplads.dk/zob/menu.html ligner meget mit andet end farverne :)?

For resten tak for points.
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:36 #21
Den er til zop
Avatar billede kasper77 Nybegynder
04. maj 2002 - 00:38 #22
Tak for det:-)
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:38 #23
np
Avatar billede zob Nybegynder
04. maj 2002 - 00:40 #24
www.friserverplads.dk/zob/menu.html
Så kig nu....
Avatar billede zob Nybegynder
04. maj 2002 - 00:41 #25
jo jo selvfølig kug selv på cssen det er den.....
Laver bare så den passer til mine farver giver kasper77 nogle ekspempler :)
Avatar billede zob Nybegynder
04. maj 2002 - 00:43 #26
JEg er ret god til at efterligne ik??... :-/
Avatar billede xzxzx-kan-ikke-logge Nybegynder
04. maj 2002 - 00:45 #27
undskyld, troede bare at det fremstod som du selv havde lavet den. Læste det ikek godt nok, er træt :).

og friservplads er for resten nede, vidst. he :)
Avatar billede werd Nybegynder
04. maj 2002 - 01:14 #28
du har ret repsac, ville bare sige at jeg var for doven ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Se alle it-kurser fra Computerworld Kurser
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.
Se alle it-kurser

Flere spørgsmål fra Småopgaver kategorien

Titel Indlæg Oprettet Seneste aktivitet
Negativ billeder på samsung Af ALICE i Småopgaver 2 16/01/202610:29 16/01/202618:31
Flytte mappe fra stationær til bærbar Af valby i Småopgaver 20 07/05/202520:51 10/05/202513:43
Hjælp til DC motorstyring Af axel21 i Småopgaver 7 06/03/202522:34 10/03/202518:51
Gode råd til kommende supporter Af SilentSloth i Småopgaver 4 31/12/202423:10 01/01/202515:09
Udregning af vinkel på brædder. Af Peter i Småopgaver 14 11/12/202415:12 13/12/202415:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »