webForumDet fria alternativet

border

HTML & CSSur HTML, XHTML & CSS

15 svar · 369 visningar · startad av aleborg

Medlem sedan jan. 20013 341 inlägg
Frågan#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?

Medlem sedan apr. 200312 679 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?

Medlem sedan jan. 20016 874 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)

Medlem sedan jan. 20013 341 inlägg
#4

hjälpte tyvärr inte :(

Medlem sedan juni 20001 521 inlägg
#5

Det fungerar här i alla fall.

Medlem sedan jan. 20016 874 inlägg
#6

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

Medlem sedan jan. 20013 341 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/

Medlem sedan apr. 200312 679 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.

Medlem sedan jan. 20016 874 inlägg
#9

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

Medlem sedan jan. 20013 341 inlägg
#10

inte i IE6

Medlem sedan jan. 20013 341 inlägg
#11

nu finns border hela tiden runt :(

Medlem sedan apr. 200312 679 inlägg
#12

aleborg skrev:

inte i IE6

I mitt IE6 står det still. :e

Medlem sedan apr. 200312 679 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/

Medlem sedan jan. 20016 874 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

Medlem sedan maj 2004451 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.

Medlem sedan okt. 20023 030 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]

139 ms totalt · 3 externa anrop · v20260731065814-full.4bcf49fe
135 ms — hämta forumlista (db)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)