Beste mensen,
Ik heb een css probleem waar ik niet uitkom.
Ik heb het volgende:
Met als resultaat:Code:<html> <head> <title></title> <style type="text/css"> .block-head.medium { width: 215px; background: url(/pictures/hoofd-middel.png) top left no-repeat; } .block-content { line-height: 0px; font-size: 0px; padding: 0px; width: 215px; min-height: 132px; height: auto !important; height:132px; border-left:1px solid #98c127; border-right:1px solid #98c127; } .block-content img { border:0px; width:213px; } .block-bottom { width: 216px; background: url(/pictures/onder-medium.png) bottom left no-repeat; margin-top:0px; } </style> </head> <body> <div class="block-head medium">Test</div> <div class="block-content"><a href="#" title="Omschrijving"><img src="foto_arrangement/kerstmarkt.png" alt="Omschrijving"></a> </div> <div class="block-bottom"> </div> </body> </html>
http://www.hotelzuidlimburg.nl/test.php
Nu moet die onderste ronding omhoog. Dan kan ik die block-bottom via een negatieve margin-top omhoog krijgen, maar dat ik het onderste van het plaatje niet klikbaar. Wat is de juiste manier om dit op te lossen?
-
09-11-2010, 18:42 #1
Particulier
- Berichten
- 419
- Lid sinds
- 16 Jaar
CSS probleem
-
-
09-11-2010, 18:46 #2
Particulier
- Berichten
- 691
- Lid sinds
- 15 Jaar
Re: CSS probleem
Zie in Firefox geen onderste ronding?
-
09-11-2010, 18:47 #3
Banned
- Berichten
- 33
- Lid sinds
- 14 Jaar
Re: CSS probleem
Hier in Firefox ook niet.
-
09-11-2010, 18:57 #4
Particulier
- Berichten
- 419
- Lid sinds
- 16 Jaar
Re: CSS probleem
Idd, in chrome ook niet. In IE wel, kunnen jullie daar eens mee kijken?
-
09-11-2010, 19:02 #5
Particulier
- Berichten
- 691
- Lid sinds
- 15 Jaar
Re: CSS probleem
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Titel</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style type="text/css"> .medium { width: 215px; background: url(http://www.hotelzuidlimburg.nl//pictures/hoofd-middel.png) no-repeat left top } .block-content { border-left: #98c127 1px solid; width: 213px; height: 132px; font-size: 0px; border-right: #98c127 1px solid; } .block-content img { border: 0; width: 213px; } .block-bottom { margin: 0; width: 216px; background: url(http://www.hotelzuidlimburg.nl//pictures/onder-medium.png) no-repeat left bottom; height: 24px; position:relative; top: -23px; } </style> <meta name="GENERATOR" content="MSHTML 8.00.6001.23067"> </head> <body> <div class="block-head medium"> Test </div> <div class="block-content"> <a title="Omschrijving" href="http://www.hotelzuidlimburg.nl/test.php#"> <img alt="Omschrijving" src="kerstmarkt.png"></a> </div> <div class="block-bottom"></div> </body> </html>Laatst aangepast door S. van Laere : 09-11-2010 om 19:14
-
09-11-2010, 19:06 #6
Particulier
- Berichten
- 419
- Lid sinds
- 16 Jaar
Re: CSS probleem
@ s. van laere --> bedankt voor de hulp! Zo is de onderkant inderdaad sluitend. Enkel is het onderste helft van het plaatje geen link. Is daar ook een oplossing voor?
-
09-11-2010, 19:29 #7
Particulier
- Berichten
- 691
- Lid sinds
- 15 Jaar
Re: CSS probleem
Spelen met z-index en position, maar het is niet perfect:
Code:<style type="text/css"> .medium { width: 215px; background: url(http://www.hotelzuidlimburg.nl//pictures/hoofd-middel.png) no-repeat left top; padding-left: .5em; } .block-content { border-left: #98c127 1px solid; width: 213px; height: 132px; font-size: 0px; border-right: #98c127 1px solid; z-index: 2; position:relative; } .block-content img { border: 0; width: 213px; } .block-bottom { margin: 0; width: 216px; background: url(http://www.hotelzuidlimburg.nl//pictures/onder-medium.png) no-repeat left bottom; height: 24px; position:relative; top: -23px; z-index: 1; } </style>
