länk fråga i CSS

Luxwarp · Inlägg av **Luxwarp** » 22 dec 2007, 21:02

tjena, jo jag håller på med en sida för skojjs skull, och har en fråga om a:link etc i css.

min kod just nu är

a.uppeknapp:link
{
	text-decoration: none;
	color: #FFFFFF;
}

a.nereknapp:link
{
	text-decoration: none;
	color: #FFFFFF;
}

a.uppeknapp:active
{
	text-decoration: none;
	color: #FFFFFF;
}

a.nereknapp:active
{
	text-decoration: none;
	color: #FFFFFF;
}

a.uppeknapp:visited
{
	text-decoration: none;
	color: #FFFFFF;
}

a.nereknapp:visited
{
	text-decoration: none;
}

a.uppeknapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}

a.nereknapp:hover
{
	background-image: url(image/nereknapp_hover.gif);
	text-decoration: none;
	color: #c8a900;
}

För länkarna och knapparna.
Jag undrar om man på nått sätt kan korta av dessa eftersom mina knappar skall göra samma sak tex.

Kod: Markera allt

a.uppeknapp.nereknapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}

eller något liknande,
har letat och försökt själv men ej hittat nån kombination som fungerar.

Fråga om det är nåt som saknas..

Inlägg av **Mekaniserad Apelsin** » 22 dec 2007, 21:37

Om alla knapparna ska vara likadana utan att skilja på uppeknapp och nereknapp, döp om dem till knapp, bara:

Kod: Markera allt

a.knapp:link
{
	text-decoration: none;
	color: #FFFFFF;
}

a.knapp:active
{
	text-decoration: none;
	color: #FFFFFF;
}

a.knapp:visited
{
	text-decoration: none;
	color: #FFFFFF;
}

a.knapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}

Kod: Markera allt

a.knapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}

Luxwarp · Inlägg av **Luxwarp** » 22 dec 2007, 22:46

Mekaniserad Apelsin skrev: Om alla knapparna ska vara likadana utan att skilja på uppeknapp och nereknapp, döp om dem till knapp, bara:
Kod: Markera allt
a.knapp:link
{
	text-decoration: none;
	color: #FFFFFF;
}

a.knapp:active
{
	text-decoration: none;
	color: #FFFFFF;
}

a.knapp:visited
{
	text-decoration: none;
	color: #FFFFFF;
}

a.knapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}
Kod: Markera allt
a.knapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}

det är det som är grejjen, dom är olika stora, och ena är en start meny och en är undermeny typ...

Kan man inte lägga in så som jag skrev i början

Kod: Markera allt

a.uppeknapp.nereknapp:hover
{
	text-decoration: underline;
	color: #c8a900;
}

,

eller nått annat sätt?

Inlägg av **HOLMEN** » 23 dec 2007, 01:47

Kan man länka i CSS?

Inlägg av **Mekaniserad Apelsin** » 23 dec 2007, 02:06

Du har två typer, de har massor med saker gemensamt men några få skillnader?

Då är det bra att ett objekt kan tillhöra flera klasser. (öh? Lugn, det förklaras längre ner).

Så du har knappar, de har saker gemensamt, då sätter du .knapp till att innehålla de saker de har gemensamt. Sedan gör du en extra class, typ .bigknapp där du skriver in de saker som den stora knappen ska ha, och en .smallknapp som har de saker den lilla knappen ska ha. När du sedan skriver in länken i html-dokumentet så gör du en enkel <a class=".knapp .bigknapp" href=#></a> och en liten knapp skapar du med <a class=".knapp .smallknapp" href=#></a>. Du har helt enkelt skapat tre klasser, och varje knapp tillhör den tuffa .knapp och en av de andra, smallknapp eller .bigknapp.

Eller så gör du en klass som heter .knapp, och klasser .knapp.liten och .knapp.stor. Då ärver .knapp.stor och .knapp.liten från .knapp, så att allt som är specificerat i .knapp även räknas som specificerat i underklasserna. Då behöver du bara specificera en klass i varje länk.

Om du plötsligt kommer på att .knapp har blå bakgrund och du vill ha den grön för stora, kan du ge .knapp.stor grön bakgrund i klassen, och fast alla som har klassen .knapp.stor helt plötsligt har två platser som säger vilken färg den ska ha (.knapp säger blå, men .knapp.stor säger ju grön, så används den mest specifika klassen, dvs .knapp.stor och knappen blir grön).

Inlägg av **Mekaniserad Apelsin** » 23 dec 2007, 02:07

HOLMEN skrev: Kan man länka i CSS?

Ja, men meningen med css är att du ska ha innehållet i xml, xhtml eller html och designen i css. Det är helt enkelt "bad form".

Luxwarp · Inlägg av **Luxwarp** » 23 dec 2007, 02:21

Mekaniserad Apelsin skrev: Du har två typer, de har massor med saker gemensamt men några få skillnader?

Då är det bra att ett objekt kan tillhöra flera klasser. (öh? Lugn, det förklaras längre ner).

