webForumDet fria alternativet

border

15 svar · 369 visningar · startad av aleborg

aleborgMedlem sedan jan. 20012 962 inlägg
#1

Sitter med en meny men det vill sig inte som jag vill:
https://windows.kontrollpanelen.se/test/html/
menyn till vänster rör på sig vid "hover", så här ser klassen ut:

A.Sub:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#000000;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	border-color:#999999;
	background-color:#F2F7FF;
	display: block; 
	width: 95%; 
	height: 100%; 
	}

hur får man menyobjekten att vara still?

silfverMedlem sedan apr. 20039 709 inlägg
#2

Eftersom det inte är några borders när man inte har musen över så kanske du borde göra så att det är borders även när man inte har musen över.

a.Sub {
border: 1px solid transparent;
}

Borde väl göra susen?

frankofMedlem sedan jan. 20014 275 inlägg
#3

Det är väl inte så konstigt ;)
Du lägger ju till en border vid hoover, och den kräver ju lite plats.
Lägg till border även på a.sub, fast "osynlig"(transparent)

aleborgMedlem sedan jan. 20012 962 inlägg
#4

hjälpte tyvärr inte :(

Gislaved.netMedlem sedan juni 20001 274 inlägg
#5

Det fungerar här i alla fall.

frankofMedlem sedan jan. 20014 275 inlägg
#6

Är "a.sub" och "a.sub:hover" identiska frånsett border?
Saknas en "border-style:solid;" i "A.Sub:link"

aleborgMedlem sedan jan. 20012 962 inlägg
#7

Så här ser det ut nu:

.Sub {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#000000;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	border-color:transparent;
	background-color:transparent;
	display: block; 
	width: 95%; 
	height: 100%; 
}
A.Sub:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#000000;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	border-color:transparent;
	background-color:transparent;
	display: block; 
	width: 95%; 
	height: 100%; 
}
A.Sub:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#000000;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	border-color:transparent;
	background-color:transparent;
	display: block; 
	width: 95%; 
	height: 100%; 
}
A.Sub:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#000000;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	border-color:#999999;
	background-color:#F2F7FF;
	display: block; 
	width: 95%; 
	height: 100%; 
	}
A.Sub:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#000000;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	border-color:transparent;
	background-color:#transparent;
	display: block; 
	width: 95%; 
	height: 100%; 
	font-weight:bold;
}

och så här ser det ut nu:
https://windows.kontrollpanelen.se/test/html/

silfverMedlem sedan apr. 20039 709 inlägg
#8

Funkar prima för mig. :)
(i Firefox)

Nu när jag kollade i IE så ser det riktigt annorlunda ut. Du borde ta en titt i Firefox, om du inte gjort det. Eller vise versa.

frankofMedlem sedan jan. 20014 275 inlägg
#9

Ja, nu står dom still i moz åminstonde ;)

aleborgMedlem sedan jan. 20012 962 inlägg
#10

inte i IE6

aleborgMedlem sedan jan. 20012 962 inlägg
#11

nu finns border hela tiden runt :(

silfverMedlem sedan apr. 20039 709 inlägg
#12

aleborg skrev:

inte i IE6

I mitt IE6 står det still. :e

silfverMedlem sedan apr. 20039 709 inlägg
#13

aleborg skrev:

nu finns border hela tiden runt :(

Ta en titt här.
r/ Men vaf*n. Länken strular. Validera din CSS så ser du felen. http://jigsaw.w3.org/css-validator/

frankofMedlem sedan jan. 20014 275 inlägg
#14

Har inte med olika modes att göra då? (IE i "quirks" moz i "standard")

R: din css-fil innehåller även "<style type="text/css">
<!--
-->
</style>"
Onödigt (kan även störa(?)) tabort

TinwëlintMedlem sedan maj 2004478 inlägg
#15

Om jag vill ha border på hover men inte annars brukar jag istället för att sätta en border med samma färg som bakgrunden eller så öka min margin (eller lägga till margin) såhär:

a {
padding: 5px;
margin: 10px;
background #999;
}

a:hover {
margin: 9px;
border: 1px solid #000;
}

Det är ju mycket bättre än att sätta en "osynlig" border.

aleborg, utan att ha testat så har jag fixat till din css lite. Det här blir samma sak som det du skrev innan:


a.sub {/*.sub låg ska väl bara ligga på a-elementet? */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
background-color: transparent;
display: block;
width: 95%; 
height: 100%; 
margin: 1px; /* håller plats åt bordern */
}

/* om man inte anger något för :link så blir det samma som man har satt på a.sub 
samma sak gäller :visited, den ärvs från a.sub */

a.sub:hover {
border: 1px solid #999; /*sammandragning av de olika border-egenskaperna*/
background-color:#F2F7FF;
margin: 0px;
}

/*här räcker det att ange skillnaderna mot deklarationen av a.sub. Resten ärvs */

/*:active hade precis samma egenskaper som a.sub och behöver inte heller upprepas */

Hoppas att det fungerar.

Nexus86Medlem sedan okt. 20022 683 inlägg
#16

[OT]

Hittade något annat roligt. :)

När man drar musen över "Change language" och sedan bort igen så växer den på höjden. Gör man det tillräckligt många ggr så blir den sketastor. :P

[/OT]

Genererad på 369 ms · cache AV · v20260730165559-full.f96bc7eb