CSS: menu verschuift
Ik ben een website aan het maken op www.gerbenvanerkelens.com/index.php
Nu ben ik daar aan het proberen echt helemaal alles met css te doen en dus zondern tabellen. Dit lukt aardig zoals je kunt zien op de beginpagina.
Echter als je dan op over mij of contact drukt dan verschuift het gehele menu naar boven. Als ik echter die gedeeltes vul met meer content dan gaat het menu wel goed staan. Weet iemand wat er fout gaat? Mijn css is te vinden op:
www.gerbenvanerkelens.com/gve_styles.css
en mijn div layout ziet er als volgt uit:
Code (php)
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
45
46
47
48
49
50
51
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
45
46
47
48
49
50
51
<div id="container">
<div class="wrapper">
<div id="header">
<?php
if(isset($_GET['page'] ))
{
switch($_GET['page'] )
{
case 'welkom': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
case 'overmij': echo "<img src=\"img/overmij.jpg\" alt=\"Welkom\">";
break;
case 'portfolio': echo "<img src=\"img/portfolio.jpg\" alt=\"Welkom\">";
break;
case 'contact': echo "<img src=\"img/contact.jpg\" alt=\"Welkom\">";
break;
case 'news': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
}
}
else
{
echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
}
?>
</div>
<div id="center">
www.gerbenvanerkelens.com
</div>
<div id="content">
<div id="content_left">
<?php
include 'content.php';
?>
</div>
<div id="menu">
<div id="welkom"><a href="index.php?page=welkom&content_id=1"> WELKOM</a></div>
<div id="overmij"><a href="index.php?page=overmij&content_id=2"> OVER MIJ</a></div>
<div id="portfolio"><a href="index.php?page=portfolio&content_id=3"> PORTFOLIO</a></div>
<div id="contact"><a href="index.php?page=contact&content_id=4"> CONTACT</a></div>
</div>
</div>
<div class="wrapper">
<div id="header">
<?php
if(isset($_GET['page'] ))
{
switch($_GET['page'] )
{
case 'welkom': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
case 'overmij': echo "<img src=\"img/overmij.jpg\" alt=\"Welkom\">";
break;
case 'portfolio': echo "<img src=\"img/portfolio.jpg\" alt=\"Welkom\">";
break;
case 'contact': echo "<img src=\"img/contact.jpg\" alt=\"Welkom\">";
break;
case 'news': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
}
}
else
{
echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
}
?>
</div>
<div id="center">
www.gerbenvanerkelens.com
</div>
<div id="content">
<div id="content_left">
<?php
include 'content.php';
?>
</div>
<div id="menu">
<div id="welkom"><a href="index.php?page=welkom&content_id=1"> WELKOM</a></div>
<div id="overmij"><a href="index.php?page=overmij&content_id=2"> OVER MIJ</a></div>
<div id="portfolio"><a href="index.php?page=portfolio&content_id=3"> PORTFOLIO</a></div>
<div id="contact"><a href="index.php?page=contact&content_id=4"> CONTACT</a></div>
</div>
</div>
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens
Code (php)
1
2
3
2
3
<ul>
<li><a href="#">joulink</a></li>
</ul>
<li><a href="#">joulink</a></li>
</ul>
En natuurlijk de <ul> & <li> opmaken met wat css, dat is de nette en valide manier! Dan zal je vanzelf ook merken dat het sneller goed werkt.
Maar het is nog steeds geen oplossing voor het menu dat steeds verspringt. Het lijkt me iets heel simpels te zijn, maar op de 1 of andere manier zie ik niet wat
Daarnaast ben ik die list styles erin aan het zetten, maar hij pakt het item block nu niet meer zoals hij dat wel deed toen het allemaal divjes waren.
Voordat probleem is het het volgende stuk CSS dat hij niet meer lijkt te pakken:
#welkom {
font-weight:bold;
width:275px;
height:20px;
margin-top:20px;
}
#welkom a {
display:block;
color:#000000;
text-decoration:none;
}
#welkom a:hover {
background:#00a8ff;
color:#FAFAFA;
}
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens
Roy schreef op 03.02.2007 19:21:
Misschien wat te hoog gegrepen, maar is dit niet beter op te lossen met OOP?
Een layout in OOP? dat is nieuw voor me, hij wil het met divs en CSS. OOP is object georienteerd programmeren, en niet voor een layout. (voor zover ik dan op de hoogte ben)
OOP kan je gebruiken om de PHP code gemakkelijk en bewerkbaar te houden.
Code (php)
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
45
46
47
48
49
50
51
52
53
54
55
56
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
45
46
47
48
49
50
51
52
53
54
55
56
<div id="container">
<div class="wrapper">
<div id="header">
<?php
if(isset($_GET['page'] ))
{
switch($_GET['page'] )
{
case 'welkom': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
case 'overmij': echo "<img src=\"img/overmij.jpg\" alt=\"Welkom\">";
break;
case 'portfolio': echo "<img src=\"img/portfolio.jpg\" alt=\"Welkom\">";
break;
case 'contact': echo "<img src=\"img/contact.jpg\" alt=\"Welkom\">";
break;
case 'news': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
}
}
else
{
echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
}
?>
</div>
<div id="center">
www.gerbenvanerkelens.com
</div>
<div id="content">
<div id="content_left">
<?php
include 'content.php';
?>
</div>
<div id="menu">
<ul id="list">
<li><a href="index.php?page=welkom&content_id=1" id="welkom"> WELKOM</a></li>
<li><a href="index.php?page=overmij&content_id=2" id="overmij"> OVER MIJ</a></li>
<li><a href="index.php?page=portfolio&content_id=3" id="portfolio"> PORTFOLIO</a></li>
<li><a href="index.php?page=contact&content_id=4" id="contact"> CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div id="header">
<?php
if(isset($_GET['page'] ))
{
switch($_GET['page'] )
{
case 'welkom': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
case 'overmij': echo "<img src=\"img/overmij.jpg\" alt=\"Welkom\">";
break;
case 'portfolio': echo "<img src=\"img/portfolio.jpg\" alt=\"Welkom\">";
break;
case 'contact': echo "<img src=\"img/contact.jpg\" alt=\"Welkom\">";
break;
case 'news': echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
break;
}
}
else
{
echo "<img src=\"img/welkom.jpg\" alt=\"Welkom\">";
}
?>
</div>
<div id="center">
www.gerbenvanerkelens.com
</div>
<div id="content">
<div id="content_left">
<?php
include 'content.php';
?>
</div>
<div id="menu">
<ul id="list">
<li><a href="index.php?page=welkom&content_id=1" id="welkom"> WELKOM</a></li>
<li><a href="index.php?page=overmij&content_id=2" id="overmij"> OVER MIJ</a></li>
<li><a href="index.php?page=portfolio&content_id=3" id="portfolio"> PORTFOLIO</a></li>
<li><a href="index.php?page=contact&content_id=4" id="contact"> CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div>
Het menu verspringt echter nog steeds in zowel FF2 als IE7 in IE6 schijnt het helemaal een verschrikking te zijn, heb dat nog niet kunnen testen.
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens