zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Meine neue Navigation funktioniert, aber sie ist optisch nicht schön!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.06.2018, 15:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2018
Beiträge: 2
Michaelvon befindet sich auf einem aufstrebenden Ast
Lächeln Meine neue Navigation funktioniert, aber sie ist optisch nicht schön!

Hallo,

meine Webseite europas-handelshaus.com habe ich mit einer Vorlage von os-templates.com überarbeitet. Dabei gefiel mir nicht, das nur der Text bei Mauskontakt die Farbe ändert. Darum habe ich es mit meiner alten Navigation versucht und es funktioniert auch. Der einzige Nachteil ist, das bei Mauskontakt mit „Aufträge & Selbständige“ und „Jobsuchmaschinen“ die weißen Flächen keinen Seitenabstand haben. Darum habe ich es margin oder padding versucht und Werte in px, em oder rem eingegeben, nichts funktioniert. Außer bei Padding, da wird es nach oben und unten größer. Und wenn ich " " ein oder mehrmals einsetze, das funktioniert, aber es ist optisch nicht schön, denn wenn ich mit kleineren Monitoren die Navigation anwähle, sind die beiden Wörter eingerückt.
Nur bei den Hauptwörter, die eine Subebene haben, funktioniert es einwandfrei.

Vielleicht kann mir jemand helfen und mir schreiben, was ich wo eingeben muss, da ich selber kein Webdesigner bin und es auch mit anderen Vorlagen aus dem Internet versucht habe, aber es passt nicht, ich bekomme es nicht hin.

Vielen Dank

Michael


Am Ende der Code meiner Topnav:

#topnav {
padding: 0;
color: #C0BAB6;
background-color: darkblue;
clear: both;
word-wrap: normal;
white-space: nowrap;
}

#topnav ul {
margin: 0;
padding-left: 0;
list-style: none;
text-transform: uppercase;
font-size: 12px;
white-space: normal;
}

#topnav ul ul {
z-index: 9999;
position: absolute;
width: 190px;
text-transform: none;
border-left: 1px solid darkblue;
border-right: 1px solid darkblue;
border-bottom: 1px solid darkblue;
}

#topnav ul ul ul,
#topnav ul ul ul ul {
left: 190px;
top: 0;
border:
}

#topnav ul:first-child li:last-child > ul {
right: 0;
border:
}

#topnav ul:first-child > li:last-child li > ul {
left: -190px;
}

#topnav li {
position: relative;
display: block;
float: left;
margin: 0 30px 0 0;
padding: 0;
}

#topnav li:first-child {}

#topnav ul:first-child li:last-child {
margin-right: 0;
}

#topnav li li {
width: 100%;
margin: 0;
}

#topnav li a {
display: block;
padding: 20px 0;
}

#topnav li li a {
display: block;
margin: 0;
padding: 10px 15px;
}

#topnav ul ul {
display: none;
}

#topnav ul li:hover > ul {
display: block;
}

#topnav a {
color: white;
background-color: darkblue;
font-weight: bold;
}

#topnav li li a,
#topnav li.active li a {
color: darkblue;
background: white;
font-weight: normal;
}

#topnav li.active a,
#topnav a:hover {
color: darkblue;
background-color: white;
}

#topnav ul li li:hover > a {
color: white;
background-color: darkblue;
}

#topnav li a.drop,
#topnav li.active a.drop {
padding-right: 20px;
padding-left: 15px;
background-image: url("images/dropdown_side.gif");
background-position: 5px center;
background-repeat: no-repeat;
}

#topnav form {
display: block;
height: 30px;
margin: 0 auto;
padding: 20px 0;
}

#topnav form select {
display: block;
width: 100%;
padding: 8px;
color: darkblue;
background-color: white;
border: 1px solid #494949;
cursor: pointer;
outline: none;
}

#topnav form select option {
display: block;
margin: 10px;
padding: 0;
cursor: pointer;
outline: none;
border: none;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2018, 08:48
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Michaelvon Beitrag anzeigen
Darum habe ich es mit meiner alten Navigation versucht und es funktioniert auch. Der einzige Nachteil ist, das bei Mauskontakt mit „Aufträge & Selbständige“ und „Jobsuchmaschinen“ die weißen Flächen keinen Seitenabstand haben. Darum habe ich es margin oder padding versucht und Werte in px, em oder rem eingegeben, nichts funktioniert.


HTML-Code:
#topnav li a {
    display: block;
    padding: 20px 0;
}
Was hast du denn konkret versucht?

Wenn ich die das obige ändere, hat das Element ein padding
HTML-Code:
#topnav li a {
    display: block;
    padding: 20px 10px;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2018, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2018
Beiträge: 2
Michaelvon befindet sich auf einem aufstrebenden Ast
Standard Navigation ist Optisch O.K.

Hallo protonenbeschleuniger,

vielen Dank würden deinen Rat. Meine Seite sieht jetzt wieder gut aus.

MFG

Michael
Mit Zitat antworten
Antwort

Stichwörter
navigationsproblem

Themen-Optionen
Ansicht

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
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Feste Breite in Navigationsleiste ändern imho74 CSS 0 28.04.2010 23:50
Navigation im Boxmodell funktioniert nicht bikersw CSS 2 05.10.2006 23:24
Navigation mit Opazität funktioniert unter IE nicht - was mache ich falsch? mode101 CSS 4 30.09.2006 16:25
im mac verutscht die Navigation nach oben. Warum? CSS-Newbie CSS 1 21.09.2004 17:29


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