XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Navigation Anpassen (http://xhtmlforum.de/showthread.php?t=67955)

Cybertronic 11.08.2012 13:56

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...

Luziefer 11.08.2012 15:51

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ß

Cybertronic 11.08.2012 16:21

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

gato 11.08.2012 16:36

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;

Cybertronic 11.08.2012 17:26

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 =)

Cybertronic 12.08.2012 15:24

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...

K.Roland 12.08.2012 17:59

Liste der Anhänge anzeigen (Anzahl: 1)
Siehe auch: [Invalid] Markup Validation of http://easytemplates.org/5mann/kunden/Nihan/de/ - W3C Markup Validator

Der IE Zeigt Scrollbalken, siehe Bild hierzu:

Anhang 4681

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

Cybertronic 13.08.2012 01:27

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..


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

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

© Dirk H. 2003 - 2019