Box wird nicht in voller Größe (width) angezeigt

n0nam3 · 18.10.2010

Hallo Leute,

habe gleich ein zweites Problem:

Wieso wird mir die droplinebar (Submenu) nicht in voller Größe (658px) angezeigt, sondern nur so wie auf dem Screen unten?

HTML:

/* sub level menu bar */
	.droplinebar ul li ul {
		position: absolute;
		z-index: 100;
		width: 658px;
		left: 0;
		top: 0;
		background: url(../img/sub_01.jpg) center center repeat-x; /* default background of sub menu bar */
		visibility: hidden;
	}

Das ist damit gemeint:

Ich verzweifel da langsam am CSS :hmpf:

Danke!

sokie · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

da muss es noch mehr code (css,javascript) geben, die das aussehen dieses Bereichs beeinflussen.
nach dem codeschnipsel allein ist der bereich gar nicht sichtbar (visibility:hidden /nichtanzeige mit platzhalter).

n0nam3 · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

Auch wenn ich das auf visible setze (was eigentlich beim MouseOver automatisch passiert,
wird mir mein background auf der width-Breite nicht angezeigt :/

Doitsu · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

Du wirst es irgendwo ueberschreiben, wie Sokie schon meinte: Ohne mehr Code koennen wir wenig helfen. Am besten waere ein Link zu einer Beispielseite.

n0nam3 · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

Das Problem besteht darin, dass nur der Inhalt (also die li-Elemente) angezeigt werden,
aber nicht der restliche background, wodurch das halt nicht bis an die rechte Kante des Contents grau ist :/

Wollte euch nicht so zumüllen:

HTML:

.droplinebar {
	overflow: hidden;
}

/* MAIN MENU BAR */

	/* main menu bar */
	.droplinebar ul {
		margin: 0;
		padding: 0;
		width: 100%;
		float: left;
		display: inline;	
		background: url(../img/img_18.jpg) center center repeat-x; /* default background of menu bar */
	}
	
	/* list element */
	.droplinebar ul li {
		display: inline;
		margin: 0;
		padding: 0;
	}
	
	/* links */
	.droplinebar ul li a {
		float: left;
		color: white;
		padding: 0;
	}


/* SUB MENU BAR */

	/* sub level menu bar */
	.droplinebar ul li ul {
		position: absolute;
		z-index: 100;
		width: 658px;
		left: 0;
		top: 0;
		background: url(../img/sub_01.jpg) center center repeat-x; /* default background of sub menu bar */
		visibility: visible;
	}
	
	/* links */
	.droplinebar ul li ul li a {
		margin: 0;
	}

/* img */

	/* Angebot */
	a#abt {
		width: 87px;
		height: 37px;
		background: url(../img/angebot.jpg) center center;
		margin: 0;
	}
	li:hover a#abt {
		background: url(../img/abt/MO.jpg) center center;
	}
	
		
	/* Arbeitsproben */
	a#ap {
		width: 121px;
		height: 37px;
		background: url(../img/arbeitspr.jpg) center center;
		margin: 0;
	}
	li:hover a#ap {
		background: url(../img/ap/MO.jpg) center center;
	}
	
	/* Preisliste */
	a#pl {
		width: 86px;
		height: 37px;
		background: url(../img/preisl.jpg) center center;
		margin: 0;
	}
	li:hover a#pl {
		background: url(../img/pl/MO.jpg) center center;
	}
	
	/* Ausbildung */
	a#ab {
		width: 99px;
		height: 37px;
		background: url(../img/ausbild.jpg) center center;
		margin: 0;
	}
	li:hover a#ab {
		background: url(../img/ab/MO.jpg) center center;
	}
	
	/* Warenkunde */
	a#wk {
		width: 109px;
		height: 37px;
		background: url(../img/warenk.jpg) center center;
		margin: 0;
	}
	li:hover a#wk {
		background: url(../img/wk/MO.jpg) center center;
	}
	
	/* Team */
	a#t {
		width: 54px;
		height: 37px;
		background: url(../img/team.jpg) center center;
		margin: 0;
	}
	li:hover a#t {
		background: url(../img/t/MO.jpg) center center;
	}

HTML:

