Søg
Avatar billede andreas13_fam Nybegynder
04. februar 2009 - 17:46 Der er 11 kommentarer og
1 løsning

Center objekt og sæt bredden til 100%

Jer er ved at prøve at lave et meget simpelt alternativ til thickboks eller lightboks.

Men jeg har følgene spørgsmål
1. i FF-3 fylder <div> ikke hele skærmen når jeg har sat
width:100%;
height:100%;
  når det virker i IE-7
2. hvordan center <table> lige i midten af skrærmen via CSS


kode--------
CSS
div.upperbillede {
position:fixed;
background-image:url(../img/upperbg.png);
background-repeat:repeat;
width:100%;
height:100%;
z-index:2;
display:none;
}

table.billedramme {

}

XHTML 1.1
<div id="test" class="upperbillede">
  <table class="billedramme">
    <tr>
      <td>
        <img src="billede.jpg" alt ="billede" />
      </td>
    </tr>
  </table>
</div>
Avatar billede olebole Juniormester
04. februar 2009 - 22:25 #1
<ole>

Altså, hvis du virkelig mener, hvad du skriver "XHTML 1.1", kan IE jo slet ikke vise dokumentet, men vil i stedet tilbyde brugeren at downloade det  ;o)

Hvis vi forudsætter, du i virkeligheden skriver XHTML 1.1 markup og server det som HTML (resultat: Dårlig HTML-tag-soup), tillader jeg mig at rette det til ordentlig kode og angive HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 0.85em verdana, tahoma, sans-serif;
}
div.upperbillede {
    position:fixed;
    background: yellow url(../img/upperbg.png);
    background-repeat:repeat;
    width:100%;
    height:100%;
    z-index:2;
    display:block;
}
</style>
</head>
<body>

<div id="test" class="upperbillede">
  <table class="billedramme">
    <tr>
      <td>
        <img src="billede.jpg" alt ="billede">
      </td>
    </tr>
  </table>
</div>

</body>
</html>

- og det virker fint  =)

/mvh
</bole>
Avatar billede olebole Juniormester
04. februar 2009 - 22:26 #2
PS: Ifølge CSS-standarden skal en relativ højde udregnes på baggrund af det omkransende elements højde - hvorfor denne eksplicit skal være sat. Det gælder også body- og dokument-elementerne
Avatar billede andreas13_fam Nybegynder
05. februar 2009 - 16:33 #3
Tak det virkede, ved du hvad <img> går under.
Når men jeg fik svar på alle mine hoved spørgsmål så du må da gerne ligge et svar.
Avatar billede andreas13_fam Nybegynder
05. februar 2009 - 15:31 #4
Ja det virker, den centere bare ikke vandret.
Jeg har prøvet med text-align:center; men det virker kun i IE 7. Sikkert fordi at det er til tekst.

Jeg ved at der er mange her inde der ikke er glade for side spørgsmål, men jeg vil nu aligevel komme med et.
Hvorfor er min Overskrift ikke i midten når jeg har sat de 2 celler til venstre og højre til at være 70px bredde.

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

div.upperbillede {
position:fixed;
background-image:url(upperbg.png);
background-repeat:repeat;
width:100%;
height:100%;
z-index:2;
text-align:center;
}

table.upperramme {
position:relative;
top:10px;
}

td.Andet {
    background-repeat:repeat;
    background-image:url(tablebg.png);
    text-align:left;
    font-size:90%;
    widht:70px;
}

td.upperoverskrift {
    background-repeat:repeat;
    background-image:url(tablebg.png);
    text-align:center;
    font-size:180%;
}

td.F11 {
    background-repeat:repeat;
    background-image:url(tablebg.png);
    text-align:right;
    font-size:90%;
    widht:70px;
}

td.upperbillede {
border:none;
    background-repeat:repeat;
    background-image:url(tablebg.png);
}

td.upperafslut {
text-align:right;
    background-repeat:repeat;
    background-image:url(tablebg.png);
}

td.Top {
    background-position:top;
    background-repeat:repeat-x;
    background-image:url(top.png);
    background-color:transparent;
    height:16px;
}

td.Bottom {
    background-position:bottom;
    background-repeat:repeat-x;
    background-image:url(bottom.png);
    background-color:transparent;
    height:16px;
}

td.Left {
    background-position:left;
    background-repeat:repeat-y;
    background-image:url(left.png);
    background-color:transparent;
    width:16px;
}

td.Right {
    background-position:right;
    background-repeat:repeat-y;
    background-image:url(right.png);
    background-color:transparent;
    width:16px;
}

