Sidan 1 av 2 1 2
 
Verktyg Visningsval
2012-04-01, 12:46   #1

Stofflock

Medlem

Registrerad: dec 2011

Dreamweaver hover effect på meny.


Hej! Håller på att bygga min hemsida i Dreamweaver och skulle behöva lite råd angående meny och hover effects.

Såhär ser hemsidan ut för tillfället: http://cdn.imghack.se/images/a8f3fb3...0947d00637.png

Jag skulle vilja göra så att när jag håller över en av cellerna i tabellen så ska bakgrundsbilden bli samma som header färgen. Smidigaste och enklaste sättet att göra detta på?

Ps. Detta är den första hemsidan jag gör i dreamweaver så..
Stofflock är inte uppkopplad
2012-04-01, 12:53   #2

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

vad är tanken med hemsidan? ska du göra fler?
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 12:57   #3

Stofflock

Medlem

Registrerad: dec 2011

Tanken med hemsidan är att göra en personsida till min pappa, asså typ lite info om han själv, vad han jobbar med, ett formulär på kontakt delen. Tror jag kommer att göra fler eftersom jag tycker att det lilla jag har gjort än så länge har varit roligt.
Stofflock är inte uppkopplad
2012-04-01, 13:00   #4

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

okej om du planerar att fortsätta ska du INTE använda Dreamweaver utan lära dig att koda!

Läs på om HTML, CSS, ev JavaScript

skicka din kod så kan jag hjälpa dig med ditt lilla problem, föll också för webdeisgn när jag såg dreamweaver men börja älska det när jag börja koda istället
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 13:04   #5

_vanilla

Avstängd

_vanillas avatar

Registrerad: jan 2012

KungKeno, Görans hemsida?
Detta bådar inte gott!


Edit: Hoppas att detta är ett april-skämt!
__________________
iPeek #1: AMD 1100T @ 4.8GHz 16GB @H2O
iPeek #1: AMD 1100T @ 4.8GHz 16GB @H2O
iPeek #1: INTEL CELERON @ 2.80GHz 1GB
iPeek #2: INTEL ATOM x8 @ 2.80GHz 4GB
Skollaptop: Macbook AIR 13" 2011, 128GB, 4GB
_vanilla är inte uppkopplad
2012-04-01, 13:04   #6

nanberg8

Medlem

Registrerad: nov 2010

Citat:
Ursprungligen inskrivet av Stofflock Visa inlägg
Hej! Håller på att bygga min hemsida i Dreamweaver och skulle behöva lite råd angående meny och hover effects.

Såhär ser hemsidan ut för tillfället: http://cdn.imghack.se/images/a8f3fb3...0947d00637.png

Jag skulle vilja göra så att när jag håller över en av cellerna i tabellen så ska bakgrundsbilden bli samma som header färgen. Smidigaste och enklaste sättet att göra detta på?

Ps. Detta är den första hemsidan jag gör i dreamweaver så..
Jag är inte helt säker men i css filen tror jag man skriver li a:hover color:"green" . Jag utgår ifrån att du redan har gjort länkarna i cellerna. Som sagt är jag inte alls säker men prova med detta
__________________
Intel 2500k - MSI Z77MA-G45 - MSI 660 - Corsair Vengence 8GB -Fractal Design R2 - Intel 520 120GB - Corsair AX850W
nanberg8 är inte uppkopplad
2012-04-01, 13:05   #7

Stofflock

Medlem

Registrerad: dec 2011

Okej, tack så mycket
Vilket är det smidigaste sättet att skicka koden? asså ska jag typ zippa alla filer eller ska jag copy pastea css och html filernas innehåll här direkt?
Stofflock är inte uppkopplad
2012-04-01, 13:07   #8

Stofflock

Medlem

Registrerad: dec 2011

Citat:
Ursprungligen inskrivet av _vanilla Visa inlägg
KungKeno, Görans hemsida?
Detta bådar inte gott!


Edit: Hoppas att detta är ett april-skämt!
Nope inget skämt detta. Tycker det är idiotiskt att trolla folk som verkligen anstränger sig att hjälpa en.

Edit: Jag suger på att komma på namn så jag döpte min dator till KungKeno och Göran är min pappas namn.
Stofflock är inte uppkopplad
2012-04-01, 13:13   #9

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

kopiera bara koden från programmet på kod-delen och in här en post för HTML en för CSS.

Jag skriver kod i Notepad++
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 13:20   #10

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

ojdå den koden var inte så fin x) men vill du typ ha som jag har här på min meny? http://123design.se/projekt/
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 13:27   #11

Stofflock

Medlem

Registrerad: dec 2011

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
ojdå den koden var inte så fin x) men vill du typ ha som jag har här på min meny? http://123design.se/projekt/
hehe tack x) aa exakt
Stofflock är inte uppkopplad
2012-04-01, 13:45   #12

Neonxz

Medlem

Neonxzs avatar

Plats: Stockholm

Registrerad: aug 2008

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
okej om du planerar att fortsätta ska du INTE använda Dreamweaver utan lära dig att koda!

Läs på om HTML, CSS, ev JavaScript

skicka din kod så kan jag hjälpa dig med ditt lilla problem, föll också för webdeisgn när jag såg dreamweaver men börja älska det när jag börja koda istället
Lära sig koda true, men jag tycker Dreamweaver lätt har bästa kodeditorn när det kommer till HTML, CSS och PHP.

ontopic: Du kan inte skicka koden för din tabell/vänstermeny?
__________________
Neon
Citera mig om du vill ha svar!
Neonxz är inte uppkopplad
2012-04-01, 13:53   #13

Stofflock

Medlem

Registrerad: dec 2011

Citat:
Ursprungligen inskrivet av Neonxz Visa inlägg
Lära sig koda true, men jag tycker Dreamweaver lätt har bästa kodeditorn när det kommer till HTML, CSS och PHP.

ontopic: Du kan inte skicka koden för din tabell/vänstermeny?
Jo, sure men som påpekades innan, inte den vackraste koden och jag tror inte jag har lyckats få in tabellen i en div tag om det nu ska funka.

Html:

<div id="left_menu">
<table width="230" height="352" border="1" align="center">
<tr>
<td>Om mig</td>
</tr>
<tr>
<td>Aktuellt</td>
</tr>
<tr>
<td> Tjänster</td>
</tr>
<tr>
<td>Referenser</td>
</tr>
<tr>
<td>Kontakt</td>
</tr>
</table>
</div>

CSS:


#left_menu {
position: absolute;
height: 660px;
width: 250px;
float: left;
left: 0px;
top: 150px;
border-bottom-left-radius: 50px 50px;
-moz-border-radius-topleft: 50px 50px;
background-color: #D6D6D6;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000;
border-right-color: #666666;
border-bottom-color: #000;
border-left-color: #000;
color: #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
border-right-width: 2px;
padding-top: 40px;
box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
}
Stofflock är inte uppkopplad
2012-04-01, 13:56   #14

Kebabhyvlarn

Medlem

Kebabhyvlarns avatar

Plats: Svearike

Registrerad: mar 2011

Citat:
Ursprungligen inskrivet av Stofflock Visa inlägg
Hej! Håller på att bygga min hemsida i Dreamweaver och skulle behöva lite råd angående meny och hover effects.

Såhär ser hemsidan ut för tillfället: http://cdn.imghack.se/images/a8f3fb3...0947d00637.png

Jag skulle vilja göra så att när jag håller över en av cellerna i tabellen så ska bakgrundsbilden bli samma som header färgen. Smidigaste och enklaste sättet att göra detta på?

Ps. Detta är den första hemsidan jag gör i dreamweaver så..
Använd inte tabeller för att göra menyn. Tabeller ska användas för att presentera data etc.
__________________
ArmA forumsdel
"I min data så har jag en stor hårddisk som rymmer massa dator"
Kebabhyvlarn är inte uppkopplad
2012-04-01, 13:59   #15

Stofflock

Medlem

Registrerad: dec 2011

Citat:
Ursprungligen inskrivet av Kebabhyvlarn Visa inlägg
Använd inte tabeller för att göra menyn. Tabeller ska användas för att presentera data etc.
Ah okej.
Hur ska man göra det istället? För jag skulle gärna vilja ha någon slags avgränsning utav de olika ämnena.
Stofflock är inte uppkopplad
2012-04-01, 14:12   #16

Kebabhyvlarn

Medlem

Kebabhyvlarns avatar

Plats: Svearike

Registrerad: mar 2011

Citat:
Ursprungligen inskrivet av Stofflock Visa inlägg
Ah okej.
Hur ska man göra det istället? För jag skulle gärna vilja ha någon slags avgränsning utav de olika ämnena.
Du kan till exempel använda divar eller listor.
__________________
ArmA forumsdel
"I min data så har jag en stor hårddisk som rymmer massa dator"
Kebabhyvlarn är inte uppkopplad
2012-04-01, 14:23   #17

Neonxz

Medlem

Neonxzs avatar

Plats: Stockholm

Registrerad: aug 2008

Citat:
Ursprungligen inskrivet av Kebabhyvlarn Visa inlägg
Du kan till exempel använda divar eller listor.
Listor är smidigare i nästan alla fall när det kommer till menyer tycker jag Kolla den här tutorialn kanske, orkade inte läsa den själv men ser ut vara bra beskrivning.

http://learnwebdesignonline.com/vert...ver-effect-css

Sedan modifiera css-fäger och storlek till ditt tycke
__________________
Neon
Citera mig om du vill ha svar!
Neonxz är inte uppkopplad
2012-04-01, 14:23   #18

simowewe

Medlem

Plats: Mjölby

Registrerad: jul 2011

En snabb och förenklad guide!

En meny görs lättast och smartast med taggarna <ul>, <li> samt <a>.

<ul> - Står för "Unordered list" och begränsar din lista med "list item"s <li>, för att sedan göra knapparna klickbara behövs <a>

Exempel:

<ul id="meny">
 <li><a href="index.html">Hem</a></li>
 <li><a href="forum.html">Forum</a></li>
 <li><a href="ommig.html">Om mig</a></li>
</ul>
Vidare förklaring av koden:

Som jag förstått har du bara använt dreamweaver så det kan vara bra att förklara lite grunder i koden.
Nästan varje html-element består av "tags" och "attributes", en tag är till exempel <ul>, <li>, <a>, <div>, <table> osv..
I dessa kan du ange attributes, som jag gjorde med <ul id="meny"> där "meny" syftar på det stil-id som elementet ska hämta sin css-information ifrån.
Vidare har vi en till attribut som heter href="" som syftar på vilken sida man ska hamna på när man klickar på länken<a></a>.

För att snygga till det hela behövs det lite css-kod.

En sådan här lista kommer att vara väldigt ful och se ut ungefär som en punktlista i word innan man snyggar till den med hjälp av css.

CSS:

ul#meny {
padding: 0px;
margin: 0px;
}

ul#meny li {
list-style-type: none;
}

ul#meny li a {
padding: 5px;
background: #2a2a2a;
font: 11px Tahoma;
color: #ffffff;
text-decoration: none;
}

ul#meny li a:hover {
background: #ffffff;
color: #2a2a2a;
}
Förklaring av CSS:

Först börjar vi med att deklarera vad för typ av element som din stil är skapad för, detta görs vida ul#meny {}, alltså elementet är av typen <ul>.
Sedan vill vi ställa in padding och margin, läst på om detta på internet ifall du inte har koll på det!
Sedan skapar vi en stil för alla <li>-element som är INOM <ul id="meny">här</ul>, och bestämmer att alla dessa ska inte ha någon list-style-type vilket innebär att de inte kommer ha en punkt, fyrkant, streck eller numrering som är vanligt vid en lista.
Efter det går vi vidare och skapar en stilmall för alla <a>-element INOM <li> som är inom <ul id="meny">! Där bestäms återigen padding, men även bakgrund, typsnitt, textfärg och text-decoration (Innebär att texten inte stryks under när den är länk).
Slutligen bestäms det :hover som är en selector inom css (läs om den på internet). Denna bestämmer i detta fall vad som ska hända när man drar musen över ett <a>-element som är inom <li> som i sin tur är inom <ul id="meny">. Där bestäms en ny bakgrundsfärg och text-färg!

Hoppas att denna korta guide hjälper!
MVH, Simon

Senast redigerad av simowewe 2012-04-01 klockan 14:32.
simowewe är inte uppkopplad
2012-04-01, 14:37   #19

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

Klar TS!

resultat: http://imageshack.us/f/571/visap.jpg/ (håller över den som är grön)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Arguti Management</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="pic">
</div>
</div>

<div id="left_menu">
<ul>
<li><a href="#">Om mig</a></li>
<li><a href="#">Aktuellt</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Referenser</a></li>
<li><a href="#">Kontakt</a></li>

</ul>
</div>

</div>
</body>
</html>

CSS:

body {
background-image:url(metalicbackground.jpg);
background-repeat:repeat;
}

