Egentillverkad HR som behöver lite padding

4 svar · 212 visningar · startad av mattiasnordin 13 mars 2005

mattiasnordinMedlem sedan maj 20012 080 inlägg

Frågan13 mars 2005 15:39#1

CSS:

.hrHorizontalRulerTable {
	background-image : url(/web2005/_design/bakgrund_dot_vertical.gif); 
	background-repeat: repeat-x;
	padding-top: 22px;
	padding-bottom: 22px;
	padding-left: 22px;
	padding-right: 22px;
}

<!-- Dotted HR line --><table cellpadding=0 cellspacing=0 border=0 width=100%><td width=100% class="hrHorizontalRulerTable"></td></table>

Hmmm.... jag försöker göra en dynamisk "<HR>" som fungerar både vertikalt och horizontalt. Men jag behöver kunna kontrollera padding i alla kanter. Ovan ger mig inte någon padding alls, i övrigt fungerar det.

Hur kan jag få padding på min tabell?

mattiasnordinMedlem sedan maj 20012 080 inlägg

13 mars 2005 15:54#2

Hmmm...

<!-- Dotted HR line --><table cellpadding=0 cellspacing=0 border=1 width=100%><td width=100% class="hrHorizontalRulerTable">[b]& n b s p ;[/b]</td></table>

Om jag lägger till ett tecken i tabellen så fungerar det med den lodrätta paddingen men o andra sidan så får jag alltid en radbrytning i tabellen. Det vill jag inte ha...

Funderar... Finns det inte en bättre lösning. Det verkar inte gå att få till den vågrätta paddingen när man använder sig av en bakgrundsbild. Det är ju igentligen bilden jag vill ha padding på och inte tabellen...

HJÄLP :)

mattiasnordinMedlem sedan maj 20012 080 inlägg

13 mars 2005 16:12#3

.hrHorizontalRulerTable {
	background-image : url(/web2005/_design/bakgrund_dot_vertical.gif); 
	background-repeat: repeat-x;
	background-position: center;
}
.hrHorizontalRulerTablePadding {
	padding-top: 2px;
	padding-bottom: 20px;
	padding-left: 2px;
	padding-right: 22px;
}

<!-- Dotted dynamic HR line box. Den första tabellen positionerar bakgrundsbilden -->
<table cellpadding=0 cellspacing=0 border=0 width=100% height=2 class="hrHorizontalRulerTablePadding">
<td><!-- bilden --><table cellpadding=0 cellspacing=0 border=0 width=100%><td class="hrHorizontalRulerTable"></td></table><!-- // bilden --></td>
</table>

Ovan fungerar bra. Men finns det inte något smidigare sätt ???

zcorpanMedlem sedan dec. 20042 245 inlägg

13 mars 2005 16:36#4

Vad är det du försöker åstakomma? Det verkar som att man kan göra såhär:

hr {
	border: none;
	height: 7px;
	background: url([url]http://qurl.net/bA[/url]) repeat-x left center; 
	padding: 2px 22px 20px 2px;
}

<hr>

Fast IE ger den en border ändå, vilket vi kan fixa genom:

div.hr hr { display: none; }
div.hr {
	height: 7px;
	background: url([url]http://qurl.net/bA[/url]) repeat-x left center; 
	padding: 2px 22px 20px 2px;
}

<div class="hr"><hr></div>

mattiasnordinMedlem sedan maj 20012 080 inlägg

13 mars 2005 20:57#5

Låter ju onekligen mycket sexigare. Ska testa!