mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 05.12.2016 03:43 Benutzername: Passwort: Auto-Login

Thema: dropdownmenü per css spinnt! [solved] vom 29.03.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> dropdownmenü per css spinnt! [solved]
Seite: 1, 2  Weiter
Autor Nachricht
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Mi 29.03.2006 09:33
Titel

dropdownmenü per css spinnt! [solved]

Antworten mit Zitat Zum Seitenanfang

Menno! Hallo Forum!

Ich habe ein echte Problem mit meinem dropdown-Menü. Wenn es rausfährt und die links anzeigt schiebt es den Text-div einfach weg.

Vorher blieb der Div wo er war (da waren noch keine <p>-Tags mit Textinhalt da!).
Aber da verdeckte er die Auswahl-Links.

Ich stell euch mal den html und den css Code bereit! Wäre super wenn ihr ne Lösung wisst.

Das ganze ist nur für den FF gedacht und ich hätte gerne eine reine html/css Lösung ohne Java etc!

Thx!


html
Code:
<body>
<div id="container">



<!-------------------------------------------------------------
***********************************************************
*******************   Navigation ****************************
------------------------------------------------------------->
<div id="navi_container">   

   <ul class="dropdown" id="menu_1">Menü 1
   
         <li><a href="#" name="auswahl_1">Auswahl 1</a></li>
         <li><a href="#" name="auswahl_2">Auswahl 2</a></li>
         <li><a href="#" name="auswahl_3">Auswahl 3</a></li>
      
   </ul>

   <ul class="dropdown" id="menu_2">Menü 2
   
         <li><a href="#" name="auswahl_1">Auswahl 1</a></li>
         <li><a href="#" name="auswahl_2">Auswahl 2</a></li>   
         <li><a href="#" name="auswahl_3">Auswahl 3</a></li>
   </ul>
   
</div>
<!-------------------------------------------------------------
***********************************************************
*******************   Ende Navigation ***********************
------------------------------------------------------------->






<!-------------------------------------------------------------
***********************************************************
*******************   Inhalt ****************************
------------------------------------------------------------->


<!-- Text -->
<div id="text">

<p>
Die Bedeutung Gutenbergs für die Entwicklung des Buchdrucks liegt vor allem in der systematischen Benutzung diverser damals bereits bekannter Reproduktions- und Druckverfahren (dem Arbeiten mit Holzblöcken, Modeln und Druckplatten oder Stempeln). Gutenbergs eigenes Verdienst ist die Erfindung des beweglichen Handgießinstrumentes, mit dessen Hilfe Buchstaben einzeln, schneller, und feiner gegossen werden konnten. Das Handgießinstrument besteht aus zwei Teilen und ist aus Holz mit metallenen Backen. Die eingesetzte Matrize wird durch einen Metallbügel gehalten. Vor Gutenbergs Erfindung hatte bereits der Niederländer de Coster einzelne Buchstaben in Formsand gegossen.
<p>

<p>
Ebenso waren ihm wohl seine Experimente zum Gießen der Wallfahrtsspiegel für die Entwicklung einer Legierung sowie eines Handgießinstruments für Metall-Lettern nützlich, mit deren Hilfe er bis zum Jahr 1453 nach einer Vulgata-Vorlage die 42-zeilige, so genannte Gutenberg-Bibel druckte.
</p>

</div>




<!-------------------------------------------------------------
***********************************************************
*******************   Ende Inhalt ****************************
------------------------------------------------------------->


</div>
</body>


css
Code:
/* CSS Document */



/******************************************
*******************************************
            Allgemein
******************************************/

div#container   {width:800px; height:600px; background:#FFCC66; margin:auto auto; }



/******************************************
*******************************************
            Navigation
******************************************/

div#navi_container                  
   {
   width:800px; height:40px;
   position:relative; left:0; top:0;
   background:#FF9933;
   }


/* Dropdown-Menü allgemein */
ul.dropdown
   {
   width:auto; height:16px;
   list-style:none;
   overflow:hidden;
   float:left;
   border:#00CC33 1px solid;
   background:#999999;
   padding:2px; z-index:7777;
   margin:0px 14px 0 0;
   }

ul.dropdown:hover
   {
   height:auto;
   z-index:9999999;
   }
   
   
/* Dropdown-Menü einzeln */
ul#menu_1
   {
   }


/* Links innerhalb der Dropdown-Menüs */

ul.dropdown a
   {
   color:#fff; text-decoration:none;
   background:#666666;
   margin-top:7px; display:block;
   padding:3px; z-index:9999;
   visibility:visible;
   }
   

/******************************************
*******************************************
            Inhalte
******************************************/

div#text   
   {
   background:#33CCFF;
   height:560px; width:480px;
   position:relative; left:0px; top:0px;
   z-index:3333; overflow:hidden;
   padding:0em 1em 0em 1em;
   }

div#text p
   {
   margin:0 0 0.6em 0;
   }


Zuletzt bearbeitet von mtk am Mi 29.03.2006 11:01, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 29.03.2006 09:47
Titel

Antworten mit Zitat Zum Seitenanfang

da wirst du mit relativer positionierung keinen blumentopf gewinnen.
wenn du die elemente relative ausrichtest, bezieht sich diese angabe auf das vorhergehend relativ positionierte element.
du müsstest den container absolut positionieren und die menü elemente dann entsprechend ebenfalls (am parent - also dem container orientiert).


Zuletzt bearbeitet von sahnemuh am Mi 29.03.2006 09:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Mi 29.03.2006 09:56
Titel

Antworten mit Zitat Zum Seitenanfang

@sahnemuh ^^ doller name!

das weiß ich, aber falls ich in der zp ne bstimmte auflösung vorgegeben habe hätte ich gerne die website "beweglich" damit sie bei größeren auflösungen schön zentriert werden kann.

ich bin halt nur so ein dickschädel der nich einfach so auf gibt. Dass muss doch zu machen sein!!! * grmbl *

Ich glaube an einem zusammenhang zwischen text-div, p-tags den menüs und dem z-index! * Mal bisschen die Nase pudern... *
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 29.03.2006 10:00
Titel

Antworten mit Zitat Zum Seitenanfang

mtk hat geschrieben:
@sahnemuh ^^ doller name!

das weiß ich, aber falls ich in der zp ne bstimmte auflösung vorgegeben habe hätte ich gerne die website "beweglich" damit sie bei größeren auflösungen schön zentriert werden kann.

ich bin halt nur so ein dickschädel der nich einfach so auf gibt. Dass muss doch zu machen sein!!! * grmbl *

Ich glaube an einem zusammenhang zwischen text-div, p-tags den menüs und dem z-index! * Mal bisschen die Nase pudern... *


so.. hab nochmal nachgedacht. im grunde ist das ganze recht einfach:

du positionierst den container absolut:

Code:
div#container   {
   width:800px;
   height:600px;
   background:#FFCC66;
   position: absolute;
   left: 50%;
   top: 0;
   margin-left: -400px;
   }


und den content ebenfalls.
allerdings gibst du ihm entsprechend um nicht unter die navi zu rutschen 40px abstand nach oben:
Code:
div#text   
   {
   background:#33CCFF;
   height:560px; width:480px;
   position:absolute; left:0px; top:40px;
   z-index:3333; overflow:hidden;
   padding:0em 1em 0em 1em;
   }


... et voila!
  View user's profile Private Nachricht senden
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Mi 29.03.2006 10:02
Titel

Antworten mit Zitat Zum Seitenanfang

Hmm...?!

was ist mit den li und den a Tags innerhalb der liste?

kann es sein das sie die hauptschuldigen sind? ich weiß halt nur nicht wie man auf html/css sagt:

Fließ da einfach drüber, über den Text-Div, der beißt scho nicht!

hmm.....

float!!!

mal probieren!
  View user's profile Private Nachricht senden
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Mi 29.03.2006 10:03
Titel

Antworten mit Zitat Zum Seitenanfang

ok! bin ein schritt weiter!

hab dem text-div ein clear:both verpasst! Jetzt schiebt es den div nur noch nach unten!
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 29.03.2006 10:05
Titel

Antworten mit Zitat Zum Seitenanfang

mtk hat geschrieben:
ok! bin ein schritt weiter!

hab dem text-div ein clear:both verpasst! Jetzt schiebt es den div nur noch nach unten!


...du musst natürlich auch den z-index der elemente entsprechend anpassen...

hier nochmal komplett:
Code:
/******************************************
*******************************************
            Allgemein
******************************************/

div#container   {
   width:800px;
   height:600px;
   background:#FFCC66;
   position: absolute;
   left: 50%;
   top: 0;
   margin-left: -400px;
   }



/******************************************
*******************************************
            Navigation
******************************************/

div#navi_container                 
   {
   width:800px; height:40px;
   left:0; top:0;
   background:#FF9933;
   }


/* Dropdown-Menü allgemein */
ul.dropdown
   {
   width:auto;
   height:16px;
   list-style-type:none;
   position: relative;
   overflow:hidden;
   float: left;
   border:#00CC33 1px solid;
   background:#999999;
   padding:2px;
   z-index:7777;
   }

ul.dropdown:hover
   {
   height:auto;
   z-index:9999999;
   }
   
   
/* Dropdown-Menü einzeln */
ul#menu_1
   {
    margin:0px 14px 0 0;
   }
ul#menu_2
   {
   margin:0px 14px 0 0;
   }

/* Links innerhalb der Dropdown-Menüs */

ul.dropdown a
   {
   color:#fff;
   text-decoration:none;
   background:#666666;
   margin-top:7px;
   display:block;
   padding:3px;
   z-index:9999;
   visibility:visible;
   }
   

/******************************************
*******************************************
            Inhalte
******************************************/

div#text   
   {
   background:#33CCFF;
   height:560px; width:480px;
   position:absolute; left:0px; top:40px;
   z-index:3333; overflow:hidden;
   padding:0em 1em 0em 1em;
   }

div#text p
   {
   margin:0 0 0.6em 0;
   }
  View user's profile Private Nachricht senden
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Mi 29.03.2006 10:12
Titel

Antworten mit Zitat Zum Seitenanfang

* Ich bin unwürdig *

du bist ne Wucht! Danke und nochmals Danke!

Dass ist wieder so ein typisches Problem auf dessen Lösung man durch ruhiges und logisches Nachdenken kommt....
aber ich hab da manchmal ne schlechte Geduld.....aber da hat man ja was woran man(n) arbeiten kann Grins
  View user's profile Private Nachricht senden
 
Ähnliche Themen Konflitkt mit CSS Dropdownmenü
Problem mit Css Dropdownmenü
[CSS] Listenformatierung [solved]
[css] Problem mit Navigation (solved)
Unterschiedliche Linkformatierung mit CSS [solved]
CSS Background Image (solved)
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.