✔ DIV-Layer dynamisch an Link mittig positionieren

W

Wutaler

Mitglied
Hallo zusammen,

ich probiere seit gestern Mittag etwas aus was ich einfach nicht auf die Reihe bekomme. Wahrscheinlich stelle ich Google auch die falsche Frage um eine Antwort für mein Problem zu bekommen.

Eventuell habt ihr eine Idee.

Ich habe eine Menüleiste am oberen Ende meiner Homepage. Den Top-Wrapper.

In diesem Wrapper werden mittels PHP Links angezeigt die mal vom Text her länger oder kürzer sein können oder sich von der Anzahl der Links (Rechtesystem für User) unterscheiden. Diese Links sind im Wrapper RECHTS angeordnet.

Wenn ich nun mit der Maus auf einen der Links klicke soll sich unter dem Link ein DIV-Layer öffnen der oben Mittig einen Pfeil hat. Bzw. der Link ganz rechts hat den pfeil oben rechts sitzen.

CSS-Code Layer
CSS: 
#triangle {
    width: 0;
    border-top: 12x solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f0f0f0;
    border-left: 12px solid transparent;
    margin: 0 auto;
}

#login_formular {
    position: absolute;
    right: 50px;
    top: 20px;
    width: 200px;
    display: none;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 2%;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}

HTML-Code Layer
Code: 
<div id="login_formular">
        <div id="triangle"></div>
            LAYER-CONTENT
</div>


Wie schaffe ich es den den DIV-Layer immer mittig unter dem Link anzuzeigen. Bzw. bei dem Link ganz rechts den Layer so zu positionieren das der Pfeil immer mittig unter dem Link steht?

Hier ein kleines optisches Beispiel
Unbenannt.JPG

Dake für eure Zeit
 
Zuletzt bearbeitet:
Aber muss nicht der Layer an der linkposition orientiert werden? Woher weiß text-align wo der Link im dokument steht?

Der komplette Code schaut so aus...


HTML:
HTML: 
<div id="top_wrapper">
    <p class="left">Hier kommt später der Lauftext mit den Neuigkeiten hin...</p>
    <p class="right"><a href="#" id="zeig-login" class="arrow_down">Anmelden</a> | <a href="">Registrieren</a></p>  
  
    <div id="login_formular">
        <div id="triangle"></div>
            <form class="login_form" method="post" action="login.php">
                <input class="login_form" type="text" name="username" id="username" placeholder="Benutzername" />
                <input class="login_form" type="password" name="password" id="password" placeholder="Passwort" />
                <input class="login_form" type="checkbox" name="login_cookie" id="login_cookie" /> Eingeloggt bleiben
                <input class="login_form" type="submit" name="login" id="login" value="Anmelden" />
                <input class="login_form" type="button" value="Passwort vergessen" onClick="window.location.href='index.html?site=forget'"/>
            </form>
    </div>
  
    <div id="clear"></div>

</div>

CSS:
CSS: 
#top_wrapper {
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 0.9em;
    font-weight: bold;
    color: #FFFFFF;
    background: rgb(21,21,21);
    background: rgba(21,21,21,0.5);
}

#top_wrapper  a{
    color: #FFFFFF;
}

#top_wrapper .left {
    float: left;
    margin-left: 10px;

}

#top_wrapper .right {
    float: right;
    margin-right: 10px;
  
}

#top_wrapper .right  a.arrow_down {  
    padding-right: 10px;
    background: url(../img/arrow_down.png) no-repeat  scroll right 6px;
}

#clear {
    clear: both;
}

#triangle {
    width: 0;
    border-top: 12x solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f0f0f0;
    border-left: 12px solid transparent;
    margin: 0 auto;
}

#login_formular {
    position: absolute;
    right: 50px;
    top: 20px;
    width: 200px;
    display: none;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 2%;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}


