Søg
Avatar billede charley78 Novice
16. august 2008 - 15:15 Der er 13 kommentarer og
1 løsning

Tekst i varierende størrelse i grafisk ramme

Kan man i modsætning til eksemplet (her hvor alt er grafisk): http://www.sulaimahind.dk/hvem.html, konstruere en (ikke drejet, men horisontalt lige) grafisk ramme, der levner mulighed for at skrive en tekst i midten, uden at risikere at papirets ramme udenom pludseligt ikke passer.
Så vidt jeg kan se behøver jeg svar på flg. spørgsmål:
Hvordan man koder en fleksibel højde på den grafisk "papirskygge", der skal kunne udvides fra fx 10px.
Avatar billede w13 Novice
16. august 2008 - 15:27 #1
Du laver 3 billeder: 1 topbillede (som forestiller toppen af papiret), 1 midterbillede (som kan gentages), og 1 bundbillede.

Så kan du let gøre det, du ønsker. F.eks.:

<div style="width:600px;background-image:url('midterbg.png')">

  <img src="topbg.png" width="600" height="50">

  Tekst her

  <img src="bottombg.png" width="600" height="50">

</div>
Avatar billede ssv Nybegynder
16. august 2008 - 15:42 #2
Et andet eksempel kunne være: http://verndal.dk/spm841871/

- Her er der kun en skygge i højre side, det er det eneste billede :-)
Avatar billede charley78 Novice
17. august 2008 - 13:39 #3
jeg prøver begge løsninger!

Hvor ligger:

background-image:url('midterbg.png')"

i forhold til html-filen?
Avatar billede w13 Novice
17. august 2008 - 13:57 #4
I samme mappe i dette tilfælde.
Avatar billede charley78 Novice
17. august 2008 - 20:01 #5
ja... der var vist et eller andet der keksede.

Begge løsninger lader til at være fine http://www.yes-yes.dk/papir.html

Dog har jeg lidt problemer med at få den ene helt på plads http://www.yes-yes.dk/papir2.html.

- hvis en af jer måske kan hjælpe med at få hentet teksten ind på plads og dokumentet centreret? 

Hvem skal i øvrigt have points?
Avatar billede w13 Novice
17. august 2008 - 20:10 #6
Så skal der margin:auto; og padding-right:40px; på den omkransende div.
Avatar billede charley78 Novice
17. august 2008 - 21:17 #7
- undskyld men det er i den grad ikke med min gode vilje, at det hedder div'sene er enten uden navn eller hedder main og maincontent.. Jeg har jo copy/pasted udgangspunktet og har nu i frlængelse af dit forslag prøvet at sætte ny margin og padding ind flere steder, men jeg rammer åbenbart ikke rigtigt. Jeg får det i hvert fald ikke til at virke.
Kan nogen sig mig hvor i koderne jeg skal rette dem?
Avatar billede w13 Novice
17. august 2008 - 21:48 #8
Jeg kan ikke med sikkerhed sige, at det løser problemet, men prøv på papir2.html at rette:

<div style="width:600px;background-image:url('midterbg.png')" align="center">

til:

<div style="width:600px;text-align:center;margin:auto;padding-right:40px;background-image:url('midterbg.png')">
Avatar billede charley78 Novice
17. august 2008 - 22:04 #9
med et par enkelte rettelser som jeg var heldig at ramme, mangler kun tekstens bredde at blive smallere. Kandu også hjælpe med det?
Så skal du straks få dine points! :o)
Avatar billede w13 Novice
17. august 2008 - 22:06 #10
Det styrer du vel på din span med style2:

.style2{
        width:200px;
        font-family: "Times New Roman", Times, serif;
    font-size: 14px;
}
Avatar billede w13 Novice
17. august 2008 - 22:07 #11
Men jeg og ssv bør nok dele pointene.
Avatar billede w13 Novice
17. august 2008 - 22:07 #12
Du bør i øvrigt nok også sætte padding-left:20px; på div-elementet. Dvs. ret:

<div style="width:600px;text-align:center;margin:auto;padding-right:40px;background-image:url('midterbg.png')">

til:

<div style="width:600px;text-align:center;margin:auto;padding-left:20px;padding-right:40px;background-image:url('midterbg.png')">
Avatar billede charley78 Novice
18. august 2008 - 11:39 #13
det fungerer desværre stadig ikke, blev kun værre!
Avatar billede charley78 Novice
28. oktober 2010 - 23:02 #14
ok altså 0 points :O(
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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
20/0116:10 Tomt felt i Start Af ErikHg i Windows
White papers
Flere white papers »