Avatar billede matthew-dk Nybegynder
04. februar 2011 - 16:12 Der er 9 kommentarer

Billede som border

Hej,

Skal have lavet en border på min hjemmeside til højre og venstre for indholdet.

Hvor får jeg lagt et billede ind som border?

Det drejer sig om en stiplet streg efterfulgt af en skygge som skal være på hver side - som er lavet i PS.

På forhånd tak,
Mathias
Avatar billede Slettet bruger
04. februar 2011 - 16:17 #1
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 ;)
Avatar billede matthew-dk Nybegynder
04. februar 2011 - 16:24 #2
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
Avatar billede webweaver Praktikant
04. februar 2011 - 18:54 #3
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%.
Avatar billede matthew-dk Nybegynder
06. februar 2011 - 17:32 #4
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?
Avatar billede webweaver Praktikant
06. februar 2011 - 18:55 #5
Det kunne du godt ja :)
Avatar billede matthew-dk Nybegynder
06. februar 2011 - 19:16 #6
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 ;)
Avatar billede stenger Nybegynder
07. februar 2011 - 09:29 #7
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
Avatar billede matthew-dk Nybegynder
09. februar 2011 - 14:21 #8
Super, det virkede ;)
Avatar billede stenger Nybegynder
10. februar 2011 - 11:23 #9
Svar :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB

Jyske Bank

Cloud Engineer

Metroselskabet og Hovedstadens Letbane

Sikkerhedskonsulent

Roskilde Kommune

Digitaliseringschef

IT & Co ApS

Systemkonsulent