Søg
Avatar billede kvabiz Nybegynder
31. marts 2006 - 22:33 Der er 6 kommentarer og
1 løsning

Kordinering af tekst

Hej

Jeg ved godt det ikke er den "rigtige" måde men jeg har lavet alt mit grafik i PhotoShop, og nu vil jeg lave noget tekst oven på det...

Først hvordan sætter jeg mit grafik som baggrund, så den ikke kommer "side om side" fordi den ikke fylder hele vinduet?

Eller bliver jeg nød til at indsætte det som et almideligt billede?
____________________________


Og hvordan kan jeg få kontrol over min tekst. Jeg ved godt hvordan man skifter linie osv. men hvis nu teksten skal så et helt bestemt sted på siden, hvordan gør jeg så?...
Alså kordinere det helt præsist ?

I må meget gerne give mig nogle eksempler...

Håber i forstår... :)
Avatar billede miss-g Seniormester
31. marts 2006 - 23:39 #1
Et eksempel her, hvor baggrunden er et billede der er mindre end cellen, men det gentager ikke sig selv. Jeg har yderligere rykket det lidt ind og ned.

Teksten kan man også justere med padding.

http://www.nicolin.dk/div/test2.htm

--------------------------------------------

Koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.back {
    background-image: url(artikel-1.gif);
    background-repeat: no-repeat;
    background-position: 20px 10px;
    height: 200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
    font-weight: bold;
    width: 200px;
    margin: 0px;
    vertical-align: bottom;
    padding-bottom: 10px;
    padding-left: 20px;
}
-->
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
  <tr>
    <td class="back">Her er noget tekst </td>
  </tr>
</table>
</body>
</html>
Avatar billede miss-g Seniormester
31. marts 2006 - 23:41 #2
Denne del styrer baggrundsbilledet:

.back {
    background-image: url(artikel-1.gif);
    background-repeat: no-repeat;
    background-position: 20px 10px;
    height: 200px;

------------------------------------------------
Denne del styrer skiften og placering:

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
    font-weight: bold;
    width: 200px;
    margin: 0px;
    vertical-align: bottom;
    padding-bottom: 10px;
    padding-left: 20px;
}

-------------------------------------------------------

Jeg har kun det ene problem at cellen bliver breddere eller højere hvis jeg sætter for meget padding på teksten - det er der måske én der kan forklare? Hm...
Avatar billede mclemens Nybegynder
01. april 2006 - 00:06 #3
forklaring... ikke sikker men mener at padding er uden om indholdet...
Her er et andet eksempel... hvis det virker godt nok så giv miss-g point :)
(table defineringen er selvfølgelig ikke nødvendig ved brug af div'en ... )

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

table{border="0" cellpadding="0" cellspacing="0"}

.pictd{
position:relative;
background: #999999 url('artikel-1.gif') no-repeat 20px 10px;
height: 200px;
width: 200px;
color: #CC0000;
}

.boldpos{
font: bold 12px Arial,Helvetica,sans-serif;
position:absolute;
bottom:0px;right:10px;
}

</style></head>

<body>

<table class="pictd">
<tr>
  <td class="pictd">
  <b class="boldpos">
    Tekst i bunden til højre...
  </b>
  </td>
</tr>
</table>

... eller div:

<div class="pictd">
<b class="boldpos">
  Tekst i bunden til højre...
</b>
</div>

</body></html>
Avatar billede mclemens Nybegynder
01. april 2006 - 00:07 #4
hov, <table class="pictd"> skulle have været <table> :P
Avatar billede mclemens Nybegynder
01. april 2006 - 00:11 #5
og det med at flytte border="0" cellpadding="0" cellspacing="0" op som css gik vist ikke efter hensigten poster lige forfra :P

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

.pictd{
position:relative;
background: #999999 url('artikel-1.gif') no-repeat 20px 10px;
height: 200px;
width: 200px;
color: #CC0000;
}

.boldpos{
font: bold 12px Arial,Helvetica,sans-serif;
position:absolute;
bottom:0px;right:10px;
}

</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="pictd">
  <b class="boldpos">
    Tekst i bunden til højre...
  </b>
  </td>
</tr>
</table>


... eller div:

<div class="pictd">
<b class="boldpos">
  Tekst i bunden til højre...
</b>
</div>

</body></html>
Avatar billede miss-g Seniormester
01. april 2006 - 04:30 #6
Jeg tror du har ret mclemens.

Nu har jeg sat en style på tabellen (baggrundsbilledet), og så en style på cellen <td> som difinerer teksten, og det virker fint.

--------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.back {
    background-image: url(artikel-1.gif);
    background-repeat: no-repeat;
    background-position: 20px 10px;
    height: 200px;
    width: 200px;
}
.cellen-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #CC0000;
    padding-top: 160px;
    padding-left: 40px;
}
-->
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="back">
  <tr>
    <td class="cellen-text">Her er noget tekst </td>
  </tr>
</table>
</body>
</html>

-------------------------------------------------------------

Så hvis det er en celle ud af en større tabel, kan man sætte en style på cellen <td> og putte en ny tabel i cellen som får sin egen style.

Så blev jeg også klogere (er mest til tabeller i stedet for layers) *S*
Avatar billede mclemens Nybegynder
01. april 2006 - 11:43 #7
Så blev jeg også klogere (er mest til tabeller i stedet for layers) *S*>

- Det var jeg også indtil jeg lærte layers, men de har hver sine fordele/ulemper... :)



Så hvis det er en celle ud af en større tabel, kan man sætte en style på cellen <td> og putte en ny tabel i cellen som får sin egen style.>

- Det er vel ikke nødvendigt med en table i en table af den grund?(medmindre man skal have flere kolonner eller rækker ved billedet selvfølgelig) Man kan jo bare nøjes med at sætte class'en på td'en samt en class på en b'tekst som i 01/04-2006 00:11:58... Tables i tables er grunden til jeg skiftede væk fra tables - det kom alt for hutigt til at fylde...


M.h.t. til css så kan baggrundsfarven på tabellen godt flyttes op i styles med en class på den table der skal have baggrundsfarven... og så er det også smart at bruge css shorttags...bare et forslag...det forkorter str. af din css :)

(jeg ville dog anbefale at man placerer sin tekst og ikke sin td ligesom jeg gjorde i 01/04-2006 00:11:58... - dog havde jeg selv en fejl der... man kan godt slette "bold" under ".boldpos{")

...
<style type="text/css">
<!--
.back {
    background: #999999 url('artikel-1.gif') no-repeat 20px 10px;
    height: 200px;
    width: 200px;
}
.cellen-text {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #CC0000;
    padding: 160px 0px 0px 40px;
}
-->
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" class="back">
  <tr>
    <td class="cellen-text">Her er noget tekst </td>
  </tr>
</table>
...
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
1 min siden Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »