Gå till innehåll
Just nu i M3-nätverket

Hur ser min kod ut? bra eller åt ..........


Rickard.v

Rekommendera Poster

  • Svars 65
  • Created
  • Senaste svar
jespersultan

<a href="w3.org"><div id="w3c"></div></a>

 

För övrigt tycker jag att det är snyggare, modernare och smidigare att köra med listor istället för JS på din docka. Även på w3c-länken

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Ser besökaren någon skillnad på css listor i min docka??

 

Kan man ha rollover i css?? på silentum lät det inte så.

 

Tack för länk koden. Ska testa.

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Länken funkar fint. Hur lägger jag till _blank ??

Länk till kommentar
Dela på andra webbplatser

jespersultan

<a href="#" target="_blank>

 

Rollover i CSS funkar mycket enkelt. Vet ej om det är någon direkt skillnad på utseendet men det underlättar ditt arbete väldigt.

 

]<ul>
<li><a href="#">Länk1</a></li>
<li><a href="#">Länk2</a></li>
<li><a href="#">Länk3</a></li>
</ul>

Sätt ut bakgrundsbilder på listorna (lägg till klasser).

li.länk1
{ 
  background-image: url(../images/image.png);  
   /*Övriga attributer*/
}

li.länk1:hover
{ 
   background-image: url(../images/rollover-image.png);
}

Helt utan Javascript.

 

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Vadå lägg till. Vet hur man lägger till men vadå klass?? för vad med vad?

Länk till kommentar
Dela på andra webbplatser

jespersultan

Jag antar att du inte ska ha samma bild på alla länkar. Så lägg till en bild för varje klass. I.e.

 

<li class="vw"></li>
<li class="foto"></li>

 

 

.vw
{
background-image: url(vw.png);
}

 

etc.

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Jesper din länk kod är inte riktigt rätt säger w3c.

Länk till kommentar
Dela på andra webbplatser

jespersultan

Huvudsaken är att det funkar ;)

 

Man behöver fulla källkoden för att allt validerat av w3c, enskilda taggar funkar sällan.

 

Om du menar target _blank så ska det givetvis vara <a href="#" target="_blank">. Missade slutcitat.

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Ja du kanske har rätt. Flyttade om lite i koden. Då är den ok enligt w3c men länken funkar inte.

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Jobbar med css koden nu till min sk docka.

 

Ditt inlägg 19:31

 

Jag tror att jag ska infoga den css koden du visar en gång för varje bild jag har i dockan eftersom varje bild är olika.

Annars funkar en kodsnutt till alla bilder om de är lika.

Kollar på w3 o då lägger man bara in koden en gång eftersom exemplet är med text o bakgrunds färg.

 

Tänker jag rätt?

 

igår 20:14

Ska html koden ligga efter varje rad i den du visar 19:31.

Alltså:

<li><a href="#">Länk1</a> class="vw" </li> eller vad????????

Länk till kommentar
Dela på andra webbplatser

jespersultan

Du lägger in en html-lista som vanligt.

 

<ul>
<li></li>
<li></li>
</ul>

 

 

Men eftersom varje lista ska ha olika bilder slänger du in en klass i var.

 

 

<ul>
<li class="vw"></li>
<li class="foto"></li>
</ul>

 

 

Och lägger in en bakgrundsbild för varje i CSS

 

li.vw
{
background-image:url(images/vw.png);
}

li.foto
{
background-image:url(images/foto.png);
}

 

 

Sen för att få listan att bli klickbar får du antingen sätta width/height på den eller padding samt sätta <a> innan <li>

 

Alltså:

 

#din-navigation li
{
width:50px;
height:10px;
/*eller*/
padding:10px 15px 10px 15px;
/*Där 10px är top/bottom och 15px är vänster/höger*/
}

<ul>

<a href="#"<li class="vw"></li></a>

<a href="#"<li class="foto"></li></a>

</ul>

 

Hoppas du förstår, annars är det en bra idé att kolla någons källkod. Exempelvis http://apple.com. Högerklick -> Visa Källkod -> Leta upp #nav med en lista.

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Ja får nog kolla någon annanstans för det du skriver ger ingen helhet.

 

Silentium var är du??

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Kollade på appels kod o det är massor med javascript men hittar inget css alls. Men nu är inte jag någon expert så letade kanske inte så bra.

Länk till kommentar
Dela på andra webbplatser

jespersultan

Okej vi säger såhär då.

 

Du vet vad en lista är: <li>

I listan kan du sätta ut en bakgrundsbild med hjälp av CSS:

 

li {
background-image:url(image.png)
}

 

 

Om du exempelvis sätter ut två listor till din docka kommer ju nu båda ha samma bild, därför får du lägga till en klass i var lista.

I exempelvis <li class="VW"> har du din VW-bild. I CSS:

 

.VW {
background-image:url(VW.jpg);
}

 

 

Nu har du en lista med en bakgrundsbild. För att få den länkad till den sida du vill ha sätter du ut <a> framför den. Den fungerar likadant som ett vanligt <a>, där listan är istället för texten. Såhär:

 

<a href="din_länk.html"><li class="VW"></li></a>

 

Det fungerar exakt som din w3c-länk.

 

<a href="http://w3.org" target="_blank"><div id="w3c"></div></a>

Fast istället för <div id="w3c"></div> använder du <li class="VW"></li>

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Varför ska jag ha 2listor?

 

Hur väver jag ihop hover o link med .vw ??

 

Har kopierat kod från webdesign skolan o fixat några timmar. Listan funkar med onmouse osv och jag kan få dit samma bild i varje rad i listan men med flera bilder är det kört.

Länk till kommentar
Dela på andra webbplatser

jespersultan

Du ska ha en lista (<ul>) men flera List Items (<li>)

 

Klassen .VW kan du ändra värden på, tex en annan bakgrundsbild med hjälp av .VW:hover.

 

Ex:

 

.VW{
bakground-image:url(VW.jpg);
}

.VW:hover {
background-image:url(VW_rollover.jpg);
}

 

Kan du kopiera koden hit så jag får se hur långt du kommit?

 

 

 

 

Länk till kommentar
Dela på andra webbplatser

Rickard.v

NU börjar det likna något som du lagt in så jag börjar fatta.

 

Jag har gett upp. Vill ha något att kopiera in. Kan för lite för att förstå dina stöd ord.

 

Kan du länka någon sida du gjort så kan jag kolla i koden.

Länk till kommentar
Dela på andra webbplatser

silentium

Ja får nog kolla någon annanstans för det du skriver ger ingen helhet.

 

Silentium var är du??

 

Här är jag :)

 

 

Har försökt hänga med och skummat igenom de senaste inläggen och fattat det hela som att man försöker förklara hur man gör en meny med specifika bilder till varje alternativ som sedan byter bild när man går över.

 

Till att börja med detta att rickard evigt tar upp att han vill ha sin kod validerad mot W3C förstår jag inte varför ni ger förslaget att skriva

<a href="#"><li class="wv"></li></a>

då detta INTE är godkänt av W3C.

 

Men nu till problemet vi ska lösa, menyn.

 

Jag förstår tankesättet med olika klasser, men att krångla till det så... Här är istället något jag fixade ihop lite snabbt och enligt mig är väldigt mycket enklare. Fungerar även UTAN listor om du vill göra en annan meny senare utan lista rickard.

 

HTML

<a href="#" class="navimg1"> </a>
<a href="#" class="navimg2"> </a>

 

Fyller länkarna med ett blanksteg ( , det är därför du ser ett tomt mellanrum mellan > </a> så att det inte är helt tomma då webbläsaren tar   som innehåll) och ger varje länk en egen klass (kan också vara en id om den endast ska användas i denna menyn).

 

CSS

a {
padding: 5px;
display: block;
text-decoration: none;
width: 95px;
height: 65px;
}

.navimg1 {
background: url(img1.gif) no-repeat;
}
.navimg1:hover {
background: url(img2.gif) no-repeat;
}

.navimg2 {
background: url(img2.gif) no-repeat;
}
.navimg2:hover {
background: url(img1.gif) no-repeat;
}

 

Först sätter jag lite allmänna CSS regler för länkarna. Sätter bla storlek på dem (sätt den största storlek som någon av dina bilder har.), lite padding för att få mellanrum mellan bilderna samt tar bort understryckningen som blir på länkar.

 