td.LeftTop {
    background-position: right bottom;
    background-repeat:no-repeat;
    background-image:url(topleft.png);
    background-color:transparent;
    width:16px;
    height:16px;
}
td.RightTop {
    background-position: left bottom;
    background-repeat:no-repeat;
    background-image:url(topright.png);
    background-color:transparent;
    width:16px;
    height:16px;
}

td.LeftBottom {
    background-position: right top;
    background-repeat:no-repeat;
    background-image:url(bottomleft.png);
    background-color:transparent;
    width:16px;
    height:16px;
}
td.RightBottom {
    background-position: left top;
    background-repeat:no-repeat;
    background-image:url(bottomright.png);
    background-color:transparent;
    width:16px;
    height:16px;
}


HTML--
            <div id="mybox" class="upperbillede" style="display:none;">
                <table class="upperramme" cellpadding="0" cellspacing="0" border="1">
                    <tr>
                        <td class="LeftTop"></td><td class="Top" colspan="3"></td><td class="RightTop"></td>
                    </tr>   
                    <tr>
                        <td class="Left" rowspan="3"></td>
                        <td class="Andet">
                        &nbsp;
                        </td>

                        <td class="upperoverskrift">
                            <strong>Overskrift</strong>
                        </td>
                        <td class="F11">
                            Fuld skærm: Tryk F11
                        </td>

                        <td class="Right" rowspan="3"></td>
                    </tr>   
                    <tr>
                        <td class="upperbillede" colspan="3">
                            <img src="Billeder/P11700001_real.jpg" alt="billede" />
                        </td>
                    </tr>
                    <tr>
                        <td class="upperafslut" colspan="3">
                            <img src="mybox/close.png" alt="LUK" onclick="myboxclose()" style="cursor:pointer;">
                        </td>
                    </tr>
                    <tr>
                        <td class="LeftBottom"></td><td class="Bottom" colspan="3"></td><td class="RightBottom"></td>
                    </tr>
                </table>
            </div>
Avatar billede andreas13_fam Nybegynder
05. februar 2009 - 15:31 #5
Ja det virker, den centere bare ikke vandret.
Jeg har prøvet med text-align:center; men det virker kun i IE 7. Sikkert fordi at det er til tekst.

Jeg ved at der er mange her inde der ikke er glade for side spørgsmål, men jeg vil nu aligevel komme med et.
Hvorfor er min Overskrift ikke i midten når jeg har sat de 2 celler til venstre og højre til at være 70px bredde.

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

div.upperbillede {
position:fixed;
background-image:url(upperbg.png);
background-repeat:repeat;
width:100%;
height:100%;
z-index:2;
text-align:center;
}

table.upperramme {
position:relative;
top:10px;
}

td.Andet {
    background-repeat:repeat;
    background-image:url(tablebg.png);
    text-align:left;
    font-size:90%;
    widht:70px;
}

td.upperoverskrift {
    background-repeat:repeat;
    background-image:url(tablebg.png);
    text-align:center;
    font-size:180%;
}

td.F11 {
    background-repeat:repeat;
    background-image:url(tablebg.png);
    text-align:right;
    font-size:90%;
    widht:70px;
}

td.upperbillede {
border:none;
    background-repeat:repeat;
    background-image:url(tablebg.png);
}

td.upperafslut {
text-align:right;
    background-repeat:repeat;
    background-image:url(tablebg.png);
}

td.Top {
    background-position:top;
    background-repeat:repeat-x;
    background-image:url(top.png);
    background-color:transparent;
    height:16px;
}

td.Bottom {
    background-position:bottom;
    background-repeat:repeat-x;
    background-image:url(bottom.png);
    background-color:transparent;
    height:16px;
}

td.Left {
    background-position:left;
    background-repeat:repeat-y;
    background-image:url(left.png);
    background-color:transparent;
    width:16px;
}

td.Right {
    background-position:right;
    background-repeat:repeat-y;
    background-image:url(right.png);
    background-color:transparent;
    width:16px;
}

td.LeftTop {
    background-position: right bottom;
    background-repeat:no-repeat;
    background-image:url(topleft.png);
    background-color:transparent;
    width:16px;
    height:16px;
}
td.RightTop {
    background-position: left bottom;
    background-repeat:no-repeat;
    background-image:url(topright.png);
    background-color:transparent;
    width:16px;
    height:16px;
}

