Css hulp : display grid en gap

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Arno van Zanten

Arno van Zanten

18/04/2023 17:47:23
Quote Anchor link
Hallo,

Maak ik een standaard HTML aan, met een gap in een grid layout, dan werkt het gewoon.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<html>
    <style>
        body
        {
            background-color:        #000000;
            color:                    #FFFFFF;
        }
        .change-grid
        {
        border:                    1px solid;
        max-width:                1020px;
        display:                grid;
        grid-row-gap:            10px;
        grid-column-gap:        10px;
        grid-template-columns:    auto auto;
        padding:                10px;
        position:                absolute;
        align-items:            start;
        }
        .change-item
        {
        border:                    1px solid;
        max-width:                505px;
        width:                    450px;
        height:                    30px;
        padding:                10px;
        float:                    left;
        }
    </style>
    <body>
        <div class='change-grid'>
            <div class='change-item'>1</div>
            <div class='change-item'>2</div>
            <div class='change-item'>3</div>
            <div class='change-item'>4</div>
            <div class='change-item'>5</div>
            <div class='change-item'>6</div>
            <div class='change-item'>7</div>
            <div class='change-item'>8</div>
        </div>
    </body>
</html>


echter pas ik dit zelfde toe in dit en ik voeg het gedeelte van de CSS toe en van de page waar het om gaat.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.change-grid
    {
        border:                    1px solid;
        max-width:                1000px;
        display:                grid;
        grid-row-gap:            10px;
        grid-column-gap:        10px;
        grid-template-columns:    auto auto;
        padding:                10px;
        position:                absolute;
        align-items:            start;
    }
.change-item
    {
        border:                    1px solid;
        max-width:                505px;
        width:                    450px;
        height:                    30px;
        padding:                10px;
        float:                    left;
    }
#changes
    {
        border:                    1px solid;
        border-color:            #550000;
        width:                    1010px;
    }

Stuke code page
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
50
51
52
53
echo "<div class='change-grid'>
            <form id='changes' action='index.php?menu=profile&action=edityes' method='POST'>";

            foreach($diff as $row) {
                if($row == $nick) {
                    if(!empty($nick)) {
                        echo "<div class='change-item'>You changed Nickname to : ".$row.".</div><div class='change-item'>Was before : ".$wname."<br />
                        <input type='hidden' name='Nickname' value='".$row."'></div>";
                    }
                }
                if($row == $wp) {
                    if(!empty($wp)) {
                        echo "<div class='change-item'>You changed Work number to : ".$row.".</div><div class='change-item'>Was before : ".$wphone."<br />
                        <input type='hidden' name='Wphone' value='".$row."'></div>";
                    }
                }
                if($row == $icen1) {
                    if(!empty($icen1)) {
                        echo "<div class='change-item'>You changed ICE Name 1 to : ".$row.".</div><div class='change-item'>Was before : ".$icename1."<br />
                        <input type='hidden' name='ICEName1' value='".$row."'></div>";
                    }
                }
                if($row == $icep1) {
                    if(!empty($icep1)) {
                        echo "<div class='change-item'>You changed ICE number 1 to : ".$row.".</div><div class='change-item'>Was before : ".$icephone1."<br />
                        <input type='hidden' name='ICePhone' value='".$row."'></div>";
                    }
                }
                if($row == $icen2) {
                    if(!empty($icen2)) {
                        $icename2 = 'Never set';
                        echo "<div class='change-item'>You changed ICE Name 2 to : ".$row.".</div><div class='change-item'>Was before : ".$icename2."<br />
                        <input type='hidden' name='ICEName2' value='".$row."'></div>";
                    }
                }
                if($row == $icep2) {
                    if(!empty($icep2)) {
                        $icephone2 = 'Never set';
                        echo "<div class='change-item'>You changed ICE number 2 to : ".$row.".</div><div class='change-item'>Was before : ".$icephone2."<br />
                        <input type='hidden' name='ICEPhone2' value='".$row."'></div>";
                    }
                }
                if($row == $addr) {
                    if(!empty($addr)) {
                        echo "<div class='change-item'>You changed ICE number 2 to : ".$row.".</div><div class='change-item'>Was before : ".$eaddr."<br />
                        <input type='hidden' name='Address' value='".$row."'></div>";
                    }
                }
            }
            echo "<div class='change-item'>If this information is correct, click <input type='submit' name='submit'> to confirm.</div><div class='change-item'>
                click <b><font color='#880000'><a href='index.php?menu=profile'>here</a></font></b> to cancel</div>";
            echo "</form>
            </div>";

En hier werkt de gap ineens niet.
 
PHP hulp

PHP hulp

19/05/2024 14:26:10
 
- Ariën  -
Beheerder

- Ariën -

18/04/2023 17:49:43
Quote Anchor link
Sloop eerst je oude antieke font-tags er eens uit, en kijk dan nog eens. :-P

De PHP-code is verder niet echt relevant. Kan je het in een JSfiddle.net 'zandbak' met ons delen?
 
Arno van Zanten

Arno van Zanten

18/04/2023 17:56:43
Quote Anchor link
Font eruit gehaald, maar veranderd nog niks.
maar dit is een PHP page, dus hoe doe ik dat met die page een zandbak met je delen?

Toevoeging op 18/04/2023 18:03:45:

Ik voeg je wel een img toe
https://happy-truffles.com/grid-gap.jpg
 
- Ariën  -
Beheerder

- Ariën -

18/04/2023 18:36:49
Quote Anchor link
Je code netjes onderverdelen in de juiste vakken, CSS, HTML en deel de URL daarvan:

https://docs.jsfiddle.net/getting-started
 
Arno van Zanten

Arno van Zanten

18/04/2023 19:04:14
Quote Anchor link
Heb het probleem al gevonden, hoe raar het ook klint, maar form en div hebben een rare uitwerking op elkaar.
eerst komt de form en dan de div en niet andersom heb ik gemerkt.
 
- Ariën  -
Beheerder

- Ariën -

18/04/2023 19:13:43
Quote Anchor link
Daarom moet je jouw site ook altijd netjes valideren met de HTML-validator.
Doe je dat niet, dan krijg je zulke problemen.
 
Jan Koehoorn

Jan Koehoorn

20/04/2023 19:44:53
Quote Anchor link
Beetje late to the party, maar zodat je het snapt:

In je eerste voorbeeld heb je een div met display: grid, met daarin de divjes die de grid-items gaan worden als directe kinderen van je grid div.

In het tweede voorbeeld heb je diezelfde div met display: grid, met daarin maar 1 kind: je formulier. Binnen dat formulier heb je vervolgens de divjes waarvan je verwacht dat ze zich als grid-items gaan gedragen, met een gap er tussenin, maar nu zijn het dus geen kinderen meer, maar kleinkinderen van je grid div, omdat dat form ertussen zit, en daarom werkte het niet.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.