Där efter har jag de unika klasserna för varje meny alternativ. Första klassen, tex .navimg1 sätter den bild som ska synas när man inte har musen över menyn. Sen använder vi .navimg1:hover som anger vilken bild som ska visas om man har musen över länken. Det är tillläget :hover som fixar detta åt oss. Du behöver alltså max 2 rader CSS om du sätter varje class på en rad för att få en fungerande meny.

 

Detta ska också vara godkänt av W3C, i alla fall när jag testade det nu.

 

Lägger man ihop detta med det jag tidigare gett som förslag kan det se ut följande:

 

CSS

#mainnav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
  
#mainnav li {
display: inline;
float: left;
margin: 26px 0 0 0;
padding: 40px 0 40px 0;
border-left: 1px solid #999;
}

#mainnav ul {
list-style: none;
margin: 0;
}

#mainnav li:last-child {
display: inline;
float: left;
margin: 26px 0 0 0;
padding: 40px 0 40px 0;
border-right: 1px solid #999;
}

#mainnav a {
padding: 5px;
display: block;
text-decoration: none;
width: 95px;
height: 65px;
}

.navimg1 {
background: url(img1.gif) no-repeat;
}
.navimg1:hover {
background: url(img2.gif) no-repeat;
}

.navimg2 {
background: url(img2.gif) no-repeat;
}
.navimg2:hover {
background: url(img1.gif) no-repeat;
}



HTML:
<ul id="mainnav">
<li><a href="#" class="navimg1"> </a></li>
<li><a href="#" class="navimg2"> </a></li>
</ul>

Lycka till och fråga igen om det är något.

 

/ Silentium

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Silentium om du inte bodde så långt bort skulle du få en kram.

 

Ska prova detta!

 

 

 

Är det inte bra att skriva godkänd kod då??

Länk till kommentar
Dela på andra webbplatser

silentium

Silentium om du inte bodde så långt bort skulle du få en kram.

 

Ska prova detta!

 

 

 

Är det inte bra att skriva godkänd kod då??

 

Jo, det är godkänd kod man ska sträva efter att skriva, inget annat. Att din kod är godkänd i W3C validator betyder att den följer dagens standard. Det ger även dig som kodare mer säkerhet att din sida ser likadan ut i de flesta webbläsare.

 

 

Länk till kommentar
Dela på andra webbplatser

Rickard.v

:galetglad: Silentium du är GRYM. Funkar på en gång!!!!!! Du vet vad du pratar om!!!!!! :galetglad:

 

Hamnade lite på fel ställe men det är ju en enkel justering tror jag. Fortsätter sent ikväll, måste till jobbet nu.

Länk till kommentar
Dela på andra webbplatser

silentium

Alltid roligt att kunna vara till hjälp.

 

Och tack för de trevliga orden! :D

 

 

Länk till kommentar
Dela på andra webbplatser

Rickard.v

Kan du förklara vilka #mainnav som påverkar vad. Alltså i css koden. Vill ju ha det centrerat på sidan då tror jag float:left ska bort? eller??

 

Även marginalen ska minskas.

li och li last child ser väldigt lika ut i koden varför/hur??

Länk till kommentar
Dela på andra webbplatser

silentium

#mainnav är den "box" som menyn ligger i. Att jag anger text #mainnav li betyder att <li> taggar endast påverkas av det du anger i css mallen i boxen #mainnav. Dvs att inga andra listor påverkas av inställningarna för menyn så länge listan inte ligger i boxen #mainnav då.

 

Det absolut enklaste sättet att centrera något är att ange margin: 0 auto; i css mallen för det som ska centreras. Men för att detta ska fungera måste boxen man anger det till ha en fast bredd. Så du skulle nu då tex kunna göra så här:

 

#mainnav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
width: 600px;
margin: 0 auto;
}

 

Notera de två nya raderna för #mainnav. Detta ska centrera menyn om du inte har något annat i din kod som stör.

 

Marginalerna minskar du med hjälp av att minska värdena på padding och margin för #mainnav li och #mainnav li:last-child.

 

#mainnav li:last-child är som du skriver väldigt lik #mainnav li, men det är en skillad. li:last-child har border-right istället för border-left. li:last-child påverkar endast sista <li> taggen i listan och ger den då helt enkelt en border till höger så att sista menyalternativet avslutas med en border precis som det första börja med en.

 

Hopps förklaringarna hjälper, är trött å seg i huvudet nu, dags för lite sömn.

 

/ Silentium

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.




×
×
  • Skapa nytt...