Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Brauch hilfe Drop Down oder Pull Down ?

Antwort erstellen

Brauch hilfe Drop Down oder Pull Down ?

Beitragvon nice-two » 10.03.2010, 15:16

Hallo leute, ich bin neu im Forum und muss zugeben ich habe die suche jetzt mal nicht benutzt :( SORRY dafür
bin 35j komme ausm Hohen Norden 10km von der Nordsee PLZ 25746
"bin der ober NOOP :( "

und ich habe ein echt großes Problem,
ich bin grad dabei für meine Frau eine HP zu bastel, ich komme ja soweit zurecht
Die grafik steht und ich finde das schaut schon ganz hut aus :)

Zu meiner frage:
vorab der link zur seite index1.jpg
das ist die schaltfläche "Pferd" da meine frau nicht nur ein Pferd hat, möchte sie gerne so ein "PullDown menu" haben, so wenn man über "Pferd" mit der Maus fährt dann eine liste der anderen Pferde kommt ...
dann soll aber die bestehende grafik erhalten bleiben, die unter menus können dann auch text sein das ist letzt entlich egal...

ich hoffe, ich konnte meine frage ganz gut stellen und bekomme recht schell hilfe von euch :)

Danke in voraus Lars

PS. ich weis nicht ob ich hier im forum richtig bin aber ein versuch ist er wert
nice-two
neu hier
 
Beiträge: 6
Registriert: 10.03.2010, 15:12
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon sejuma » 10.03.2010, 17:44

Wenn du diese Navi nachbastelst, sollte es klappen: http://www.ohne-css.gehts-gar.net/0066.php
Anstelle der verwendeten Hintergrundfarben kannst du deine Hintergrundgrafiken verwenden.
Ansonsten Größe, Formatierung etc. individuell anpassen.
Viel Erfolg!
Bild
sejuma
Vielposter
 
Beiträge: 787
Registriert: 15.07.2009, 17:46
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon nice-two » 10.03.2010, 22:08

@sejuma
DANKE ich habe es soweit hin bekommen
nun habe ich ein problem :(
wie bekomme ich jetzt den Pferd Button oben links in die Navi leiste ingebaut ?
kannst du mir evt weiter helfen?
habe es schon paar mal prbiert aber das geht net da verschiebt sich immer meine grafik

der link noch mal http://www.shicca.de/1/index1.html
danke im voraus

nICE
nice-two
neu hier
 
Beiträge: 6
Registriert: 10.03.2010, 15:12
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon sejuma » 11.03.2010, 07:06

Anhand einer Grafik kann ich dir nicht weiterhelfen.
Poste bitte einen Link zur Seite, damit man alles im Zusammenhang sieht.

Generell ist es wohl am einfachsten, wenn wenn du eine sich kachelnde Hintergrundgrafik verwendest und die Linkbeschriftung per HTML-Quelltext vornimmst.
Ansonsten musst du je Link mit eigenen Klassen und eigenen Hintergrundgrafiken arbeiten.
Siehe
http://www.ohne-css.gehts-gar.net/0022.php
Bild
sejuma
Vielposter
 
Beiträge: 787
Registriert: 15.07.2009, 17:46
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon nice-two » 11.03.2010, 10:17

@ sejuma
vorweg danke für deine hilfe :)
ich habe mir die sachen auf der Seite die du mir gegeben hast angeschaut, stosse voll an meine grenzen ;(
habe es jetzt 2h probiert und bin zu keinen vernünftigen ergebniss gekommen
die Navi leiste verschibt sich ständig und was weis ich ohh man...

muss dazu sagen,das ich das layout mit FW "cs3" gemacht habe,und daraus eine HTML seite gezogen, und bearbeite es mit DW "cs3"

ich poste mal den Quellcode vieleicht kann mir ja jemand ein weg zeigen wie ich das pulldown menu in die navi leiste bekomme ;)

DANKE im voraus
ja ich weis das schaut sehr wild aus aber das kommt wohl von FW CS3
gruß
Lars
hier noch mal der link zur seite http://www.shicca.de/1/index1.html

Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Shicca Horse Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Tue Mar 09 20:35:44 GMT+0100 2010-->
<style type="text/css">
<!--
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Menüleiste--*/
#menu {
   width: 100%;
   padding: 0 20px;
   background: #000000;
   font-family: Verdana;
   font-size: 11px;
   line-height: 1.5;
   float: none;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 100px;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
   font-size: 1em;
   text-align: center;
   color: #000;
   border: 0px solid #003366;   
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
   text-decoration: none;
   display: block;
   border: 0px solid #ccc;
   text-align: center;
   color: #ffffff;

}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
   color: #CCCCCC;
   background: #000000;
}
body {
   background-color: #000000;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
   position: absolute;
   z-index: 2;
   display: none;
   visibility: visible;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/

* html #menu ul li {
float: left;
width: 100%;
}

