Få mellanrum mellan border-top och background-color?

3 svar · 498 visningar · startad av Ledel 16 feb. 2007

LedelMedlem sedan dec. 2004736 inlägg

Frågan16 feb. 2007 18:00#1

Skulle vilja ha följande:
Antag att vi har en div med gul bakgrund och röd top-border. Den här bordern är 2px hög och jag vill under den ha ett "mellanrum", vitt, som är 1px hög. Sedan önskar jag samma sak i nederdelen, fast bakvänt. Så går man uppifrån och ner ska det bli
Röd border
Vitt mellanrum
Gul bakgrundsfärg
Vitt mellanrum
Röd border
Någon som vet hur man löser detta utan att ha en div för ram, en för "content" och en till för ram?

headbugMedlem sedan sep. 2006867 inlägg

16 feb. 2007 22:34#2

Jag har ett litet förslag, men det bygger på att du har en given höjd på diven, tex om du har en meny som du aldrig behöver ändra.

I mitt exempel har vi en 22px hög div och en gul bakgrundsbild som är 20px hög och centrerad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body {
	background-color: #000;
	}
#ruta {
	border-top: 2px solid #f00;
	border-bottom: 2px solid #f00;
	background: #fff url(bg.gif) center repeat-x;
	height: 22px;
	}
</style>
</head>

<body>

<div id="ruta">Testar</div>

</body>
</html>

LedelMedlem sedan dec. 2004736 inlägg

17 feb. 2007 00:40#3

Jo, har också tänkt på det. Dock är det så att diven kan vara i vilken höjd som helst, då den fylls med text. Det kanske helt enkelt är så att jag får köra med mina tre divar?

cayaMedlem sedan aug. 20051 448 inlägg

17 feb. 2007 08:44#4

ja eller två

#outer {
background:yellow ur(bgtop.gif) top left repeat-x;
border-top:2px solid #c00;
margin:0; padding:0;
}
#footer {
background:url(bgbottom.gif) bottom left repeat-x;
border-bottom:2px solid #c00;
margin:0; padding:0;
}

<div id="outer">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <div id="footer">&nbsp;</div>
</div>

bakgrundsbilderna är den lilla vita linjen...

/r - tillägg...