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

torbenclausen Nybegynder

12. november 2005 - 19:41 Der er 18 kommentarer

Billede og tekst i tabel uden margin

Hej
Har en tabel hvori jeg skal have et billede placeret i toppen til højre og tekste under billedet ligeledes med højre margin.
Jeg har prøvet og prøvet alle mulige måder men det vil ikke lykkes. Somom tabellen har en margin i toppen og i højre side. Bruger nu følgende kode:

Min tabel:
<table width="0" border="0" cellspacing="0" cellpadding="0"">
<tr>
<td id="profile">

<div id="profilefactsinner">
<div id="profilefacts">
<img id="imageprofile" src="images/billed.jpg"><br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst</div>
</div>
</td>

Min css:
#profile {
background-color:#66CC99;
width:150px;
height:300px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;

}

#imageprofile {
border:1px solid #000000;
position:relative;
top:0px;
}

#profilefactsinner {
width:150px;
height:348px;
position:relative;

}

#profilefacts {
position:absolute;
top:0px;
right:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:normal;
text-align:right;

}

Håber i forstår spørgsmålet? Vil være lækkert at få det løst, har drillet længe.

//TC

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 19:42 #1

Rettelse

#profilefactsinner {
width:150px;
height:300px;
position:relative;

}

Synes godt om

apo Praktikant

12. november 2005 - 20:10 #2

Du bruger selvfølgelig en fuld DOCTYPE-defintion, ikke?

F.eks.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ellers disabler du det meste CSS i IE.

Prøv at tilføje:

html,body {margin:0; padding:0; height:100%;}

til din CSS, og se om det hjælper noget.

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 20:21 #3

Jo bruger fuld docktype-definition...

Det andet gør ingen forskel...

Kan godt fx sætte fx

#profilefacts {
position:absolute;
top:0px;
right:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:normal;
text-align:right;
}

Så lægger billedet sig 20px fra toppen, men det vil ikke lægge sig med top:0px;

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 20:21 #4

Sorry ikke right:20px men top:20px

Synes godt om

apo Praktikant

12. november 2005 - 20:28 #5

har du prøvet med padding:0; ?

Synes godt om

apo Praktikant

12. november 2005 - 20:33 #6

Det er lidt svært for mig, at få et overblik over det, du er i gang med. Jeg kan ikke følge hvorfor du er ude i position:absolute;

Har du evt. et link?

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 20:37 #7

Nej har ik lige mulighed for upload lige nu, men position absolute er fordi jeg har lagt #profilefacts ind i #profilefactsinner som har position:relative;
En måde jeg før har løst problemer med placeringer af div.

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 20:40 #8

Altså er det bare noget tekst og et billede som er lagt ind i en <div> som skal placeres øverst til højre i tabellen... Men det er somom tabellen har en margin jeg ikke kan fjerne!

Synes godt om

apo Praktikant

12. november 2005 - 20:43 #9

Ud fra den kode du har vist mig, ser det fint ud når jeg kører den i min editor. Billedet befinder sig i øverste højre hjørne (uden luft mellem billede og kanten) og teksten befinder sig neden under - højrejusteret.

Der må være noget andet galt så?

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 20:47 #10

Ser også fint ud i min editor. Men når du tager et preview i en browser er den gal?!?

Synes godt om

apo Praktikant

12. november 2005 - 20:54 #11

Nu har jeg testet det i både IE 6.0 og FF - Det ser ud som, jeg kan forstå du vil have at det skal se ud (Billedet er helt ude ved kanten af det grønne felt både i top og right).

Synes godt om

torbenclausen Nybegynder

12. november 2005 - 21:03 #12

Hmm det kan jeg ikke forstå, er der ingen grøn kant i toppen af din tabel? Kan godt få right:0px; til at funge.
Vil du poste koden du har brugt?

Synes godt om

apo Praktikant

12. november 2005 - 22:01 #13

