# Fragen zur Homepage



## franzribery (23. November 2010)

Hallo Allerseits,

bin neu hier in dem Forum und habe schon öfters mitgelesen aber heute brauche ich eure Hilfe. Ich bin Neuling auf dem Gebiet der Webgestaltung und komme eigentlich aus dem Print Bereich. Bei meinem jetzigen Arbeitgeber bin ich neuerdings für die Pflege der Homepage verantwortlich, die Auswahlseite soll überarbeitet werden. Html lerne ich selbstständig mit selfhtml und Büchern.
Ich wäre dankbar wenn Ihr mir bezüglich der Seite helfen könntet, denn aller Anfang ist schwer. Gewünscht war ein FlyOut Menü auf der Homepage, laufen sollte es ohne Problem auf den gängigsten Browsern. Aber nun zu meinen Fragen.
1.) Kann ich die Farbe orange ändern, wenn ich mit der Maus auf Produkte gehe?
2.) Das Menü ist nicht oben links in der Ecke, was mache ich da falsch?
3.) Kann ich die Hauptbuttons von der Breite ändern und die Sub bei dieser Größe belassen?
4.) Wie bekomme ich es hin, dass die Farbe bis unten in diesem leichten blau ist?
5.) Wie läuft das ganze mit Session-ID, wenn die Kunden auf den Unterseiten surfen und man eine feste Nummer behält?
6.) Wie kann ich am besten die Größe der Seite bestimmen?
Viele Fragen, aber vielleicht hilft ja jemand, danke erstmal.
Gruß franzribery
	
	
	



```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> xxxxxxxxxxxxxxxxxxxxxxxx</title>
<meta name="Author" content="" />
<meta name="Keywords" content= "" />
<meta name="Description" content="" />
<meta name="verify-v1" content="" />
<meta http-equiv="imagetoolbar" content="no" />


<style type="text/css">
</style>
<link rel="stylesheet" media="all" type="text/css" href="../css/default.css" />

<style type="text/css">

 a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}

#positioner {position:relative; left:-5px; width:160px; height:155px; padding-left:0px; float:left; background:#fff;}
.holder {position:absolute; width:150px; height:25px;}
dl.menu {width:300px; float:left; margin:-32000px 0 0 -9999px;}
.p1 {top:0;}
.p2 {top:26px;}
.p3 {top:52px;}
.p4 {top:78px;}
.p5 {top:104px;}
.p6 {top:130px;}
.p7 {top:156px;}
.p8 {top:182px;}
.p9 {top:208px;}
.p10 {top:234px;}
dl.menu a {display:block; height:25px; font:normal 11px/25px verdana, sans-serif; text-decoration:none; text-indent:10px; border-bottom:1px solid #fff; border-left:1px solid #fff;}

 dl.menu dt {float:left; padding:0; position:relative; left:9999px; z-index:50; margin:32000px 0 0 0;}
 dl.menu dt a {width:149px; background:#99ccff; float:left; color:#000;}
 dl.menu dt a.sub {background:#99ccff url(dl-flyout/arrow.gif) no-repeat 140px center; color:#000000;}
 dl.menu dt a:hover,
 dl.menu dt a:focus,
 dl.menu dt a:active
 {margin-right:1px; text-decoration:none; background-color:#c60; color:#fff;}

 dl.menu dd {float:left; padding:0; margin:0;height:25px;}
 dl.menu dd a {position:relative; background:#99ccff; width:149px; color:#000; left:10149px; top:-26px; z-index:60;}
 dl.menu dd a:hover,
 dl.menu dd a:focus,
 dl.menu dd a:active
 {margin-right:1px; background:#c60; color:#fff;}

</style>

</head>

</script>
</div>




<div id="info">

<div id="positioner">
   <div class="holder p1">
      <dl class="menu">
         <dt><a href="#url">Home</a></dt>
      </dl>
   </div>
   <div class="holder p2">
      <dl class="menu">

         <dt><a class="sub" href="#url">Produkte</a></dt>
         <dd>
            <a href="#url">Anschlagmittel</a>
            <a href="#url">Anschlagmittelzubeh&ouml;r</a>
            <a href="#url">Drucklufthebezeuge</a>
            <a href="#url">Elektrohebezeuge</a>
            <a href="#url">Gewichtsausgleicher</a>
            <a href="#url">Hanhebezeuge</a>
            <a href="#url">Handstapler</a>
            <a href="#url">Hubtische</a>
            <a href="#url">Hubwagen</a>
            <a href="#url">Hydraulik</a>
            <a href="#url">Krane</a>
            <a href="#url">Kranwaagen</a>
            <a href="#url">Ladegabeln</a>
            <a href="#url">Ladungssicherung</a>
            <a href="#url">Lastaufnahmemittel</a>
            <a href="#url">Mechanische Heber</a>
            <a href="#url">Personenschutz</a>
            <a href="#url">Seilwinden</a>
            <a href="#url">Seilz&uuml;ge</a>
            <a href="#url">Transportger&auml;te</a>
            <a href="#url">Zugkraftmessger&auml;te</a>
         </dd>
      </dl>
   </div>
   <div class="holder p3">
      <dl class="menu">
         
         <dt><a href="#url">Angebote</a></dt>
         </dl>
   </div>
   <div class="holder p4">
      <dl class="menu">
         
         <dt><a href="#url">Suche</a></dt>
         </dl>
   </div>
   <div class="holder p5">
      <dl class="menu">
         
         <dt><a href="#url">Beratung</a></dt>
         </dl>
   </div>
   <div class="holder p6">
      <dl class="menu">
         
         <dt><a href="#url">Infothek</a></dt>
         </dl>
   </div>
   <div class="holder p7">
      <dl class="menu">
         
         <dt><a href="#url">&Uuml;ber uns</a></dt>
         </dl>
   </div>
   <div class="holder p8">
      <dl class="menu">
         
         <dt><a href="#url">Impressum</a></dt>
         </dl>
   </div>
   <div class="holder p9">
         
         <dl class="menu">
         <dt><a href="#url">Bestellen</a></dt>
      </dl>
   </div>
   <div class="holder p10">
         
         <dl class="menu">
         <dt><a href="#url">Warenkorb</a></dt>
      </dl>
   
   
   </div>




</body>

</html>
```