#container {
background-color:#FFF;
margin:0 auto;
height:850px;
width:750px;
border-top-left-radius: 50px 50px;
border-bottom-right-radius: 50px 50px;
border-top-right-radius: 50px 50px;
border-bottom-left-radius: 50px 50px;
-moz-border-radius-topleft: 50px 50px;
-moz-border-radius-topright: 50px 50px;
-moz-border-radius-bottomright: 50px 50px;
}

#header {
height: 130px;
width: 750px;
text-align: center;
padding-top: 20px;
background-color: #33BD24;
left: 0px;
top: 0px;
border-top-left-radius: 50px 50px;
border-top-right-radius: 50px 50px;
-moz-border-radius-topleft: 50px 50px;
-moz-border-radius-topright: 50px 50px;
}

#pic {
background-image:url(argutimanagement2.png);
width:250px;
height:115px;
margin:0 auto;
}

#left_menu {
height: 700px;
width: 250px;
float: left;
border-bottom-left-radius: 50px 50px;
border-right-style: solid;
border-bottom-style: none;
border-right-color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
}

#left_menu ul {
margin:0;
padding:0;
}

#left_menu ul li {
text-align: center;
list-style:none;
border-bottom:1px solid;
background-color:#FFF;
}

#left_menu ul li:hover {
background-color:#33d533;
}

#left_menu ul li a {
color:#000;
text-decoration:none;
font-size:18px;
font-weight:normal;
}
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 14:37   #20

Stofflock

Medlem

Registrerad: dec 2011

Kan inte mer än tacka och buga återigen för allas engagemang och hjälp. Uppskattas enormt mycket! Återkommer med resultat som förhoppningsvis inte innehåller några tabeller som ska vara meny
Stofflock är inte uppkopplad
2012-04-01, 14:39   #21

Stofflock

Medlem

Registrerad: dec 2011

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
Klar TS!

resultat: http://imageshack.us/f/571/visap.jpg/ (håller över den som är grön)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Arguti Management</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="pic">
</div>
</div>

<div id="left_menu">
<ul>
<li><a href="#">Om mig</a></li>
<li><a href="#">Aktuellt</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Referenser</a></li>
<li><a href="#">Kontakt</a></li>

</ul>
</div>

</div>
</body>
</html>

CSS:

body {
background-image:url(metalicbackground.jpg);
background-repeat:repeat;
}

#container {
background-color:#FFF;
margin:0 auto;
height:850px;
width:750px;
border-top-left-radius: 50px 50px;
border-bottom-right-radius: 50px 50px;
border-top-right-radius: 50px 50px;
border-bottom-left-radius: 50px 50px;
-moz-border-radius-topleft: 50px 50px;
-moz-border-radius-topright: 50px 50px;
-moz-border-radius-bottomright: 50px 50px;
}

#header {
height: 130px;
width: 750px;
text-align: center;
padding-top: 20px;
background-color: #33BD24;
left: 0px;
top: 0px;
border-top-left-radius: 50px 50px;
border-top-right-radius: 50px 50px;
-moz-border-radius-topleft: 50px 50px;
-moz-border-radius-topright: 50px 50px;
}

#pic {
background-image:url(argutimanagement2.png);
width:250px;
height:115px;
margin:0 auto;
}

#left_menu {
height: 700px;
width: 250px;
float: left;
border-bottom-left-radius: 50px 50px;
border-right-style: solid;
border-bottom-style: none;
border-right-color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
}

#left_menu ul {
margin:0;
padding:0;
}

#left_menu ul li {
text-align: center;
list-style:none;
border-bottom:1px solid;
background-color:#FFF;
}

#left_menu ul li:hover {
background-color:#33d533;
}

#left_menu ul li a {
color:#000;
text-decoration:none;
font-size:18px;
font-weight:normal;
}
Du är en pudding!
Stofflock är inte uppkopplad
2012-04-01, 14:39   #22

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

Citat:
Ursprungligen inskrivet av Neonxz Visa inlägg
Lära sig koda true, men jag tycker Dreamweaver lätt har bästa kodeditorn när det kommer till HTML, CSS och PHP.

ontopic: Du kan inte skicka koden för din tabell/vänstermeny?
kan hålla med att Notepad++ suger på PHP men HTML o CSS = GULD
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 14:40   #23

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

Citat:
Ursprungligen inskrivet av Stofflock Visa inlägg
Du är en pudding!
inga problem PM:a mig om du har fler frågor
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 14:42   #24

Kebabhyvlarn

Medlem

Kebabhyvlarns avatar

