Beste CSS-helden,
Ik ben aan het experimenteren met allerlei dingen die ik in css nog nooit had gezien... Opacity, border-radius, :after, etc. Allemaal leuke speeltjes maar met name die after kom ik nog niet helemaal uit.
De relevante HTML:
En dan de relevante .css:
Dat geeft het volgende resultaat:

Zoals je kunt zien zit er net een beetje ruimte tussen m'n driehoek en m'n vierkant. Deze afstand is alleen minder dan 1px, want als ik de margin-top van a.flag:after groter maakt gaat hij verder naar beneden, maar als ik deze kleiner maakt valt de driehoek deels over het vierkantje. Hoe los ik dit op? Kan ik misschien beter met position : relative(?); werken en dan top:?
Verder zou ik graag zien dat div.receptinfo de maximale hoogte pakt van div.foto behalve dan die marge aan de boven- onderkant, krijg ik helaas ook niet voor elkaar.
Iemand die me hier uit de brand kan helpen? Mijn boekje html&css de basis spreekt helaas niet over al deze zaken
.
Groet,
Niels
Ik ben aan het experimenteren met allerlei dingen die ik in css nog nooit had gezien... Opacity, border-radius, :after, etc. Allemaal leuke speeltjes maar met name die after kom ik nog niet helemaal uit.
De relevante HTML:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div class="wrapper">
<div class="foto" style="background-image: url('style/pizza800px.jpg');">
<div class="flags">
<a class="flag" href="#">1</a>
</div>
<div class="receptinfo">
tests
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
En dan de relevante .css:
Code:
.foto {
min-height : 200px;
padding : 0;
}
.foto .receptinfo{
background-color : white;
opacity:0.9;
filter:alpha(opacity=90);
float : right;
width : 200px;
margin : 20px 0;
padding : 5px;
height : 160px;
border-top-left-radius : 10px;
border-bottom-left-radius : 10px;
}
.foto .flags{
float : left
}
.foto .flags a.flag {
margin-left : 20px;
margin-bottom : 0;
height : 30px;
width : 30px;
display : block;
background-color : white;
opacity:0.9;
filter:alpha(opacity=90);
}
.foto .flags a.flag:after {
content : "";
width : 0px;
display : block;
margin-top : 12px;
opacity:0.9;
border-top:15px solid white;
border-left:15px solid transparent;
border-bottom:15px solid transparent;
border-right:15px solid transparent;
}
Dat geeft het volgende resultaat:

Zoals je kunt zien zit er net een beetje ruimte tussen m'n driehoek en m'n vierkant. Deze afstand is alleen minder dan 1px, want als ik de margin-top van a.flag:after groter maakt gaat hij verder naar beneden, maar als ik deze kleiner maakt valt de driehoek deels over het vierkantje. Hoe los ik dit op? Kan ik misschien beter met position : relative(?); werken en dan top:?
Verder zou ik graag zien dat div.receptinfo de maximale hoogte pakt van div.foto behalve dan die marge aan de boven- onderkant, krijg ik helaas ook niet voor elkaar.
Iemand die me hier uit de brand kan helpen? Mijn boekje html&css de basis spreekt helaas niet over al deze zaken

Groet,
Niels