Was mache ich falsch?

[spacle]

Ich habe mir jetzt selbst ein menü und slidedoors erstellt.

		.navi {position:absolute;left:298px; top:67px; z-index:2}
		ul {list-style:none;position:relative;}
		ul li {float:left;}
		ul li:hover,ul li.active {background:url(Bilder/right.gif)}
		ul li a {color:#333;text-decoration:none;height:18px;padding:5px;; display:block;font-family:Arial, Helvetica, sans-serif; font-variant:small-caps; font-size:19px;}
		ul li a.b {width:465px;}
		ul li a:hover,ul li:hover > a{background:url(Bilder/left.gif) no-repeat top left;color:#FFF}
		ul li ul {display:none}
		ul li:hover ul{display:block;position:absolute;left:0;top:28;background:none; margin:0 0 0 0;}
		ul li ul li {background:none;color:#FFF}
		ul li ul li:hover {background:none;color:#FFF}
		ul li ul li:hover a {background:none;color:#FFF }
		clearfix{clear:both;}

        	<ul class="navi" >
            <li ><a href="#">Home&nbsp;&nbsp; </a>
                <ul id="navi">
                    <li><a href="index.html">Startseite&nbsp;&nbsp; </a></li>
                    <li><a href="wir-über-uns.html">Wir über uns &nbsp;</a></li>
                    <li><a href="news.html">New's&nbsp;</a></li>
                   <li><a href="FAQ.html">FAQ's &nbsp;</a></li>
                    <li><a href="Sitemap.html">Sitemap</a></li>
                </ul>
            </li>
            <li><a href="#" class="b">Kontakt </a>
                <ul>
                    <li><a href="Kontak.php">Kontakt</a></li>
                    <li><a href="AGB.html">AGB's </a></li>
                    <li><a href="Impressum.html"><b>I</b>mpressum </a></li>
                    <li><a href="Datenschutz.html">Datenschutz </a></li>
                    <li><a href="Bürozeiten.html">Bürozeiten</a></li>
                    
                </ul>
            </li>
            
        </ul>

Allerdings habe ich jetzt das Problem, dass ich möchte, dass standartmäßig schon startseite ausgewählt ist. Wenn ich aber Home in eine Klasse activ setze:

<li ><a href="#">Home&nbsp;&nbsp; </a>

und active die gleichen attribute zuweise wie hover:

ul li:hover ul{display:block;position:absolute;left:0;top:28;background:none; margin:0 0 0 0;}

dann sieht es zwar gut aus, aber nur bis ich über Kontakt mit der Maus fahre, denn der Text von Home verschwindet nicht.


Außerdem aktivieren sich bei Hover nicht meine Sliderdoors, kA warum.
Und ja, es soll so sein dass keine Hintergründe da sind, außer in der main navi bei hover, da sollen es die sliderdoors sein.

100% des Textes in ul li ul li sollen Schriftfarbe weiß haben, aber das wird nicht angenommen

 

[rockscientist01]

AW: Was mache ich falsch?

Hi,
In der letzten css Zeile steh clearfix - worum gehts da? Da fehlt jedenfalls was...
Zeile 4 fehlt das ; hinter url()
Zeile 6 is ein ; zu viel.
Bei allen color:#FFF und an manch anderer Stelle fehlt das abschließende Smikolon ;

So richtig verstehe ich Dein Anliegen nicht. Also ein slidedoors menu ist mir als fester Begriff nicht geläufig, dachte erst, du wolltest eine jquery Animation. Meinst Du vielleicht einfach css sprites?
Dein Menü funktioniert bei mir jedenfalls gut. Ich habe der .navi noch eine fete Breite von 541px mitgegeben (die Breite beider ul li addiert), dann fällt das Menü nich zusammen, wenn das Browserfenster zu klein wird.
Wenn du willst, dass "Startseite" verschwunden ist, wenn man über "Home" hovert, musst du ul li ul li a ansprechen. dem ul li ul li a im html eine Klasse zuweisen, ich nehme mal class="on".
dann einfach ins css .on{background:none;color:#FFF; }.

hoffe, ich konnte helfen, hier nochmal mein code:

css:

.navi {
            position:absolute;
            left:298px;
            top:67px;
            z-index:2;
            width: 541px;}

        ul {
            list-style:none;
            position:relative;}

        ul li {
            float:left;}

        ul li:hover,ul li.active {
            background:url(Bilder/right.gif);}

        ul li a {
            color:#333;
            text-decoration:none;
            height:18px;padding:5px;
            display:block;
            font-family:Arial, Helvetica, "sans serif"; font-variant:small-caps;
            font-size:19px;}

        ul li a.b {
            width:465px;}

        ul li a:hover,ul li:hover > a{
            background:url(Bilder/left.gif) no-repeat top left;
            color:#FFF;}

        ul li ul {
            display:none;}

        ul li:hover ul{
            display:block;
            position:absolute;
            left:0;
            top:28px;
            background:none;
            margin:0;}

        ul li ul li {
        background:none;
        color:#FFF;}

        ul li ul li:hover {
            background:none;
            color:#FFF;}

        ul li ul li:hover a {
            background:none;color:#FFF; }

        .on{
            background:none;color:#FFF; }

<ul class="navi" >
            <li ><a href="#">Home&nbsp;&nbsp; </a>
                <ul id="navi">
                    <li><a class="on" href="index.html">Startseite&nbsp;&nbsp; </a></li>
                    <li><a href="wir-über-uns.html">Wir über uns &nbsp;</a></li>
                    <li><a href="news.html">New's&nbsp;</a></li>
                   <li><a href="FAQ.html">FAQ's &nbsp;</a></li>
                    <li><a href="Sitemap.html">Sitemap</a></li>
                </ul>
            </li>
            <li><a href="#" class="b">Kontakt </a>
                <ul>
                    <li><a href="Kontak.php">Kontakt</a></li>
                    <li><a href="AGB.html">AGB's </a></li>
                    <li><a href="Impressum.html"><b>I</b>mpressum </a></li>
                    <li><a href="Datenschutz.html">Datenschutz </a></li>
                    <li><a href="Bürozeiten.html">Bürozeiten</a></li>

                </ul>
            </li>

        </ul>

AO

 

[spacle]

AW: Was mache ich falsch?

neinnein, es geht mir darum, dass wie hier auf psd tutorials zb das forum ausgewählt ist; wenn ich aber eine klasse baue, die das macht, dann bleibt der text da stehen wenn ich über einen anderen menüpunkt gehe. Das ganze führt dann zur überlagerung der texte und sieht ziemlich hässlich aus. das möchte ich umgehen. es soll standartmäßg "home" ausgewählt sein, ohne dass man mit der maus drüber geht; wenn man aber mit der maus über kontakt geht muss logischerweise der text von home da verschwinden

edit: da ich grad die ganze zeit dran sitze habe ich grad ein ziemlich riesiges problem gekriegt, ich komm nicht dahinter woran es liegt!!!

wenn ich in das gleiche dokument schreibe:

<img src="Bilder/headerbg.gif" />

wird das Bild angezeigt

wenn ich aber schreibe

<div style="background:url(Bilder/headerbg.gif)">
</div>

wird es nicht angezeigt

 

[MyBad]

AW: Was mache ich falsch?

Hallo,
das dürfte nicht das geeignete Forum sein um diese Frage zu beantworten......ich kenne mich z.b. damit überhaupt nicht aus. VG Jona

Aber vielleicht hast du ja Glück und es liest zufällig doch jemand der Ahnung davon hat...Viel Glück!
Ciao

Na, waren die Punkte knapp?

neinnein, es geht mir darum, dass wie hier auf psd tutorials zb das forum ausgewählt ist; wenn ich aber eine klasse baue, die das macht, dann bleibt der text da stehen wenn ich über einen anderen menüpunkt gehe. Das ganze führt dann zur überlagerung der texte und sieht ziemlich hässlich aus. das möchte ich umgehen. es soll standartmäßg "home" ausgewählt sein, ohne dass man mit der maus drüber geht; wenn man aber mit der maus über kontakt geht muss logischerweise der text von home da verschwinden

edit: da ich grad die ganze zeit dran sitze habe ich grad ein ziemlich riesiges problem gekriegt, ich komm nicht dahinter woran es liegt!!!

wenn ich in das gleiche dokument schreibe:

<img src="Bilder/headerbg.gif" />

wird das Bild angezeigt

wenn ich aber schreibe

<div style="background:url(Bilder/headerbg.gif)">
</div>

wird es nicht angezeigt

Hat das DIV-Element denn eine Höhe und Breite? Wenn nicht, wird auch nichts angezeigt. Sollte das dein Problem nicht lösen, überprüfe mal den Pfad, ob der stimmt.

 

[sokie]

AW: Was mache ich falsch?

Allerdings habe ich jetzt das Problem, dass ich möchte, dass standartmäßig schon startseite ausgewählt ist. Wenn ich aber Home in eine Klasse activ setze:

<li ><a  href="#">Home&nbsp;&nbsp; </a>

und active die gleichen attribute zuweise wie hover:

ul li:hover  ul{display:block;position:absolute;left:0;top:28;background:none;  margin:0 0 0 0;}

dann sieht es zwar gut aus, aber nur bis ich über Kontakt mit der Maus fahre, denn der Text von Home verschwindet nicht.

Wenn du in den code eine Klasse zugewiesen hast, die den Menüpunkt offen hält verschwindet die natürlich nicht von selbst. um einem Element den Klassennamen zu entziehen brauchst du Javascript.
vielleicht reicht das schon als Hinweis, falls du es konkreter brauchst, müsstest du schon konkreter posten (am besten ein link zu der betreffenden Seite)

 

[spacle]

AW: Was mache ich falsch?

es gibt keine betreffende seite^^

ich poste jetzt einfach mal alles, was ich habe; also:

erstmal meine ganzen dateien^^
Stammordner/index.html
Stammordner/Unbenannt-2.html
Stammordner/css/styles.css




soo. erstmal die index.html:

<!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">
<head>
<title>Startseite</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

<body>

<div id="header">
        	<ul class="navi" >
            <li ><a href="#">Home&nbsp;&nbsp; </a>
                <ul id="navi">
                    <li><a href="index.html" class="active">Startseite&nbsp;&nbsp; </a></li>
                    <li><a href="wir-über-uns.html">Wir über uns &nbsp;</a></li>
                    <li><a href="news.html">New's&nbsp;</a></li>
                   <li><a href="FAQ.html">FAQ's &nbsp;</a></li>
                    <li><a href="Sitemap.html">Sitemap</a></li>
                </ul>
            </li>
            <li><a href="#"  class="kontakt">Kontakt </a>
                <ul>
                    <li><a href="Kontak.php">Kontakt</a></li>
                    <li><a href="AGB.html">AGB's </a></li>
                    <li><a href="Impressum.html"><b>I</b>mpressum </a></li>
                    <li><a href="Datenschutz.html">Datenschutz </a></li>
                    <li><a href="Bürozeiten.html">Büro</a></li>
                    
                </ul>
            </li>
            <li><a href="#" class="b"> </a></li>
            
        </ul>
        </div>
</body>
</html>

dann die styles.css

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

html {background:#FFF;}
div#header 
{
	background:url(../Bilder/bgheader.gif);
	margin:auto;
	height:165px;
	width:961px;
	position:relative;
	z-index:1;
}


.navi {position:absolute;left:290px;top:69px;}
ul {list-style:none;position:relative}
ul li {float:left;}
ul li:hover {background:url(Bilder/right.gif) top right no-repeat;}
ul li a {color:#333;text-decoration:none;height:20px; padding:5px;; display:block;font-family:Arial, Helvetica, sans-serif; font-variant:small-caps; font-size:20px;}
ul li a.b {width:465px;}
ul li a.kontakt {width:85px;}
ul li a:hover,ul li:hover > a{background:url(Bilder/left.gif) no-repeat top left;color:#FFF}
ul li ul {display:none}
ul li:hover ul {display:block;position:absolute; position:absolute;left:0;top:20;background:none;}
ul li ul li a {background:none;color:#FFF;}
ul li ul li:hover {background:none;color:#FFF;}
ul li ul li:hover a {background:none;color:#FFF;}
clearfix{clear:both;}

jetzt die Unbenannt-2.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
	<!--
	div#header 
{
	background:url(../Bilder/headerbg.png);
	margin:auto;
	height:165px;
	width:961px;
	position:relative;
	z-index:1;
}

		.navi {position:absolute;left:290px;top:68px;}
		ul {list-style:none;position:relative}
		ul li {float:left;}
		ul li:hover {background:url(Bilder/right.gif) top right no-repeat;}
		ul li a {color:#333;text-decoration:none;height:20px; padding:5px;; display:block;font-family:Arial, Helvetica, sans-serif; font-variant:small-caps; font-size:20px;}
		ul li a.b {width:465px;}
		ul li a.kontakt {width:85px;}
		ul li a:hover,ul li:hover > a{background:url(Bilder/left.gif) no-repeat top left;color:#FFF}
		ul li ul {display:none}
		ul li:hover ul {display:block;position:absolute; position:absolute;left:0;top:20;background:none;}
		ul li ul li a {background:none;color:#FFF;}
		ul li ul li:hover {background:none;color:#FFF;}
		ul li ul li:hover a {background:none;color:#FFF;}
		clearfix{clear:both;}
		
	-->
</style>
</head>

<body>
<div id="header">
        	<ul class="navi" >
            <li ><a href="#">Home&nbsp;&nbsp; </a>
                <ul id="navi">
                    <li><a href="index.html" class="active">Startseite&nbsp;&nbsp; </a></li>
                    <li><a href="wir-über-uns.html">Wir über uns &nbsp;</a></li>
                    <li><a href="news.html">New's&nbsp;</a></li>
                   <li><a href="FAQ.html">FAQ's &nbsp;</a></li>
                    <li><a href="Sitemap.html">Sitemap</a></li>
                </ul>
            </li>
            <li><a href="#"  class="kontakt">Kontakt </a>
                <ul>
                    <li><a href="Kontak.php">Kontakt</a></li>
                    <li><a href="AGB.html">AGB's </a></li>
                    <li><a href="Impressum.html"><b>I</b>mpressum </a></li>
                    <li><a href="Datenschutz.html">Datenschutz </a></li>
                    <li><a href="Bürozeiten.html">Bürozeiten</a></li>
                    
                </ul>
            </li>
            <li><a href="#" class="b"> </a></li>
            
        </ul>
        </div>
      
</body>
</html>

Die Bilder sind verlinkt

Nun die Erklärung: Die Unbenannt-2.html ist eine Testdatei. Darin habe ich wie ihr vllt schon bemerkt den (fast) gleichen Inhalt wie in index.html. Nun zu meinem Problem:

In der Unbenannt-2.html zeigt er die Headergrafik nicht an,aber dafür left.gif und right.gif während in der index.html die Headergrafik angezeigt wird, aber weder left.gif, noch right.gif.
Jaja, alles sehr verwirrend^^

denkt nich ich verfolge den thread nich, aber dieser post hat etwas gedauert^^

@sokie: javascript bin ich grad erst am lernen, kann grad ma die anfangsoperatoren bzw eine var definieren xDD da müsstet ihr mir dann ein bisschen helfen; hoffe dieser post ist konkret genug ^^ ne seite oder so gibt es nicht

edit: das mit den grafiken lässt mich nicht los; ich habe grad mal den stammordner kopiert und auf den desktop geschmissen: resultat: die in der kopie des stammordners befindliche index.html zeigt nun garkeine bilder mehr an; im original schon
habe alle dateipfade mehrmals überprüft

 

[sokie]

AW: Was mache ich falsch?

es gibt keine betreffende seite^^

Das ganze soll doch wahrscheinlich später im internet zu sehen sein - warum dann nicht einfach den Kram in ein testverzeichnis deines space laden um hier den link zu posten?
eingangs schreibst du von slidedoors - das ist javascript, oder? - das ist nicht gepostet...

@sokie: javascript bin ich grad erst am lernen, kann grad ma die anfangsoperatoren bzw eine var definieren xDD da müsstet ihr mir dann ein bisschen helfen; hoffe dieser post ist konkret genug ^^

und was ist mit den slidedoors?

edit: das mit den grafiken lässt mich nicht los; ich habe grad mal den stammordner kopiert und auf den desktop geschmissen: resultat: die in der kopie des stammordners befindliche index.html zeigt nun garkeine bilder mehr an; im original schon

auch hier - den kram in ein Testverzeichnis gesteckt und den Link gepostet, und es ergäbe sich überhaupt die Möglichkeit das nachzuvollziehen - so können wir nur staunend zur Kenntnis nehmen, was du uns schreibst...
statt auf den Desktop zu schmeissen wäre zB dropbox auch eine Möglichkeit.

 

[spacle]

AW: Was mache ich falsch?

ok; testverzeichnis probier ich später mal; und die slidedoors die ich meine sind in css:http://www.alistapart.com/articles/slidingdoors/

 

[rockscientist01]

AW: Was mache ich falsch?

sokie hat da absolut recht...
Solche Sachen kann man einfach besser überblicken, wenn alles am Platz ist.
Tip: .. bplaced.net Webhosting | Freehost :: 2GB Webspace da gibts 2 GB Platz mit xyz.bplaced.net domain mit ftp, sql und php für umsonst...
Einafch deinen Krams da rein laden und link hier posten. Dann können wir Dir besser helfen.

lieben Gruß
AO

 

[spacle]

AW: Was mache ich falsch?

ich kenne bplaced.net seit 3 jahren^^
die anmeldung is aber momentan geschlossen^^
ich versuche es morgen mal, poste dann mal den link

wird vorraussichtlich spacle.bplaced.net sein^^

 

[spacle]

AW: Was mache ich falsch?

ist jetzt verfügbar lade die daten heute abend hoch

 

[rockscientist01]

AW: Was mache ich falsch?

du kannst auch einfach alle Dateien in einen Ordner tun, diesen zippen und dann uploaden...

 

[spacle]

AW: Was mache ich falsch?

also, nein, das mache ich nich dann hat man kein livebeispiel.

ok

spacle.bplaced.net

und

und igonriert mal den letzen menüpunkt, in unbenannt 2, er dient nur als platzhalter

und jetzt könnt ihr klar sehen dass bei identischen code im einen dokument beim hover vom li die bg grafik vom a und vom li gezeigt werden, im anderen nicht.

 

[rockscientist01]

AW: Was mache ich falsch?

im css von is die Pfadangabe nicht vollständig:
ul li:hover {
background: url("../Bilder/right.gif") no-repeat scroll right top transparent;

und

ul li a:hover, ul li:hover > a {
background: url("../Bilder/left.gif") no-repeat scroll left top transparent;

Deine Bilder sind auch falsch gesliced, ich hab das mal alles neu gemacht, guckst du hier:

Ist es bei home so, wie du es Dir vorstellst?
Insgesamt ist das markup deines menus nicht sauber, du solltest Dir mal grundlegendes Menü Bauen aneignen, bevor du mit spezial-faxen anfängst. Mit den basics kannst du hier anfangen:


Die selectoren html (erste Zeile css) und clearfix (letzte Zeile css) gibbet nich... Also da nochmal schauen, was das soll...


lieben Gruß
AO

 

[spacle]

AW: Was mache ich falsch?

lol danke, hätte nich gedacht dass es das ausmacht^^
funzt!
aber weisst du wie ich text vertikal strecken kann durch css
in photoshop geht es da kann man das mit prozenten machen, würde den text der in ul li steht gerne vertikal auf 120% strecken

 

[rockscientist01]

AW: Was mache ich falsch?

kannste "letter-spacing: ;" für benutzen. Aber mal ehrlich: sowas kannste doch auch in 10 Sekunden googlen, oder?

AO

 

[sokie]

AW: Was mache ich falsch?

letter-spacing sperrt den Text, was eine verbreiterung in der horizontalen zur Folge hat. Vertikal lässt sich html-text nicht strecken.

 

[rockscientist01]

AW: Was mache ich falsch?

ach vertikal will er... ja sry hab ich verpeilt...
AO

 

[spacle]

AW: Was mache ich falsch?

jap! in css 3 gibt es font-stretching oder so aber das funzt nich^^
und natürlich habe ich gegoogelt
würde mir jetzt "akute" hilfe beim thema javascript wünschen, jetzt versuche ich es aber mal indem ich dem ul li ul li bei hover nen bg zuweise

edit: mein versuch hat funktioniert; man braucht also doch keinem element seine klasse klauen^^

edit nr.2: na toll; die registerkarten beim aktuellen elemnt bleiben bestehen, das is verdammt aufwändig das weg zu kriegen dann muss ich beim hovern von kontakt der klasse active die bg's rauben, richtig?

edit3: ich krieg es nich hin^^ ich schätze brauche doch javascript

 

[rockscientist01]

AW: Was mache ich falsch?

spacle du brauchst vor allen Dingen mal einen Plan.
Geh doch mal Schritt für Schritt vor:
1) lege das grundlegende Layout fest, d.h. mach in Photoshop (PS) eine Datei in etwa in Bildschirmgröße, und lege da nur rechtecke rein: Wo Dein heder hin soll und wie groß, wo deine navi hin soll und wie groß, wo der content hin kommt, und wie groß, und zum Schluß noch wo der footer... Das nennt man mock up und sieht dann irgendwie so aus:
http://www.dawnreel.com/website-mockup-small.gif
2)lege neue Ebenen an, und designe deine site. Soll heißen: Baue Deine site so, wie sie aussehen soll exakt in PS.
3)mach dein layout in html. Also lege alle divs an, die du brauchst, in das div, in das die navi kommt machst eine ul mit allen entsprechenden Listenpunkten, lege in den content-div ein paar Überschriften h1-h4 oder so, und 2 paragraphen mit ausreichend blindtext, in etwa so viel, wie du später gedenkst in die site einzupflegen. Wenn du das hast gehts ans stylen:
4) Vermiss Dein mock up!!! Pixelgenau! Slice die benötigten Bilder, die du brauchst, aus deinem PS mock up uns speichere sie in einen image Ordner.
5) Style mit css! Geh von oben nch unten Dein Layout durch und style alles so, wie du es gerne hättest. Natürlich kannst/musst/solltest du schon vorher in Punkt 3 ein stylesheet anlegen und darin grob das Layout vorgeben, aber eben nur soweit, dass du alle divs auseinander halten kannst und siehst, ob z.B. bei zu viel Text irgendwelche divs aus dem Ruder laufen. Aber hier und jetzt kannst du deine site fertig bauen und das css tweaken.

Das ganze beschreibt einen iterativen Prozess, soll heißen: Manchmal muss man wieder von vorne anfange, weil man merkt, dass man von vornherein Fehler gemacht hat.
Aber wenn du so strukturiert vorgehst, dann hast du einen Faden, an dem Du Dich langhanglen kannst. Und es macht es leichter, Dir zu helfen, weil du immer konkret an einem Punkt arbeitest.

hier z.Bleistift gibbet Tutorials, wie man websites in PS entwirft:
http://www.ast-blog.de/2009/05/03/30-photoshop-weblayout-tutorials/

So das wars
AO

ok eins noch: fang klein an, ganz klein
1 index.html mit menüvon 2 Punkten, 2 untersites. Das kann man auch als Anfänger bewerkstelligen und man hat schnell ein Erfolgserlebnis. Und man lernt unheimlich was. Die 2. site kann dann aufwändiger werden.

So, jetzt aber
AO