in comp.infosystems.
www.authoring.html, Michael Jaeger wrote:
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Michael Jaeger wrote:
thanks for your valuable suggestions. I changed the doc type into
strict mode, but, unfortunately, this does not seem to solve my
problem since the div container placed before the navigation menu
tears apart the whole strucure. It looks awful in all three
browsers :-(
Hm. It works just fine on Opera (7.6p4b) here. New URL?
Actuall, when I read that again, I see that you didn't do what I told you
to... Well, I try to explain using code this time
I tried a div container and a layer without success.
Your problem was exactly that you wanted to use some stupid div
containers, there was no need for such...
See the follwojg urls:
http://www.majaeger.de/site/test/testdiv.htm
http://www.majaeger.de/site/test/testlayer.htm
They look OK in the IE, but don't in Opera and Mozilla.
What did I do wrong?
Absolute positioning. It is not necessarily wrong thing to do for this,
but you did it wrong way.
Here is working file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<title>Gymnasium Burgdorf</title>
<link rel="stylesheet" type="text/css"
href="http://www.majaeger.de/site/test/style.css">
<style type="text/css">
#navcontainer {min-height:125px;padding-top:0;}
/* min-height as otherwise image overflows container. Padding zeroed, as
it was set earlier */
img {float:right;margin:0;}
/* floating image, because it is easier than absolute positioning for IE,
as it doesn't support min-height. */
..nav {
background: #CC6531;margin: 0;color: Maroon;padding-left: 5%;padding-top:
10px;font: bolder 1.7em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/* öll this stuff moved here as you used overspecific selector p.nav, and
I changed p to h1. div could also be good idea, but that depends on your
content, which was not there. */
#subnav {padding-left:5%;clear:left;padding-top:10px;}
/* styling for subnav. I think that your list thingy was overly done, as
simpler way works just fine, and works better on non CSS browsers */
#navlist li {min-width:6.8em;}
/* this here to prevent links overflowing from their containers, which
made them impossible to read */
</style>
<div id="navcontainer">
<img src="http://www.majaeger.de/site/test/test.jpg" alt="">
<!-- image placed bit illogigal place, but as it is just decoration, it
doesn't IMHO matter much, and floating is easier to get working on IE
that absolute positioning -->
<h1 class="nav">Gymnasium Burgdorf</h1>
<!-- changed this to heading, as it seems to be one. If it is on every
page and doesn't ever change, only mark it up as h1 on first page, and to
div on other pages. -->
<ul id="navlist">
<li id="active"><a href="index.htm" id="current">Schule</a></li>
<li><a href="termine/Termine.htm">Termine</a></li>
<li><a href="aktiv/ags.htm">Aktivitäten</a></li>
<li><a href="schueler/schueler.htm">Schüler</a></li>
<li><a href="eltern/eltern.htm">Eltern</a></li>
<li><a href="schule/kontakt.htm">Kontakte</a></li>
</ul>
<div id="subnav">
<a href="../../GyBu/schule/rat.htm">Beratung</a> |
<a href="../../GyBu/schule/bibliothek/bibl.htm">Bibliothek</a> |
<a href="../../GyBu/schule/cafe.htm">Cafeteria</a> |
<a href="../../GyBu/schule/faecher/faecher.htm">Fächer</a> |
<a href="../../GyBu/schule/kollegium.htm">Kollegium</a> |
<a href="../../GyBu/schule/struktur.htm">Struktur</a>
</div>
<!-- Changed to simple list, which is easier to read and skip using lynx
etc. UL is good, when you are doing stuff in CSS that would degrade badly
otherwise. It is IMHO not useful, when degrading is not problem. -->
</div>
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
