Ubuntu Sverige

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

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

HOLMEN skrev: Kan man länka i CSS?

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

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.

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

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

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

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.

Mekaniserad Apelsin skrev:

Kod: Markera allt

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

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

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

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.