Avatar billede 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
Avatar billede torbenclausen Nybegynder
12. november 2005 - 19:42 #1
Rettelse

#profilefactsinner    {
    width:150px;
    height:300px;
    position:relative;
 
}
Avatar billede 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.
Avatar billede 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;
Avatar billede torbenclausen Nybegynder
12. november 2005 - 20:21 #4
Sorry ikke right:20px men top:20px
Avatar billede apo Praktikant
12. november 2005 - 20:28 #5
har du prøvet med padding:0; ?
Avatar billede 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?
Avatar billede 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.
Avatar billede 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!
Avatar billede 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å?
Avatar billede 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?!?
Avatar billede 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).
Avatar billede 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?
Avatar billede 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>
Avatar billede apo Praktikant
13. november 2005 - 17:48 #14
Er du kommet videre?
Avatar billede 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">&nbsp;</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?
Avatar billede 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;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:250px;">&nbsp;</td>
    <td style="width:250px;">&nbsp;</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">
  <!-- Her mangler der en </tr> -->

  <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>
Avatar billede apo Praktikant
19. november 2005 - 15:33 #17
Er du ude, at tjene flere penge? ;-)
Avatar billede 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!
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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