Hätte den Code eventuell direkt mal mitposten sollen. Für eine komplett anderen HTML-Code wäre ich auch offen wenn das ganze dann besser funktioniert
 
Mhmm ich steh auf dem Schlauch.
Der Ansatz mit dem UL-Menü wäre ein guter Ansatz, da könnte ich das "aufpoppende" Menü dementsprechend Stylen...
Ich versuche das mal und melde mich wenn es klappt, oder halt auch nicht.

Ich danke dir schonmal für deine Zeit und Mühe!
 
Also... Über die UL-Listeklappt das ganze schon besser.

Hier ein kleines Bild:
Unbenannt.JPG

Hier der Code dazu

HTML:
HTML: 
<div id="top_wrapper">
    <p class="left">Hier kommt später der Lauftext mit den Neuigkeiten hin...</p>
    <p class="right">
<div id="top_menue">       
  <ul>
    <li>
      <a href="#">LogIn</a>
      <ul>
        <li><div id="top_menue_triangle"></div></li>
        <li><div id="top_menue_content">Testtext</div></li>
      </ul>
    </li>
    <li><a href="#">Registrieren</a></li>
  </ul>
</div>

CSS:
Code: 
body {
   background: #FFFFFF;
   background: url(../img/bg_body.jpg) no-repeat top fixed;
   background-size: 100% auto;
   font-family: arial, helvetica, clean, sans-serif;   
}

#top_wrapper {
   width: 100%;
   height: 35px;
   line-height: 35px;
   font-size: 0.9em;
   font-weight: bold;
   color: #FFFFFF;
   background: rgb(21,21,21);
   background: rgba(21,21,21,0.5);
}

#top_wrapper  a{
   color: #FFFFFF;
}

#top_wrapper .left {
   float: left;
   margin-left: 10px;

}

#top_wrapper .right {
   float: right;
   margin-right: 10px;
   
}

#top_wrapper .right  a.arrow_down {   
   padding-right: 10px;
   background: url(../img/arrow_down.png) no-repeat  scroll right 6px;
}

#clear {
   clear: both;
}

#top_menue {
    float: right;
}

#top_menue ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#top_menue li {
    float: left;
    padding: 0;
    margin: 0;
}

#top_menue li a {
    width: 100px;
    display: block;
    text-align: center;
    color: #FFFFFF;
    margin-right: 5px;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    background: yellow;
}

#top_menue ul ul {
    display: none;
    position: absolute;
    z-index: 250;
    top: 30px;
}

#top_menue li li {
    float: none;
}

* html li li {
    display: inline;
}

#top_menue_triangle {
    width: 0;
    border-top: 12x solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f0f0f0;
    border-left: 12px solid transparent;
    margin: 0 auto;
    text-align: center;
}

#top_menue_content {
    background: #f0f0f0;
    width: 150px;
}

Jetzt bekomme ich nur den eingeblendeten Teil mit dem Pfeil und dem Testtext nicht mittig unter den Schriftzug LogIn gesetzt. Ich habe die Links oben mal Gelb eingefärbt um die Breite besser zu verdeutlichen.
 
Das hängt in diesem Fall nur noch an den beiden unterschiedlichen Breiten.
CSS: 
#top_menue_content {
  background:  #f0f0f0;
  width: 100px; /* entspricht der Breite von #top_menue li a */
}
 
Andernfalls wird für #top_menue_triangle ein margin-left eingeführt.
CSS: 
#top_menue_triangle {
    width: 0;
    border-top: 12x solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f0f0f0;
    border-left: 12px solid transparent;
    /*margin: 0 auto;*/ /* auskommentiert */
    margin-left: 38px; /* (100px - 2 * 12px) / 2 = 38px */
    text-align: center;
}
 
Ja, damit kann ich den Pfeil unter den Link mittig setzen, aber das der Content genau mittig unter dem Link steht, das ist technisch nicht möglich wenn der Content breiter ist als der "Mutterlink"? Da hakt es ja bei mir.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück