Toon posts:

[CSS/HTML] IE/FF verschil ...

Pagina: 1
Acties:

dinsdag 31 oktober 2006 21:35

Acties:

Verwijderd

Topicstarter
Ik zit met een klein versieprobleempje...

Ik wil graag 3 vlakken van 300 pixels naast elkaar hebben, gecentreerd op de pagina. Dit wil ik met css/html doen.

Het probleem is dat Firefox de boel links uitlijnt en IE de boel centreert... Daarnaast moet er ook geen ruimte tussen de blokken zitten. Hebben jullie een idee wat ik over het hoofd zie?

CSS
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

html,body
{
    background-color : #FFFFFF;
    color: #000000;
    font-family : Helvetica, Arial;
    font-size : 11px;
    height: 100%
}

.outer
{
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}


.left
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #f3d1a6;
}

.middle
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #000000;
}

.right
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #f3d1a6;
}


HTML
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<body>
<table class="outer">
    <tr>
        <td>
            <div class="outer">
                <table>
                    <td class="left">
                        linker kolom
                    </td>
                    <td class="middle">
                        middenkolom
                    </td>
                    <td class="right">
                        rechter kolom
                    </td>
                </table>
            </div>          
        </td>
    </tr>
</table>
</body>
</html>


Enne misschien kan het ook optimaler ... ik sta open voor goede (universele, miss resolutieonafhankelijke) ideeen....

dinsdag 31 oktober 2006 21:42

Acties:
  • deCube
  • Registratie: Mei 2006
  • Laatst online: 25-11 21:04

deCube

Heb je geen voorbeeld pagina? Dat is iets makkelijker kijken. Van wat ik zo zie heb je tussen de html en body tags niet: margin: 0px 0px 0px 0px; gezet.

In de table width="900" zetten zal denk ik ook wel helpen.



EDIT: Je kunt denk ik beter het volgende doen:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

html,body
{
    background-color : #FFFFFF;
    color: #000000;
    font-family : Helvetica, Arial;
    font-size : 11px;
    height: 100%;
    margin: 0px 0px 0px 0px;
}

.outer
{
    width: 900px;
    height: 300px;
    top: 50%
    left: 50%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
}


.left
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #f3d1a6;
}

.middle
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #000000;
}

.right
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #f3d1a6;
}

[ Voor 64% gewijzigd door deCube op 31-10-2006 21:44 ]

Work hard & be brave.

dinsdag 31 oktober 2006 21:43

Acties:
  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18

BasieP

je tabel is 100%, je body ook dus de tabel staat gewoon altijd max toch? (dus niet gecentreerd...)

bedoel je dan de text in de tabel?
want ik zie overal text-align: left staan oid, en dit werkt overal gewoon goed
wat die 'text-align: center' doet je in je 'outer' class is me een groot vraagteken, want je override dit in je klasses er onder

^^ met hierboven, maar dan je css eens opgeruimt:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

html,body {
    background-color : #FFFFFF;
    color: #000000;
    font-family: Helvetica, Arial;
    font-size : 11px;
    height: 100%;
    margin: 0;
}

.outer {
    width: 900px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -150px;
    top: 50%;
}


.left {
    width: 300px;
    vertical-align: top;
    background-color: #f3d1a6;
}

.middle {
    width: 300px;
    vertical-align: top;
    background-color: #000000;
}

.right {
    width: 300px;
    vertical-align: top;
    background-color: #f3d1a6;
}

[ Voor 95% gewijzigd door BasieP op 31-10-2006 21:48 ]

This message was sent on 100% recyclable electrons.

dinsdag 31 oktober 2006 21:55

Acties:
  • deCube
  • Registratie: Mei 2006
  • Laatst online: 25-11 21:04

deCube

Excuses,

Zoals hierboven al gezegd is, voeg het volgende aan .outer toe:

Cascading Stylesheet:
1

margin: -150px 0 0 -450px;


Heb het zelf even getest, en het werkt!

Work hard & be brave.

dinsdag 31 oktober 2006 21:56

Acties:

Verwijderd

Topicstarter
Dank voor zover... ga het zo ff proberen...

Hier de screenshots... (heb ik ze niet voor niets gemaakt ;))

