Thema: <b> entweder nicht inline oder garnicht angezeigt

hi @all,

ich bin zwar imho eigentlich langsam recht gut im umgang mit CSS aber ich hab ein problem:

mein Menü:

    <div id="menu">
        <a href="index.php?Home" class="menitem">
            <b class="menitem"<?php if($active['Home']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">HOME</span>
            </b>
        </a>
        <a href="index.php?Unternehmen" class="menitem">
            <b class="menitem"<?php if($active['Unternehmen']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">Unternehmen</span>
            </b>
        </a>
        <a href="index.php?Dienstleistungen" class="menitem">
            <b class="menitem"<?php if($active['Dienstleistungen']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">Dienstleistungen</span>
            </b>
        </a>
        <a href="index.php?Produkte" class="menitem">
            <b class="menitem"<?php if($active['Produkte']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">Produkte</span>
            </b>
        </a>
        <a href="index.php?Loesungen" class="menitem">
            <b class="menitem"<?php if($active['Loesungen']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">Lösungen</span>
            </b>
        </a>
        <a href="index.php?Service" class="menitem">
            <b class="menitem"<?php if($active['Service']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">Service</span>
            </b>
        </a>
        <a href="index.php?Kontakt" class="menitem">
            <b class="menitem"<?php if($active['Kontakt']) echo " id=\"active_menitem\""; ?>>
                <span class="menitem">Kontakt</span>
            </b>
        </a>
    </div>

CSS-Klassen:

.menitem {
    border: thin none #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    width: 127px;
    height: 200px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}
b.menitem {
    display: none;
}
span.menitem {
    visibility: hidden;
    display: block;    
    border: none;
    height: 195px;
    width: 200px;
    margin: 0px;
    display: block;
}
.menitem:hover {
    border: thin solid #FFFFFF;
}
span.menitem:hover {
    visibility: visible;
    border: none;
}
#menu {
    height: 200px;
    width: 910px;
    background-image: url(navi/mainnavi.jpg);
}

sollte eigentlich in etwa so aussehen:

._____._____._____._____.
|     |     |     |     |
|     |     |     |     |
|_____|_____|_____|_____|

aber entweder liegen die boxen untereinander oder sie erscheinen, so wie zur zeit (http://www.genialdata.de/neu/) garnicht!

ich find aber einfach meinen Fehler nicht... kann ich u.U auch andere objekte nehmen? z.B. n Span und darin ein div verschachteln? aber das ich warscheinlich vom XHTML her nicht erlaubt... oder?

ich verzweifel langsam... ich fand das so ne tolle Idee, aber es funktioniert nicht... :-(

greetz

Zuletzt bearbeitet von theTJ (03-11-2006 13:25:54)

theTJ

Der PC kann alles, wenn der der davor sitzt erklären kann was er will!
http://tjmusic.eu/ http://hp-ff.eu/ http://tj.tjmusic.eu/

2

Re: <b> entweder nicht inline oder garnicht angezeigt

Hi theTJ

Du weist der Klasse b.menitem die Eigenschaft display: none zu. Das bedeutet, dass b.menitem nicht angezeigt wird, und somit werden auch die Unterelemente nicht angezeigt.

Deine Skizze koennte man so realisieren:

#menu a.menitem {
  display: block;
  width: 5em;
  height. 5em;
  float: left;
}
#content {
  clear: left;
}
<div id="menu">
  <a class="menitem" href="home">home</a>
  <a class="menitem" href="unternehmen">unternehmen</a>
</div>
<div id="content">
und hier der inhalt..
</div>

Ist stark vereinfacht, aber die Idee sollte dich weiterbringen smile

gruss
jonathan

Zuletzt bearbeitet von terje (04-11-2006 01:45:51)

Four legs good, two legs bad