Søg
Avatar billede steen_hansen Forsker
30. april 2006 - 00:05 Der er 24 kommentarer og
2 løsninger

Positionering i <div>

Jeg forsøger at få en transparent GIF (en rød pil) til at stå før "Bemærkninger" på første linie. Når man klikker på linket "Bemærkninger", er det meningen, at noget tekst bliver skrevet ud i en DIV.

Funktionelt er der ikke noget i vejen med det, men jeg vil gerne have placeret den røde pil (f.eks.) 40px fra venstre kant, og ca. 10-15px til højre for pilen, skal jeg så have "Bemærkninger til at stå. Dvs. at den røde pil + "Bemærkninger bliver rykket 60-70px ind fra venstre kant. Jeg kan så ikke få pilen til at pege på "Bemærkninger", "Bemærkninger" kommer til at stå på linien neden under.

Ydermere kan jeg heller ikke få teksten til at stå helt ude til venstre, den bliver skubbet lige så langt ind fra venstre kant, som den røde pil gør.

HTML/CSS:

<td colspan="3" style="width: 100%; padding: 15px 0px 25px 0px;">
    <img src="/images/readthis.gif" style="border: 0px; width: 5px; height: 9px; padding-left: 15px;" alt="Bemærkning">
    <div style="cursor: pointer;" onclick="showMnu(1);"><b>Bemærkning</b></div>
    <div style="display: none;" id="mnu1">En masse tekst her</div>
</td>
Avatar billede steen_hansen Forsker
30. april 2006 - 00:14 #1
Lidt mere forenklet:


Den første linie:

1. Den røde pil skal rykkes 20, 30 eller måske 40px ind fra venstre.
2. "Bemærkninger" skal stå ca. 10-15px til venstre for den røde pil


Den anden linie:

1. Hele teksten må ikke rykkes mod venstre, den skal stå som padding-left: 0px;


Håber du kan se hvor jeg vil hen. Ellers ... spørg
Avatar billede apo Praktikant
30. april 2006 - 00:14 #2
Prøv at sætte en float:left; på dit grafiske element:

<td colspan="3" style="width: 100%; padding: 15px 0px 25px 0px;">
    <img src="/images/readthis.gif" style="float:left; border: 0px; width: 5px; height: 9px; padding-left: 15px;" alt="Bemærkning">
    <div style="cursor: pointer;" onclick="showMnu(1);"><b>Bemærkning</b></div>
    <div style="display: none;" id="mnu1">En masse tekst her</div>
</td>
Avatar billede mclemens Nybegynder
30. april 2006 - 00:16 #3
Sådan? ... (måske bortset fra quick-test background css defineringer der lige skal fjernes og en display der skal rettes til none) ...


<!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>Ingen titel</title></head>

<body>
<table style="background:#00f;width:100%;"><tr>

<td colspan="3" style="width: 100%; padding: 15px 0px 25px 0px;">
<img src="/images/readthis.gif" style="float:left;margin-left:40px;border: 0px; width: 5px; height: 9px;background:#ff0;" alt="Bemærkning">

<div style="float:left;margin-left:15px;cursor: pointer;background:#f00;" onclick="showMnu(1);"><b>Bemærkning</b></div>

<div style="display: block;clear:both;" id="mnu1">En masse tekst her</div>

</td>

</tr></table>

</body></html>
Avatar billede steen_hansen Forsker
30. april 2006 - 00:17 #4
Men det vil jo ikke afhjælpe problemet med teksten, som brugeren skal læse, på linie 2. Den vil stadig flugte "Bemærkninger" ... :o/
Avatar billede mclemens Nybegynder
30. april 2006 - 00:18 #5
hov update ... der var ingen indlæg lige før :D
Avatar billede steen_hansen Forsker
30. april 2006 - 00:18 #6
mclemens, så ikke dit indlæg, prøver ...
Avatar billede apo Praktikant
30. april 2006 - 00:18 #7
Prøv dette:

<td colspan="3" style="width:100%; padding:15px 0 25px 0;">
    <img src="/images/readthis.gif" style="float:left; border:0; width:5px; height:9px; margin-left:40px; margin-right:15px;" alt="Bemærkning">
    <div style="cursor: pointer;" onclick="showMnu(1);"><b>Bemærkning</b></div>
    <div style="display: none;" id="mnu1">En masse tekst her</div>
