Drop-down-Menü-Ausrichtung

Status
Nicht offen für weitere Antworten.
S

südpol

Erfahrenes Mitglied
Hi,

ich habe mir mit hilfe von einschlägigen HowTos ;) ein dop down Menü gebastelt. Dieses würde ich jetzt gerne etwas an meine Seite anpassen - leider funktioniert das noch nicht ganz so wie ich mir das vorstelle :suspekt:

Ich hätte gerne, dass das ausklappende Menü sich an der rechten Kante des Bildes ausrichtet und nicht wie in meinem Beispiel an der linken. Kann mir jemand sagen wie ich das machen kann?

Nachfolgend meine Files im einzelnen + download als zip inkl. Beispielimage:

css.css
Code: 
#nav, #nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#nav a {
  display: block;
  width: 10em;
}

#nav li {
  float: left;
  width: 150px;
}

#nav li ul {
  position: absolute;
  width: 150px;
  left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
  left:auto;
}

/* container itself */
.pageOverview_BodyContainer {
  background: #AFC0C8;
  padding: 3px;
  border: 1px solid #000000;
}


/* item container */
#pageOverview_BodyItem, #pageOverview_BodyItem_cur, #pageOverview_BodyItem_act {
  display: block;
  width: 100%;
}

#pageOverview_BodyItem a, #pageOverview_BodyItem_cur a, #pageOverview_BodyItem_act a {
  display: block;
  color:#6A7886;
  font-size: 10px;
  font-weight: bold;
  margin:1px 0 1px 0;
  padding:2px; 
  text-decoration:none;
  background:transparent;
  border: 1px solid #FFFFFF;
  width: 144px;
}

#pageOverview_BodyItem a:hover, #pageOverview_BodyItem_cur a:hover, #pageOverview_BodyItem_act a:hover {
  color:#000000;
  background: #93A4B6;
}

/* item link -- current */
#pageOverview_BodyItem_cur a {
  color:#000000;
}

/* item link while mouse hover -- current */
#pageOverview_BodyItem_cur a:hover {
}

/* item link -- current */
#pageOverview_BodyItem_act a {
  color:#000000;
}

/* item link while mouse hover -- current */
#pageOverview_BodyItem_act a:hover {
}

#content {
  clear: left;
}

#pageOverview_HeadContainer {
  position: absolute;
  right: 10px;
  top: 120px;
  float:left;
}

js.js
Code: 
sfHover = function() {
	  	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	  	for (var i=0; i<sfEls.length; i++) {
	  		sfEls[i].onmouseover=function() {
	  			this.className+=" sfhover";
	  		}
	  		sfEls[i].onmouseout=function() {
	  			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

drop.html
Code: 
<html>
  <head>
    <title>test</title>
    <script type="text/javascript" src="js.js"></script>
    <style type="text/css">
      @import "css.css";
    </style>
  </head>
  <body>
    <div id="pageOverview_HeadContainer">
      <ul id="nav">
        <li><a href="#"><img src="img.jpg" border="0" /></a>
          <ul class="pageOverview_BodyContainer">
            <li id="pageOverview_BodyItem_act"><a href="#">a1</a></li>
            <li id="pageOverview_BodyItem_cur"><a href="#">a2</a></li>
            <li id="pageOverview_BodyItem"><a href="#">a3</a></li>
            <li id="pageOverview_BodyItem"><a href="#">a4</a></li>
            <li id="pageOverview_BodyItem"><a href="#">a5</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="content">
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! !! !</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! !! !</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! !! !</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !!  ! </p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! !! !</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! </p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !!  !! !!</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! </p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! !! !</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !!   !</p>
    <p>Ich bin der Testtext der darunter liegt und einfach überblendet werden sollte !! !! !  !! ! !! !</p>
    </div>
  </body>
</html>

Bin für jeden Tipp dankbar!
 

Anhänge

  • drop.zip
    2,9 KB · Aufrufe: 20
Grundsätzlich lässt sich die Liste .pageOverview_BodyContainer mit margin-left:64px (= Grafikbreite) einrücken, nur seltsamerweise funktioniert diese Regel in deinem vorliegenden Fall nicht. :confused:
 
michaelsinterface hat gesagt.:
Grundsätzlich lässt sich die Liste .pageOverview_BodyContainer mit margin-left:64px (= Grafikbreite) einrücken, nur seltsamerweise funktioniert diese Regel in deinem vorliegenden Fall nicht. :confused:
Zum Vergrößern anklicken....

Hi,

danke für die Antwort. Ich glaube ich habe mich etwas unklar ausgedrückt. Mein Ziel ist es, dass das dop down Menü weiterhin größer ist als das Bild - allerdings sollte sich die Box mit den menüelementen nach links hin erweitern und rechts mit dem Bild aufhören. (Grund: das Menüelement soll am rechten Rand der Seite angebracht werden)

Gruß
 
  1. Es heißt Dropdown-Menü, und nicht Dopdown-Menü.

  2. Wenn sich die Listennavigation nach links erweitern / ausdehnen soll, muß sie auch rechtsbündig ausgerichtet sein.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück