navileiste
0 0 0 0 0 
Take
0 0
navileiste
Hallo,
ich versuch mich gerade an einer navileiste - habe die soweit jetzt auch hinbekommen - habe leider noch 2 Probleme...
1. die Leiste "springt" hoch (einfach unten Link anklicken, und z.b. über Mannschaften fahren).
2. Sollten die Felder so ausgefüllt (mit der Hintergrundfarbe), dass Sie nicht kleiner/größer werden (siehe wenn "Jugend" überfahren wird, der Abstand...)
Kann ggf. auch meine CSS Datei online stellen.
-
Grüße,
#nav { bottom: 514px; position: absolute; right: 200px; }und sonst geht es dir gut? die leiste ist m.u. mitten im text - was genau wolltest du damit bezwecken?
MFG
bleicher-
Ich wollte es an die Richtige Position so schieben
-
Grüße,
Ich wollte es an die Richtige Position so schieben
du wolltest erst rausfionden, was du machst. nimm dir die zeit dich mit CSS und positionierung zu befassen - das wird am ende schnelelr sein als jedes mal rumzustochern.
MFG
bleicher-
Grüße,
Ich wollte es an die Richtige Position so schieben
du wolltest erst rausfionden, was du machst. nimm dir die zeit dich mit CSS und positionierung zu befassen - das wird am ende schnelelr sein als jedes mal rumzustochern.
MFG
bleicherDas Problem, welches ich habe - ist dass sich das ganze je nach Auflösung des Monitors verschiebt, und ich weiß nicht wie ich das ganze mit dem head verknüpfe, dass sich keine Verschiebungen mehr ergeben.
-
Hi,
bitte keine Fullquotes, danke.
Das Problem, welches ich habe - ist dass sich das ganze je nach Auflösung des Monitors verschiebt, und ich weiß nicht wie ich das ganze mit dem head verknüpfe, dass sich keine Verschiebungen mehr ergeben.
Dann *informiere* dich jetzt *endlich* mal zum Thema absolute Positionierung.
Finde heraus, welche Bezugspunkte diese haben kann.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
bitte keine Fullquotes, danke.
Das Problem, welches ich habe - ist dass sich das ganze je nach Auflösung des Monitors verschiebt, und ich weiß nicht wie ich das ganze mit dem head verknüpfe, dass sich keine Verschiebungen mehr ergeben.
Dann *informiere* dich jetzt *endlich* mal zum Thema absolute Positionierung.
Finde heraus, welche Bezugspunkte diese haben kann.MfG ChrisB
Sorry für den Doppelpost vorhin...
hier nochmal für alle;
Die folgende Nachricht zum Thema stammt von: Alex, 18. April 2011, 19:26
Hallo,
habe mein Menü etwas angepasst in Sachen CSS. Im Firefox verschiebt es sich nicht mehr und hat nun auch die Funktionalität wie gewünscht. Nur habe ich jetzt das Problem, dass wenn ich auf die Seite mit dem Internet Explorer gehe, das Navi die falsche Form hat. Wie kann ich das berichtigen?
Gruß
Alex-
Hi,
bitte berücksichtige diesen Hinweis:
bitte keine Fullquotes, danke.
von jetzt an!
habe mein Menü etwas angepasst in Sachen CSS. Im Firefox verschiebt es sich nicht mehr und hat nun auch die Funktionalität wie gewünscht. Nur habe ich jetzt das Problem, dass wenn ich auf die Seite mit dem Internet Explorer gehe, das Navi die falsche Form hat. Wie kann ich das berichtigen?
Du hast in dein DIV #content jetzt den Code eines vollständigen HTML-Dokumentes hineingeklatscht - wenn dir auch nur die Grundlagen von HTML bekannt sind, müsste dir auch klar sein, dass das absoluter Unfug ist.
Beseitige zunächst die Fehler - die im HTML, und die im CSS.
Danach können wir weiter sehen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Beseitige zunächst die Fehler - die im HTML, und die im CSS.
Danach können wir weiter sehen.
MfG ChrisB
Soweit sogut, habe die imports aus der CSS Datei gelöscht:
Dieses Dokument wurde als CSS level 2.1 validiert!Nun zum Markup, auch soweit alles entfernt, bis auf:
Line 61, Column 3: "DOCTYPE" declaration not allowed in instance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Line 63, Column 67: document type does not allow element "html" here
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">Verstehe da nicht, was falsch ist? Wird von meinem Editor so vorgegeben.
So.. habe auch die upgedatend files neu hochgeladen.
homepage-
Hi,
Nun zum Markup, auch soweit alles entfernt, bis auf:
Line 61, Column 3: "DOCTYPE" declaration not allowed in instance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Line 63, Column 67: document type does not allow element "html" here
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">Verstehe da nicht, was falsch ist?
Das sagte ich doch bereits: Du kannst nicht ein vollständiges HTML-Dokument einfach so irgendwo in ein anderes reinsetzen, das ist kein gültiges HTML!
So lange dir noch nicht mal solche Basics klar sind, ergibt das keinen Sinn, hier das konkrete Problem weiter zu diskutieren.
Beschäftige dich bitte erst mal mit den Grundlagen von HTML.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Das sagte ich doch bereits: Du kannst nicht ein vollständiges HTML-Dokument einfach so irgendwo in ein anderes reinsetzen, das ist kein gültiges HTML!
So lange dir noch nicht mal solche Basics klar sind, ergibt das keinen Sinn, hier das konkrete Problem weiter zu diskutieren.
Beschäftige dich bitte erst mal mit den Grundlagen von HTML.MfG ChrisB
Achso.. jetzt habe ich verstanden, weil das insgesamt 2x vorkam. Hab das nicht weiter beachtet, weil das der Editor selbst gemacht hat. Sry.
-
Sorry für Doppelposting, kann sich aber wer meinem Problem widmen mit der IE anzeigedarstellung? Wäre für jede Hilfe dankbar!
-
Hi,
kann sich aber wer meinem Problem widmen mit der IE anzeigedarstellung?
Ich kann in der Anzeige im Firefox 3.6 und IE 8 keinen großen Unterschied entdecken.
(Cache geleert vor dem Weitertesten nach Fehlerbehebung?)
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Ich kann in der Anzeige im Firefox 3.6 und IE 8 keinen großen Unterschied entdecken.
Das Problemt tritt beim IE7 auf, da ist es als Block.
Ich habe das Untermenü nun doch mit relative positioniert, da die Unterpunkte doch mehr Platz brauchen als das Hauptmenü. Mein Problem ist jetzt allerdings, dass sich bei zwei Menüpunkten, sobald ich drüber fahre, sich die Buttons rechts davon verschieben, wegen der größen Anpassung. Gibt es noch eine einfache Möglichkeit, dass ich den Block "Jugend", sowie "Über uns" auf die maximale Zeilenlänge eines Untermenüs anpasse?
Ich hoffe ihr versteht was ich meine.
-
Hi,
Das Problemt tritt beim IE7 auf, da ist es als Block.
Kein Wunder - siehe abschließendes „Beachten Sie: [...]“ unter http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
Gibt es noch eine einfache Möglichkeit, dass ich den Block "Jugend", sowie "Über uns" auf die maximale Zeilenlänge eines Untermenüs anpasse?
Nicht, so lange die Untermenüs per display:none ausgeblendet sind - so lange haben sie nämlich gar keine Maße, die sich auf irgendwas auswirken könnten.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Danke.
Kein Wunder - siehe abschließendes „Beachten Sie: [...]“ unter http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
Das ist natürlich schlecht, aber dann verzichte ich erstmal auf die IE7 User :P
Nicht, so lange die Untermenüs per display:none ausgeblendet sind - so lange haben sie nämlich gar keine Maße, die sich auf irgendwas auswirken könnten.
Hmm, aber um so ein klappmenü zu haben, muss ich diese auf display: none stellen, da ansonsten direkt alles sichtbar wird. Dann muss ich wohl mit dem schlechten navi leben.
-
Hi,
Hmm, aber um so ein klappmenü zu haben, muss ich diese auf display: none stellen, da ansonsten direkt alles sichtbar wird. Dann muss ich wohl mit dem schlechten navi leben.
Oder es mit sinnvoll eingesetzter absoluter Positionierung lösen ...
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Ja wie bereits gesagt, verschiebt sich das ganze, habe es nun mit top posioniert, damit kommen die Submenüs wenigstens mal zur gewollten Richtung herunter.
Aber wie ich das verankere, das verstehe ich nicht - der Link oben hat mir jetzt nicht wirklich geholfen, warum ich kein absolute nehmen soll?
-
-
Hi,
- die Leiste "springt" hoch (einfach unten Link anklicken, und z.b. über Mannschaften fahren).
Natürlich tut sie das - schließlich hast du sie absolut positioniert, und zwar von unten aus, per bottom. Wenn sie also durch Einblendung der im Fluss belassenen Unterpunkte höher wird, verschiebt sich vollkommen logischer Weise ihre Oberkante nach oben.
- Sollten die Felder so ausgefüllt (mit der Hintergrundfarbe), dass Sie nicht kleiner/größer werden (siehe wenn "Jugend" überfahren wird, der Abstand...)
Auch das passiert deshalb, weil die Untermenüs im normalen Fluss befindlich sind - sie vergrößern dadurch natürlich bei ihrer Einblendung ihr Elternelement.
Einen Ansatz, wie man sowas korrekt umsetzt, liefert dir http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Kann ggf. auch meine CSS Datei online stellen.
Das kannste bitte erst mal validieren.
WTF hat denn bitte folgender JavaScript-Code im CSS verloren?
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);vMfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
@Chris
Ok - werde mir gleich deinen Link mal ansehen, vielleicht geht es ja dann und melde mich wieder.
Das JavaScript, war ein Tutorial im Netz - habs wohl vergessen zu löschen. Danke für den Hinweiß.
-
Hi,
- die Leiste "springt" hoch (einfach unten Link anklicken, und z.b. über Mannschaften fahren).
Natürlich tut sie das - schließlich hast du sie absolut positioniert, und zwar von unten aus, per bottom. Wenn sie also durch Einblendung der im Fluss belassenen Unterpunkte höher wird, verschiebt sich vollkommen logischer Weise ihre Oberkante nach oben.
- Sollten die Felder so ausgefüllt (mit der Hintergrundfarbe), dass Sie nicht kleiner/größer werden (siehe wenn "Jugend" überfahren wird, der Abstand...)
____________
So, konnte noch bisschen was beheben. Wie bekomme ich es hin, dass es z.b. bei "Jugend" (http://dachmarder.de/), das Feld die größe von Ergebnisse annimmt? Ist das bei euch jetzt immernoch total verschoben?
-
Moin,
Das kannste bitte erst mal validieren.
Viel schlimmer ist das HTML: da beginnt einfach mittendrin ein neues Dokument inklusive Doctype und allem schnickschnack...
Gruß,
Take-
Das kannste bitte erst mal validieren.
Habe ich bereits gemacht.
Viel schlimmer ist das HTML: da beginnt einfach mittendrin ein neues Dokument inklusive Doctype und allem schnickschnack...
Ja, das mit dem HTML Doctype etc. hatte ich übersehen, hat mein Editor selbst eingefügt, wurde auch entfernt.
siehe neustes update: homepage
Es gibt noch gewisse kleinigkeiten, die mich am Navi stören - aber vorerst sollte das ok sein, da ich sowieso nicht weiß - wie ich es hinbekomme, dass das Navi Hauptmenü, die größe des max. Untermenüs annimmt.
-
-
Ach, ich habe noch ein Problem, dass sich beim einzommen Content und die Menüleiste verschoeben werden... Kann da vielleicht auch wer helfen? :)
-
Hi,
Ach, ich habe noch ein Problem, dass sich beim einzommen Content und die Menüleiste verschoeben werden... Kann da vielleicht auch wer helfen?
Beschäftige dich erst mal mit den Grundlagen absoluter Positionierung - du scheinst beim Verständnis davon noch eklatante Schwächen zu haben.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Om nah hoo pez nyeetz, Alex!
Ach, ich habe noch ein Problem, dass sich beim einzommen Content und die Menüleiste verschoeben werden... Kann da vielleicht auch wer helfen? :)
[http://selfhtml.apsel-mv.de/position/position.html Positionierung](http://selfhtml.apsel-mv.de/position/position.html Positionierung), boxmodell
Beachte Bleichers Rat, beschäftige dich mit den Grundlagen, vielleicht im Wiki.
Matthias
--
1/z ist kein Blatt Papier.
-
-
Hallo,
was geht jetzt bitte in welchen IE nicht? Im IE 8 sieht alles gut aus. Beziehe mich auf das doppelposting
-
Habe mal in die css Datei gesehen. Ich denke dein Problem ist offensichtlich. Vielleicht sollte die gesamte css Datei mal überarbeitet werden. Die sieht nämlich auf den ersten Blick nicht Browserkompatible aus ;)
-
Habe mal in die css Datei gesehen. Ich denke dein Problem ist offensichtlich. Vielleicht sollte die gesamte css Datei mal überarbeitet werden. Die sieht nämlich auf den ersten Blick nicht Browserkompatible aus ;)
Habe es bereits überarbeitet, allerdings neue Adresse:
Gruß
-
Habe es bereits überarbeitet, allerdings neue Adresse:
Sieht aber immernoch bescheiden im IE 7 aus ;)
#head ul li { display: inline-table; border: 1px outset #FFF; }Ändern in
#head ul li { float:left; border: 1px outset #FFF; padding-right:3px; }dann sollte die navleiste im IE ok sein
-
[/code]
Ändern in#head ul li {
float:left;
border: 1px outset #FFF;
padding-right:3px;
}> > dann sollte die navleiste im IE ok sein Nun, 1. das Untermenü öffnet sich dann, aber nur einzeilig. Desweiteren springt ein "Menüpunkt" nach unten, weil es durch den padding-right (zumindest auf meiner Auflösung), keinen Platz mehr hat.-
Nun, 1. das Untermenü öffnet sich dann, aber nur einzeilig. Desweiteren springt ein "Menüpunkt" nach unten, weil es durch den padding-right (zumindest auf meiner Auflösung), keinen Platz mehr hat.
Dann muss ich doch den ganzen Code nochmal auseinandernehmen. Dafür reicht heute die Zeit nicht mehr. Vielleicht komm ich morgen dazu
-
Dann muss ich doch den ganzen Code nochmal auseinandernehmen. Dafür reicht heute die Zeit nicht mehr. Vielleicht komm ich morgen dazu
neustes update der hp homepage
Habe mich nun von den utopischen größten getrennt :) Ich hoffe, dass ich langsam den richtigen, bzw. vielleicht einen besseren weg gehe... Danke schonmal für deine Hilfe.
-
Habe mich nun von den utopischen größten getrennt :)
Das ist schonmal gut gewesen. Hab jetz auch die Navigation hinbekommen, jedoch lässt sich das in dieser Form nicht schän darstellen. Problem ist, dass deine Subnavigation länger ist als deine Mainnavigation.
Im Grunde passt das nicht in dein Design diese Navigation, da sie größer wird als dein Design es zulässt. Daher würde ich das Konzept dieser Navigation nochmal überdenken. Oder du sorgst dafür, dass deine Hauptnavigation länger ist als deiner Sub.
Siehst dir mal an. Hab einiges rausgeschmissen aus dem css und die htm Seite noch ein wenig angepasst.
/* Zurücksetzen der Innen- und Außenabstände */ * { margin: 0px; padding: 0px; } body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New Roman", serif; } td, th { font-size: 100%; } /* Farben und Hintergründe setzen */ html, body { color: #3b2b20; background-color: white; } h1 { color: #9F0F00; background-color: transparent; font-size: 3em; line-height: 1.1; margin: .8em 0; } h2 { color: #3C6331; background-color: white; font-size: 1.5em; line-height: 1.1; margin: .8em 0; text-transform: uppercase; } /** * @section Absätze */ p { margin: .8em 0; } /** * @section Links und Anker */ a:link { color: #980c02; background-color:transparent; } a:visited { color: #999; background-color: transparent; } a:hover, a:focus { color: #FF7700; background-color: transparent; } a:active { color: white; background-color: #980c02; } /** * Regeln für besondere Bereiche * * @section Kopfbereich */ div#head { width: 1024px; height :150px; margin: 0px; position: relative; background-image:url("logo2.png"); } /** * @section Hauptmenü */ #head ul.mainNav { list-style: none; position: relative; top: 78px; left: 320px; } #head ul.mainNav li { float:left; } #head ul.mainNav li a { background-color: #ad2a01; padding: 5px; font-weight: bold; color: #ffffff; text-decoration: none; } #head ul.mainNav li ul.subNav li { clear: left; width:100%; } #head ul.mainNav li ul.subNav { list-style:none; display: none; } #head ul.mainNav li ul.subNav li a { font-size:11px; } #head ul.mainNav li:hover ul.subNav { display: block; } /** * @section Content */ div#content { width: 650px; margin: auto; padding-right: 150px; position: relative; top: 50px; font-family: Tahoma, Arial, sans-serif; } #content h1 { margin: 0; } /** * @section Footer */ div#footer { color: white; background-color: #d73600; padding-right: 80px; font-family: Tahoma, Arial, sans-serif; font-size: .9em; margin: auto; width: 944px; position: relative; bottom: -100px; } #footer p { margin: auto; }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SG Turm Albstadt</title> <meta name="author-personal" content="Alexander Schönegg" /> <meta name="author-mail" content="mailto:info@turm-albstadt.de" /> <meta name="description" content="Schachclub Turm Albstadt" /> <meta name="language" content="de" /> <meta name="robots" content="index, follow" /> <link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" /> </head> <body> <div id="head"> <ul class="mainNav"> <li><a href="index.php?page=start.php">Startseite</a></li> <li><a href="index.php?page=news.php">News</a></li> <li><a href="index.php?page=termine.php">Termine</a></li> <li><a href="index.php?page=mannschaften.php">Mannschaften</a> <ul class="subNav"> <li><a href="index.php?page=team1.php">1. Mannschaft</a></li> <li><a href="index.php?page=team2.php">2. Mannschaft</a></li> <li><a href="index.php?page=dwz.php">DWZ</a></li> </ul> </li> <li><a href="index.php?page=jugend.php">Jugend</a> <ul class="subNav"> <li><a href="index.php?page=infos.php">Infos</a></li> <li><a href="index.php?page=jtermine.php">Termine</a></li> <li><a href="index.php?page=ergebnisse.php">Ergebnisse</a></li> </ul> </li> <li><a href="index.php?page=ueberuns.php">Über uns</a> <ul class="subNav"> <li><a href="index.php?page=satzung.php">Satzung</a></li> <li><a href="index.php?page=geschichte.php">Geschichte</a></li> </ul> </li> <li><a href="index.php?page=bilder.php">Bilder</a></li> <li><a href="index.php?page=forum.php">Forum</a></li> <li><a href="index.php?page=links.php">Links</a></li> <li><a href="index.php?page=kontakt.php">Kontakt</a></li> </ul> </div> <div id="content"> <h1>Willkommen auf der Internetpräsenz der SG Turm Albstadt</h1> Der Verein hat derzeit ungefähr 55 aktive und passive Mitglieder im Alter zwischen 7 und 80 Jahren. In der Saison 2010/2011 nehmen wir mit 2 Mannschaften am Spielbetrieb teil. Die 1. Mannschaft spielt in der Bezirksliga und die 2. Mannschaft in der A-Klasse Nord. Interessierte Spieler und Gäste, die gerne eine Partie spielen wollen, sind jederzeit willkommen. </div> <div id="footer"> <p><center>Homepage der SG Turm Albstadt 1902 e.V. - <a href="index.php?page=impressum.php">Impressum</a></center></p> <p><center>Design und Code von Alexander Schönegg © 2011</center></p> </div> </body> </html>
-
-
-
-
-
Habe mal in die css Datei gesehen. Ich denke dein Problem ist offensichtlich. Vielleicht sollte die gesamte css Datei mal überarbeitet werden. Die sieht nämlich auf den ersten Blick nicht Browserkompatible aus ;)
Habe es bereits überarbeitet, allerdings neue Adresse:
Habe gerätselt wieso dein Content nicht so will wie ich wollte. Jetzt weiß ichs. Dein Logo ist ja mal der knüller. Habe noch nie gesehen, dass so ein Logo eingebunden wurde.
Ist suboptimal, denn dein Content wird nie wirklich da sein wo er soll. Zumindest nicht ohne absolute nonsens positionierung.
Du bindest ein logo 1024x768 ein. Dein Content wird somit sehr weit unten positioniert. Deine Struktur ist hier das größte Problem. Auch deine Seite solltest du umbauen. Also ich würde als erstes das Logo rauschmeißen in der Form. Und dann vernünftig einen Head bereich erstellen der nicht so hoch sein muss, weil dein Logo sich auf den oberen Teil beschränken sollte.
Die Grafik links kannst du floaten lassen später oder als background-image einbinden
-
-
-
