Fragen zur Homepage

franzribery

Grünschnabel
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
HTML:
<!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>
 
Hallo,
1: Ja
HTML:
dl.menu dt a:hover
ist dein Freund

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

3: Ja
HTML:
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
 
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
 
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
 
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:
CSS:
dl.menu {width:300px; float:left; margin:-32000px 0 0 -9999px;}
Die Breite der Hauptmenüpunkte in dieser Zeile:
CSS:
dl.menu dt a {width:149px; background:#99ccff; float:left; color:#000;}
Und die daraus resultierende Positionsangabe left der Submenüs in dieser Zeile:
CSS:
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:
CSS:
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;}
 
Zuletzt bearbeitet:
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
 
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?
 
Zuletzt bearbeitet:
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>

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



<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css">
</style>
<link rel="stylesheet" media="all" type="text/css" href="../css/default.css" />

<style type="text/css">


/* default styling */
.nav,
.nav ul{list-style-type:none; margin:0; padding:0;}
.nav a {text-decoration:none;}
.nav {font-family: arial, sans-serif; font-size:12px; margin:0 auto;}

/* style the links */
/* needs a background for IE6 - can be a color or a transparent gif */
.nav a {background:url(trans.gif); filter: alpha(opacity=90); opacity:0.9;}

/* style the <b> element so that is does not affect the size of the link */
.nav a b {background:#999; border:1px solid #000; border-color:#ddd #333 #333 #ddd; color:#fff; font-weight:normal; display:block; padding:5px 10px;}
.nav a:hover b {background-color:#aaa; color:#800; cursor:pointer;}
.nav .fly .main b {background:#999 url(ulmulti/arrow.gif) no-repeat 115px 9px;}
.nav .down b {background:#999 url(ulmulti/arrow.gif) no-repeat 115px 9px;}

/* HEIGHT */
.nav ul {top:-24px;} /* position the top of the flyout sub menus */

/* WIDTH change this WITH CARE to suit your requirements */

/*set the link width here*/
.nav .drop,
.nav a {width:150px;}
.nav ul li {max-width:140px;} /* fix for IE8 */

/* set the left flyout position here */
.nav ul {left:120px;}

/* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */
.nav a {margin-right:-129px;}




.nav li {float:left; clear:left;} /* fixes several IE related bugs, and allows for clearing */
.nav ul {float:left; position:relative; z-index:20;} /* necessary for float drop and to stack the <ul>s */
.nav a {position:relative; display:block;} /* needs to have a position, to be above the rest */
.nav a.main {float:left; /* necessary for float drop */
margin-top:10000px;} /* bring the top level links back into view */
.nav .drop,
.nav .fly {margin-top:-10000px;} /* hide the sub links and their containers, opera has low upper limits */
.nav ul {margin-bottom:-5000px;} /* avoid any interaction between the subs, can be any large size */

/* The bit that does ALL the work to bring the sub menus into view */
.nav a:hover,
.nav a:focus,
.nav a:active {margin-right:0; z-index:10; outline:0;}

.nav a:focus b,
.nav a:active b {background:#aaa; color:#800;} /* for tabbing */

/* OPERA fix */
.nav ul:hover {clear:left;} /* to stop intermittent sub link :hover problems */

/* IE5-7 fixes */
.nav .fly {width:100%;}
a:active {}



</style>

</head>

<body bgcolor="#aaa">



<div id="topad">
<div style="float:left; width:468px; height:-1px;">
<script type="text/javascript">
Vertical1242022 = false;
ShowAdHereBanner1242022 = true;
RepeatAll1242022 = false;
NoFollowAll1242022 = false;
BannerStyles1242022 = new Array(
"a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;}",
"img{border:0;}",
"a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;}",
"a.adhere:hover{background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1242022/1242022.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>

<div>

<img border="0" src="http://www.tutorials.de/test/Bilder/xxxxxxxxxx.gif" width="90" height="68" align="left">
<br>
<br>
</div>
<br>
<br>
<div id="backgroundHolder">


<ul class="nav">
<li class="drop"><a class="main" href="/frameset.php" target="_top"><b>Home</b></a></li>
<li class="drop"><a class="main down" href="/frameset/content/ns/produkte.shtml" target="_top"><b>Produkte</b></a>
<ul>
<li class="fly"><a class="main" href="/frameset/content/ns/t01_auswahl.shtml" target="_top"><b>Anschlagmittel</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t03_auswahl.shtml" target="_top"><b>Anschlagmittelzubeh&ouml;r</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t08_01_auswahl.shtml" target="_top"><b>Drucklufthebezeuge</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t08_auswahl.shtml" target="_top"><b>Elektrohebezeuge</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t11_auswahl.shtml" target="_top"><b>Gewichtsausgleicher</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t07_auswahl.shtml" target="_top"><b>Handhebezeuge</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t17_auswahl.shtml" target="_top"><b>Handstapler</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t12_auswahl.shtml" target="_top"><b>Hubtische</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t17_auswahl.shtml" target="_top"><b>Hubwagen</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t13_auswahl.shtml" target="_top"><b>Hydraulik</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t09_auswahl.shtml" target="_top"><b>Krane</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t06_auswahl.shtml" target="_top"><b>Kranwaagen</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t05_01_auswahl.shtml" target="_top"><b>Ladegabeln</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t02_auswahl.shtml" target="_top"><b>Ladungssicherung</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t04_auswahl.shtml" target="_top"><b>Lastaufnahmemittel</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t14_auswahl.shtml" target="_top"><b>Mechanische Heber</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t18_auswahl.shtml" target="_top"><b>Personenschutz</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t10_auswahl.shtml" target="_top"><b>Seilwinden</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t10_auswahl.shtml" target="_top"><b>Seilz&uuml;ge</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t15_auswahl.shtml" target="_top"><b>Transportger&auml;te</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t05_02_auswahl.shtml" target="_top"><b>Traversen</b></a>
<li class="fly"><a class="main" href="/frameset/content/ns/t06_auswahl.shtml" target=_top"><b>Zugkraftmessger&auml;te</b></a>
<ul>
</ul>

</ul>
<li class="drop"><a class="main" href="/frameset/content/angebote/angebote.shtml" target="_top"><b>Angebote</b></a></li>
<li class="drop"><a class="main" href="/frameset/php/search"><b>Suche</b></a></li>
<li class="drop"><a class="main" href="/frameset/content/email/beratung.shtml" target="_top"><b>Beratung</b></a></li>
<li class="drop"><a class="main" href="/frameset/content/glossary/infoindex.shtml" target="_top"><b>Infothek</b></a></li>
<li class="drop"><a class="main" href="/frameset/content/glossary/wir_002.shtml" target="_top"><b>&Uuml;ber uns</b></a></li>
<li class="drop"><a class="main" href="/frameset/content/glossary/adress.shtml" target="_top"><b>Impressum</b></a></li>
<li class="drop"><a class="main" href="/frameset/content/hilfe/hilfe_1.shtml" target="_top"><b>Bestellen</b></a></li>
<li class="drop"><a class="main" href="/frameset/php/shop/basket.php" target="_top"><b>Warenkorb</b></a></li>
</ul>
</li>



</div>


</script>
</body>
</html>

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
 
Zuletzt bearbeitet:
Zurück