zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation Anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2012, 13:56
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard Navigation Anpassen

Ein Kumpel und ich arbeiten grade an einem Layout: Weinladen

Und wir haben ein Problem mit der Navigation...

Und zwar wie ihr seht sind die Separators zwischen den Menüpunkten sehr unsauber platziert... (Unterschiedliche Abstände usw...)

Wenn man den festen breite wert der listen-punkte entfernt sind die Abstände zwar genau richtig, dafür lassen sich aber die "Listen Unterschriften" die als zweite Liste drunter gesetzt wurden und mit magin-top -xx Platziert wurden, nicht mehr an die richtige stelle positionieren...

Und was noch sehr störend ist, ist das wenn man mit der Maus über die untere Liste (Unterschriften) Hovert, ist die Link Funktion geblockt, das heißt man muss mit der Maus genau auf den Hauptlisten Punkt drüber gehen damit der Link Funktioniert... Könnte sehr sehr störend sein für Besucher der Webseite...

Wichtig ist uns nur das wir das alles ohne Bild Dateien Lösen, ansonsten hätte ich einfach die unterschrift als Listen BG eingefügt... Aber das ist ja nicht sinn und zweck der Sache...

Bin für jeden Vorschlag sehr dankbar =)
Gruß Sven

Nachtrag.: Habe das mal mit Divs umgesetzt: http://mywebexile.de/nihan/ so soll es am ende aussehen =) Nur dürfen halt keine Divs verwendet werden...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2012, 15:51
Benutzer
neuer user
 
Registriert seit: 02.01.2011
Beiträge: 66
Luziefer befindet sich auf einem aufstrebenden Ast
Standard

dann schau dir bitte mal deine css etwas genauer an.
template.css zeile 33

ist: margin:10px 15px; (mit 2 werten schauts blöd aus) wo sind die anderen 2 werte?
sollte: margin:10px 0 0 15px; mit der sache passt auch dein menu oben wieder rein ohne das ein punkt nach unten rutscht.

ein bildschirm hat 4 ecken und nicht 2

mach was daraus.

gruß
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2012, 16:21
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Code:
@charset "utf-8";
/* CSS Document */

