zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Dropdown Navi verschoben/erscheint versetzt

Antwort
Seite 1 von 2 1 2
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.01.2017, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard CSS Dropdown Navi verschoben/erscheint versetzt
Hallo zusammen,
ich bin ein Neuling in CSS und arbeite derzeit an der Erstellung eines Online-Shops mit Magento 1.9. Da habe ich nun das Navigationsmenü für mich konfiguriert, jedoch erscheint das Drop-Down nun leider etwas nach links versetzt/verschoben. Ich hoffe Ihr könnt das verstehen. Sonst würde ich noch einen Screenshot hochladen...

Hier ist der Code zu dem Menü, ich würde mich sehr freuen, wenn jemand den Fehler finden könnte.

viele grüße und vielen dank für Eure Hilfe!


Code:
/*===custommenu==============*/ 

.pt_custommenu {
position:relative;
z-index:1000;
margin:0 auto;
}
.pt_custommenu div.pt_menu {display: inline-block;}
/*.pt_custommenu .parentMenu{padding: 0 20px}*/
.pt_custommenu div.pt_menu .parentMenu a,
.pt_custommenu div.pt_menu .parentMenu span.block-title{
padding:15px 0px;
text-decoration: none;
display:block;
text-transform:uppercase;
font-weight: 600;
font-family: Open Sans;
color: #232323;
font-size: 14px;
}
.pt_custommenu div.pt_menu .parentMenu a span,
.pt_custommenu div.pt_menu .parentMenu span.block-title span{
display: block;
border-left: 1px solid #FFFFFF;
padding: 5px 20px;
}
#pt_menu_home .parentMenu a span{border: none;}
.pt_custommenu div.pt_menu.act a,
.pt_custommenu div.pt_menu.active .parentMenu a,
.pt_custommenu #pt_menu_pt_item_menu_custom_menu.active span{color:#e03550}
.pt_custommenu div.pt_menu.act,
.pt_custommenu div.pt_menu.active .parentMenu{}

#pt_menu_pt_item_menu_custom_menu.active .parentMenu span,
#pt_menu_pt_item_menu_featured_custom.active .parentMenu span
{cursor: pointer;
color:#ffa200;
}
.pt_custommenu div.pt_menu.active {}

