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

mj_liquid Nybegynder

13. juni 2009 - 12:04 Der er 7 kommentarer

billede der automatisk bliver større med tekst

Hej!

Har svært ved at forklare det her, da jeg er ny til det.
Men skal gøre mit bedste.

Har lavet en hjemmeside i photoshop og langt den over i dreamweaver for at skrive noget tekst osv ind.

Der hvor teksten skal stå, vil jeg gerne have borders med shadows.
som det ses på denne hjemmeside (http://mediafix.dk) På siden er der en hvid boks hvor teksten står i. og den har så shadows rundt omkring boksen.

Mit spørgsmål lyder så.

Hvordan får jeg den boks til at bliver større automatisk i dreamweaver når jeg skriver teksten ind?

Er der en smart måde det kan gøres på, eller skal man hele tiden ind i photoshop og lave boksen større jo mere tekst der skal ind ??

På forhånd tak!

PS. Skriv lige så jeg forstår det, er ikke en ørn det til (endnu) :)

Synes godt om

-zonic- Nybegynder

13. juni 2009 - 12:28 #1

hejsa..

det du skal gøre er at du laver en div eller table (div er mest korrekt) med toppen af rammen i..

derefter laver du en div hvor din tekst skal være i.. bagrundsbilledet til denne div skal være 1px høj, og have begge sider med incl. shadow.. dvs. du sakser 1px. i højden ud fra dit photoshop og den fulde bredde... i din div sætter du så baggrundsbilledet til f.eks. <div style="background:url(billedet.jpg) repeat-x;">din tekst</div>

derefter laver du en div med bunden i med den fulde bredde.. op wupti, så har du et design der selv udvider i højden :-)

Synes godt om

-zonic- Nybegynder

13. juni 2009 - 12:32 #2

der var lige en lille fejl.. det skulle være repeat-y...

et eksempel..:

<html>
<style>

.container {
position:relative;
width:400px;
}

.top {
background:url(top.jpg) no-repeat;
height:100px;
}

.mid {
background:url(mid.jpg) repeat-y;
height:auto;
}

.bottom {
background:url(top.jpg) no-repeat;
height:100px;
}

<div class="container">
<div class="top"></div>
<div class="mid">din tekst</div>
<div class="bottom"></div>
</div>

Synes godt om

-zonic- Nybegynder

13. juni 2009 - 12:33 #3

.. som jeg dog smider om mig med dårlig kode :D

HER kommer det rette

<html>
<head>
<style>

.container {
position:relative;
width:400px;
}

.top {
background:url(top.jpg) no-repeat;
height:100px;
}

.mid {
background:url(mid.jpg) repeat-y;
height:auto;
}

.bottom {
background:url(top.jpg) no-repeat;
height:100px;
}

</style>

</head>
<body>

<div class="container">
<div class="top"></div>
<div class="mid">din tekst</div>
<div class="bottom"></div>
</div>
</body>
</html>

du skal self. have den fornødne doctype, title osv i din html også... men håber du forstår eksemplet :-)

Synes godt om

mj_liquid Nybegynder

13. juni 2009 - 12:43 #4

tror måske jeg forstår hvad du mener... :)

Prøver lige at rode lidt med det, så vender jeg tilbage.

Synes godt om

mj_liquid Nybegynder

13. juni 2009 - 13:05 #5

men lære noget nyt hver dag :)

Nu kan jeg finde ud af det.

http://iloapp.futch.dk/data/_gallery/public/14/1244890933_resized.png

har dog lige et sidste spørgsmål.
Hvordan for jeg shadows til at være transperant ?

Når jeg opretter en ny fil i photoshop og vælger baggrund til
transperant, så bliver den ikke transperant når jeg gemmer filen.

Du har selvfølgelig fået de 200 points, så smid et svar.

Synes godt om

-zonic- Nybegynder

28. august 2009 - 15:18 #6

her kommer et svar.. :-)

du skal gemme filen som .png eller som .gif før du kan bruge transparente farver.. og jeg vil klart anbefale png da .gif kun kører 256 farver! :-)

desuden må du ikke have et layer visible med den hvide baggrundsfarve som det ser ud til nu?

Synes godt om

-zonic- Nybegynder

22. september 2009 - 13:05 #7

har du givet op?

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

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Programmeringsværktøjer kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
senior Af Uroda i Programmeringsværktøjer	1	22/06/202418:29	23/06/202413:17
Sort Skærm Af Kaj Sondrup i Programmeringsværktøjer	5	25/02/202421:45	27/02/202420:17
DATA (D) Af rene1111 i Programmeringsværktøjer	3	21/02/202415:03	22/02/202409:08
Power Automate, åben en fil der er delt med mig Af KATM i Programmeringsværktøjer	1	16/02/202409:07	19/02/202409:10
Prisberegner til hjemmeside Af Michael Vahl i Programmeringsværktøjer	4	14/01/202417:30	21/01/202409:21

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