Ingen grøn kant. Den sorte kant på billedet ligger helt ud til kanten :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nyt dokument</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
#profile {
background-color:#66CC99;
width:150px;
height:300px;
padding:0 0 0 0;
margin:0 0 0 0;
}
#imageprofile {
border:1px solid #000000;
position:relative;
top:0;
}
#profilefactsinner {
width:150px;
height:300px;
position:relative;
}
#profilefacts {
position:absolute;
top:0;
right:0;
font-family:verdana, arial, helvetica, sans-serif;
font-size:9px;
font-weight:normal;
text-align:right;
}
</style>
</head>

<body>
<table width="0" border="0" cellspacing="0" cellpadding="0"">
<tr>
<td id="profile">

<div id="profilefactsinner">
<div id="profilefacts">
<img id="imageprofile" src="images/billed.jpg" style="width:100px; height:100px;"><br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst</div>
</div>
</td>
</tr>
</table>

</body>
</html>

Synes godt om

apo Praktikant

13. november 2005 - 17:48 #14

Er du kommet videre?

Synes godt om

torbenclausen Nybegynder

15. november 2005 - 16:44 #15

Hmm nej og undskyld jeg sådan forsvandt! Penge der skulle tjenes;o)

Anyway, troede egentligt ikke det gjorde noget at lægge en tabel i en tabel mht layout. Det er egentligt bare en lille del af koden fra siden som er:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<br>

<table width="0" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td id="big">

<tr>
<td id="topmenu">
<div id="top-inner">
<ul id="menulist">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
<table width="0" border="0" cellspacing="0" cellpadding="0"">
<tr>
<td id="profile">
<div id="profilefactsinner">
<div id="profilefacts">
<img id="imageprofile" src="images/billed.jpg" style="width:100px; height:100px;"><br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst<br>
Tekst</div>
</div></div>
</td>
<td>
<table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="topimage">3</td>
</tr>
<tr>
<td id="main"><iframe src="main.htm" marginwidht=0 marginheight=0 hspace=0 vspace=0 frameborder="0" scrolling="NO" width="540" height="270"></iframe></td>
</tr>
<tr>
<td id="bottom"> </td>
</tr>
</table>

</body>
</html>

Og det vil godt virker hvis man laver det i sin helt egen tabel, men ikke "samlet". Håber du forstår?

Synes godt om

apo Praktikant

17. november 2005 - 18:32 #16

Der sker ikke noget ved, at lægge en tabel i en tabel; Dog er det uhensigtsmæssigt, at neste mange tabeller ind i hinanden (Som du har gjort), hvis det ikke er strengt nødvendigt.

Men hvorfor er det nødvendigt for dig, at lægge en tabel i en tabel, i det viste tilfælde? Hvis det er fordi du i den ene tabel har en enkelt kolonne og har brug for at opdele en celle i flere, kan du benytte dig af colspan="x" (Hvor x er antallet af kolonner) - Som vist herunder:

<table>
<tr>
<td colspan="2" style="width:500px;"> </td>
</tr>
<tr>
<td style="width:250px;"> </td>
<td style="width:250px;"> </td>
</tr>
</table>

Derudover er det vigtigt, at du husker at afslutte elementerne i din tabel; Du har f.eks. glemt en </tr> i følgende:

<table width="0" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td id="big">


<tr>
<td id="topmenu">
<div id="top-inner">
<ul id="menulist">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>

<table width="0" border="0" cellspacing="0" cellpadding="0"">
<tr>

Synes godt om

apo Praktikant

19. november 2005 - 15:33 #17

Er du ude, at tjene flere penge? ;-)

Synes godt om

torbenclausen Nybegynder

20. november 2005 - 18:34 #18

He he ja, eller har ihvertfald lige været det;o)

Der mangler ikke en </tr> den er nederst i dokumentet, "big" er lisom bare den der indeholder alt det andet, så den afsluttes helt til sidst.

Kendte ikke til colspan, men skal både have rækker og kolonner i dokumentet så det rækker vist ikke til dette, men tak for tippet!

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