<td id="mydroplinemenu" class="droplinebar" valign="top">
                                    <ul>                                        
                                        <!-- Angebot -->
                                        <li><a href="angebot.htm" id="abt"></a>
                                            <ul>
                                                <li><a href="sub/dienstleistungen.htm"><img src="img/abt/dienstl.jpg" border="0" alt="Dienstleistungen" /></a></li>
                                                <li><a href="sub/produktion.htm"><img src="img/abt/produkt.jpg" border="0" alt="Produktion" /></a></li>
                                                <li><a href="pdf/preisliste.pdf"><img src="img/abt/pdf.jpg" border="0" alt="PDF-Preisliste" /></a></li>
                                            </ul>
                                      </li>
                                        <!-- Arbeitsproben -->
                                        <li><a href="arbeitsproben.htm" id="ap"></a>
                                            <ul>
                                                <li><a href="sub/portfolio.htm"><img src="img/ap/port.jpg" border="0" alt="Portfolio" /></a></li>
                                                <li><a href="sub/tempelhof.htm"><img src="img/ap/temp.jpg" border="0" alt="Tempelhof Kompakt" /></a></li>
                                            </ul>
                                      </li>
                                        <!-- Preisliste -->
                                        <li><a href="preisliste.htm" id="pl"></a>
                                            <ul>
                                                <li><a href="pdf/preisliste.pdf"><img src="img/pl/pdf.jpg" border="0" alt="PDF-Preisliste" /></a></li>
                                                <li><a href="sub/anfrage.htm"><img src="img/pl/anfragef.jpg" border="0" alt="Anfrage-Formular" /></a></li>
                                            </ul>
                                      </li>
                                        <!-- Ausbildung -->
                                        <li><a href="ausbildung.htm" id="ab"></a>
                                            <ul>
                                                <li><a href="sub/ihk.htm"><img src="img/ab/ihk.jpg" border="0" alt="IHK" /></a></li>
                                                <li><a href="sub/bewerbung.htm"><img src="img/ab/bew.jpg" border="0" alt="Bewerbung" /></a></li>
                                                <li><a href="sub/voraussetzungen.htm"><img src="img/ab/voraus.jpg" border="0" alt="Voraussetzungen" /></a></li>
                                            </ul>
                                      </li>
                                        <!-- Warenkunde -->
                                        <li><a href="warenkunde.htm" id="wk"></a>
                                            <ul>
                                                <li><a href="sub/vorbereitung_pdf.htm"><img src="img/wk/vorb_pdf.jpg" border="0" alt="Datenvorbereitung: PDF" /></a></li>
                                                <li><a href="sub/vorbereitung_vk.htm"><img src="img/wk/vorb_vk.jpg" border="0" alt="Datenvorbereitung: Visitenkarte" /></a></li>
                                            </ul>
                                      </li>
                                        <!-- Team -->
                                        <li><a href="team.htm" id="t"></a>
                                            <ul>
                                                <li><a href="sub/geschaeftsfuehrung.htm"><img src="img/t/geschf.jpg" border="0" alt="Gesch&auml;ftsf&uuml;hrung" /></a></li>
                                                <li><a href="sub/angstellte.htm"><img src="img/t/angest.jpg" border="0" alt="Angestellte" /></a></li>
                                                <li><a href="sub/auszubildene.htm"><img src="img/t/azubis.jpg" border="0" alt="Auszubildene" /></a></li>
                                            </ul>
                                      </li>
                                    </ul>
                                </td>

Doitsu · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

.droplinebar ul {
margin: 0;
padding: 0;
width: 100%;
float: left;
display: inline;
background: url(../img/img_18.jpg) center center repeat-x; /* default background of menu bar */
}

.. display: inline; kennt keine breitenangaben.

sokie · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

yup. Deshalb muss man eben den ganzen code sehen.
so müsste dein ul li ul mit:

Code:

.droplinebar ul li ul {         
   position: absolute;         
   z-index: 100;         
   width: 658px;         
   left: 0;         
   top: 0;         
   background: url(../img/sub_01.jpg) center center repeat-x; /* default background of sub menu bar */ 
   [COLOR=Red][B]display:block[/B];   [/COLOR]     
   visibility: hidden;     
}

wie gewünscht dargestellt werden.

n0nam3 · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

Ich brauch aber das inline-attribut, weil die Liste sonst untereinander erscheint :/

Wie bekomm ich denn dann den background auf 556px (nicht 658px, warn Fehler) ?

EDIT

sokie schrieb:
yup. Deshalb muss man eben den ganzen code sehen.
so müsste dein ul li ul mit:

Code:

.droplinebar ul li ul { position: absolute; z-index: 100; width: 658px; left: 0; top: 0; background: url(../img/sub_01.jpg) center center repeat-x; /* default background of sub menu bar */ [COLOR=Red][B]display:block[/B]; [/COLOR] visibility: hidden; }

wie gewünscht dargestellt werden.

Das ändert optisch leider nichts ...

sokie · 18.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

n0nam3 schrieb:
Ich brauch aber das inline-attribut, weil die Liste sonst untereinander erscheint :/

Dafür brauchst du das display inline an den "li" Elementen. Theoretisch musst du das an den ul nicht haben.

n0nam3 · 19.10.2010

AW: Box wird nicht in voller Größe (width) angezeigt

Ok probieren wir es auf einem anderen Weg

Ich möchte von diesem Status...

...zu diesem Status:

Die Menüpunkte klappen schon aus, darum brauch ich micht nicht kümmern,
allerdings sieht es bis jetzt nur so aus:

Das ist mein dazugehöriger HTML-Quelltext:

HTML:

                                    <table width="658" border="0" cellpadding="0" cellspacing="0">                        
      [1]                              <tr style="background-image:url(img/bg_navi.jpg)">
                                            <td width="20" height="75" style="background-image:url(img/img_11.jpg)">                                            
                                            </td>
                                            <td width="62" height="62" style="background-image:url(img/bg_navi.jpg)" valign="top">
                                                <a href="home.htm"><img src="img/img_12.jpg" border="0" width="62" height="62" alt="Startseite" /></a>
                                            </td>
      [2]                                  <td id="mydroplinemenu" class="droplinebar" valign="top">
                                                <ul>                                        
                                                    <!-- Angebot -->
                                                    <li><a href="angebot.htm" id="abt"></a>

                                                  .... usw. ....

                                                    </li>
                                                </ul>
                                            </td>
                                            <td width="20" height="75" style="background-image:url(img/img_13.jpg)">
                                            </td>
                                        </tr>
                                    </table>

Meine Frage dazu ist nun:

Kann ich den background (der im ersten Bild orange ist) in allen Slices (also in allen <td>) mit CSS zu dem grau wechseln?

Ich habe mir das so gedacht:
Wenn ich bei [2] einen Mouseover per CSS hab, soll bei [1] der background geändert werden zu dem dunklen.
Dazu müssten bei den änderen <td>'s mit background dieser dann verschwinden...

Muss ich dazu evtl. mit Javascript arbeiten?

Lg