/* Main Settings */
body { margin: 0px; background: url(../images/page_bg.png); }
div.clear { clear: both; }
span.bold { font-weight: bold; }
div.wrapper { width: 960px; margin: auto; background: url(../images/wrapper_bg.png); padding: 0 3px; }
a:link { text-decoration:none; color:#252525; }
a:visited { text-decoration:none; color:#252525; }
a:focus { text-decoration:underline; color:#252525; }
a:hover { text-decoration:none; color:#5c8317; }
a:active { text-decoration:underline; color:#252525; }

/* Titles */
h1 { font-size: 26px; font-weight: bold; font-style: italic; margin: 5px 0px 15px 0px; padding: 0px; }
h2 { font-size: 14px; font-weight: bold; font-style: italic; margin: 0px 0px 3px 0px; padding: 0px; }
h3 { font-size: 16px; color: #434343; font-style: italic; background: url(../images/h3_bg.png) 0% 30px no-repeat; margin: 0 0 20px 0; padding-bottom: 20px; }
h4 { font-size: 16px; padding-bottom: 14px; font-weight: 100; }
h5 { font-size: 12px; padding-bottom: 10px; font-weight: 100; }
h6 { font-size: 12px; margin-bottom: 13px; font-weight: bold; }

/* Header Settings */
div.headline { height: 10px; background: url(../images/headline_bg.png); }
div.header { background: #f5f5f5; padding: 35px; }
div.nihan_logo { width: 110px; height: 70px; margin-right: 110px; background: url(../images/nihan_logo.png); float: left; }

/* Navi Settings */
.mainmenu { float:right; position:relative; }
ul.menu { list-style-type:none; margin:0; padding:0; position:relative; }
ul.menu li { float:left; width:130px; background:url(../images/separator.jpg) no-repeat 0 50%; }
ul.menu li:first-child { background:none; }
ul.menu li a { font-size:19px; display:block; margin:0; padding:15px 20px 27px; text-decoration:none; }
ul.menu li a:hover { background:#fff; }
.submenu { margin-top:-32px; position:absolute; width:650px; }
ul.sub li a { font-size:12px; color:#bbb; padding:0 0 0 20px; width:140px; background:none; display:block; }
ul.sub li { background:none; }
ul.sub li a:hover { background:none; }

/* Content Settings */
div.content_green_left_bar { width: 5px; height: 115px; background: #5c8318; float: left; }

/* Content 1 Settings */
div.content1 { padding: 25px; border-left: 35px solid #f5f5f5; border-right: 35px solid #f5f5f5; background: url(../images/page_bg.png); }
div.content1_posts { width: 375px; float: left; line-height: 25px; margin-left: 25px; text-align: justify; font-style: italic; }
div.content1_posts img { float: left; margin-right: 10px; }
div.content1_seperator { width: 30px; height: 1px; float: left; }
div.content1_writenfrom { background: url(../images/writenfrom_bg.png) no-repeat bottom right; margin-top: 15px; }
span.content1_writenfrom { font-size: 12px; font-style: italic; }

/* Content 2 Settings */
div.content2 { padding: 35px 35px 60px 35px; background: #f5f5f5; }
div.content2_posts { line-height: 25px; margin-left: 25px; }
div.content2_posts img { float: left; margin-right: 15px; width: 80px; height: 70px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

/* Footer Settings */
div.footer_upper_top_bg { height: 30px; background: url(../images/footer_upper_bg.png) center; margin-top: -30px; }
div.footer_upper_wrapper { background: #fafafa; }
div.footer_upper_content { width: 890px; margin: auto; padding: 35px; }
div.footer_i_make_ya_center { width: 960px; margin: 10px auto 0px auto; }
div.footer_wrapper { background: #cbcbcb; padding: 25px 0px; }
div.footer_leftcell { width: 620px; float: left; font-size: 12px; color: #5d5d5d; }
div.footer_leftcell a { color: #5c8317; }
div.footer_middlecell { width: 190px; float: left; }
div.footer_box_1 { width: 340px; float: left; margin-right: 45px; color: #6e6e6e; }
div.footer_box_2 { width: 230px; float: left; margin-right: 45px; color: #6e6e6e; }
div.footer_box_3 { width: 230px; float: left; margin-right: 0px; }
div.footer_map { width: 340px; height: 234px; background: url(../images/prev/map_prev.png); }
ul.footer_list, .footer_list li { margin: 0 0 10px 0; padding: 0; list-style: none; font-size: 12px; }
.footer_list_ort a { display: block; padding: 5px 2px 5px 25px; color: #a3a3a3; background: transparent url(../images/footer_boxes_lists_ort.png) 0 6px no-repeat; }
.footer_list_ort a:hover { color: #6e6e6e; background-position: 0 -69px; }
.footer_list_mail a { display: inline; padding: 5px 2px 15px 25px; color: #a3a3a3; background: transparent url(../images/footer_boxes_lists_mail.png) 0 6px no-repeat; }
.footer_list_mail a:hover { color: #6e6e6e; background-position: 0 -69px; }
.footer_list_call a { display: block; padding: 5px 2px 5px 25px; color: #a3a3a3; background: transparent url(../images/footer_boxes_lists_call.png) 0 4px no-repeat; }
.footer_list_call a:hover { color: #6e6e6e; background-position: 0 -76px; }
.localinfo { font-size:13px; }
.nobg { background:none !important; }

div.footer_rightcell { width: 45px; height: 45px; float: right; margin-top: -8px; }
.footer_rightcell { width: 45px; height: 45px; background: url(../images/back_to_top.png) 0 0 no-repeat; }
.footer_rightcell:hover { background-position: -45px 0; }

/* Footer Social Buttons */
ul.nihan_social, .nihan_social li { margin: 0px; padding: 0px; list-style: none; }
.nihan_facebook a { width: 48px; height: 48px; float: left; margin-right: 12px; background: url(../images/nihan_facebook.png) 0 0 no-repeat; }
.nihan_facebook a:hover { background-position: -48px 0; }
.nihan_twitter a { width: 48px; height: 48px; float: left; margin-right: 12px; background: url(../images/nihan_twitter.png) 0 0 no-repeat; }
.nihan_twitter a:hover { background-position: -48px 0; }
.nihan_rss a { width: 48px; height: 48px; float: left; margin-right: 12px; background: url(../images/nihan_rss.png) 0 0 no-repeat; }
.nihan_rss a:hover { background-position: -48px 0; }
.nihan_google a { width: 48px; height: 48px; float: left; background: url(../images/nihan_google.png) 0 0 no-repeat; margin-bottom: 35px; }
.nihan_google a:hover { background-position: -48px 0; }

/* Footer Navigation */
ul.menufooter_navigation, .menufooter_navigation li { margin: 0px; padding: 0px; list-style: none; }
.menufooter_navigation li { float:left; }
.menufooter_navigation a { display: block; width: 100px; padding: 0px 0px 10px 15px; float: left; color: #6E6E6E; background: transparent url(../images/navigation_list.png) 0 8px no-repeat; }
.menufooter_navigation a:hover { color: #555555; }
.menufooter_navigation li:nth(3) { clear:both; }

/* Footer Unsere Social Buttons */
ul.our_social, .our_social li { margin: 0px; padding: 0px; list-style: none; }
.our_facebook a { width: 30px; height: 30px; float: left; margin-right: 10px; background: url(../images/our_facebook.png) 0 0 no-repeat; }
.our_facebook a:hover { background-position: -30px 0; }
.our_twitter a { width: 30px; height: 30px; float: left; margin-right: 10px; background: url(../images/our_twitter.png) 0 0 no-repeat; }
.our_twitter a:hover { background-position: -30px 0; }
.our_in a { width: 30px; height: 30px; float: left; margin-right: 10px; background: url(../images/our_in.png) 0 0 no-repeat; }
.our_in a:hover { background-position: -30px 0; }
.our_vimeo a { width: 30px; height: 30px; float: left; margin-right: 10px; background: url(../images/our_vimeo.png) 0 0 no-repeat; }
.our_vimeo a:hover { background-position: -30px 0; }
.our_rss a { width: 30px; height: 30px; float: left; background: url(../images/our_rss.png) 0 0 no-repeat; }
.our_rss a:hover { background-position: -30px 0; }

/* Slider */
.v3dslideshow { margin-top:50px; }
sehe in zeile 33 nix von margin:10px 15px;
außerdem wenn man nur 2 werte angibt gilt der erste für oben und unten und der zweite für links und rechts, was soll daran also blöd sein wenn man überflüssige zahlen weg lässt? klar könnte auch margin: 10px 15px 10px 15px; machen, was aber sinnlos währe da es auch mit 10px 15px; geht

Übrigens hilft mir das kein meter weiter bei meinem Problem =) Trotzdem danke ;D
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2012, 16:36
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Das Problem liegt mitunter darin, dass du hier zwei unvereinbare Verweise zusammenfügen möchtest. Zumindest nach meinem Verständnis. Die Struktur deiner Seite ist leider etwas unklar.

Wenn "Wohlfühlen" ein Unterpunkt von Kosmetik sein soll, dann musst du das auch entsprechend auszeichnen: Mit einer verschachtelten Liste.
Hier musst du dich aber entscheiden, ob beide Texte unterschiedliche Ziele haben sollen, oder ob du einen großen klickbaren Menüpunkt willst (wie im folgenden Beispiel).

Soll "Wohlfühlen" nur eine Unterschrift sein, dann musst du den Text direkt in den Verweis hineinpacken.

Die Lösung dazu ist nicht unbedingt elegant, aber zweckmäßig:
HTML-Code:
<li><a href="#ziel"><span>Kosmetik</span>; <span>Wohlfühlen</span></a></li>
Der für die sinnvolle Trennung der Texte erforderliche Strichpunkt wird ausgeblendet, indem du <a> eine passende Textfarbe gibst.
Der sichtbare Text befindet sich innerhalb von span-Elementen.
Das a-Elemet und das zweite span-Element erhalten die Anweisung display: block;
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.08.2012, 17:26
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

das ist ein super Ansatz, auf die Idee bin ich noch gar nicht gekommen =) Danke dir, werde das heute Abend mal versuchen um zu setzen =)
Mit Zitat antworten
  #6 (permalink)  
Alt 12.08.2012, 15:24
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Habs dem kollegen weiter geleitet der die designs an Joomla anpasst... und er meint das das leider nicht geht weil joomla in den listen die span tags entfernt... man müsste also ein Modul schreiben dafür meinte er...
Mit Zitat antworten
  #7 (permalink)  
Alt 12.08.2012, 17:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Siehe auch: [Invalid] Markup Validation of http://easytemplates.org/5mann/kunden/Nihan/de/ - W3C Markup Validator

Der IE Zeigt Scrollbalken, siehe Bild hierzu:

scroll.PNG

Und falls die Zentrierung von Wrapper immer 960 Pixel sein sollten, dann bitte hier Padding abziehen.
Code:
}
div.wrapper {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/wrapper_bg.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    padding-bottom: 0;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
    width: 960px;
}
_____________
Gruß,
Roland
Mit Zitat antworten
  #8 (permalink)  
Alt 13.08.2012, 01:27
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Danke für den Tipp mit dem Scrollbalken, das mit dem Padding ist beabsichtigt, da der content 960px sein soll aber am rand halt nochmal die 3px für den schatten

sehr schade... lässt sich wohl echt nich in joomla umsetzen ohne modulprogrammierung..
Mit Zitat antworten
Antwort

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
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Navigation ist nicht mittig Schokokrapfen CSS 29 19.09.2011 23:19
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29


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