HTML 4.1 strict + css 3

  • Autor
  • Nachricht

Muenchner

Offline



  • Wohnort: München
1  Do Jul 12, 2012 9:19
Hi zusammen:
ich habe Folgendes Problem:
ich habe mit <ul> und <li> ein ein Menü erstellt.

dieses Menü habe habe ich dann in einer Menübar <div class menue bar> <ul> ... <li>...</li></ul>
</div> zugefügt.
das menü funktioniert auch wunderbar bis auf wenn man zoomt verscheibt sich der Letze menü eintrag in die zweite zeile.. mir gehen die Ideen aus.
Besonderheit: die Menübar ist possion: absolute.

Liebe Grüße und danke Für die Antworten

Fabian

Atarimaster

Online

Benutzeravatar


  • Wohnort: Ruhrgebiet
2  Do Jul 12, 2012 13:08
Also, erstmal ist bei solchen Problemen natürlich immer ein kompletter Quellcode (HTML und CSS) nützlich – am allerbesten als Link auf eine Beispieldatei.

So kann man jetzt nur vermuten, dass irgendeine width-Angabe so gesetzt ist, dass sie das Ausbreiten des Menüs ins »Endlose« verhindert (kann u.U. auch in einem ebenfalls positionierten Elternelement stecken). Oder auch, dass Du »nur Text zoomen« gewählt hast.
The truth is always either terrible or boring. (Sansa Stark)

Lichtl



3  Do Jul 12, 2012 14:32
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:48, insgesamt 1-mal geändert.

Muenchner

Offline



  • Wohnort: München
4  Mo Jul 16, 2012 7:49
zu erst mal mein css:
table.columns td.midcontent div.containerpage div.menue{
position: absolute;
white-space:nowrap;
z-index: 2;
background-color: #006600;
height: 31.0px;
margin-top: 10em;
margin-right: 0em;

width: 62.5em;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: 1px solid #EAEAEA;

}


table.columns td.midcontent div.containerpage div.menue ul {
position: relative;
margin-top:-49px;
z-index:32;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
line-height: 30px;


}

table.columns td.midcontent div.containerpage div.menue ul li{
position: static;
font-size: 1.0em;
border: 1px solid #EAEAEA;
border-radius:5px;
list-style-type: none;
float: left;
width: 10.28em;
height: 30px;
display: block;
margin: 0;
padding: 0;

}

table.columns td.midcontent div.containerpage div.menue ul li:hover{
background: -moz-linear-gradient(0% 6% 270deg,#92cc6a, #6aad3c);
border-radius:5px;
/*)height:1.59em;*/

}

table.columns td.midcontent div.containerpage div.menue ul li ul{
margin-top: 0px;
text-align: left;
display: none;
height: 100%;
list-style-type: none;
}


table.columns td.midcontent div.containerpage div.menue ul li:hover ul{

margin-left: -1px;
display: block;

}



table.columns td.midcontent div.containerpage div.menue ul li ul li{
font-size: 0.9em;
clear: both;
width: 164.5px;
margin-left: 2px;
vertical-align: middle;
background-color:#006600;
height: 30px;
border: 1px solid #EAEAEA;
border-top-left-radius:5px;
border-top-right-radius: 5px;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px

}

table.columns td.midcontent div.containerpage div.menue ul li ul li:hover{

/*width: 160px;*/
margin-left: 2px;
vertical-align: middle;
background: -moz-linear-gradient(0% 6% 270deg,#92cc6a, #6aad3c);
border-radius:0px;
height: 30px;
/*width: 164.5px;*/
border-top-left-radius:5px;
border-top-right-radius: 5px;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px
}


table.columns td.midcontent div.containerpage div.menue ul li ul li.last{
margin-left: 2px;
border:0px;
width: 164.5px;
vertical-align: middle;
height: 30px;
text-align: left;
border-top-left-radius:5px;
border-top-right-radius: 5px;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px
}


table.columns td.midcontent div.containerpage div.menue ul li ul li a{
padding-left: 5px;


}


table.columns td.midcontent div.containerpage div.menue ul li:hover ul li ul{
display: none;
margin-left:163px;
margin-top:-31px;
}


table.columns td.midcontent div.containerpage div.menue ul li:hover ul li ul.network li{
width: 160px;
vertical-align: middle;
/*background: #84C557;*/
background-color:#006600;
height: 30px;
border-top-left-radius:5px;
border-top-right-radius: 5px;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px;
}

table.columns td.midcontent div.containerpage div.menue ul li:hover ul li ul.network li:hover{
width: 160px;
/*border:0px;*/
vertical-align: middle;
background-color:#84C557;
height: 30px;
border-top-left-radius:5px;
border-top-right-radius: 5px;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px;
}

table.columns td.midcontent div.containerpage div.menue ul li:hover ul li:hover ul{
display: block;

}

Muenchner

Offline



  • Wohnort: München
5  Mo Jul 16, 2012 8:11
<div class="menue">
<ul>
<li><a href="<?=$web_root?>index2.php">Home</a></li>
<li><a href="<?=$web_root?>about_us/">&Uuml;ber uns</a>
<ul>
<li><a href="<?=$web_root?>about_us/company">Unternehmen</a></li>
<li><a href="<?=$web_root?>about_us/vision_and_merits">Vision & Werte</a></li>
<li><a href="<?=$web_root?>about_us/management">Gesch&auml;ftsf&uuml;hrung</a></li>
<li><a href="#">Kontakt</a>
<ul>
<li><a href="<?=$web_root?>about_us/arrival/avenue">Anfahrt</a></li>
<li><a href="<?=$web_root?>about_us/arrival/overnight_stay">&Uuml;bernachtung</a></li>
</ul>
</li>
<li><a href="#">Network</a>
<ul class="network">
<li>
<a>blabla </a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="<?=$web_root?>competence">Kompetenzen</a>
<ul>
<li><a href="<?=$web_root?>competence/consulting">IT-Beratung</a></li>
<li><a href="<?=$web_root?>competence/softwaredevelopment">Softwareentwicklung</a></li>
<li><a href="<?=$web_root?>competence/servicemanagement">Servicemanagement</a></li>
<li><a href="<?=$web_root?>competence/projectmanagement">Projektmanagement</a></li>
</ul>
</li>
<li ><a href="<?=$web_root?>reference_project">Referenzprojekte</a>
<ul>
<li><a href="<?=$web_root?>reference_project/monitoring">Monitoring</a></li>
<li><a href="<?=$web_root?>reference_project/business_intelligence_reporting">BI / Reporting</a></li>
<li ><a href="<?=$web_root?>reference_project/migration">Migration im Fokus</a></li>
</ul>
</li>
<li><a href="<?=$web_root?>career/informations">Karriere</a>
<ul>
<li><a href="<?=$web_root?>career/informations">Allgemeines</a></li>
<li><a href="<?=$web_root?>career/positions_offered">Stellenangebote</a></li>
<li><a href="<?=$web_root?>career/contact">Kontakt</a></li>
</ul>
</li>
<li><a href="<?=$web_root?>impressum/">Impressum</a></li>
</ul>
</div>

Atarimaster

Online

Benutzeravatar


  • Wohnort: Ruhrgebiet
6  Mo Jul 16, 2012 9:33
Tja, leider hilft der Quellcode, so umfangreich er auch ist, nicht viel weiter – weil er nicht komplett ist. Zumindest nicht in dem Sinne, dass man genau sagen kann, woran es liegt.

Anhand der Kaskade
Code: Alles auswählen
table.columns td.midcontent div.containerpage div.menue{   

sieht man aber, dass das Menü innerhalb einer Tabellenzelle steckt, und so kann man abermals vermuten, dass diese für den Umbruch verantwortlich ist – weil sie eben verhindert, dass sich das Menü weiter verbreitert.


Und nur so ganz nebenbei:
Pixel sind nicht teilbar – eine Angabe wie "164.5" ist also Blödsinn, weil kein Browser einen halben Pixel darstellen kann. Nur so als ergänzender Hinweis, für das [d]Fehlverhalten[/d] unerwünschte Verhalten ist diese Angabe sicher nicht verantwortlich.
The truth is always either terrible or boring. (Sansa Stark)

Muenchner

Offline



  • Wohnort: München
7  Mo Jul 16, 2012 12:04
im annhang ist die source:
Dateianhänge
page.zip
da ist sourche datei drinen
(1.54 KiB) 114-mal heruntergeladen

Atarimaster

Online

Benutzeravatar


  • Wohnort: Ruhrgebiet
8  Mo Jul 16, 2012 13:52
Also, ich hab Deine Datei jetzt runtergeladen, Deine CSS eingefügt… und bei mir bricht das Menü nicht um.

Nicht im Firefox, nicht im Safari, nicht beim zoomen.
Entweder hast Du noch irgendwelche CSS, die Du jetzt noch nicht gepostet hast, oder noch einen anderen Browser… oder ich weiß auch nicht, was bei Dir falsch läuft.
The truth is always either terrible or boring. (Sansa Stark)

Lichtl



9  Mo Jul 16, 2012 14:56
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:48, insgesamt 1-mal geändert.

Atarimaster

Online

Benutzeravatar


  • Wohnort: Ruhrgebiet
10  Mo Jul 16, 2012 17:49
Lichtl hat geschrieben:Da ich keinen Browser habe, bei dem ich *nur* die Schrift skalieren kann, hab ich mit folgender Änderung das Umbrechen auslösen können.


Wie?
Du hast weder Safari, noch Firefox? ;)

Bei beiden kannst Du doch einstellen, dass nur der Text gezoomt werden soll – siehe Menü »Ansicht -> Zoom« (Firefox) bzw. »Darstellung« (Safari).
The truth is always either terrible or boring. (Sansa Stark)

Lichtl



11  Mo Jul 16, 2012 18:20
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:47, insgesamt 1-mal geändert.

Atarimaster

Online

Benutzeravatar


  • Wohnort: Ruhrgebiet
12  Di Jul 17, 2012 9:18
Lichtl hat geschrieben:Beim Vergrößern passiert nichts, doch beim Verkleinern springt das „Impressum“ in die zweite Zeile. Oha.


Ahaaaa!

Ich hatte nur Vergrößern ausprobiert, weil das ein Problem ist, was normalerweise eher beim Vergrößern auftritt – auf die Idee, es auch mal mit Verkleinern zu probieren, bin ich gar nicht gekommen!

Ja, beim Verkleinern sehe ich das auch.
Und nachdem ich ein bisschen rumprobiert habe, konnte ich das Problem eliminieren, in dem ich im Block
Code: Alles auswählen
table.columns td.midcontent div.containerpage div.menue ul li


die folgende Zeile entfernt habe:
Code: Alles auswählen
border: 1px solid #EAEAEA;



Das ist natürlich nun merkwürdig – wieso führt ein 1px-border dazu, dass es beim Verkleinern zu einem Umbruch kommt?
Ich habe jetzt nicht nachgerechnet, ob meine Theorie stimmen kann, aber:
Dem div.menue ist "width: 62.5em;" zugeordnet.
Jeder einzelne der 6 Menüpunkte hat "width: 10.28;".

Für die Darstellung auf dem Bildschirm muss der Browser die em in Pixel umrechnen, weil ein Monitor nun mal nur Pixel hat und keine em. ;)
Wieviele Pixel genau nun aus 62.5em bzw. 10.28em werden, hängt von der aktuellen Schriftgröße ab.
So. Der Wert von "10.28em mal 6 in Pixeln" ist zwar immer geringer als "62.5em in Pixeln" – aber es kommt ja noch für jeden Menüpunkt ein Rahmen von 1px hinzu, macht also 12 Pixel bei 6 Menüpunkten. Und dieser Rahmen verkleinert sich beim herauszoomen nicht, weil er ja schon den kleinstmöglichen Wert besitzt.

Und wenn die Summe von "10.28em mal 6 in Pixeln plus 12" höher ist als "62.5em in Pixeln", dann passt der letzte Menüpunkt nicht mehr in die definierte Gesamtbreite des div.menue, und es kommt zum Umbruch.

Wie gesagt, nachgerechnet/gemessen habe ich das jetzt nicht, bin aber ziemlich sicher, dass das der Grund ist.
The truth is always either terrible or boring. (Sansa Stark)

Lichtl



13  Di Jul 17, 2012 10:49
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:47, insgesamt 1-mal geändert.

Muenchner

Offline



  • Wohnort: München
14  Do Jul 19, 2012 8:04
leute ich danke euch :)

Zurück zu Programmierecke

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder