:strip_icc():strip_exif()/u/31171/av.jpg?f=community)
Hoi,
Ik loop tegen twee problemen aan bij het maken van een lay-out.
In de afbeelding de namen van de frames zoals ze gedefinieerd zijn.
Framesets
Html van een bestand dat in submenu laadt:
Html van een bestand dat in inhoud laadt:
Beide pagina's verwijzen dus naar dezelfde css en zijn qua opmaak/indeling identiek.
CSS
Dan nu het probleem:
Voor de duidelijkheid, boven is net nog een stukje van het frame "top" nog te zien, dan links "submenu" en rechts "inhoud".
Zoals jullie zien wordt bij het bestand dat in het frame "submenu" laadt, de topmarge niet meegenomen. Ik snap echter niet waarom die niet wordt meegenomen. Ik heb de pagina die in het frame "submenu" laadt eens een eigen CSS gegeven en de margin-top moet ik daarbij op 14% zitten om ongeveer op dezelfde hoogte uit te komen als bij de pagina die in het frame "inhoud" laadt. In de 'standaard' CSS staat margin-top op 3%. Ik snap echter niet waar dit verschil door komt (en dus ook niet hoe ik dat op kan lossen zonder twee CSS-bestanden aan te houden.
---------------------------
Het tweede 'probleem' is van een geheel andere aard. Over een achtergrondafbeelding wordt over 75% van de breedte een menu geplaatst met behulp van een horizontal list.
Wat ik in gedachten had was het volgende, CSS
Daarmee wil ik het volgende realiseren:
In werkelijkheid zijn niet alle link-teksten even groot. Ik had alle elementen (dus "Link" én "|" steeds in een apart <li></li>-koppel geduwd en de ruimte tussen de elementen op te lossen door er een padding-right op te zetten. Het geheel moet echter meegroeien met de paginagrootte (bij verschillende resoluties dus) en dus de padding-right-waarde zou relatief moeten zijn (bij een vaste grootte vallen de items anders uiteindelijk in de beedte buiten de beschikbare ruimte). Momenteel heb ik dat opgelost door in plaats van een horizontal list een tabel te gebruiken, maar een en ander moet toch ook gewoon met een opsomming kunnen?
Heeft iemand een idee wat er in het eerste geval fout gaat en hoe ik de horizontal list in het menu kan verwerken?
Ik loop tegen twee problemen aan bij het maken van een lay-out.
In de afbeelding de namen van de frames zoals ze gedefinieerd zijn.
Framesets
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<title>Titel</title>
<frameset rows="150px,*,3%" border="1">
<frame name="top" src="data/alg/top.htm" noresize>
<frameset cols="20%, *" border="1">
<frame name="sub" noresize>
<frame name="inhoud" src="data/alg/welkom.htm" noresize>
</frameset>
<frame name="rand" src="data/alg/rand.htm" noresize scrolling="no">
</frameset>
</head>
<body>
</body>
</html> |
Html van een bestand dat in submenu laadt:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <head>
<title>Titel</title>
<link rel="stylesheet" href="../../site/alg.css" type="text/css">
</head>
<body>
<p class="kop">Koptekst</p>
<ul class="submenu">
<li class="submenu"><a href="link1.htm" target="inhoud">Link 1</a></li>
<li class="submenu"><a href="link2.htm" target="inhoud">Link 2</a></li>
</ul>
</div>
</body>
</html> |
Html van een bestand dat in inhoud laadt:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html>
<head>
<title>Titel</title>
<link rel="stylesheet" href="../../site/alg.css" type="text/css">
</head>
<body>
<p class="kop">Koptekst</p>
<p>Blablablablablablablablablablablablabla</p>
</body>
</html> |
Beide pagina's verwijzen dus naar dezelfde css en zijn qua opmaak/indeling identiek.
CSS
code:
1
2
3
4
5
6
7
8
9
| body {font-family:arial;color:#114088;font-size:100%;font-weight:lighter;margin-left:10%;margin-top:3%;margin-bottom:5%;margin-right:21%;text-align:justify;}
p.kop {font-weight:bold;}
ul.submenu {padding-left:10%;margin-left:0px;}
li.submenu {list-style-type:circle;font-family:arial;color:#114088;font-size:100%;font-weight:lighter;}
ul.link {padding-left:2.5%;margin-left:0px;}
li.link {list-style-type:circle;} |
Dan nu het probleem:
Voor de duidelijkheid, boven is net nog een stukje van het frame "top" nog te zien, dan links "submenu" en rechts "inhoud".Zoals jullie zien wordt bij het bestand dat in het frame "submenu" laadt, de topmarge niet meegenomen. Ik snap echter niet waarom die niet wordt meegenomen. Ik heb de pagina die in het frame "submenu" laadt eens een eigen CSS gegeven en de margin-top moet ik daarbij op 14% zitten om ongeveer op dezelfde hoogte uit te komen als bij de pagina die in het frame "inhoud" laadt. In de 'standaard' CSS staat margin-top op 3%. Ik snap echter niet waar dit verschil door komt (en dus ook niet hoe ik dat op kan lossen zonder twee CSS-bestanden aan te houden.
---------------------------
Het tweede 'probleem' is van een geheel andere aard. Over een achtergrondafbeelding wordt over 75% van de breedte een menu geplaatst met behulp van een horizontal list.
Wat ik in gedachten had was het volgende, CSS
code:
1
2
| #menu1 ul {position:absolute;left:-.7%;top:93px;margin-top:0px;}
#menu1 li {display:inline;list-style-type:none;font-family:impact;color:#FFFFFF;font-size:120%;font-weight:lighter;} |
Daarmee wil ik het volgende realiseren:
In werkelijkheid zijn niet alle link-teksten even groot. Ik had alle elementen (dus "Link" én "|" steeds in een apart <li></li>-koppel geduwd en de ruimte tussen de elementen op te lossen door er een padding-right op te zetten. Het geheel moet echter meegroeien met de paginagrootte (bij verschillende resoluties dus) en dus de padding-right-waarde zou relatief moeten zijn (bij een vaste grootte vallen de items anders uiteindelijk in de beedte buiten de beschikbare ruimte). Momenteel heb ik dat opgelost door in plaats van een horizontal list een tabel te gebruiken, maar een en ander moet toch ook gewoon met een opsomming kunnen?
Heeft iemand een idee wat er in het eerste geval fout gaat en hoe ik de horizontal list in het menu kan verwerken?
) wel handig vanwege het waarschijnlijk regelmatig moeten aanpassen van de menu's.:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
Thx!