/*--nur für IE 7 erkennbar--*/

*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}

-->
</style>
</head>
<body>
<div id="menu"><!-- öffnet die Navigationsleiste-->

   <ul><!-- öffnet den ersten Themenblock -->

      <li><!-- öffnet die Listeneinträge von Thema 1 -->

        <h3><img src="bilder/index1_r2_c2.jpg"></h3>

            <ul><!-- öffnet die Klappnavi von Thema 1 -->

               <li><a href="#">Indy</a></li>

               <li><a href="#">Lady</a></li>
        </ul>
        <!-- schließt die Klappnavi von Thema 1 -->
     </li>
      <!-- schließt die Listeneinträge von Thema 1 -->

   </ul><!--schließt den ersten Themenblock-->

</div><!-- schließt die Menüleiste #menu -->

<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="Unbenannt-1_1.png" fwpage="Seite 1" fwbase="index1.jpg" fwstyle="Dreamweaver" fwdocid = "1160083229" fwnested="0" -->
  <tr>
   <td><img src="bilder/spacer.gif" width="33" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="110" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="9" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="114" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="115" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="5" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="118" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="5" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="116" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="6" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="126" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="35" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr>
   <td colspan="13"><img name="index1_r1_c1" src="bilder/index1_r1_c1.jpg" width="800" height="136" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="136" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="4"><img name="index1_r2_c1" src="bilder/index1_r2_c1.jpg" width="33" height="864" border="0" alt=""></td>
   <td><a href="#test"><img src="bilder/index1_r2_c2.jpg" alt="" name="menu" width="110" height="17" border="0" usemap="#pfedre" id="menu2"></a></td>
   <td rowspan="2"><img name="index1_r2_c3" src="bilder/index1_r2_c3.jpg" width="9" height="39" border="0" alt=""></td>
   <td><img src="bilder/index1_r2_c4.jpg" alt="" name="index1_r2_c4" width="114" height="17" border="0" usemap="#übermich"></td>
   <td rowspan="2"><img name="index1_r2_c5" src="bilder/index1_r2_c5.jpg" width="8" height="39" border="0" alt=""></td>
   <td><img src="bilder/index1_r2_c6.jpg" alt="" name="index1_r2_c6" width="115" height="17" border="0" usemap="#galerie"></td>
   <td rowspan="2"><img name="index1_r2_c7" src="bilder/index1_r2_c7.jpg" width="5" height="39" border="0" alt=""></td>
   <td><img src="bilder/index1_r2_c8.jpg" alt="" name="index1_r2_c8" width="118" height="17" border="0" usemap="#kontakt"></td>
   <td rowspan="2"><img name="index1_r2_c9" src="bilder/index1_r2_c9.jpg" width="5" height="39" border="0" alt=""></td>
   <td><img src="bilder/index1_r2_c10.jpg" alt="" name="index1_r2_c10" width="116" height="17" border="0" usemap="#gbuch"></td>
   <td rowspan="2"><img name="index1_r2_c11" src="bilder/index1_r2_c11.jpg" width="6" height="39" border="0" alt=""></td>
   <td><img name="index1_r2_c12" src="bilder/index1_r2_c12.jpg" width="126" height="17" border="0" alt=""></td>
   <td rowspan="4"><img name="index1_r2_c13" src="bilder/index1_r2_c13.jpg" width="35" height="864" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="17" border="0" alt=""></td>
  </tr>
  <tr>
   <td><img name="index1_r3_c2" src="bilder/index1_r3_c2.jpg" width="110" height="22" border="0" alt=""></td>
   <td><img name="index1_r3_c4" src="bilder/index1_r3_c4.jpg" width="114" height="22" border="0" alt=""></td>
   <td><img name="index1_r3_c6" src="bilder/index1_r3_c6.jpg" width="115" height="22" border="0" alt=""></td>
   <td><img name="index1_r3_c8" src="bilder/index1_r3_c8.jpg" width="118" height="22" border="0" alt=""></td>
   <td><img name="index1_r3_c10" src="bilder/index1_r3_c10.jpg" width="116" height="22" border="0" alt=""></td>
   <td><img name="index1_r3_c12" src="bilder/index1_r3_c12.jpg" width="126" height="22" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="22" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="11" align="center">&nbsp; </td>
   <td><img src="bilder/spacer.gif" width="1" height="521" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="11"><img name="index1_r5_c2" src="bilder/index1_r5_c2.jpg" width="732" height="304" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="304" border="0" alt=""></td>
  </tr>
</table>
</body>
</html>
nice-two
neu hier
 
Beiträge: 6
Registriert: 10.03.2010, 15:12
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon sejuma » 11.03.2010, 12:19

Aus meiner Sicht solltest du den ganzen Tabellenkram mit den Spacer-Grafiken rausschmeißen.
Tabellen dienen nicht dem Layout, sondern sind für strukturierte Darstellungen mit tabellarischen Inhalten da.

Dein Hauptproblem liegt wohl darin, dass basierend auf einer Grafik eine Website basteln willst.
Besser ist es, erst den Inhalt einer Seite per HTML zu coden und danach zu formatieren.

Somit wäre ein kompletter Neuanfang besser. Und noch besser wäre es, wenn du dir vorher entsprechende HTML- und CSS-Kenntnisse aneignest.

Du kannst mal versuchen, hier eine Hintergrundgrafik zuzuweisen:
Code: Alles auswählen
#menu a {
   text-decoration: none;
   display: block;
   border: 0px solid #ccc;
   text-align: center;
   color: #ffffff;
}
Bild
sejuma
Vielposter
 
Beiträge: 787
Registriert: 15.07.2009, 17:46
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon nice-two » 12.03.2010, 13:48

Danke noch mal an sejuma ...
ich habe es hin bekommen

so schauts jetz aus :)

Svenjas Homepage

Gruß
nICE

PS: ich kann jetzt CSS naja ein wenig ;) DANKE noch mal
nice-two
neu hier
 
Beiträge: 6
Registriert: 10.03.2010, 15:12
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon nice-two » 12.03.2010, 21:04

....hallo ich noch mal :)
also ich bin ja so weit zufrieden mit dem was ich mit hilfe von sejuma geschaft habe.
aber eins ist mir aufgefallen... wenn ich über den link "Pferde" gehe wird der maus zeiger zum curser und nicht zum Finger :(
und der abstand vom pulldown menu "das was runterkommt" solle beschem mehr sein
wenn ich aber

line-height: 1.3;
im menu ändere kann ich die links nicht mehr mit der maus erreichen
was muss ändern das es geht :)
Danke in voraus

Lars hier noch mal der link http://www.shicca.de/1/index1_2.html
nice-two
neu hier
 
Beiträge: 6
Registriert: 10.03.2010, 15:12
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon sejuma » 13.03.2010, 11:50

Was den Cursor betrifft:
Füge bei #menu li noch
Code: Alles auswählen
cursor: pointer;

ein.

Hinsichtlich der Höhe kannst du an gleicher _Stelle auch einen height-Wert eingeben.
Allerdings sollte der nicht größer als die Hintergrundgrafik sein, da sich diese sonst kachelt.
Bild
sejuma
Vielposter
 
Beiträge: 787
Registriert: 15.07.2009, 17:46
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon nice-two » 13.03.2010, 19:40

@sejuma danke hat geklappt :)
nun habe ich noch zwei fragen
wenn sich das pulldown aufschiebt mit BG grafik die ja nur so abgehacht ist kan man auch "licke BG grafik und rechte BG grafik" einbauen? so was rundes, so als wenn es ausschaut das es ein Button ist ? hmm

zum andern möchte ich so eine abstamungs seite machen
habe auch schon mit DIV boxen rum probiert aber ich bekomme die nicht in richtiger position :( voll doof
habe da mal ein bild wie es aus sehen könnte "im bild sind nun keine boxen sollen aber am ende boxen werden"
ich hoffe ich konnte meine fragen gut stellen

http://img1.imagebanana.com/img/4x7ssa1y/Stammbaum.jpg


Gruß Lars
nice-two
neu hier
 
Beiträge: 6
Registriert: 10.03.2010, 15:12
Nach oben

Re: Brauch hilfe Drop Down oder Pull Down ?

Beitragvon sejuma » 14.03.2010, 09:44

Ja, du kannst auch verschiedene Hintergrundgrafiken verwenden. In diesem Fall verwende für die entsprechenden Links zusätzlich eine Klasse, bei der du dann die abweichende Grafik hinterlegst, siehe http://www.ohne-css.gehts-gar.net/0003.php

Für den Stammbaum bietet sich m.E. eine Tabelle unter Verwendung von rowspan an. Wie das funktioniert findest du z.B. hier erklärt: http://www.friedels-home.de/index.html?/Kurse/HTML/14tabellen_2.htm
Bild
sejuma
Vielposter
 
Beiträge: 787
Registriert: 15.07.2009, 17:46
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Brauch hilfe Drop Down oder Pull Down ?"

Zurück zu: Fragen

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de
cron