----------



## mgraf (24. November 2010)

Hallo,
1: Ja

```
dl.menu dt a:hover
```
ist dein Freund

2: In den Standardeinstellungen besitzt der <body> Teil einer Webseite auch noch ein "padding"

3: Ja

```
dl.menu dt a
```
sollte dir weiterhelfen

4: In dem du ein <div> einfügst das als Hintergrund fungiert und eine Höhe von eben 100% hat. Anleitungen für ein richtiges 100% div in der Höhe findes du hier.

5: Funktioniert nur in Verbindung mit zB PHP (hier) oder eingeschränkt auch mit Javascript

6: Beispiel aus SELFHTML, hier. Zuverlässiger geht es, wenn man nicht das Fenster an sich bestimmt, sondern einen den Inhalt einer Seite umfassendes <div>. Also dem <div> ein "width" und ein "height" Attribut gibt...


lg
michi


----------



## franzribery (24. November 2010)

Danke für die rasche Antwort und den Links. Bräuchte aber nochmals Hilfe bezüglich der Größe der Auswahlbuttons. Kann ich die Breite unterschiedlich ändern, also Auswahlbuttons andere Breite wie das FlyOut Menü? 
Gruß Franz


----------



## SpiceLab (24. November 2010)

Meinst du sowas: http://www.cssplay.co.uk/menus/variable_dl.html?


----------



## franzribery (24. November 2010)

Da habe ich mich wohl falsch ausgedrückt, bin mit dem jetzigen Code eigentlich zufrieden. Ich wollte wissen, wo ich in dem oben genannten Post, die Menü Buttons vor der Breit her kleiner oder größer machen kann. Ob es generell möglich ist, mit einem bestimmten Befehl und in welcher Zeile muß ich suchen.
gruß Franz


----------



## SpiceLab (24. November 2010)

Sorry, ich hab mir deinen Quellcode nicht näher im Detail angeschaut, bin daher fälschlicherweise von einer anderen Menüausrichtung ausgegangen, und wollte mich lediglich ob deines Vorhabens erkundigen, und dir hier keineswegs ein anderes Menüsystem aufschwätzen.

Die Gesamtbreite (Summe aller Menüebenen) ist in dieser Zeile deklariert:

```
dl.menu {width:300px; float:left; margin:-32000px 0 0 -9999px;}
```
Die Breite der Hauptmenüpunkte in dieser Zeile:

```
dl.menu dt a {width:149px; background:#99ccff; float:left; color:#000;}
```
Und die daraus resultierende Positionsangabe *left* der Submenüs in dieser Zeile:

```
dl.menu dd a {position:relative; background:#99ccff; width:149px; color:#000; left:10149px; top:-26px; z-index:60;}
```

Beispielsweise bei einer Breite von 99px für die Hauptmenüpunkte würde das CSS für diese drei Zeilen dann folgendermaßen lauten:

