Forum Mjukvara Programmering och digitalt skapande Tråd

Dreamweaver hover effect på meny.

1 2
Skriv svar
Permalänk
Medlem
●

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/a8f3fb3818f4fa8e13981e0947d00637...

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å..

Redigera
Citera flera Citera
Permalänk
Medlem
●

vad är tanken med hemsidan? ska du göra fler?

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Avstängd
●

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

Edit: Hoppas att detta är ett april-skämt!

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Stofflock:

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/a8f3fb3818f4fa8e13981e0947d00637...

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å..

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av _vanilla:

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

Edit: Hoppas att detta är ett april-skämt!

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●

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++

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●

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/

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av VincHeee:

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/

Gå till inlägget

hehe tack x) aa exakt

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av VincHeee:

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

Gå till inlägget

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?

Visa signatur

Neon
Citera mig om du vill ha svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Neonxz:

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?

Gå till inlägget

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;
}

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Stofflock:

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/a8f3fb3818f4fa8e13981e0947d00637...

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å..

Gå till inlägget

Använd inte tabeller för att göra menyn. Tabeller ska användas för att presentera data etc.

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Kebabhyvlarn:

Använd inte tabeller för att göra menyn. Tabeller ska användas för att presentera data etc.

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Stofflock:

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.

Gå till inlägget

Du kan till exempel använda divar eller listor.

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Kebabhyvlarn:

Du kan till exempel använda divar eller listor.

Gå till inlägget

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/vertical-menu-hover-effect-cs...

Sedan modifiera css-fäger och storlek till ditt tycke

Visa signatur

Neon
Citera mig om du vill ha svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●

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 redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

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;
}

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av VincHeee:

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;
}

Gå till inlägget

Du är en pudding!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Neonxz:

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?

Gå till inlägget

kan hålla med att Notepad++ suger på PHP men HTML o CSS = GULD

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Stofflock:

Du är en pudding!

Gå till inlägget

inga problem PM:a mig om du har fler frågor

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av VincHeee:

kan hålla med att Notepad++ suger på PHP men HTML o CSS = GULD

Gå till inlägget

På vilket sätt då? Har aldrig haft problem i Notepad++ när jag skriver PHP.

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag skulle rekommendera Komodo IDE 6, mycket bra program vid större projekt iallafall!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Kebabhyvlarn:

På vilket sätt då? Har aldrig haft problem i Notepad++ när jag skriver PHP.

Gå till inlägget

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++

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av VincHeee:

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++

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av PanicOutPut:

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

Gå till inlägget

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

Visa signatur

[I]YouTube.Com/WalkthroughHeroes[/I]

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av VincHeee:

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

Gå till inlägget

Vad snackar du om, det går att koda utmärkt i Dreamweaver.
Själv kör jag med det

Visa signatur

Ryzen 5950x | RTX 4090 | 64GB 3600Mhz| WD Black sn850 2TB
NAS: Unraid | 8GB 2133Mhz | ASRock C236 WSI | Intel G4600 | 32TB WD RED
YT:youtube.com/patan77xd IG:instagram.com/patan77 Webwww.patan77.com

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av VincHeee:

kan hålla med att Notepad++ suger på PHP men HTML o CSS = GULD

Gå till inlägget

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

Visa signatur

Neon
Citera mig om du vill ha svar!

Redigera
Citera flera Citera
1 2
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara