Flytta upp en bild 2px

5 svar · 1 054 visningar · startad av Matsakii 19 apr. 2014

MatsakiiMedlem sedan mars 2005265 inlägg

Frågan19 apr. 2014 00:13#1

Jag har en css kod för en kassa där en varukorg ikon är framför texten (Din varukorg är tom) Se bifogad skärmdup.

Jag behöver flytta upp ikonen lite (2px) för att få den mer centrerad med texten efter.

Koden ser ut så här:

.cart-1 {
	font-size: 12px;
	/*font-size: 20px;*/
	color: #FFFFFF;
	background-image: url(../images/cart.png);
	background-repeat: no-repeat;
	background-position: left center;
	line-height: 32px;
	padding-bottom: 8px;
	padding-left: 30px;
	text-align: right;

Och det är på raden

"background-position: left center;"

jag har försökt lägga så ikonen flyttas upp. Med där står bara "left center;" Lägger jag till "top" då åker den upp i taket.

Hoppas det finns någon tråkig nörd som jag och bara VÄNTAR på att få svara på frågor en kväll/natt som denna :e

Glad Påsk på er annars, alla gubbar och snygga tjejer som året runt försöker hjälpa oss novisa.

SharkieMedlem sedan okt. 20031 000 inlägg

19 apr. 2014 09:09#2

I väntan på rätt svar kan du ju prova margin-top / margin-bottom och se vad det gör. Du kan använda negativt avstånd också. Padding-top / padding-top kanske också kan göra susen.

Jag kan inte CSS flytande, så i såna här lägen provar jag mig fram, du kan ju prova det också :)

... och för att ge dig min tankegång i ett sånt här ärende, så undrar jag inte om det är läge att lägga ikonen enskild istället?
Eller kanske "dinkundvagntext**:before** { stoppa in kundvagnsikonen }"

CSS-kungarna här vill nog ha koden där korgen och texten ligger, de divar m.m. du har där.

Hoppas jag inte förvirrar dig för mycket :D

MatsakiiMedlem sedan mars 2005265 inlägg

19 apr. 2014 09:29#3

Det borde gå och sätta ett värde. För om jag lägger till "top" i raden "background-position: left center;" så åker ikonen upp, men inte texten. Fats jag hittar inte hur jag sätter ett värde på "top"

Danne VMedlem sedan aug. 20068 090 inlägg

19 apr. 2014 09:51#4

Ändra vertikala positionen i stilmallen:

background-position: left -5px;

(-5px avser avstånd från överkant i föräldraelementet. Flyttar alltså upp bilden. Du kan även flytta neråt med t.ex. 5px, eller använd %, mm eller andra enheter om du vill.)

http://reference.sitepoint.com/css/background-position
http://www.techonthenet.com/css/properties/background_position.php

MatsakiiMedlem sedan mars 2005265 inlägg

19 apr. 2014 09:58#5

Det är horisontalt jag vill flytta upp den 2px. jag har test lägga till "top 10px" men det fungerar inte.

Danne VMedlem sedan aug. 20068 090 inlägg

19 apr. 2014 10:39#6

Matsakii skrev:

Det är horisontalt jag vill flytta upp den 2px. jag har test lägga till "top 10px" men det fungerar inte.

Höger/vänster är HORISONTALT och det första värdet .Upp/ner är VERTIKALT och det andra värdet. Beräknas från vänster och topp av det inneslutande elementet.

Det du gjort är att tvinga ner bilden ytterligare 10px.

Ska du flytta upp ska du alltså ha ett NEGATIVT värde (-2px eller vad du vill ha) bör det alltså se ut så här:

background-position: left -2px;

Vid tveksamheter, kolla gärna sidorna jag länkade till. Där står allt du behöver veta.