td.LeftBottom {
    background-position: right top;
    background-repeat:no-repeat;
    background-image:url(bottomleft.png);
    background-color:transparent;
    width:16px;
    height:16px;
}
td.RightBottom {
    background-position: left top;
    background-repeat:no-repeat;
    background-image:url(bottomright.png);
    background-color:transparent;
    width:16px;
    height:16px;
}


HTML--
            <div id="mybox" class="upperbillede" style="display:none;">
                <table class="upperramme" cellpadding="0" cellspacing="0" border="1">
                    <tr>
                        <td class="LeftTop"></td><td class="Top" colspan="3"></td><td class="RightTop"></td>
                    </tr>   
                    <tr>
                        <td class="Left" rowspan="3"></td>
                        <td class="Andet">
                        &nbsp;
                        </td>

                        <td class="upperoverskrift">
                            <strong>Overskrift</strong>
                        </td>
                        <td class="F11">
                            Fuld skærm: Tryk F11
                        </td>

                        <td class="Right" rowspan="3"></td>
                    </tr>   
                    <tr>
                        <td class="upperbillede" colspan="3">
                            <img src="Billeder/P11700001_real.jpg" alt="billede" />
                        </td>
                    </tr>
                    <tr>
                        <td class="upperafslut" colspan="3">
                            <img src="mybox/close.png" alt="LUK" onclick="myboxclose()" style="cursor:pointer;">
                        </td>
                    </tr>
                    <tr>
                        <td class="LeftBottom"></td><td class="Bottom" colspan="3"></td><td class="RightBottom"></td>
                    </tr>
                </table>
            </div>
Avatar billede olebole Juniormester
05. februar 2009 - 15:52 #6
Horisontal centrering udføres på to forskellige måder:

*) Tekst og inline-elementer (span, b, i, a, osv) centreres med 'text-align:center'.

*) Block-elementer (div, p, table, osv) centreres med 'margin:0 auto'. Husk, at give elementet en bredde!

Dog vil IE ofte centrere block-elementer med 'text-align:center', men det er en fejl ifølge CSS-standarden.
Avatar billede olebole Juniormester
05. februar 2009 - 15:54 #7
- og det var vist lidt uldent. Prøver lige igen  =)

*) Tekst og inline-elementer (span, b, i, a, osv) centreres med 'text-align:center' på det omkransende element.

*) Block-elementer (div, p, table, osv) centreres med 'margin:0 auto' på elementet selv. Husk, at give elementet en bredde!
Avatar billede olebole Juniormester
05. februar 2009 - 23:07 #8
Det er meget ligetil:

*) Inline-elementer lægger sig 'in line' - 'på linje'.
*) Block-elementer danner en blok af indhold - og dermed et linjeskift før og efter elementet. De lægger sig altså ikke på linje, men over/under hinanden.

Hvis du skriver to img-tags efter hinanden i koden, vil de to billeder lægge sig ved siden af hinanden på én linje, når de ses i en browser.

Img-elementer er med andre ord inline-elementer, som centreres med 'text-align:center' på det omkransende element
Avatar billede olebole Juniormester
05. februar 2009 - 23:23 #9
- men ting kan altid gøres på mange måder. Hvad der er 'den rigtige', kommer an på situationen, og hvordan omgivelserne ser ud. Du kan f.eks. kikke lidt på disse to:

<style type="text/css">
.center {
    width: 600px;
    height: 200px;
    text-align: center;
    border: 1px solid red;
}
</style>

<div class="centerSpan">
    blablabla<br>
    <img src="...." alt="...." width="120" height="30"><br>
    blablabla
</div>

==========================================================

<style type="text/css">
.center {
    width: 600px;
    height: 200px;
    border: 1px solid red;
}
.center div {
    text-align: center;
}
.center img {
    display: block;
    margin: 0 auto;
}
</style>

<div class="center">
    <div>blablabla</div>
    <img src="...." alt="...." width="120" height="30">
    <div>blablabla</div>
</div>
Avatar billede olebole Juniormester
05. februar 2009 - 23:24 #10
- og husk altid at teste i flere browsere!  ;o)
Avatar billede andreas13_fam Nybegynder
14. februar 2009 - 12:03 #11
Ja vil du ligge et svar :D
Avatar billede olebole Juniormester
14. februar 2009 - 15:46 #12
Jeg tror, jeg lægger det  ;o)
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 21:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows
16/0110:29 Negativ billeder på samsung Af ALICE i Småopgaver
15/0115:45 HJÆLP - Lopslag, Indeks? Hvad gør jeg! Af Eva i Excel
White papers
Flere white papers »