473,583 Members | 3,569 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 6581
in comp.infosystem s.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">Gym nasium 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.infosystem s.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">Gym nasium 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.infosystem s.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">Gym nasium 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.infosystem s.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">Gym nasium 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.infosystem s.www.authoring.html, Michael Jaeger wrote:
Lauri Raittila wrote:
in comp.infosystem s.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>Gymnasiu m 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;pa dding-top:0;}

/* min-height as otherwise image overflows container. Padding zeroed, as
it was set earlier */

img {float:right;ma rgin: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:l eft;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="navcontaine r">
<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">Gym nasium 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">Sc hule</a></li>
<li><a href="termine/Termine.htm">Te rmine</a></li>
<li><a href="aktiv/ags.htm">Aktivi täten</a></li>
<li><a href="schueler/schueler.htm">S chüler</a></li>
<li><a href="eltern/eltern.htm">Elt ern</a></li>
<li><a href="schule/kontakt.htm">Ko ntakte</a></li>
</ul>
<div id="subnav">
<a href="../../GyBu/schule/rat.htm">Beratu ng</a> |
<a href="../../GyBu/schule/bibliothek/bibl.htm">Bibli othek</a> |
<a href="../../GyBu/schule/cafe.htm">Cafet eria</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">S truktur</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.infosystem s.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
9927
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 only portions of it a link. My question is is there any way to make a section point to 1 page, another sectioni to another page, etc, or do i need...
0
2118
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 org, However, I haven't gotten a reply for a week or so, and figured out I could post here for a larger audience, then. Original message...
1
3542
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 modular and work across forms and sub-forms. My previous code was taken from the Access Expert Solutions 97 (Leszynski) many years ago. As my database...
0
1365
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 form to which the fields of the table are bound. When the form opens, focus is set in the Bound Object Frame (olePhoto). At this stage of...
4
3026
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 news group posts). Despite the trouble they cause, it is still tempting to use frames, occasionally, for instance for machine-generated pages...
6
8774
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 it. I need to implement a function that each time their is a record navigation a picture changes. Meaning = lets say I have a field with the word...
3
2506
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 work. Any ideas? Here's the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>...
10
2535
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. six buttons which when clicked go to a separate web page. But here is where I must be missing something, am I right in thinking that if you wish...
0
1948
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 ng help I've created code for all except the add new record command button. If I create individual sub functions behind each form, no problem. ...
0
8172
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8320
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7929
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8190
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6577
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3814
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2328
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1424
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1152
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.