Centreren van een afbeelding

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

13/02/2014 19:48:10
Quote Anchor link
Hallo allemaal,

Ik kom er even niet uit: Ik wil de afbeelding uit onderstaande code in het midden van het vlak hebben staan maar dat lukt mij even niet.
Wie heeft een suggestie?

HTML-code:
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
<!-- Vanaf hier de content -->
                <?php
                    $nTeller
= 1;
                    while($rowMenu = mysqli_fetch_array($cResultFotoos)) {
                        if($nTeller == 1 ) {
                            $cClass = "box_menu_links";
                        }

                        if($nTeller == 2 ) {
                            $cClass = "box_menu_midden";
                        }

                        if($nTeller == 3 ) {
                            $cClass = "box_menu_rechts";
                        }

                        $cUrl = $rowMenu['url'];
                        $cAfbeelding = $cPersfotomap . $rowMenu['bestandsnaam'];
                        $cMenukeuze = $rowMenu['keuze'];
                ?>

                <div class="<?php echo $cClass ; ?>">
                    <figure class="foto_menu">
                        <img class="persfoto" src="<?php echo $cAfbeelding ; ?>" alt="" />
                    </figure>
                    <p class="geelvlak_klein">
                        <?php
                            echo nl2br($rowMenu['beschrijving'] . "\r\n" . $rowMenu['onderschrift'] . "\r\n" . "Bron: " . $rowMenu['bron'] . "\r\n" . "Formaat: " . $rowMenu['formaat'] . " pixels" . "\r\n" . "Omvang: " . $rowMenu['omvang'] . " MB") ;
                        ?>

                    </p>
                    <p class="midden">'<input type="submit" value="Download" /></p>
                    <div class="regelhoogte25"></div>
                    <p class="arial_wit"></p>
                </div>
                <?php
                    if($nTeller == 3 ) {
                        $nTeller = 0;
                ?>

                <div class="clear"></div>
                <?php
                    }
                    $nTeller++;
                    }

                ?>

                
                <div class="regelhoogte25"></div>
                <!-- Tot hier de content -->


De bijbehorende CSS-code:

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
54
55
56
.box_menu_links {
    float: left;
    width: 300px;
    height: 400px;
    background-color: rgb(90,25,60);
    border: none;
    margin-right: 50px;
    margin-left: 50px;
    margin-top: 50px;
}

.box_menu_rechts {
    float: right;
    width: 300px;
    height: 400px;
    background-color: rgb(90,25,60);
    border: none;
    margin-right: 50px;
    margin-top: 50px;  
}

.box_menu_midden {
    float: left;
    width: 300px;
    height: 400px;
    background-color: rgb(90,25,60);
    border: none;
    margin-left: 10px;
    margin-right: auto;
    margin-top: 50px;
}
.foto_menu {
    width: 300px;
    height: 190px;
    border: none;
}

.persfoto {
    max-width: 300px;
    max-height: 200px;
}

.geelvlak_klein {
    width: 300px;
    background-color: yellow;
    padding: 10px;
    text-align: center;
    font-family: Arial;
    font-size: 10px;
}

.midden {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}



George
 
PHP hulp

PHP hulp

30/10/2020 08:48:04
 
Mathieu Posthumus

Mathieu Posthumus

14/02/2014 09:06:57
Quote Anchor link
Over welkke class gaat het? want anders zit ik mezelf ook rot te zoeken:D
 
George van Baasbank

George van Baasbank

14/02/2014 12:04:52
Quote Anchor link
Ik denk foto_menu of persfoto.

Ik heb zelf al wat met margin-left en margin-right in de stand "auto" geprobeerd maar dat werkt niet

Toevoeging op 14/02/2014 12:29:22:

Kijk eens op: http://podiumspektakel.eu/fotoboek.php?categorie=bestuur#bovenaan
 
Ward van der Put
Moderator

Ward van der Put

14/02/2014 13:25:35
Quote Anchor link
Je kunt het sjiek “progressive” oplossen door geen afbeeldingen maar achtergrondafbeeldingen te gebruiken. Vervolgens gebruik je de CSS3-eigenschap background-size: cover om de foto automatisch de div te laten vullen.

Hier vind je een beschrijving van de techniek.
 
Jasper DS

Jasper DS

14/02/2014 13:44:02
Quote Anchor link
@Ward, hoe ga je de source naar de afbeelding (via PHP) in de css krijgen? Lijkt mij in dit geval geen goede oplossing.

@TS, image is een inline-block element. Je zal het element dus display block moeten maken. Op die manier werkt margin: 0 auto; wel.

http://jsfiddle.net/CCsCs/
 
George van Baasbank

George van Baasbank

14/02/2014 13:53:03
Quote Anchor link
Ward en Jasper,

Helaas werkt het voorbeeld van Jasper bij mij niet. Het lijkt wel of er ergens een float: left staat.
 
Ward van der Put
Moderator

Ward van der Put

14/02/2014 14:01:59
Quote Anchor link
Jasper DS op 14/02/2014 13:44:02:
@Ward, hoe ga je de source naar de afbeelding (via PHP) in de css krijgen? Lijkt mij in dit geval geen goede oplossing.
Wat bedoel je? Je vervangt gewoon:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
echo '<img src="...">';


door:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
echo '<div style="background-image:url('...')"></div>';


Je varieert dus in PHP alleen de url voor de CSS-eigenschap background-image. De andere, statische CSS-code doet vervolgens de rest.
 
Jasper DS

Jasper DS

14/02/2014 14:22:53
Quote Anchor link
@TS, als ik kijk naar de link die je gaf moet je volgende code verwijderen uit de css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
#home_featured21 img {
display: inline;
float: left;
}


Zorg ervoor dat je niet te veel rommelcode hebt binnen je CSS. Waarvoor dient die klasse dat je probleem veroorzaakt? Weet met wat je bezig bent. Combinatie van display inline en float left lijkt me ook al vrij raar.

@Ward, dat vind ik eerder een "hack" dan een oplossing. Semantisch gezien is een <img> hier zeker en vast op z'n plek. Dan lijkt het mij absurd om een background-image toe te voegen aan een image via inline css. Geef mij dan maar gewoon een proper HTML elementje met een display block en een margin auto.
 



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.