• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit Verlinkungen

B

blueangel

Neues Mitglied
Hi!
Habe folgendes Problem: Vorab, bin ein Anfänger was html angeht und kämpfe mich seit ca 2Wochen durch den HTML-Jungle...
Bisher habe ich mir eine Seite gebastelt mit css, die oben eine horizontale Verweissammlung enthält und einer Art Kopfzeile entspricht (Logo is beispielsweise auch drauf zu sehen...) Nun möchte ich 1.folgendes Haben:
Wenn ich auf einen der Verweise klicke, soll zunächst weiter unten Links auf der Seite eine Unterteilung erscheinen (Beispielsweise oben steht Fotoalben, beim Klicken auf Fotoalben soll dann links unten 4 Verweise erscheinen, Fotoalbum 1, Fotoalbum 2, Fotoalbum 3 und Fotoalbum 4. Wenn ich dann auf eines der Alben klicke, soll im "Hauptfenster" also etwas weiter rechts das Fotoalbum geöffnet werden.
Ich möchte aber nicht, dass wenn ich auf Fotoalbum 1 klicke, dass dann das Fotoalbum 1 erscheint und die obere Menüleiste weg ist und die linke Verweisliste auch, sondern die sollen beide sichtbar bleiben...
Da ich in selfhtml gelesen habe, die Framestruktur ist out und man programmiert heute alles mit css, muss ich gestehen, dass ich keine Ahnung habe wie das funktioniert... Bitte helft mir (Wenn möglich auch als Beispiel mit Code, dann kapier ich das schneller, da ich wie gesagt noch nicht allzu fortgeschritten bin) Vielen Dank für Eure Mühe, falls noch irgendwelche Fragen sind, einfach melden...
Grüsse
 
Also mit dem klicken wirst du wohl ein Problem haben. Du kannst hover Effekte mit css umsetzen, jedoch keine Klick-Effekte. Dafür müstest du dir schon Javascript angucken.
Aber denkst du nicht, dass ein Standard Dropdown Menü reichen würde. Such mal im Forum nach: Dropdown Menü CSS .
Aber das bei einem Klick oben rechts ein Album erscheinen soll klingt mir sehr nach Javascript.Aber probier erst einmal dein Navigationsproblem zu lösen :)
 
Also wenn du erst seit 2 Wochen dabei bist, also mit HTML etc.

Dann empfehle ich dir, zuerst eine ganz gewöhnliche HTML Page (natürlich mit CSS) zu erstellen.

Sprich: Wenn du auf einen Link klickst, erscheint eine andere Seite, welche eine andere Navigation aufweist.
Dort kannst du dann deine Auflistung der Fotoablem eintragen, wenn du dann wiederum da auf ein Fotoalbum klickst, erscheint eine Seite mit dem ausgewählten Fotoalbum.

Klar, je mehr Alben, desto mehr Seiten werden benötigt.
Jedoch ist JAvascript für einen Anfänger nicht gerade das leichteste.

Mfg
MasterChief
 
Also, bisher habe ich folgendes hinbekommen:

HTML: 
<html>

<head>

<title>Herzlich Willkommen</title>

<link href="navigation.css" type="text/css" rel="stylesheet" />
</head>

<body>


<ul id="navibereich">

  <li id="navi02"><a href="wirueberuns.html">Wir über uns</a></li>
  <li id="navi02"><a href="privat.html">Privat</a></li>
  <li id="navi02"><a href="geschaeftlich.html">Geschaeftlich</a></li>
 
<ul><li><a href="#Beispiel">Seite1</a></li>
</ul>


  <li id="navi02"><a href="geschichgte.html">geschichte</a></li>
  <li id="navi02"><a href="kundenservice.html">Kundenservice</a></li>
  <li id="navi02"><a href="Entstehung.html">Entstehung</a></li>
  <li id="navi02"><a href="Technik.html">Technik</a></li>
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="kontakt.html">Kontakt</a></li>


</ul>


<p><img src="logo.jpg" width="200" align="right" hspace="40" height="100" border="0" alt="Logo"></p>

<p><img src="ansicht.jpg" width="200" align="left" hspace="40" height="100" border="0" alt="ansicht"></p>



<h1> Funktionsanalyse Südwest</h1>



</body>

</html>

und die css datei sieht so aus...:
HTML: 
body {
  font-size: small;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}


h1 {margin-left:40px;
    margin-top:35px
}


#navibereich {

margin: 0; padding: 0.4em;
border: 1px solid black;
background-color: E5FFFF;
text-align: right;
margin-top: 20px; 
margin-right: 40px;
margin-left:40px
}


ul#navibereich li ul{
  padding: 4px 0px; /* Innenabstand: oben/unten 4px, li/re 0 */


  margin: 15px; /* Keinen Außenabstand */ 
  display: block; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */

}





#navibereich li {
 
  padding: 4px 0px; /* Innenabstand: oben/unten 4px, li/re 0 */


  margin: 15px; /* Keinen Außenabstand */ 
  display: inline; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */

}

a:link {font-weight:bold; color:  3300CC; text-decoration:none; }
a:visited: {font-weight:bold; color: grey; text-decoration:none; }
a:focus: {font-weight:bold; color: red; text-decoration:none; }
a:hover {font-weight:bold; color: 003300; text-decoration:none; }
a:active {font-weight:bold; color: 4C4C66; text-decoration:none; }

g:focus { background-color:red; }

g:hover { background-color:silver; }

g:active { background-yellow:red; }


Was ich jetzt nicht verstehe: Ich würde praktisch die "Seite1" als eine Art Baumstruktur unter "geschaeftlich" haben wollen: Das ganze sollte so endgültig aussehen: Wenn ich mit der Maus auf geschäftlich gehe, sollte anschließend unter geschäftlich "Seite1" erscheinen. Wie macht man so was in der Art.
Bitte um genaue Beschreibung (für "Laien") Danke!

Falls noch Fragen sind, bitte schreiben...
 
Der Link ist zwar gut, aber muss gestehen, dass ich leider trotzdem nicht weiterkomme. Wie müsste es denn in meinem konreten Fall aussehen html code...? Vielleicht kann ich dann die Anleitung deines Links besser verstehen, aber ich sollte zuerst wissen, wie es in meinem konkreten Beispiel aussieht.
Vorab mal Danke für Deine Mühe!
 
Schau dir dieses Beispiel mal an was ich geschrieben habe.
Dein Code lässt sich leicht in diesen hier umwandeln

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Webseite</title>

<style type="text/css">
    /*
     Allgemeine ul und li Angaben
     */
    ul 
    {    
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    li 
    {
        float: left;
        position: relative;
        width: 4em;
    }   
       
    /* -------NUN DER WICHTIGE TEIL------------ */  
    
    /* Untermenu Standard: verstecken */
    li ul 
    {
        display: none;
        position: absolute;
        top: 1em;
        left: 0;
    }    
    
    
    /* Bei Hovern anzeigen */
    li:hover ul 
    { 
        
        display: block; 
    }
</style>
</head>

<body>    
<ul>
    <li>
      Menue1
        <ul>
            <li>
                <a href="">Gruen</a>
            </li>
            <li>
                <a href="">Gelb</a>
            </li>
            <li>
                <a href="">Rot</a>
            </li>
            <li>
                <a href="">Schwarz</a>
            </li>
        </ul>
    </li>
    <li>
      Menue2       
    </li>
</ul>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben