CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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 ;)

Synes godt om

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

Synes godt om

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%.

Synes godt om

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?

Synes godt om

webweaver Praktikant

06. februar 2011 - 18:55 #5

Det kunne du godt ja :)

Synes godt om

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 ;)

Synes godt om

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

Synes godt om

matthew-dk Nybegynder

09. februar 2011 - 14:21 #8

Super, det virkede ;)

Synes godt om

stenger Nybegynder

10. februar 2011 - 11:23 #9

Svar :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS