Schalen tot bepaalde waarde met CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Krijn

krijn

01/02/2009 16:55:00
Quote Anchor link
Is het mogelijk om een div bijvoorbeeld 80% van het scherm te maken, totdat de div kleiner wordt dan bijvoorbeeld 600, dan blijft de div gewoon 600 hoe klein je je scherm ook maakt.
 
PHP hulp

PHP hulp

18/12/2024 06:33:37
 
Joren de Wit

Joren de Wit

01/02/2009 17:00:00
Quote Anchor link
Geeft een width van 80% en een min-width van 600px mee. Dit werkt in alle gangbare browsers, alleen zul je voor IE(6) nog wel een andere oplossing moeten vinden...
 
Niek Weevers

Niek Weevers

01/02/2009 17:06:00
Quote Anchor link
Zou je met javascript moeten doen. Met javascript kun je checken hoe groot de resolutie is van het scherm en aan de hand daarvan geef je de breedte mee aan de div.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<div id="blok"></div>
<script type="text/javascript">
if(window.innerWidth > 600)
{
 document.getElementById("blok").style.width = '80%';
}
else
{
 document.getElementById("blok").style.width = '600px';
}
</script>


ps die oplossing van Blanche is eigenlijk nog beter, alleen voor ie6 inderdaad wat lastiger
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
 
Joren de Wit

Joren de Wit

01/02/2009 17:09:00
Quote Anchor link
@Niek: waarom een javascript oplossing als je het ook simpel met CSS kunt oplossen?

Een voorbeeldje:
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
<html>
<head>
<style type="text/css">
#test {
    width: 80%;
    min-width: 600px;
    height: 100px;
    background-color: #cf9;
}
</style>
</head>

<body>
<div id="test"></div>
</body>
</html>
 
Niek Weevers

Niek Weevers

01/02/2009 17:19:00
Quote Anchor link
Ja klopt. Zie mijn edit vorige post. Had daar even niet aan gedacht. Zal wel aan mijn brakheid liggen :D
 
Raymond ---

Raymond ---

01/02/2009 17:27:00
Quote Anchor link
Misschien heb je hier wat aan:
http://www.cssplay.co.uk/boxes/minwidth.html

Getest in IE6
 



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.