Voordat ik begin: Webdesign is niet mijn ding 
. Ik heb de benodigde kennis van xhtml en css, maar het maken van een layout en het ook nog goed laten lijken is niet mijn ding.
In ieder geval. Ik ben bezig met een webapplicatie waarvan de layout grotendeels gebaseerd is op een bestaande layout (standaardlayout van een framework-achtig iets), en daar heb ik het een en ander aan toegevoegd. De globale structuur van de pagina is een menubalk aan de bovenkant die de hele breedte van het scherm inneemt, met daaronder twee 'kolommen' met gegevens. De kolom aan de linkerkant moet een soort van menu voorstellen, de kolom aan de rechterkant de gegevens daaruit (werkt allemaal strak met ajax e.d.). De menubalk neemt ongeveer 1/3e van de breedte van het scherm in.
Het probleem wat ik daar nu mee heb is dat, zodra je de browser resized naar een grootte net onder de 1024 pixels, het centrale gedeelte verspringt naar onder het menu aan de linkerkant. Ikzelf heb al tijden gezocht (in de afgelopen maanden) naar de oorzaak daarvan, maar ik kan het niet vinden. Op het moment is het menu aan de linkerkant ingesteld op 360 pixels breed en het centrale gedeelte op 65%, zodat het niet verspringt bij gewoon gebruik. Echter, ik zou graag dat het menu aan de linkerkant zich aanpast aan de inhoud (de menutitels kunnen namelijk groter worden dan dat ze op het moment zijn, afhankelijk van hetgeen waar de webapp op van toepassing is).
Maar in ieder geval, het probleem is dat het centrale gedeelte verspringt wanneer de menubalk breder wordt of het scherm geresized wordt. Voor zover ik na kan komen is het centrale gedeelte, alsmede de informatie die daarin komt (hoofdzakelijk tekst en tabellen) allemaal ingesteld op percentages voor de breedte.
De structuur is (ruwweg, er zit template code tussen die ikzelf niet gemaakt heb) ongeveer als volgt:
(de tabs e.d. zullen wel niet helemaal kloppen, maar vooruit). De CSS die van toepassing is op de verschillende elementen die (volgens mij) van toepassing zijn:
Tot zover. Ikzelf kan de eventuele fout hierin niet vinden, en na enkele weken zo niet maanden van uitproberen en op goegel en GoT zoeken kom ik er nog niet uit. De fout is niet afhankelijk van een browser, dus waarschijnlijk is het iets waar ik overheen zie. De fout doet zich ook voor bij alleen een kleine hoeveelheid tekst in het centrale gedeelte met verder geen opmaak (muv een strong-tag), dus ik ben er vrij zeker van dat het ergens in de bovenstaande CSS moet zitten. Heeft iemand enig idee waar dit probleem hem aan kan liggen?
. Ik heb de benodigde kennis van xhtml en css, maar het maken van een layout en het ook nog goed laten lijken is niet mijn ding.In ieder geval. Ik ben bezig met een webapplicatie waarvan de layout grotendeels gebaseerd is op een bestaande layout (standaardlayout van een framework-achtig iets), en daar heb ik het een en ander aan toegevoegd. De globale structuur van de pagina is een menubalk aan de bovenkant die de hele breedte van het scherm inneemt, met daaronder twee 'kolommen' met gegevens. De kolom aan de linkerkant moet een soort van menu voorstellen, de kolom aan de rechterkant de gegevens daaruit (werkt allemaal strak met ajax e.d.). De menubalk neemt ongeveer 1/3e van de breedte van het scherm in.
Het probleem wat ik daar nu mee heb is dat, zodra je de browser resized naar een grootte net onder de 1024 pixels, het centrale gedeelte verspringt naar onder het menu aan de linkerkant. Ikzelf heb al tijden gezocht (in de afgelopen maanden) naar de oorzaak daarvan, maar ik kan het niet vinden. Op het moment is het menu aan de linkerkant ingesteld op 360 pixels breed en het centrale gedeelte op 65%, zodat het niet verspringt bij gewoon gebruik. Echter, ik zou graag dat het menu aan de linkerkant zich aanpast aan de inhoud (de menutitels kunnen namelijk groter worden dan dat ze op het moment zijn, afhankelijk van hetgeen waar de webapp op van toepassing is).
Maar in ieder geval, het probleem is dat het centrale gedeelte verspringt wanneer de menubalk breder wordt of het scherm geresized wordt. Voor zover ik na kan komen is het centrale gedeelte, alsmede de informatie die daarin komt (hoofdzakelijk tekst en tabellen) allemaal ingesteld op percentages voor de breedte.
De structuur is (ruwweg, er zit template code tussen die ikzelf niet gemaakt heb) ongeveer als volgt:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <div id="page">
<div id="header" class="clearfix">
<!-- titel e.d. -->
</div>
<div id="content" class="clearfix">
<div id="nav">
<div class="wrapper">
<h2 class="accessibility">Navigation</h2>
<!-- navigatiemenu komt hier -->
</div>
<hr/>
</div><!-- end nav -->
<div id="spacer" style="float:left; width:2%;"> </div>
<div id="left">
<!-- menu komt hier -->
</div>
<div id="main">
<!-- centrale gedeelte komt hier -->
</div>
</div> <!-- einde content-div -->
<div id="footer" class="clearfix">
<!-- footer hier -->
</div>
</div> <!-- einde page div --> |
(de tabs e.d. zullen wel niet helemaal kloppen, maar vooruit). De CSS die van toepassing is op de verschillende elementen die (volgens mij) van toepassing zijn:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| div#page {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
div#header {
margin: 0 0 5em 0;
padding: 6px 0 2px 10px;
text-align: left;
height: 79px; /* needed by IE 7 */
}
div#content {
position: relative;
width: 100%;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
float: left;
width: 65%;
display: inline;
margin-left: 10px;
}
div#left {
float: left;
width: 360px;
display: inline;
margin-right:10px;
}
div#nav {
position: absolute;
top: -25px;
left: 0px;
width: 100%;
text-align: left;
} |
Tot zover. Ikzelf kan de eventuele fout hierin niet vinden, en na enkele weken zo niet maanden van uitproberen en op goegel en GoT zoeken kom ik er nog niet uit. De fout is niet afhankelijk van een browser, dus waarschijnlijk is het iets waar ik overheen zie. De fout doet zich ook voor bij alleen een kleine hoeveelheid tekst in het centrale gedeelte met verder geen opmaak (muv een strong-tag), dus ik ben er vrij zeker van dat het ergens in de bovenstaande CSS moet zitten. Heeft iemand enig idee waar dit probleem hem aan kan liggen?
:strip_exif()/u/22670/td_icon2.gif?f=community)
:strip_exif()/u/25820/raptorsafari.gif?f=community)
) om +/- 790 regels CSS te gaan debuggen.
