menü

Ich schaffe es nicht . deshalb bitte ich jemanden mir zu helfen und die navigation in mein design einzubauen.
die navi soll so änlich wie hier aussehen -> http://aktuell.de.selfhtml.org/artikel/css/mouseover/beispiel6.htm nur ohne die 4er kästchen vor den wörtern und der Hintergrund soll (wenn man noch nicht mit der drüber ist) nicht grau sondern weis sein. Leider will ich nicht den quellcode hier veröffentlichen (es soll ja nicht jeder wissen was ich hier mache). Aus diesem grund suche ich eine nette person, die 2 min. zeit hat mir zu helfen -> lavendel06@yahoo.de .
danke im vorraus

michba

Was ist das Problem?

Die "4er Kästchen" sind einfach nur Bilder, und wenn du den Hintergrund weiß haben willst, musst du das einfach bei background-color eingeben.

Lass also einfach das background-image:url(blabla) weg, und änder das background-color:#fff auf background-color:white

-predator-: bitte ghelf mir ... ich bin verzweifelt . du scheinst doch ahnung davon zuhaben .... *schluchts*. kannst du dich hier melden -> lavendel06@yahoo.de oder kannst du mir deine e-mail geben?

michba

Was willst du denn noch???

Ich hab dir jetzt alles gesagt, was du dafür brauchst.
Mehr kann ich dir auch nicht helfen...

ja mit dem hintergrund habe ichs jetzt, nur wenn ich den code in mein fertiges html code einfüge, stehen da nich die bottums sondern nur link 1 link2 ....

Hier der auszugaus meinem quellcode ...........

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>my page</title>
<style type="text/css">
**
</style>**
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(file:///home/werner/Desktop/designs/bilder/hintergrund.gif);"
alink="#000099" link="#000099" vlink="#990099">
<table style="width: 973px; height: 807px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td height="21" width="64"> </td>
<td width="129"> </td>
<td width="9"> </td>
<td width="555"> </td>
</tr>
<tr>
<td height="40"> </td>
<td style="vertical-align: top; background-color: rgb(0, 0, 0);"
rowspan="3"> 

<div style="text-align: center;"><big><big><big><big><big>Gästebuch 
 
<big><big> 
Ihr Name: 
 
 
</big></big><big><big><big><dd><input
name="Versender" type="text"><big><big></big></big></dd>
 
</big></big> 
 
 
 
 
Ihre
Nachricht: 
 
 
<dd><textarea
name="Bemerkungen" rows="3" cols="20"></textarea></dd>

 
 
 
 
 
 
<input
value="Senden" type="submit"> 

</big>
 
 

</big></big></big></big></big></div>
 
<big><big> 
</big></big>
<div style="text-align: center;"><big><big></big></big> 
<big><big></big></big></div>
<big><big>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</big></big></td>
<td> </td>
<td style="vertical-align: bottom;"><big><big><big><big></big>M3eine Homepage</big></big></big> 
</td>
</tr>
<tr>
<td height="110">
 
</td>
<td> </td>
<td bgcolor="#cccccc" valign="top"><img alt="" src="derbanner.jpg"
style="width: 672px; height: 216px;"> 
</td>
</tr>
<tr>
<td height="382"> </td>
<td> </td>
<td style="vertical-align: top; background-color: rgb(0, 0, 0);">
<a href="#">Button1</a>
<a href="#">Button2</a>
<a href="#">Button3</a>
<a href="#">Button4</a>
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
__________________ 
 
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</body>
</html>

die navi habe ich fett gemacht

michba

Whoooaa, ich würd den Code nochmal überarbeiten

Aber egal, du musst bei a:hover auch das display:block; weg machen...

[...]
a:hover {
display:block; /* <-- das muss weg */
color:#fff;
background-color:#000;
background-image:url(hinter_on.gif);
}
[...]

ich werdes nochmal überarbeiten. jetzt nur noch 2 sachen :
1. die schrieft ist jetzt immer blau unterstrichen!
2. Wie kann ich die bottums dichter aneinnander bringen?

michba

Also bei mir wird weder im Firefox, noch im Opera, noch im IE die Schrift blau unterstrichen...

Um die buttons näher aneinander zu bringen, musst du den Außenabstand (margin) verringern. Außerdem kannst du noch die Rahmendicke (bei border) verringern, da man den bei dir sowieso nicht sieht.

Ansonsten würde ich dir raten, erstmal ein Tutorial für HTML/CSS durchzulesen, denn so wie ich das sehe, hast du keinen blassen Schimmer davon.

Mögliche Tutorials wären:
http://de.selfhtml.org/
http://www.html-world.de/program/html_ov.php

von css hab ich auch keine ahung ... sagte ich doch !!!!!!!!1

tut mir leid habe mich falsch ausgedrückt ... wie kann ich die bottums mehr nach oben (zum banner hin ) schieben?

michba

Dann brings dir bei, so schwer ist das nicht.

Du kannst nicht erwarten, dass dir hier jemand deine ganze Seite aufbaut, nur weil du kein CSS kannst, du es aber benutzen willst

Dann musst du es dir wie schon gesagt beibringen...

Wo ich recht habe hat er recht.
Danke

Ich habe nur nich eine frage:
Wie kann ich es machen, das der hintergrund erst schwarz ist und die schriet weiß und wenn man mit der maus drübergeht genau andersrum (hintergrund weiß, schrieft schwarz) ??? Ich finde die atribute dafür nicht
sehr vielen dank im vorraus

<html>
<head>
<title>Geteilte Navigationsleisten</title>
<style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
}

* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}

ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #000000;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: blue;
}
</style>
</head>
<body>
<div id="Rahmen">
<br>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2</a><a href="#Beispiel">Seite 2b</a><br>
<br>
<br>
<br>
<br>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

