473,320 Members | 1,881 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

picture in navigation bar

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
7 6564
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: IWP506 | last post by:
Hello everyone. I have a header picture for my website with text on it like "Home" "links" "about" etc. It's all 1 picture. I've seen people's sites where they have 1 picture but somehow make...
0
by: Veli-Pekka Tätilä | last post by:
Hi, My first post here. I've found some serious accessibility flaws in the Python 2.4 docs and wish they could be rectified over time. I'm very new to Python and initially contacted docs at python...
1
by: Robert Neville | last post by:
I am having some trouble with some old code revolving around custom form navigation buttons. My main form has a sub-form with these custom navigation buttons. In other words, the code should be...
0
by: Lyn | last post by:
This one is driving me crazy. I have a table which stores pictures in an OLE Object column, one per record with a few other text fields (caption, date, etc). This table is maintained with a...
4
by: Sandy.Pittendrigh | last post by:
I don't want to get into a frames discussion here. We all know they have numerous drawbacks, especially with search engine visibility. (Google, ironically, uses framesets for displaying individual...
6
by: nickybon | last post by:
Hi fellas, Im setting up a form in my Access project and I need to implement this rather special fucntion. This function is basically simple to understand but I really dont know how to create...
3
by: Paul | last post by:
I want the <div id="navigation"column to be the same color all the way to the bottom. The "background-image: url(bg_menu_tile.gif);" was a try to force it with a long 1-pixel graphic - didn't...
10
by: EA | last post by:
I am sure I must be missing something about building navigation bars with CSS. Yes it is a very clever and efficient way to format navigation structures on simple one navigation level webs, i.e....
0
by: emalcolm_FLA | last post by:
Hello and TIA for your consideration. I have created several db's for a non-profit and they want custom navigation buttons to display "You are on the first record, last record, etc". With this...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.