422,727 Members | 2,161 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 422,727 IT Pros & Developers. It's quick & easy.

picture in navigation bar

P: n/a
Dear ciwah,

I'm in the process of designing a German school web site, and I need the
help of you experts.

I wrote the navigation (CSS based, no javascript), which looks OK in IE,
Firefox and Opera.
Now I would like to place a picture at the outer right side of the
navigation bar, and this is where it gets tricky. I experimented with a
div container, I tried using a layer, but the design always turned out
look differently in these three browsers.
Now, must I give up the idea or has anyone of you specialists a clue as
to how to solve my problem?

I uploaded a test page including a picture to illustrate the design I
have in mind:

http://www.majaeger.de/site/test/test.htm

http://www.majaeger.de/test/style.css gives you my style sheet.

Thanks for taking your time to look into my problem,

Mike

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://www.majaeger.de
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
in comp.infosystems.www.authoring.html, Michael Jaeger wrote:
Dear ciwah,

I'm in the process of designing a German school web site, and I need the
help of you experts.

I wrote the navigation (CSS based, no javascript), which looks OK in IE,
Firefox and Opera.
That is pure luck, as you tricker quirks mode...
Now I would like to place a picture at the outer right side of the
navigation bar, and this is where it gets tricky. I experimented with a
div container, I tried using a layer, but the design always turned out
look differently in these three browsers.
Thats why it is called quirks mode.
I uploaded a test page including a picture to illustrate the design I
have in mind:

http://www.majaeger.de/site/test/test.htm

http://www.majaeger.de/test/style.css gives you my style sheet.


Use strict doctype to tricker standards mode, and put your image before
navigation menu and float it to right.

You shoudl remarkup your page, it contains all sorts of stupid things:
<h1>&nbsp;</h1>

<p class="nav">Gymnasium Burgdorf</p>

You also have marked up the second list of links as paragraph, which it
clearly is not. Use div or ul.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #2

P: n/a
Hi Lauri,
in comp.infosystems.www.authoring.html, Michael Jaeger wrote:
Dear ciwah,

I'm in the process of designing a German school web site, and I
need the help of you experts.

I wrote the navigation (CSS based, no javascript), which looks OK
in IE, Firefox and Opera.
That is pure luck, as you tricker quirks mode...
Now I would like to place a picture at the outer right side of the
navigation bar, and this is where it gets tricky. I experimented
with a div container, I tried using a layer, but the design always
turned out look differently in these three browsers.


Thats why it is called quirks mode.
I uploaded a test page including a picture to illustrate the design
I have in mind:

http://www.majaeger.de/site/test/test.htm

http://www.majaeger.de/test/style.css gives you my style sheet.


Use strict doctype to tricker standards mode, and put your image
before navigation menu and float it to right.


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 :-(
You shoudl remarkup your page, it contains all sorts of stupid
things: <h1>&nbsp;</h1>
I know, and thanks for the remark, but this does not concern the
question at hand at the moment. I'll turn to them later, because this
page needs to be filled with information anyway.
<p class="nav">Gymnasium Burgdorf</p>
Well, I could use "id", couldn't I?
You also have marked up the second list of links as paragraph, which
it clearly is not. Use div or ul.


Thanks for your help, I'll sit down now and try to make it work.

Mike

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://www.majaeger.de
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Jul 23 '05 #3

P: n/a
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?
<p class="nav">Gymnasium Burgdorf</p>


Well, I could use "id", couldn't I?


Well, it sure looks h1 to me... Might be div too. But I wouldn't call it
paragraph...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #4

P: n/a
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?


Hai Lauri,

I tried a div container and a layer without success.

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?
<p class="nav">Gymnasium Burgdorf</p>


Well, I could use "id", couldn't I?


Well, it sure looks h1 to me... Might be div too. But I wouldn't
call it paragraph...


You're right, it's a paragraph, and I'll turn it into a list, which
seems the right choice.

I appreciate any further assistance,

Mike

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://www.majaeger.de
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Jul 23 '05 #5

P: n/a
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>
Jul 23 '05 #6

P: n/a
and garlic.
Season the meat liberally, and marinate for several hours.
Place seasoned flour in a paper or plastic shopping bag,
drop pieces in a few a time, shake to coat thoroughly,
then deep fry in hot oil (350°) for about 15 minutes.
Drain and place on paper towels.

Miscarriage with Mustard Greens

Why waste it? Otherwise, and in general, use ham or salt pork to season greens.
The technique of smothering greens can be used with many vegetables;
green beans work especially well. Meat is not necessary every day, don?t
be afraid to alter any dish to vegetarian tastes.

1 premature baby, born dead
Large bunch of mustard greens
2 white onions, 1 cup chopped celery
Vegetable oil (or hog fat)
Salt, pepper, garlic, etc.

Lightly brown onions, celery, garlic and meat in large heavy pot.
Add a little water and the greens (which should be thoroughly cleaned and washed).
Smother slowly for at least 2 hours, adding small amounts of water
when it starts to stick.
Stir frequently.
When ready - serve with rice, grilled smoked sausage, green salad, and iced tea.
Coffee and apple pie then brandy.

Maternity Ward Pot Luck Dinner

If you can?t get anything fresh from the hospital, nursery, or morgue;
you can at least get rid of all the leftovers in your refrigerator.

1 - 2 lbs. cubed meat (human flesh, chicken, turkey, beef...)
1 -2 lbs. coarsely chopped vegetables
(carrots, potatoes, turnips, cauliflower, cabbage...)
Bell pepper
onions
garlic
ginger
salt pepper, etc.
Olive oil
butter

Brown the meat and some chopped onions, p
Jul 23 '05 #7

P: n/a
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Michael Jaeger wrote:
Lauri Raittila wrote:

snip
Here is working file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">


snip

Lauri,

thanks a lot for your effort - it seems that I have to reconsider the
whole navigation, but since I am taking a holiday now, this tast must
rest for some time ;-)
Well, there's no need to hurry, anyway.

So, thanks again, and a Happy New Year to you,

Mike

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://www.majaeger.de
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.