Så du har knappar, de har saker gemensamt, då sätter du .knapp till att innehålla de saker de har gemensamt. Sedan gör du en extra class, typ .bigknapp där du skriver in de saker som den stora knappen ska ha, och en .smallknapp som har de saker den lilla knappen ska ha. När du sedan skriver in länken i html-dokumentet så gör du en enkel <a class=".knapp .bigknapp" href=#></a> och en liten knapp skapar du med <a class=".knapp .smallknapp" href=#></a>. Du har helt enkelt skapat tre klasser, och varje knapp tillhör den tuffa .knapp och en av de andra, smallknapp eller .bigknapp.

Eller så gör du en klass som heter .knapp, och klasser .knapp.liten och .knapp.stor. Då ärver .knapp.stor och .knapp.liten från .knapp, så att allt som är specificerat i .knapp även räknas som specificerat i underklasserna. Då behöver du bara specificera en klass i varje länk.

Om du plötsligt kommer på att .knapp har blå bakgrund och du vill ha den grön för stora, kan du ge .knapp.stor grön bakgrund i klassen, och fast alla som har klassen .knapp.stor helt plötsligt har två platser som säger vilken färg den ska ha (.knapp säger blå, men .knapp.stor säger ju grön, så används den mest specifika klassen, dvs .knapp.stor och knappen blir grön).

Tack för underbart svar:).... skall genast testas

Luxwarp · Inlägg av **Luxwarp** » 23 dec 2007, 03:10

Mekaniserad Apelsin skrev:

Eller så gör du en klass som heter .knapp, och klasser .knapp.liten och .knapp.stor. Då ärver .knapp.stor och .knapp.liten från .knapp, så att allt som är specificerat i .knapp även räknas som specificerat i underklasserna. Då behöver du bara specificera en klass i varje länk.

Tjena testade det jag citerade där nu.

har jag kodat rätt om jag skriver

Kod: Markera allt

.uppeknapp
{
	background-color: #000000;
	width: auto;
	height: auto;
	position: absolute;
	border-left: 1px solid #ff00be;
	border-bottom: 1px solid #ff00be;
	text-align: center;
	opacity: 0.5;
	padding-left: 3px;
	font-size: 20px;
	float: left;
}

.uppeknapp.online
{
	background-color: #c8a900;
	color: #000000;
}

I CSS
och

Kod: Markera allt

<a href="#"  class="uppeknapp.uppeknapp.online"> Startsida </a>

i HTML?

Blev väldigt mysko nämligen:P

Inlägg av **HOLMEN** » 23 dec 2007, 03:17

Mekaniserad Apelsin skrev:
HOLMEN skrev: Kan man länka i CSS?
Ja, men meningen med css är att du ska ha innehållet i xml, xhtml eller html och designen i css. Det är helt enkelt "bad form".

Tack. Jo, jag vet. Men det är själva logan på min hemsida som ligger i en div och som jag vill ska kunna vara klickbar för att återgå till startsidan.

Inlägg av **Mekaniserad Apelsin** » 23 dec 2007, 03:49

Kod: Markera allt

<a href="#"  class=".uppeknapp.online"> Startsida </a>

Inlägg av **Mekaniserad Apelsin** » 23 dec 2007, 03:50

HOLMEN skrev: Tack. Jo, jag vet. Men det är själva logan på min hemsida som ligger i en div och som jag vill ska kunna vara klickbar för att återgå till startsidan.

http://www.webmasterworld.com/html/3137734.htm

Luxwarp · Inlägg av **Luxwarp** » 23 dec 2007, 15:17

Mekaniserad Apelsin skrev:
Kod: Markera allt
<a href="#"  class=".uppeknapp.online"> Startsida </a>

Tjena testade det nu, och det blir ett jävla liv i koden då:P... den knappen flyger iväg och blir som en helt vanlig länk

css:

Kod: Markera allt

.uppeknapp
{
	background-color: #000000;
	width: auto;
	height: auto;
	position: absolute;
	border-left: 1px solid #ff00be;
	border-bottom: 1px solid #ff00be;
	text-align: center;
	opacity: 0.5;
	padding-left: 3px;
	font-size: 20px;
	float: left;
}

.uppeknapp.online
{
	background-color: #c8a900;
	color: #000000;
}

html:

Kod: Markera allt

<a href="index.html" class=".uppeknapp.online"> Startsida </a>

så har jag skrivit nu..

tacksam för all hjälp*<:)

PappaBj0rn · Inlägg av **PappaBj0rn** » 14 feb 2008, 01:40

Ni ser ut att ha lite mycket punkter.

Kod: Markera allt

.uppe
{
/*css*/
}

.online
{
/*css*/
}

och sen

Kod: Markera allt

<a href="foobar" class="uppe online">foobar</a>

edit:
Skummade mest igenom tråden så jag kan ha missat nåt.

Luxwarp · Inlägg av **Luxwarp** » 14 feb 2008, 02:17

PappaBj0rn skrev: Ni ser ut att ha lite mycket punkter.
Kod: Markera allt
.uppe
{
/*css*/
}

.online
{
/*css*/
}
och sen
Kod: Markera allt
<a href="foobar" class="uppe online">foobar</a>
edit:
Skummade mest igenom tråden så jag kan ha missat nåt.

Tjen tack för svar:)... Jag löste det innan

... men med samma metod som du skrev.)

Ubuntu Sverige

länk fråga i CSS

länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS

SV: länk fråga i CSS