Fel bredd & höjd med lager.

8 svar · 344 visningar · startad av KoTTeN 22 dec. 2004

KoTTeNMedlem sedan sep. 20011 722 inlägg

Frågan22 dec. 2004 00:15#1

Hej!

Varför kan jag inte få höjd och bredd att fungera på följande css-snutt:

	#sidoRubrik { 
		position: relative;
		background-image: url("../bilder/grund/standard_list.gif"); 
		height: 20px; 
		width: 100%;
		color: #333333; 
		border-style: solid;
         border-width: 1px;
         border-color: #7A7C7C;

Det fungerar om jag anger position till absolute, men jag vill inte ha det svävande ovanpå de andra lagren.

InsiderMedlem sedan jan. 2000978 inlägg

22 dec. 2004 00:42#2

Vad är det som inte funkar?
Kan du inte ta bort position: relative helt om du ändå inte anger nåt avstånd till kanterna, eller har du nåt element inuti?

Visa all kod tack!

KoTTeNMedlem sedan sep. 20011 722 inlägg

22 dec. 2004 00:48#3

Det är allt, ja förutom sättet att lägga in det i XHTML dokumentet då.

    <span id="sidoRubrik" class="rS"> test </span>

Klassen rS anger storleken på textstycket. Testade utan position men med samma fel.
Kör Safari på Mac OS X, kanske dåligt kan vara dåligt stöd?

InsiderMedlem sedan jan. 2000978 inlägg

22 dec. 2004 01:01#4

Men om du kör display:block och struntar i att sätta bredd. bara höjd...?

zcorpanMedlem sedan dec. 20042 245 inlägg

22 dec. 2004 22:25#5

Varför använda <span> när du kan använda ett riktigt rubikselement? <h1> till <h6> är de rubriksnivåer du har att leka med. Använd dem!

Förresten, <span> är inline så därför kan du inte sätta bredd eller höjd, enligt specifikationerna.

'width'
...
Applies to: block-level and replaced elements

KoTTeNMedlem sedan sep. 20011 722 inlägg

28 dec. 2004 14:59#6

Tack för alla svar!

Använder jag dock exempelvis <h1> blir det ett mellanrum emellan det blocket och blocket som ligger direkt under.

Sen undrar jag, då blocket är 20px högt och texten enbart 12 hur man får texten i mitten. Har testat att lägga till float: vertical-align: middle; utan resultat.

doggelitoMedlem sedan juni 20003 076 inlägg

28 dec. 2004 15:07#7

KoTTeN skrev:

Använder jag dock exempelvis <h1> blir det ett mellanrum emellan det blocket och blocket som ligger direkt under.

japp, men inte om du lägger med margin på rubrik-elementet :)


h1 {
     margin-bottom: 0;
}

InsiderMedlem sedan jan. 2000978 inlägg

28 dec. 2004 15:19#8

En metod att centrera text vertikalt i en container, t.ex. en <h1> är att sätte line-height till samma värde som höjden för elementet.

Alltså:

h1 {
	        padding:0;
		margin:0;
        	height:20px;
		line-height:20px
	}

Läs mera här.
http://www.student.oulu.fi/~laurirai/www/css/middle/

KoTTeNMedlem sedan sep. 20011 722 inlägg

28 dec. 2004 15:20#9

Sant =)
Tack! Nu börjar det bli något av den här pannkakan =)