Avatar billede m0nk3y Nybegynder
03. juni 2006 - 14:58 Der er 9 kommentarer og
1 løsning

Billede helt i toppen med valign

Hej folkens.

Jeg er lige i gang med at fabrikere et lille design, og har så et problem i en table.
Problemet er at jeg ikke kan få mit billede til at være helt i toppen, på trods af at jeg har sat valign="top" i td'en som den ligger i.

Har haft problemet før, men har der bare løst det ved at "presse" den op (læs: jeg har sat nogen tables med noget height og på den måde udfyldt pladsen under billedet)

Sjovt nok virker det i Firefox, men i Internet Explorer kommer den jo som sagt ikke helt op.

En min kode, dog en smule reduceret, ser sådan ud:

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

<html><body>

<center>

    <table class="headtable" cellspacing="0" cellpadding="0" width="800" height="100%">
        <tr>
            <td width="12" bgcolor="#F4F4F4"></td>
            <td width="173" bgcolor="#FAFAFA" valign="top">
           
                <img src="billeder/design/bjaelke-roed-menu_top.jpg">
               
                <table border="0" cellpadding="5" cellspacing="0">
                    <tr><td valign="middle">
                    <img src="billeder/design/ikon-forside.gif">
                    </td></tr>
                </table>
               
            </td>
            <td width="603" bgcolor="#FFFFFF"></td>
            <td width="12" bgcolor="#F4F4F4"></td>
           
        </tr>
    </table>

</center></body></html>

</body></html>

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

headtable i css'en ser sådan her ud:

---------------------------
table.headtable {background: #FFFFFF; border-left: 1px #E4E4E4 solid; border-right: 1px #E4E4E4 solid;}
---------------------------

Det er <img src="billeder/design/bjaelke-roed-menu_top.jpg"> som jeg har problemer med at få op i toppen.

Mit design kan ses her:

http://webonnet.dk/exp/valign_problemer/index.php

Håber der nogen der kan hjælpe!

Med venlig hilsen
Kristian Just Iversen
Avatar billede m0nk3y Nybegynder
03. juni 2006 - 15:21 #1
hmm, sjovt. Det bliver smidt helt til toppen hvis jeg laver et <br> efter <img src="billeder/design/bjaelke-roed-menu_top.jpg">

Tror det er hvad jeg gør i fremtiden :)

Lukket.
Avatar billede apo Praktikant
03. juni 2006 - 16:41 #2
Apropros fremtiden; så er det måske ved at være tid for, at udskifte den gamle HTML med en nyere, og begynde at anvende CSS, som det er tiltænkt ;-)
Avatar billede m0nk3y Nybegynder
03. juni 2006 - 16:51 #3
Ja, jeg skal snart havde udvidet min horisont lidt hvad angår HTML.

Men tror ikke jeg er helt med på hvad du mener med CSS?
Hvis det er fordi du mener at jeg mangler at lave en <link>-kontainer til min CSS-fil, så har jeg faktisk lavet det. Det er fordi jeg er kommet til at klippe den væk da jeg lige fjernede en masse af mit javascript og MySQL-connecter da jeg skulle paste lidt kode herinde.

Vil gerne blive en bedre programmør, så hvis du vil fortælle hvad jeg gør galt med CSS'en vil jeg blive lykkelig :)

- Kristian Just Iversen
Avatar billede apo Praktikant
03. juni 2006 - 17:03 #4
Det er ikke så meget, at du bruger CSS forkert men mere, at du ikke bruger CSS, der hvor du kan.

For eksempel kan du i stedet for at bruge: <center> lægge følgende selectors:

    margin:0 auto; width:800px; height:100%; border-collapse:collapse;

ind i din allerede eksisterende class:

    table.headtable {margin:0 auto; width:800px; height:100%; border-collapse:collapse; background:#FFFFFF; border-left:1px #E4E4E4 solid; border-right:1px #E4E4E4 solid;}

og tilføje denne til dit eksterne stylesheet:

    table td {margin:0; padding:0;}

Derved behøver du kun at angive din class i dit table-tag:

  <table class="headtable">
Avatar billede apo Praktikant
03. juni 2006 - 17:16 #5
Lidt dårligt forklaret af mig... i stedet for <center> kan du benytte hacket: margin:0 auto; og angive en bredde (vigtigt!) - derved centrerer du et block-element, som f.eks. et table.

height:100%; og border-collapse:collapse; er blot en omskrivning af de attributter, du angav i tablet, der er blevet lavet om til CSS.
Avatar billede m0nk3y Nybegynder
03. juni 2006 - 17:17 #6
okay, tak for det :)

Det er egenligt grundet at jeg ikke er så kendt i CSS og derfor bare har brugt en dårlig blanding af HTML og CSS i min programmering.

Men jeg siger da tak for hjælpen, og vil da straks indsætte den nyvundne kode. Det er helt sikkert noget jeg vil få brug for længere hen.

Jeg må hellere fortsætte arbejdet. Hvis du ønsker points, kan jeg lige oprette et nyt spørgsmål.
Avatar billede apo Praktikant
03. juni 2006 - 17:24 #7
Velbekomme, og ellers tak. Jeg behøver ikke at få points :-)

CSS er egentligt beregnet på, at man bruger de forskellige selctors (f.eks. .mitTable {...}) på kryds og på tværs:

CSS-filen:
.tdWidth {width:600px;}
.tdBg {background-color:#C0C0C0;}
.tdText {font-family:verdana, tahoma, sans-serif; font-size:11px; color:#000;}

HTML:
<td class="tdWidth tdBg tdText">Dette er en tabel-celle...</td>

Derved kan du genbruge f.eks. 'tdText' på andre elementer uden, at skulle genbruge tdWidth og tdText - eller du kan genbruge 'tdBg' uden at skulle genbruge 'tdWidth' og 'tdText' osv.
Avatar billede apo Praktikant
03. juni 2006 - 17:25 #8
Rettelse:

Derved kan du genbruge f.eks. 'tdText' på andre elementer uden, at skulle genbruge 'tdWidth' og 'tdBg' - eller du kan genbruge 'tdBg' uden at skulle genbruge 'tdWidth' og 'tdText' osv.
Avatar billede m0nk3y Nybegynder
03. juni 2006 - 17:29 #9
aah, det er nok det bedste jeg har lært i denne uge :-)

Men må hellere komme videre med arbejdet da det er lønnet en smule.

Men nu du ikke ville have point, så har du fået en kommentar under karma i stedet.

Fortsat god dag :)
Avatar billede apo Praktikant
03. juni 2006 - 17:32 #10
Tak. Velbekomme, og god arbejdslyst :-)
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