.pt_custommenu div.pt_menu.act .itemSubMenu .itemMenuName:hover{color:#e03550}
.pt_custommenu div.pt_menu.act .itemSubMenu .itemMenuName{color:#444444}
.pt_custommenu div.pt_menu.act .itemMenu .itemMenuName
#pt_menu_home a{padding-left: 0}
.pt_custommenu div.pt_menu.active {}
.pt_custommenu div.popup {
position:absolute;
z-index:3000;
text-align:left;
width: 904px;
padding: 0;
padding-left:0
margin: 0;
opacity: .85;
background-color:#FFFFFF;
box-shadow: 0 2px 3px rgba(0,0,0,0.3);

}
.pt_custommenu div.pt_menu .parentMenu a:hover,
.pt_custommenu div.pt_menu .parentMenu span.block-title:hover,
.pt_custommenu #pt_menu_link ul li a.act,
.pt_custommenu #pt_menu_link ul li a:hover{color:#e03550;}

.pt_custommenu div.popup a {
    text-decoration: none;
    display:block;
    line-height:28px;
}
.pt_custommenu .itemMenu h4.level1,
.pt_custommenu .itemMenu a.level1{
 font-size:1em;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 10px;
color: #333 !important;
font-family: Open Sans;
font-weight: 600;
word-wrap: break-word;
position: relative;
}
.pt_custommenu .itemMenu h4.level1 span, .pt_custommenu .itemMenu a.level1 span{background-color: #FFFFFF;display: inline-block;padding-right: 10px}
.pt_custommenu .itemMenu a.level1.nochild{text-transform: capitalize;font-size:1em;border: none}
.pt_custommenu .itemMenu h4.level1:hover,
.pt_custommenu .itemMenu a.level1:hover {
    color:#e03550 !important;
/*    text-decoration: underline;*/
}
.pt_custommenu .itemSubMenu h4.level2,
.pt_custommenu .itemSubMenu a.level2,
.pt_custommenu .itemSubMenu h4.level3,
.pt_custommenu .itemSubMenu a.level3
{
text-transform:capitalize;
font-weight: normal;
font-size:1em;
line-height:120px;
word-wrap: break-word;
color: #909090
}
.pt_custommenu .itemSubMenu a.level2:hover,
.pt_custommenu .itemMenu a.level1.nochild:hover{color: #e03550;}
.pt_custommenu div.popup a.actParent {
    color: #e03550;
}
.pt_custommenu div.popup a.act {
    color:#e03550 !important;
}
.pt_custommenu div.column {
    float:left;
    width:180px; /* column width */
    margin-right:25px;
}
.pt_custommenu div.column.last {
    border-right: 0 none;
    margin-right: 0;
    padding-right: 0;
}
.pt_custommenu div.itemSubMenu {}
.pt_custommenu .block2{
    margin-top: 10px;
    float: left;
}
.pt_custommenu div.popup .block1{
    overflow: hidden;
    float: left;
    padding:30px 20px;
  
}
.pt_custommenu div.popup .block1 .column{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.pt_custommenu div.popup .blockright img{
    max-width: 100%;
} 

.pt_custommenu div.pt_menu .parentMenu p{
    margin: 0;
    padding: 0;
}
.pt_custommenu #pt_menu_link{
    padding: 0;
}
.pt_custommenu #pt_menu_link .parentMenu ul li{
    float: left;
    list-style: none;
}
.pt_custommenu .clearBoth {
    clear:both;
}
/*===end-custommenu==============*/ 
/*.parentMenu a:before
{
content: " ";
display: block;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: none;
margin-top: -8px;
position: absolute;
bottom: 0px;
left: 0px;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
opacity: 0;
-moz-opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
pointer-events: none;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pt_custommenu div.pt_menu .parentMenu:hover a:before
{
z-index: 1000;
opacity: 1;
-moz-opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
pointer-events: all;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.pt_custommenu #pt_menu_home .parentMenu:hover a:before,
.pt_custommenu .pt_menu_no_child .parentMenu:hover a:before
{display: none}*/
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.01.2017, 13:30
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 30.01.2014
Beiträge: 2.240
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard
CSS ohne dazugehöriges HTML ist nutzlos.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.01.2017, 13:44
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard
au sorry, wie finde ich den zugehörigen HTML-Code? (sorry, bin wirklich Neuling )

EDIT:

vielleicht das hier?

Code:
<div class="container">
<div class="container-inner">
<div id="pt_custommenu" class="pt_custommenu">
<div id="pt_menu_home" class="pt_menu">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/">
<span>Home</span>
</a>
</div>
</div>					
<div id="pt_menu3" class="pt_menu act nav-1">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/womens.html">
<span>Womens</span>
</a>
</div>
<div id="popup3" class="popup" style="width: 425px; top: 60px; left: 85.9px; display: none;">
<div class="block1" id="block13" style="width: 425px;">
<div class="column col1"><div class="itemMenu level1">
<a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/catsuits.html">
<span>Catsuits</span>
</a>
<a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/skirts.html"><span>Skirts</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/dresses-4.html"><span>Dresses</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/costumes.html"><span>Costumes</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/lingerie.html"><span>Lingerie</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/corsettes.html"><span>Corsettes</span></a></div></div>
<div class="column blockright last">
<div class="custum-menu">&nbsp;<img alt="" src="http://localhost/mozar3/media/wysiwyg/catsuit.jpg" width="158" height="238"></div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>									
<div id="pt_menu4" class="pt_menu nav-2 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/mens.html">
<span>Mens</span>
</a>
</div>
</div>									
<div id="pt_menu48" class="pt_menu nav-3 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/catsuits.html">
<span>Cosplay</span>
</a>
</div>
</div>									
<div id="pt_menu7" class="pt_menu nav-4">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/accessories.html">
<span>Accessories</span>
</a>
</div>
<div id="popup7" class="popup" style="width: 220px; top: 60px; left: 383.417px; display: none;">
<div class="block1" id="block17" style="width: 220px;">
<div class="column last col1"><div class="itemMenu level1">
<a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/accessories/gloves-and-stockings.html"><span>Gloves&nbsp;ans&nbsp;Stockings</span></a></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div>									
<div id="pt_menu50" class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/sale.html">
<span>Sale</span>
</a>
</div>
</div>								
								
				<div class="clearBoth"></div>
			</div>
		</div>
	</div>
Geändert von cytochrom (17.01.2017 um 13:47 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 17.01.2017, 13:49
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 30.01.2014
Beiträge: 2.240
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard
Wenn ich jetzt diesen HTML + CSS-Code kombiniere sehe ich aber kein Dropdown-Menü?
Du solltest sicherstellen dass wir dein Problem auch nachvollziehen können, am Besten mit einem Link zur Seite oder, falls dieses (noch) nicht möglich ist dann muss es uns möglich sein mittels copy-paste das Verhalten auf zB jsfiddle.net reproduzieren zu können. Sonst können wir leider nur raten und dir nur schwer helfen
Mit Zitat antworten
  #5 (permalink)  
Alt 17.01.2017, 16:05
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard
also ein programm hat mir jetzt folgende codes verraten:

1. die menüleiste:

Code:
<div id="pt_custommenu" class="pt_custommenu">
				<div id="pt_menu_home" class="pt_menu act">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/">
<span>Home</span>
</a>
</div>
</div>					<div id="pt_menu3" class="pt_menu nav-1">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/womens.html">
<span>Womens</span>
</a>
</div>
<div id="popup3" class="popup" style="display: none; width: 1228px;">
<div class="block1" id="block13">
<div class="column col1"><div class="itemMenu level1"><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/catsuits.html"><span>Catsuits</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/skirts.html"><span>Skirts</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/dresses-4.html"><span>Dresses</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/costumes.html"><span>Costumes</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/lingerie.html"><span>Lingerie</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/corsettes.html"><span>Corsettes</span></a></div></div>
<div class="column blockright last">
<div class="custum-menu">&nbsp;<img alt="" src="ma_mozar1%20Home%20page-Dateien/catsuit.jpg" width="158" height="238"></div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>									<div id="pt_menu4" class="pt_menu nav-2 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/mens.html">
<span>Mens</span>
</a>
</div>
</div>									<div id="pt_menu48" class="pt_menu nav-3 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/catsuits.html">
<span>Cosplay</span>
</a>
</div>
</div>									<div id="pt_menu7" class="pt_menu nav-4">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/accessories.html">
<span>Accessories</span>
</a>
</div>
<div id="popup7" class="popup" style="width: 220px; top: 60px; left: 383.417px; display: none;">
<div class="block1" id="block17" style="width: 220px;">
<div class="column last col1"><div class="itemMenu level1"><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/accessories/gloves-and-stockings.html"><span>Gloves&nbsp;ans&nbsp;Stockings</span></a></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div>									<div id="pt_menu50" class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/sale.html">
<span>Sale</span>
</a>
</div>
</div>								
								
				<div class="clearBoth"></div>
			</div>
und 2. das dropdown eines beispielbuttons:

Code:
<div id="pt_menu7" class="pt_menu nav-4">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/accessories.html">
<span>Accessories</span>
</a>
</div>
<div id="popup7" class="popup" style="width: 220px; top: 60px; left: 383.417px; display: none;">
<div class="block1" id="block17" style="width: 220px;">
<div class="column last col1"><div class="itemMenu level1"><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/accessories/gloves-and-stockings.html"><span>Gloves&nbsp;ans&nbsp;Stockings</span></a></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div>									<div id="pt_menu50" class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/sale.html">

echt sorry für das durcheinander... magento lässt sich irgendwie schwer in editoren einfügen
Mit Zitat antworten
  #6 (permalink)  
Alt 18.01.2017, 07:49
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 30.01.2014
Beiträge: 2.240
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard
Nochmal anders formuliert: Wir brauchen eine Möglichkeit, dein Problem nachvollziehen zu können. Wenn wir deinen HTML+CSS Code bei zB jsfiddle.net (oder wo auch immer) einfügen, dann muss das Problem ersichtlich sein. Das ist für mich aber nach wie vor nicht der Fall. Auch wäre es fein, nur den für das Problem relevanten Code zu sehen, bei einem Link zu einer Seite ist das natürlich nicht möglich, da suchen wir uns selber raus was wir brauchen.

Bevor du also noch weiteren Code hier postest vergewissere dich bitte, dass wir dein Problem sehen können indem du testweise den Code auf jsfiddle.net einfügst.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.01.2017, 16:35
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard
hallo zusammen,
bitte entschuldigt das kleine durcheinander...ich habe jetzt die seite mal kurz online gestellt. es ist alles noch im aufbau und hat nur beispielbilder drin (geht um designer bekleidung aus latex), also nicht wundern...

vielleicht könnt ihr ja jetzt erkennen, woran das mit dem verschobenen dropdown liegen könnte und mir einen tip geben wie ich es korrigieren kann. ich würde mich sehr darüber freuen...

--> hier ist die adresse: lalala <--
Mit Zitat antworten
  #8 (permalink)  
Alt 23.01.2017, 09:24
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 30.01.2014
Beiträge: 2.240
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard
Das Untermenü wird hier absolut platziert, das verursacht das Problem. Wieso das so platziert wird kann ich leider nicht sagen, das kommt wohl vom Menü selber, bzw. von einem Javascript. Die Lösung dafür: Die Dokumentation für das Menü zu Rate ziehen und schauen, wieso dort so eine absolute Positionierung (mit top, left-Werten) verwendet wird oder ein anderes Menü verwenden, welches die Positionierung verlässlich zustande bringt.

Ansonsten könntest du noch versuchen per CSS den left-Wert für die Untermenüs per !important zu löschen, aber ob das dann mehr Auswirkungen hat als es behebt kann ich nicht sagen.
Mit Zitat antworten
  #9 (permalink)  
Alt 23.01.2017, 11:08
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard
Einfach den Menüpunkten position: relative geben und gut ist?

Also bei .pt_custommenu div.pt_menu

Je nachdem, wo genau du das Dropdown haben willst, kannst du denn noch den left-Wert mit !important anpassen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.01.2017, 11:23
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 30.01.2014
Beiträge: 2.240
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard
Ja, wenns so einfach geht...
Dann nimm die einfache Lösung
Mit Zitat antworten
Sponsored Links
Antwort
Seite 1 von 2 1 2

Stichwörter
magento, menü, navi, verschoben

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Dropdown Navi verschoben rschweri CSS 1 22.08.2013 08:40
CSS Navi - kleiner Abstand und Hover Ben. CSS 2 15.08.2010 19:52
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 16:45
CSS DropDown ohne Bilder ronjambo CSS 3 11.03.2009 20:47
CSS Dropdown menu horizontal...Help please ... Oni CSS 4 09.04.2008 09:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:48 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2023, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023