PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
A

Verkleinen pagina

Door ArendJan op 07-07-2006 17:39
3.701 views
Ik ben bezig met het designen van een website, maar nu kom ik op het volgende probleem:

Ik heb een menubalk gemaakt van 5 apparte "menublokjes" naast elkaar. Wat gebeurt er als ik de pagina verklein? Dan gaan 2 "menublokjes" onder 3 andere zitten, en klopt er verder ook weinig meer van de site. Hoe kan ik dit oplossen?
S
Simon Blok
07-07-2006 17:42
als het 5 aparte plaatjes met een vaste breedte kan dat niet anders!
Jan Koehoorn
07-07-2006 17:53
Een menu is van nature een lijst. Gebruik dus een <ul> op deze manier:

    <ul class="menu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>

In je CSS haal je de bullets weg en maak je de lijst horizontaal:

    ul.menu {
        list-style: none;
    }
    ul.menu li {
        display: inline;
    }

A
ArendJan
07-07-2006 18:09
@Jan-Koehoorn: Echt weer harstikke bedankt! Misschien is het wat voor jou om csshulp.nl op te richten? :P
Jan Koehoorn
07-07-2006 18:11
@ ArendJan: graag gedaan. Nou, in mijn eentje lijkt me dat nogal erg veel werk :-)
Als er nou een stuk of 10 CSS experts mee willen doen, dan lijkt me dat wel leuk, maar voorlopig hou ik het nog ff op phphulp.
A
ArendJan
07-07-2006 18:13
Mmm, iets te snelle reactie het werkt toch niet....:(
Jan Koehoorn
07-07-2006 18:21
In dat geval prak je je <ul> in een div. Helaas ondersteunt IE geen min-width, dus je moet een beetje gokken. In mijn voorbeeld gebruik ik 800px:

<html>
<head>
	<title>Menu niet in elkaar laten drukken</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
	#mymenu {
		width: 800px;
	}
		ul.menu {
			list-style: none;
			width: 100%;
		}
		ul.menu li {
			display: inline;
			background: #99f;
			padding: 5px;
			border: 1px dotted red;
		}
	</style>
</head>

<body>
	<div id="mymenu">
		<ul class="menu">
			<li>item 1</li>
			<li>item 1</li>
			<li>item 1</li>
			<li>item 1</li>
			<li>item 1</li>
			<li>item 1</li>
			<li>item 1</li>
		</ul>
	</div>
</body>
</html>
F
Frank -
07-07-2006 18:21
En wanneer je daar dan fraaie tabs van wilt maken, kun je bij A list Apart terecht.
Jan Koehoorn
07-07-2006 18:24
Da's inderdaad een fraaie techniek, die sliding doors van Douglas Bowman. Het is wel aan te bevelen dat je al een beetje thuis bent in CSS, want het is behoorlijk geavanceerd.
A
ArendJan
07-07-2006 18:25
@Jan-Koehoorn: Klopt, ik heb die ul dus in een div staan. Het is me alleen niet duidelijk wat ik dus wel moet doen dan.... :P
Jan Koehoorn
07-07-2006 18:26
Een width opgeven, bijvoorbeeld 800px :-)

Reageren

Inloggen om te reageren