michba

Wenn ich dir jetzt alles vormache, nützt dir das gar nichts...

Hier die Attribute:

Textfarbe - color
Hintergrundfarbe - background-color

So, das sollte reichen!

predator: sehr vielen dank
Nur ein ( 2 um ehrlich zu sein) hab ich noch.
1. da ist oben links immernoch so ein weiser schlitz ... was kann ich dagegen tun? Und wie krige iches weg, dass die links nicht mehr unterstrichen sind?
2. Was für tricks gibt es um sein code ubersichtlicher zu machen?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>my page</title>
  <style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
}

* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}

ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #ffffff; background-color: #000000;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fr IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: #000000; background-color: #ffffff;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: blue;
}
  </style>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(file:///home/werner/Desktop/designs/bilder/hintergrund.gif);"
 alink="#ffffff" link="#ffffff" vlink="#ffffff">
<table style="width: 973px; height: 807px;" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td height="21" width="64">&nbsp;</td>
      <td width="129">&nbsp;</td>
      <td width="9">&nbsp;</td>
      <td width="555">&nbsp;</td>
    </tr>
    <tr>
      <td height="40">&nbsp;</td>
      <td style="vertical-align: top; background-color: rgb(0, 0, 0);"
 rowspan="3"><small><small><br>
      </small></small>
      <div style="text-align: center;"><small
 style="text-decoration: underline; color: rgb(255, 255, 255);"><small><big><big><big><big><big>G&auml;stebuch<small><small><small><small><small><small><br>
      <br>
      <big><big><br>
Ihr Name:<small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><br>
      <br>
      <br>
      </small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></big></big></small></small></small></small></small></small><small><small><small><small><small><big><big><big><small><small><small><small><small><small><dd><input
 name="Versender" type="text"><small><small><big><big><span
 style="color: rgb(255, 255, 255);"></span></big></big></small></small></dd>
      <br>
      </small></small></small></small></small></small></big></big><small><small><small><small><small><small><small><small><small><small><br>
      <br>
      <br>
      <br>
      <br>
      </small></small></small></small></small></small></small></small></small></small>Ihre
Nachricht:<small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><br>
      <br>
      <br>
      </small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small><dd><textarea
 name="Bemerkungen" rows="3" cols="20"></textarea></dd>
      <small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      </small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small><input
 value="Senden" type="submit"><br>
      <small><small><small><small><small><small><small><small><small><small><small><small><small>
      </small></small></small></small></small></small></small></small></small></small></small></small></small></big>
      <small><small><small><small><br>
      <span style="color: rgb(102, 102, 102);">________________________________________________________________</span><br
 style="color: rgb(192, 192, 192);">
      </small></small></small></small></small></small></small></small></small>
      </big></big></big></big></big></small></small></div>
      <span style="color: rgb(192, 192, 192);">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <small><small><big><big><span style="color: rgb(255, 255, 255);"><br>
      </span></big></big></small></small>
      <div style="text-align: center;"><small><small><big><big><span
 style="color: rgb(255, 255, 255);"><span
 style="color: rgb(255, 255, 255);"></span></span></big></big></small></small><br>
      <small><small><big><big><span style="color: rgb(255, 255, 255);"></span></big></big></small></small></div>
      <small><small><big><big><span style="color: rgb(255, 255, 255);">
      <br>
      <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      </span></big></big></small></small><small><small><small><small><small><small><small><small><small><small><small><small><span
 style="color: rgb(255, 255, 255);"></span></small></small></small></small></small></small></small></small></small></small></small></small></td>
      <td>&nbsp;</td>
      <td style="vertical-align: bottom;"><big><big><big><big><span
 style="color: rgb(255, 255, 255);"></span></big><span
 style="color: rgb(255, 255, 255);">M3eine Homepage</span></big></big></big><br>
      </td>
    </tr>
    <tr>
      <td height="110">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <br>
&nbsp; </td>
      <td>&nbsp;</td>
      <td bgcolor="#cccccc" valign="top"><img alt="" src="derbanner.jpg"
 style="width: 755px; height: 233px;"><br>
      </td>
    </tr>
    <tr>
      <td height="382"><br>
      </td>
      <td> <br>
      </td>
      <td style="vertical-align: top; background-color: rgb(0, 0, 0);">
      <span style="text-decoration: underline;"><span
 style="font-weight: bold;">
      <ul id="Navigation">
        <li><a href="#Beispiel">Seite 2</a>
          <ul>
            <li><a href="#Beispiel">Seite 2</a><a href="#Beispiel">Seite
2b</a><br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      </span></span><span style="color: rgb(255, 255, 255);"></span> <span
 style="color: rgb(255, 255, 255);"><span
 style="text-decoration: underline;">____________________________________________________________________________________<small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><br>
      <br>
      <br>
      </small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></span></span>
      <div style="text-align: center;"><span
 style="color: rgb(255, 255, 255);">(c) Werner Mandla, 2005<small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><small><br>
      <br>
      <br>
      </small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></small></span></div>
      </td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>
</body>
</html>

michba

Naja, das sind ja eigentlich 3

1.1 ("Schlitz")
Das ist der Rahmen, der nur links und oben ist
Mach einfach das hier weg

border-left-color: white; border-top-color: white;

und

border-left-color: black; border-top-color: black;

1.2 (Links)
Zu der Formatierung von Links siehe hier (Tipp: text-decoration:none; bedeutet "keine Unterstreichung")

Das Layout komplett mit CSS erstellen und nicht mit z.B. zehnfacher -Verschachtelung
Und dafür musst du halt erstmal CSS lernen...
http://www.html-world.de/program/css_ov.php
http://de.selfhtml.org/css/index.htm