Meer ruimte tussen de "cards" in css3?

Status
Niet open voor verdere reacties.

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
Hoe krijg ik meer ruimte tussen de "cards" in css3?
Hieronder zie je een voorbeeld van de css die ik wil gebruiken.
Als ik w3-card-8 gebruik overlapt de schaduw met de card ernaast.
Ik wil ook wel dat de pagina responsive is.

HTML:
<head>
    <meta charset="utf-8" />
    <title>testcards</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
    <div class="page-container">
        <div id="row-1" class="w3-row w3-container">
            <div class="w3-padding w3-card-2 w3-center w3-third w3-container">
                <a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
                <div class="w3-container">
                    <h4>
                        <span class="w3-large w3-text-black">moon A</span>
                    </h4>
                </div>
            </div>
            <div class="w3-padding w3-card-2 w3-center w3-third w3-container">
                <a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
                <div class="w3-container">
                    <h4>
                        <span class="w3-large w3-text-black">moon B</span>
                    </h4>
                </div>
            </div>
            <div class="w3-padding w3-card-2 w3-center w3-third w3-container">
                <a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
                <div class="w3-container">
                    <h4>
                        <span class="w3-large w3-text-black">moon C</span>
                    </h4>
                </div>
            </div>
        </div>

        <div id="row-1" class="w3-row w3-container">
            <div class="w3-padding w3-card-2 w3-center w3-third w3-container">
                <a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
                <div class="w3-container">
                    <h4>
                        <span class="w3-large w3-text-black">moon A</span>
                    </h4>
                </div>
            </div>
            <div class="w3-padding w3-card-2 w3-center w3-third w3-container">
                <a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
                <div class="w3-container">
                    <h4>
                        <span class="w3-large w3-text-black">moon B</span>
                    </h4>
                </div>
            </div>
            <div class="w3-padding w3-card-2 w3-center w3-third w3-container">
                <a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
                <div class="w3-container">
                    <h4>
                        <span class="w3-large w3-text-black">moon C</span>
                    </h4>
                </div>
            </div>
        </div>
    </div>
</body>
 
Verander in de onderste rij even de id naar id="row-2" . Een id mag niet meer dan één keer op een pagina voorkomen. Een class mag wel meerdere keren op een pagina voorkomen. Een oplossing kan zijn:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>testcards</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
#row-2 {
  /* meer ruimte tussen row-1 en row-2 */
  margin-top: 20px;
}
/* de volgende css wordt alleen toegepast als browser minimaal 601px breed is */
@media only screen and (min-width:601px){
  .w3-card-2 {
    /* maak elke kaart smaller en geef dan links/rechts een marge */
    width: 31.33333%;
    margin-right: 1%;
    margin-left: 1%;
  }
}
</style>
</head>
Nog wat uitleg: w3schools werkt met @media min-width:601px. Tot 601px is elk plaatje 100% breed. Vanaf 601px is elk plaatje 33,33333% breed omdat je 3 plaatjes op een rij hebt. Om binnen deze afmeting te blijven haal je de linker/rechter marge hier vanaf. Stel dat je links/rechts 2% marge zou willen dan is de width 29.33333%.

Suc6 met w3schools. Have fun.
 
Laatst bewerkt:
Beste Bron

Heel erg bedankt voor de tip en heldere uitleg. Dat is wat ik zocht.
Met w3-card-8 heb ik zo een heel mooie schaduw.
Als ik het venster nu versmal zodat de rijen van 3 beelden verspringen en er telkens 1 beeld per rij te zien is, dan is er weer een probleem met de afstanden en dus ook de schaduw. De afstand tussen de rijen (van telkens 1 beeld) is weer te klein... (Dit is wat er te zien zal zijn op een smartphone.)
 
De vervangende style wordt (ook weer met wat uitleg)
Code:
<style>
/**** phone/tablet/pc ****/
.page-container {
  /* wat lucht onder de onderste rij/card */
  margin-bottom: 20px;
}
/**** phone max-width:600px ****/
@media only screen and (max-width:600px){
  .w3-card-2 {
    /* wat lucht boven elke card */
    margin-top: 20px;
  }
}
/**** tablet/pc min-width:601px ****/
@media only screen and (min-width:601px){
  #row-1, #row-2 {
    /* wat lucht boven elke rij */
    margin-top: 20px;
  }
  .w3-card-2 {
    /* elke card smaller en links/rechts een marge */
    width: 31.33333%;
    margin-right: 1%;
    margin-left: 1%;
  }
}
</style>
Je begint dus met css die voor alle apparaten gelijk is.
Daarna maak je voor de phone en voor de tablet/pc de aanpassingen die nodig zijn.

Suc6.

** edit: css iets logischer opgezet
 
Laatst bewerkt:
ja, dat is het.
w3-card-2 heb ik vervangen door w3-card-8 omdat ik die schaduw wil. Maar ja... dat is wat ik zocht.
Nogmaals hartelijk dank.
 
Graag gedaan :) en succes met w3.css
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan