Navigations Leiste -- Hilfe gesucht --

[Snazooh]

Hallo!

Ich hoffe ihr könnt mir helfen, und das ich im richtigen Topic bin, weiß nämlich nicht, wie ich folgendes verwirklichen soll: • Eigene kostenlose Homepage erstellen! - Jimdo

Ich möchte auf einer Homepage eine ähnliche Navigationsleiste verwenden. Sie sollte halt vertikal sein und so, dass ich die Farben bestimmen kann (also hintergrund, schrift, mouseover).
Die Suchleiste da sollte nicht dabei sein.
Könnt ihr mir da helfen :) ? Habe da gerade gar keine Idee, wie ich das machen soll.

Vielen Dank im Vorraus,
Gruß,

Florian

 

[_Thor_]

So eine Navigationsleiste ist recht einfach zu machen, das ist nur eine Liste, bei der die Listenelemente nach links gefloated sind.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Denen kannst du dann mit CSS alles zuweisen, was du haben willst.

li {
  float: left;
  background-image: url(image.jpg);
}

 

[Snazooh]

hmmm,

erstmal DANKE für deine zügige Antwort. Ich hatte auf alles gehofft, nur nicht CSS, das kann ich noch nicht wirklich ...

<tr height="80px">
<td>

</td>
</tr>

Ich mach die HP ganz einfach mit einer Tabelle als Grundstrucktur. Also wie da im Code zu sehen ist. Wärst du vielleicht so freundlich (gerne auch wer anderes ;) ) mir dass zu erklären, wie ich das jetzt mit dem "{ float" und so einfüge und dann ändere? Achso, und die Links zu den anderen Seiten sollten natürlich nebeneinader sein, nicht untereinadern....

Gruß,

Florian

Achso, mir fällt gerade noch ein, dass sich da Untermenüs öffnen sollten

Sorry, dass das erst jetzt zu Tage kommt. Das wäre halt auch schön, wenn es da eine Erklärung gebeb =)

Gruß,
Florian

 

[_Thor_]

Mit CSS gestaltest du aber nunmal deine Webseite, damit hat HTML nichts zu tun und Tabellen auch nicht, die sind für tabellarische Inhalte.

In HTML verpackst du nur deinen Inhalt in die dafür vorgesehenen Tags. Überschriften in <h1 - h6>, Absätze in <p>Text</p>, Listen und Aufzählungen in <ul> oder <ol>, wie das dann im Browser aussieht ist erstmal egal, dafür ist dann CSS zuständig.

Untermenüs machst du ebenfalls mit Listen

<ul>
  <li> Menu1</li>
  <li> Menu2</li>
  <li> Menu3
    <ul>
      <li>Untermenu1</li>
      <li>Untermenu2</li>
      <li>Untermenu3</li>
    </ul>
  </li>
</ul>

Mag sein, dass dir das jetzt viel zu umständlich vorkommt, wo es doch Tabellen gibt, aber glaub mir, so ist es besser. Dein Code wird übersichtlicher, leichter zu pflegen und standardkomform.

Du bekommst eine Trennung von Inhalt und Layout, wodurch du den Quellcode nicht mehr ändern brauchst, wenn du was am Style ändern willst, dafür änderst du nur die css-datei.

Wenn du dich damit beschäftigen möchtest, kann ich dir dieses Tutorial empfehlen Erlernen Sie HTML und CSS - Kostenlose Tutorials - Erstellen Sie Ihre eigene Webseite | HTML.net

 

[Snazooh]

Okay, vielen Dank für deinen Link, ich werde mir das mal angucken und dann die Tage noch einmal zu diesem Thema zurückkommen, danke!

Florian

Also das Tutorial ist meiner Meinung nach sehr gut, nur empfehlenswert!


Ich hab jetzt folgendes geschrieben:

<center>

                                   <a href="index.php" class="navi">Home</a>
                                   <a href="aktuelles.php" class="navi">Aktuelles</a>
                                   <a href="verein.php" class="navi">der verein</a>
                                   <a href="veranstaltungen.php" class="navi">Veranstaltungen</a>
                                   <a href="gaestebuch.php" class="navi">Gaestebuch</a>
                                   <a href="kontakt.php" class="navi">Kontakt</a>

</center>

...und im style.css

a.navi {
                a:link {
                color: #000000;
                background-image: url:(navi_button.jpg);
                text-decoration:none;
        }
        a:visited {
                color: #000000;
                background-image: url:(navi_button.jpg);
                text-decoration:none;
        }
        a:hover {
                color: #FFFFFF;
                background-image: url:(navi_button_active.jpg);
                text-decoration:none;
        }
     
}

Allerdings werden mir nun die Links zu den anderen Seiten immer noch blau-unterstrichen auf schwarz dargestellt, nicht wie ich es mir vorstellte:

Home | Aktuelles | der Verein | Veranstaltungen | Gaestebuch | Kontakt

Das alles geschrieben in schwarz auf den von mir erstellten Hintergrundbildern, und sobald ich mit der Mouse drüber gehe, dass die Schrift weiß wird und das Hintergrundbild wechselt.



Wo liegt mein Fehler jetzt?

Ich hoffe ihr könnt mir helfen...


Gruß,

Florian

 

[Efchen]

Du kannst Selektoren nicht ineinander verschachteln.
Was Du suchst, ist wahrscheinlich
a.navi:link
usw.

 

[Loon3y]

Ich mach die HP ganz einfach mit einer Tabelle als Grundstrucktur.

der is gut ! hihi..

wie du schon in zich beiträgen vor mir gehört hast ist das nicht korrekt. Tabellen sind für tabellarische Daten, nicht für das Layout gedacht. für Layout nimmt man CSS und zeichnet dies mit html aus.

