Rada upp meningar med CSS?!

5 svar · 359 visningar · startad av Dr-man 11 jan. 2003

Dr-manMedlem sedan juli 2002732 inlägg

11 jan. 2003 18:03#1

Kan jag hjälp med CSS få raderna på detta vis:

- Här kommer det att finnas ett antal x adb-tips. 
- Det var min idé att vi skulle ha en sådan här sida, 
  vilket är en väldigt bra sådan. 
- Vi skulle kunna tillsammans hitta på dessa tips. 
- Vid varje månadskift skulle man byta ut de gamla tipsen mot  
  nya tipsen. Vad tycks?!

Istället för som dom är nu:

- Här kommer det att finnas ett antal x adb-tips. 
- Det var min idé att vi skulle ha en sådan här sida, 
vilket är en väldigt bra sådan. 
- Vi skulle kunna tillsammans hitta på dessa tips. 
- Vid varje månadskift skulle man byta ut de gamla tipsen mot   
nya tipsen. Vad tycks?!

Hoppas ni förstod vad jag menade?

OlleBoopMedlem sedan feb. 20001 861 inlägg

11 jan. 2003 18:29#2

Gör en lista av det?

Dr-manMedlem sedan juli 2002732 inlägg

11 jan. 2003 18:31#3

Nu förstod jag inte riktigt?!

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2003 18:49#4

Som OlleBoop skrev, kan du göra en lista för att åstadkomma detta:

<ul style="list-style-image: url(minus.gif)">
     <li>Här kommer det att finnas ett antal x adb-tips.</li>
     <li>Det var min idé att vi skulle ha en sådan här sida, vilket är en väldigt bra sådan.</li>
     <li>Vi skulle kunna tillsammans hitta på dessa tips.</li>
     <li>Vid varje månadskift skulle man byta ut de gamla tipsen mot  nya tipsen. Vad tycks?!</li>
</ul>

Gör sedan en bild föreställandes ett minustecken och lägg den i samma mapp som HTML-dokumentet (minus.gif).

jarvkloMedlem sedan juli 20013 378 inlägg

12 jan. 2003 00:52#5

Om våra "kära" webbläsare hade haft ett fullt fungerande CSS2-stöd, skulle du ha haft nytta av några av exemplen i http://www.w3.org/TR/REC-CSS2/generate.html#q11

mikkeXMedlem sedan aug. 2002477 inlägg

12 jan. 2003 07:53#6

jarvklo skrev:

Om våra "kära" webbläsare hade haft ett fullt fungerande CSS2-stöd, skulle du ha haft nytta av några av exemplen i http://www.w3.org/TR/REC-CSS2/generate.html#q11

En liknande kod kan du få att funka i mozilla:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ol
{
list-style: none;
}
li:before {
content: "- ";
}   
li
{
text-indent: -10px;
}
     </style>
</head>
<body>
<ol>
  <li> Det h&auml;r &auml;r f&ouml;rsta raden<br />
    med en &lt;br /&gt; </li>
  <li> Det h&auml;r &auml;r andra raden </li>
  <li> Och ytterligare en rad </li>
</ol>
</body>
</html>

Men annars tror jag på en lösning utan listor:

<!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>
<title>Som en lista</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div
{
margin-top: 1em;
}
div p
{
text-indent: -10px;
font-family: verdana, sans-serif;
font-size: 10px;
padding-left: 9px;
margin: 10px;
margin-top: -10px;

}
</style>
</head>

<body>
<div> 
  <p>&#8211; Min f&ouml;rsta rad med en &lt;br /&gt;<br />
    som f&ouml;ljer</p>
  <p>&#8211; Min andra rad</p>
  <p>&#8211; Min tredj rad</p>
</div>
</body>
</html>

Den sista fungerar även i Netscape 4.x