Plats: Svearike

Registrerad: mar 2011

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
kan hålla med att Notepad++ suger på PHP men HTML o CSS = GULD
På vilket sätt då? Har aldrig haft problem i Notepad++ när jag skriver PHP.
__________________
ArmA forumsdel
"I min data så har jag en stor hårddisk som rymmer massa dator"
Kebabhyvlarn är inte uppkopplad
2012-04-01, 14:48   #25

simowewe

Medlem

Plats: Mjölby

Registrerad: jul 2011

Jag skulle rekommendera Komodo IDE 6, mycket bra program vid större projekt iallafall!
simowewe är inte uppkopplad
2012-04-01, 14:52   #26

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

Citat:
Ursprungligen inskrivet av Kebabhyvlarn Visa inlägg
På vilket sätt då? Har aldrig haft problem i Notepad++ när jag skriver PHP.
när man skriver HTML, CSS kod så blir koden blå, röd osv när man skriver ett ord som har en mening för ex HTML, den visar inga färger för PHP som ConText gör. går ju såklart att skriva i Notepad++
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 15:08   #27

PanicOutPut

Medlem

PanicOutPuts avatar

Plats: YZ

Registrerad: jul 2009

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
när man skriver HTML, CSS kod så blir koden blå, röd osv när man skriver ett ord som har en mening för ex HTML, den visar inga färger för PHP som ConText gör. går ju såklart att skriva i Notepad++
För mig visar Notepad++ färger när jag kodar. Såvida jag sparar filen som .php eller berättar för Notepad++ att jag skriver php. Allting kan ju inte vara helt automagiskt
__________________
Silverstone TJ08-E|Seasonic X-750|Asus M5A88-M Evo|AMD Phenom II 1090T|Corsair H60|Corsair XMS3 4GB|Gainward GTX275 (Accelero)|Crucial M4 64GB|Scythe KM03-BK|Samsung BD-ROM
PanicOutPut är uppkopplad nu
2012-04-01, 16:02   #28

VincHeee

Medlem

VincHeees avatar

Registrerad: jan 2011

Citat:
Ursprungligen inskrivet av PanicOutPut Visa inlägg
För mig visar Notepad++ färger när jag kodar. Såvida jag sparar filen som .php eller berättar för Notepad++ att jag skriver php. Allting kan ju inte vara helt automagiskt
såklart vet jag om att man måste spara den i ex html för att den ska visa html kommandon i färg men php funkade inte när jag testa...skumt
__________________
YouTube.Com/WalkthroughHeroes
VincHeee är inte uppkopplad
2012-04-01, 16:05   #29

Patan77

Medlem

Patan77s avatar

Plats: Stockholm

Registrerad: feb 2009

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
okej om du planerar att fortsätta ska du INTE använda Dreamweaver utan lära dig att koda!

Läs på om HTML, CSS, ev JavaScript

skicka din kod så kan jag hjälpa dig med ditt lilla problem, föll också för webdeisgn när jag såg dreamweaver men börja älska det när jag börja koda istället
Vad snackar du om, det går att koda utmärkt i Dreamweaver.
Själv kör jag med det
__________________
EVGA Classified SR2 | 48GB 1600mhz | 2st xeon x5650 4ghz 24 trådar | GTX 780 6GB
Mitt Galleri: http://www.sweclockers.com/galleri/6...600mhz-patan77
Min Hemsida: www.patan77.com
Patan77 är inte uppkopplad
2012-04-01, 16:06   #30

Neonxz

Medlem

Neonxzs avatar

Plats: Stockholm

Registrerad: aug 2008

Citat:
Ursprungligen inskrivet av VincHeee Visa inlägg
kan hålla med att Notepad++ suger på PHP men HTML o CSS = GULD
testade notepad++ för nått år sedan.. Upplevde då att Dreamweaver kompletterade koden bättre och man smidigare kunde hitta se möjliga CSS-alternativ när man fått hjärnsläpp. Sedan har Dreamweaver skönt tab-upplägg för alla filerna som importeras till HTML-dokumentet, .js, .php, .css osv. Plus inbyggd FTP som sparar korrekt server för varje projekt.

Men inte gett N++ en ordentlig chans egentligen, möjligt den är bättre än vad jag ger den creds
__________________
Neon
Citera mig om du vill ha svar!
Neonxz är inte uppkopplad
Senaste nyheterna

Redaktionens senaste nyhetsrubriker

Sök jobb