</td>
Avatar billede mclemens Nybegynder
30. april 2006 - 00:20 #8
haps, haps margin - du manglede at tage float også apo :)
Avatar billede mclemens Nybegynder
30. april 2006 - 00:21 #9
næh, den var egentlig ikke nødvendig :)
Avatar billede steen_hansen Forsker
30. april 2006 - 00:22 #10
mclemens, så er den der næsten. Pånær pilen, den hænger vist oppe i toppen af <td>. Prøver lige vertical-align: middle;
Avatar billede steen_hansen Forsker
30. april 2006 - 00:24 #11
Pilen vil ikke ned i midten af cellen med vertical-align: middle; - hva' gør jeg så?
Avatar billede mclemens Nybegynder
30. april 2006 - 00:25 #12
det er nok bedre at basere den på apo's der er en float og en clear mindre ...
Avatar billede mclemens Nybegynder
30. april 2006 - 00:25 #13
- kigger på pilen :P (hvis ikke apo er hurtigere :D )
Avatar billede apo Praktikant
30. april 2006 - 00:27 #14
Jeg arbejder på det (men hurtigt går det ikke ;-) )
Avatar billede mclemens Nybegynder
30. april 2006 - 00:27 #15
det hurtigste er umiddelbart en margin-top på pilen... (baseret på apo's)


<!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>Ingen titel</title></head>

<body>
<table style="background:#00f;width:100%;"><tr>

<td colspan="3" style="width:100%; padding:15px 0 25px 0;">
    <img src="/images/readthis.gif" style="float:left; border:0; width:5px; height:9px; margin-top: 5px; margin-left:40px; margin-right:15px;background:red;" alt="Bemærkning">
    <div style="cursor: pointer;" onclick="showMnu(1);"><b>Bemærkning</b></div>
    <div style="display: none;" id="mnu1">En masse tekst her</div>
</td>

</tr></table>

</body></html>
Avatar billede steen_hansen Forsker
30. april 2006 - 00:28 #16
Ok, jeg har taget apo's eksempel. Men problemet med pilen, der skraber mod toppen af cellen er på plads. Håber I kan hjælpe ....
Avatar billede steen_hansen Forsker
30. april 2006 - 00:29 #17
Men hvis der margin-top: 5px; vil den jo ikke centreres i cellen vertikalt?
Avatar billede steen_hansen Forsker
30. april 2006 - 00:39 #18
Jeg er på vej i seng. Vi snakkes forhåbentlig ved i morgen :)
Avatar billede apo Praktikant
30. april 2006 - 00:39 #19
Prøv denne:

<td colspan="3" style="width:100%; padding:15px 0 25px 0;">
    <div style="float:left; line-height:15px;">
        <img src="/images/readthis.gif" style="margin-top:3px; float:left; width:5px; height:9px; margin-left:40px; margin-right:15px;" alt="Bemærkning">
        <div style="line-height:15px;">
            <div style="cursor: pointer;" onclick="showMnu(1);"><b>Bemærkning</b></div>
            <div style="display:none;" id="mnu1">En masse tekst her</div>
        </div>
    </div>
</td>
Avatar billede mclemens Nybegynder
30. april 2006 - 00:53 #20
Kan ikke lige p.t. se anden løsning end margin top som både mit og apo's sidste forslag bygger på ... har prøvet med absolute's og negativ margin og relative's placeret i absolutes :/ (hopper også til køjs)
Avatar billede steen_hansen Forsker
30. april 2006 - 09:39 #21
apo, mclemens, den er lige i øjet. Smid et svar, begge to :)
Avatar billede mclemens Nybegynder
30. april 2006 - 11:05 #22
ok :)
Avatar billede apo Praktikant
30. april 2006 - 11:25 #23
Kommer her :-)
Avatar billede steen_hansen Forsker
30. april 2006 - 11:59 #24
Tak for hjælpen, drenge! I er nogle guldklumper :)
Avatar billede mclemens Nybegynder
30. april 2006 - 12:06 #25
hehe, og tak for point :)
Avatar billede apo Praktikant
30. april 2006 - 12:14 #26
Velbekomme, og tak for points :-)
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 14: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
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
White papers
Flere white papers »