```
dl.menu {width:250px; float:left; margin:-32000px 0 0 -9999px;}
...
dl.menu dt a {width:99px; background:#99ccff; float:left; color:#000;}
...
dl.menu dd a {position:relative; background:#99ccff; width:149px; color:#000; left:10099px; top:-26px; z-index:60;}
```


----------



## franzribery (24. November 2010)

Wahnsinn, vielen lieben Dank für deine schnelle Hilfe und die Super Erklärung. Jetzt müßte ich es hinbekommen so wie ich es haben will. 
Dankeschön und gruß 
Franz


----------



## SpiceLab (24. November 2010)

Immer wieder gerne, und nochmals Entschuldigung für das zunächst aufgekommene Mißverständnis meinerseits 

//edit: Aber gilt nicht auch michi aka mgraf ein Dank?


----------



## franzribery (25. November 2010)

Hallo,

habe gestern noch ein bisschen rumprobiert und noch einen neuen Code mit Transparenz des FlyOut Menüs gefunden. Gefällt mir auch ziemlich gut. Jedoch ist hier alles ein bisschen anders aufgebaut wie bei dem oben geposteten Code, könntet Ihr mir bitte hier nochmal helfen wo ich die Breite Auswahlbuttons ändern muß. Bekomme es leider nicht hin.


> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
> <head>
> 
> ...



Also die Hauptmenüs bekomme ich auf die gewünschte Breite, das müßte dieser Punkt sein hier:
/*set the link width here*/
.nav .drop,
.nav a {width:90px;}

Aber das FlyOut Menü hat dann die gleiche Größe wie die Auswahlbuttons und genau die hätte ich gern größer, weil die meine Schrift dann über die Buttons rausläuft.

danke und gruß 
Franz


----------



## SpiceLab (25. November 2010)

Naja, für das Submenü, respektive die darin enthaltenden Links, müsstest du eine gesonderte Regelung festlegen, siehe als Vorlage das Beispiel http://www.cssplay.co.uk/menus/flyoutt.html, mit unterschiedlichen Menüebenenbreiten.


----------



## franzribery (25. November 2010)

Helfe mir bitte kurz, hatte das Menü schon probiert habs nicht hinbekommen das es im IE und Firefox richtig läuft. Kann ich die Subs diesmal nicht mit einer festen Größe festlegen. Problem ist nämlich, stelle ich die Hauptbuttons auf 90 Px, gehen die Subs mit und dann läuft die Schrift vereinzelt drüber hinaus.
gruß franz


----------



## SpiceLab (25. November 2010)

Das Problem hab ich registriert, und resultiert aus dieser Regel, die für alle Links der Haupt- u. Untermenüebene gleichermaßen gilt:

```
.nav a {width:150px;}
```

Ergo muß für das Submenü eine eigenständige Regel deklariert werden.

Als Vorlage habe ich dir ein Beispiel empfohlen, das ebenfalls unterschiedliche Breiten besitzt.


----------



## franzribery (25. November 2010)

Ich müßte mir quasi den Quellcode von deiner Verlinkung anschauen und genauso editieren, sehe ich das richtig ?
Mal schauen ob ich das hinbekomme, trotzdem vielen Dank erstmal.
gruß Franz

Ich bekomme es leider nicht hin mit der eigenständigen Regel, vielleicht hat jemand noch einen anderen Lösungsansatz für mich, wäre wirklich dankbar. Meine Kenntnisse reichen leider für solche tiefgründigen Dinge noch nicht aus. Trotzdem vielen Dank erstmal.

gruß Franz


----------



## SpiceLab (25. November 2010)

Wenn du nach nicht mal einer knappen halben Stunde aufgibst, bediene dich einfach des empfohlenen Menüs, und ändere sein äußeres Erscheinungsbild nach deinen Vorstellungen.


----------



## franzribery (25. November 2010)

Hast Du falsch verstanden, ich sitze hier immer noch auf der Arbeit und versuche es hinzubekommen. Mit dem ersten Code und deinen Anweisungen hat ja alles super geklappt, nur bei dem 2ten Code find ichs unheimlich schwierig so hinzubekommen, das die Sub-Menüs separat in der Größe geändert werden können.
gruß franz


----------



## SpiceLab (25. November 2010)

Und was hindert dich daran, nach deinem gestrigen Menüwechsel, nun erneut das Menü auszutauschen, das deinen Wünschen entspricht?

Oder dürfen wir dir täglich erneut beratend zur Seite stehen, deine heruntergeladene Menüvorlage zu editieren?


----------



## franzribery (25. November 2010)

Ist ok, ich frage hier nix mehr.


----------