Natürlich ist es dir überlassen wie du es machst, aber glaub mir, 50% aller Threads im html-forum sind wegen tabellen-layout und den problemen die dadurch entstehen. und 30% sind weil sie nicht einsichtig sind damit weitermachen und folgefehler dadurch haben. Die restlichen 20% sind "vernünftige" Fragen. :)

 

[Snazooh]

Ja okay, viellen Dank, werde das mal ausprobieren!

@Loon3y

Darf ich das so meinem sehr kompetenten Informatik-Lehrer schicken?
Bin aber im nachhinein wohl doch froh, euch gefragt zu haben!

Muss mir dass jetzt mal mit CSS nochmal intensiver zu Herzen nehmen.



Gruß, Florian

 

[Efchen]

Darf ich das so meinem sehr kompetenten Informatik-Lehrer schicken?

Trau Dich! :-)

Es ist irgendwie nicht begreiflich für mich, dass es auf dieser Welt keine fähigen Informatiklehrer zu geben scheint. Schon zu meiner Zeit (1986-1989) hatten wir nur 4 Informatik-Lehrer, der eine hatte 80-90% Ahnung, der andere nicht, der nächste war eigentlich Mathelehrer und zeugender Jehova und der vierte Doktor der Physik, der nicht verstanden hat, wie man im C64-Basic die Eingabe eines Strings realisiert.

Warum wird das Fach dann unterrichtet, wenn das alles nur Hobby-Heimcomputer-Nutzer sind?

 

[Snazooh]

tja... der hat aber gerade nen tinitus und ist somit krank^^

also der tipp von efchen a.navi:link hat funktioniert - danke!
ich habe jetzt das problem, dass die 60px hohen bilder nur zu dem teil dargestellt werden, wie auch die höhe der schrift ist.


ich werde jetzt wohl das styling-zeugs in css schreiben, habe auch schon angefangen, aber ich hab jetzt ne denkblockade, wie ich den header machen kann:
der besteht aus 3 bildern, und zwar...

das vereinslogo (auf jeder unterseite zu sehen)

daneben zentral ein von mir erstellter schriftzug (dieser wechselt mit jeder seite, ist nämlich die überschrift zum jeweiligen thema, also home, news etc.)

und dann noch ein bild rechts auf der seite( dieses bild ist immer passend zum thema, was gerade angeklickt wurde)


die hp soll in einer breite von 1024px gemacht sein, ist denke ich nachwievor das gängigste.
achso und die maße vom header sollten 100px*1024px(unterteilt in 150px+724px+150px - bild+titel+bild) sein


wie würde ich sowas denn realisieren?


Hoffe ihr könnt mir wieder mal so gut und schnell wie sonst helfen ( bis jetzt kann ich nur gutes über dieses forum zu verkünden!)


Gruß,
Florian

 

[Efchen]

die hp soll in einer breite von 1024px gemacht sein, ist denke ich nachwievor das gängigste.

Im WWW gibt es kein "das gängigste"!
Im WWW ist enorm viel variabel. So auch der Dir zur Verfügung stehende Platz. Eine feste Breite ist eher störend. Wird der Viewport zu klein, bekommt der Nutzer horizontale Scrollbalken, und wenn Du schonmal einen Text gelesen hast, wo Du ständig hin- und herscrollen musstest, dann weißt Du, dass das ein Grund ist, die Site zu verlassen.
Bei 1024px Breite für die Seite gehst Du davon aus, dass es "gängig" ist, dass man eine 1280er Auflösung hat und sein Fenster nach Möglichkeit sogar noch maximiert! Denn wenn Du diverse Toolbars, Sidebars und Fensterrahmen abziehst, wirst Du feststellen, dass Du bei einer Auflösung von 1024x768 maximal auf definitiv weniger als 1024, oft sogar auf weniger als 1000px Breite für den Viewport kommst.

Aber ums mal enorm zu verdeutlichen: Handynutzer, PDA-Nutzer oder Nutzer des nagelneuen Eee PC (640xirgendwaswenigerals480) können von einer Breite von 1024 nur träumen.

CSS bietet Dir Möglichkeiten, Deine Breite an den Viewport der Nutzer anzupassen. Diese Möglichkeiten solltest Du nutzen, auch wenn das natürlich schwieriger ist, als einfach eine feste Breite zu nehmen. Aber es zeigt auch Deine Professionalität (oder anders gesagt, wenn ein Nutzer auf einer Site horizontale Scrollbalken kriegt, denkt er nichts Gutes über den Webmaster!).

Best Viewed with / Optimiert für ... Bildschirmauflösung

 

[Snazooh]

Hallo,

ich hole diesen Thread nochmal aus der Versenkung, um nicht einen neuen aufzumachen.

Mein jetziges (Verständnis?-)Problem ist:

Wenn ich mit CSS das Design mache, wie soll ich die Sachen entsprechend positionieren? Absolute Werte werden doch immer anders angezeigt im Gegensatz zu z.B. "center"! Bei meinem Design sitzt die Navigationsleiste nicht ganz mittig, weshalb ich den Text nicht darüberlegen kann mit Center.



Wie kann ich dieses Problem lösen?


vielen Dank schonmal,


Gruß,
Florian

 

[prm]

Absolute Positionierungen sind aus den von dir genannten Gründen nicht empfehlenswert.
Der <center>-Tag hat mittlerweile weitgehend ausgedient.
Eine horizontale zentrierung erreichst du, indem du einem Element eine bestimmte Breite gibst und mit margin: 0 auto; zentrierst.
Horizontale Zentrierung mit CSS

Je nachdem, wie deine Navi z.Z. aussieht, ist evtl. auch text-align: center; möglich.

 

[Snazooh]

rehct herzlichen dank!!!!


genau das was ich suchte!