IE (== goed)
Afbeeldingslocatie: http://petrucci.student.utwente.nl/GoT/kolommen_IE.png

FF
Afbeeldingslocatie: http://petrucci.student.utwente.nl/GoT/kolommen_FF.png

dinsdag 31 oktober 2006 21:58

Acties:
  • deCube
  • Registratie: Mei 2006
  • Laatst online: 25-11 21:04

deCube

Je moet mijn stylesheet even overnemen, en toevoegen wat ik in de vorige post heb gezegd.

Trouwens, om die witte 'gleuven' weg te krijgen, moet je aan je table tags even, cellspacing en cellpadding op 0 zetten. ;) :)

Work hard & be brave.

dinsdag 31 oktober 2006 22:01

Acties:

Verwijderd

Topicstarter
deCube schreef op dinsdag 31 oktober 2006 @ 21:58:
Je moet mijn stylesheet even overnemen, en toevoegen wat ik in de vorige post heb gezegd.

Trouwens, om die witte 'gleuven' weg te krijgen, moet je aan je table tags even, cellspacing en cellpadding op 0 zetten. ;) :)
hmm t resultaat daarmee is zowel in IE als in FF een lege witte pagina...

edit:

excuus... in IE zie ik het onderste en rechterdeel van het geheel links bovenin de pagina...

[ Voor 11% gewijzigd door Verwijderd op 31-10-2006 22:03 ]

dinsdag 31 oktober 2006 22:04

Acties:
  • deCube
  • Registratie: Mei 2006
  • Laatst online: 25-11 21:04

deCube

Verwijderd schreef op dinsdag 31 oktober 2006 @ 22:01:
[...]


hmm t resultaat daarmee is zowel in IE als in FF een lege witte pagina...

edit:

excuus... in IE zie ik het onderste en rechterdeel van het geheel links bovenin de pagina...
Hmm met de volgende CSS ook?

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

html,body
{
    background-color : #FFFFFF;
    color: #000000;
    font-family : Helvetica, Arial;
    font-size : 11px;
    height: 100%;
    margin: 0px 0px 0px 0px;
}

.outer
{
    width: 900px;
    height: 300px;
    margin: -150px 0 0 -450px;
    top: 50%;
    left: 50%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
}


.left
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #f3d1a6;
}

.middle
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #000000;
}

.right
{
    width: 300px;
    height: 300px;
    text-align: left;
    vertical-align: top;
    background-color: #f3d1a6;
}


En de HTML:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<table class="outer">
    <tr>
        <td>
            <div class="outer">
                <table cellpadding="0" cellspacing="0">
                    <td class="left">
                        linker kolom
                    </td>
                    <td class="middle">
                        middenkolom
                    </td>
                    <td class="right">
                        rechter kolom
                    </td>
                </table>
            </div>            
        </td>
    </tr>
</table>
</body>
</html>

Work hard & be brave.

dinsdag 31 oktober 2006 22:11

Acties:

Verwijderd

Topicstarter
Super die CSS werkt!!! html behoefde geen aanpassing. tnx alot!

dinsdag 31 oktober 2006 23:37

Acties:

Verwijderd

@deCube: Kom zelf ook vaak dit soort problemen tegen met html/css, je oplossing ziet er mooi uit, maar zou je de .outer even kort toe willen lichten, vooral de margin eigenlijk, want die kan ik niet helemaal plaatsen.

dinsdag 31 oktober 2006 23:52

Acties:

Verwijderd

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
  <head>
    <title>...</title>
    <style type="text/css">
    <!--
      html { height: 100%;}
      body { height: 100%;}
      .div1 { display: table; height: 100%; width: 100%; _position: relative; overflow: hidden; }
      .div2 { _position: absolute; _top: 50%; display: table-cell; vertical-align: middle; width: 100%; }
      .div3 { text-align: center; _position: relative; _top: -50%; width: 100%; }
    -->
    </style>
  </head>
  <body>
    <div class="div1">
      <div class="div2">
        <div class="div3">
            Content
        </div>
      </div>
    </div>
  </body>
</html>

woensdag 1 november 2006 00:12

Acties:

Verwijderd

Topicstarter
Kijk... das heel nice!!!
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq