Billede som border

Ved ikke hvordan du gør det med billede, er ikke sikker på du kan lave det direkte som border:xxx;

men jeg ved du kan lave en stiplet linje ved hjælp af: border:1px dotted #000;

og hvis det er højre og venstre:

border-left:1px dotted #000;
border-right:1px dotted #000;

Ved ikke om det hjælper dig meget.. Men ville da lige skrive et indlæg ;)

Jo det vil selvfølgelig kunne bruges til nød :)

Men hvis man kigger på ekspertens hjemmeside her har de jo også en lille skygge ved siden af deres indhold her

Du kan sagtens have det. Det er ikke en "rigtig border" men et billede du placerer langs kanten i din boks. Evt. ved brug af en anden div og position relative eller absolute.

Billedet behøver kun at være 1 px høj, og så strækker du det ved at angive width på det til at være 100%.

Så hvis jeg i forvejen har en container div - så skal jeg lave en ny div uden om den og placere billedet der og så gentager det på y?

Det kunne du godt ja :)

Har gjort følgende

Html:

<body>
<div id="border">
        <a><img src="images/border.jpg"></a>
<div id="container">
</div>
</div>
</body>

CSS:
    #border {
        width: 100%;
        margin: auto;
        background: url(images/border.jpg) repeat-y;
        position: relative;
        }

Men nu kommer billedet bare over container - skulle helst have det ud på begge sider ;)

Jeg hopper lige ind...

Lad os sige at dit border-billede er 10px bred og skal repeate ned langs højre kant.

Jeg ville starte med at lave følgende:

<body>
  <div id="container">
    Indhold
  </div>
</body>

Min CSS skulle så være:

#container {
  margin-left:auto;
  margin-right:auto; /* FOR AT CENTRERE SIDEN */
  width:1000px;
  background-image:url('sti til dit billede');
  background-repeat:repeat-y;
  background-position:right top;
}

Selve dit almindelig tekstindhold ville jeg så lægge inde i en anden div, som så var 10px mindre end containeren, således den ikke lægger sig henover dit border-billede.

Altså:

<body>
  <div id="container">
    <div class="content">
      Indhold
    </div>
  </div>
</body>


CSS:

.content {
  float:left;
  width:990px;
}

Sådan ville jeg gøre det :)

/Stenger

Super, det virkede ;)

Svar :)