CSS Frågor

Tråden skapades 2007-09-23 och har fått 2 svar. Det senaste inlägget skrevs 2007-09-23.

1

2007-09-23 13:47

#1

.mp3
Medlem ●
Stockholm
2007-09-23 13:47

Hejsan, har några frågor angående CSS. Sitter och kodar ihop en hemsida och undrar om man kan effektivisera koden. T ex. jag använder flitigt klasserna 'top' och 'bottom' för att skapa snygga runda hörn på alla divar. Koden ser ut på följande sätt.

.top {
	background: url(pics/top.png) no-repeat;
	height: 5px;
	width: 500px;
	margin: 0 auto 0 auto;
}

.bottom {
	background: url(pics/bot.png) no-repeat;
	height: 5px;
	width: 500px;
	margin: 0 auto 0 auto;
}

Min fråga är om man kan på något sätt kan undvika att skriva ut samma rader igen, medtanke på det enda som skiljer dem åt är sökvägen till bilden. Kan man på något sätt få #top att agera grund och sedan bara skriva något i stil med följande (hoppas ni förstår vad jag menar).

.top {
	background: url(pics/top.png) no-repeat;
	height: 5px;
	width: 500px;
	margin: 0 auto 0 auto;
}

.bottom .top {
	background: url(pics/bot.png) no-repeat;
}

Sen undrar jag även om man kan slippa definiera storleken på diven genom att lägga till några rader i background-raden kanske? Har prövat 'display; block;' istället för att definiera height och width men det fungerade inte. Som ni kanske märker vill jag göra min kod så avskalad och clean som möjligt

Anmäl Ändra Gilla Svara

2007-09-23 14:06

#2

malesca
Medlem ●
Vallentuna
2007-09-23 14:06

Du kan ändra till t.ex.

.top, .bottom {
	background-repeat: no-repeat;
	height: 5px;
	width: 500px;
	margin: 0 auto;
}
.top { background-image:  url(pics/top.png); }
.bottom { background-image:  url(pics/bot.png); }

Svaret på din andra fråga är att du måste skriva ut måtten explicit som du gör. Det finns inget i CSS (vad jag känner till, i alla fall) för att anpassa ett elements storlek till en bakgrundsbilds storlek.