finde Fehler nicht

[tiGGu]

Hallo zunächst ich habe mich lange mit dem Problem befasst und mittlerweile verstehe ich es selbst noch kaum :P
es geht um eine seite in deren mitte sich eine Fläche befindet und ausenrum buttons die jedoch hinter der fläche sind ! sobald man auf den link kommt rücken die Buttons ein stück nach außen ! (btn 1-4 linke seite) (btn 5-8 rechte Seite)

nun der Code

[Engelein]

es geht um eine seite in deren mitte sich eine Fläche befindet und ausenrum buttons die jedoch hinter der fläche sind !

Wie denn nun, außen oder dahinter?

sobald man auf den link kommt rücken die Buttons ein stück nach außen ! (btn 1-4 linke seite) (btn 5-8 rechte Seite)

Ja, was würdest du denn machen, wenn dich ständig fremde Leute mit spitzen Dingern pieksen?

PS: Ohne Code und/oder Beispielseite keine Hilfe.

[tiGGu]

es geht um eine seite in deren mitte sich eine Fläche befindet und ausenrum buttons die jedoch hinter der fläche sind !

Wie denn nun, außen oder dahinter?

sobald man auf den link kommt rücken die Buttons ein stück nach außen ! (btn 1-4 linke seite) (btn 5-8 rechte Seite)

Ja, was würdest du denn machen, wenn dich ständig fremde Leute mit spitzen Dingern pieksen?

PS: Ohne Code und/oder Beispielseite keine Hilfe.

ja schon klar ich habs verbockt und mich verklickt deshalb bitte ich jemanden diesen ost hier zu entfernen tut mir echt leid das ich das jez scho beim ersten post versaut habe :(
trozdem danke

[Malcolm Beck´s]

hi,

ja schon klar ich habs verbockt und mich verklickt deshalb bitte ich jemanden diesen ost hier zu entfernen tut mir echt leid das ich das jez scho beim ersten post versaut habe :(

Wie wäre es denn wenn du nachträglich eine Problembeschreibung lieferst?

Vielleicht kann man dir ja doch noch helfen. ;)

grüße

[tiGGu]

hi,

ja schon klar ich habs verbockt und mich verklickt deshalb bitte ich jemanden diesen ost hier zu entfernen tut mir echt leid das ich das jez scho beim ersten post versaut habe :(

Wie wäre es denn wenn du nachträglich eine Problembeschreibung lieferst?

Vielleicht kann man dir ja doch noch helfen. ;)

grüße

So Sorry wegen der Komplikationen jetzt folgt der Code und das genaue problem

  
#btn1     {position:absolute; right:79%; top:150px; z-index:0;  
  padding-left:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:0px 0px;  
                 display:block; width:131px; height:28px; border:0;}  
  
#btn1 a:hover    { display:block; width:131px; height:28px; border:0;}  
  
  
#btn2  { position:absolute; right:79%; top:180px; z-index:0;  
  padding-left:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:0px 0px;  
                 display:block; width:131px; height:28px; border:0;  
}  
#btn2 a:hover     { display:block; width:131px; height:28px; border:0;}  
  
#btn3  { position:absolute; right:79%; top:210px; z-index:0;  
  padding-left:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:0px 0px;  
                 display:block; width:131px; height:28px; border:0;}  
  
#btn3 a:hover      { display:block; width:131px; height:28px; border:0;}  
  
#btn4  { position:absolute; right:79%; top:240px; z-index:0;  
  padding-left:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:0px 0px;  
                 display:block; width:131px; height:28px; border:0;}  
  
#btn4 a:hover      { display:block; width:131px; height:28px; border:0;}  
  
  
#btn5     { position:absolute; left:79%; top:150px; z-index:0;  
                 text-align:right;  
                 padding-right:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:0px 0px;  
                 display:block; width:131px; height:28px; border:0;}  
  
#btn5 a:hover      { display:block; width:131px; height:28px; border:0;}  
  
#btn6     { position:absolute; left:79%; top:180px; z-index:0;  
                 text-align:right;  
                 padding-right:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:-0px 0px;  
                 display:block; width:131px; height:28px; border:0; }  
  
#btn6 a:hover      { display:block; width:131px; height:28px; border:0;}  
  
#btn7    { position:absolute; left:79%; top:210px; z-index:0 ;  
                 text-align:right;  
                 padding-right:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:-0px 0px;  
                 display:block; width:131px; height:28px; border:0;}  
  
#btn7 a:hover      { display:block; width:131px; height:28px; border:0;}  
  
#btn8    { position:absolute; left:79%; top:240px; z-index:0;  
                 text-align:right;  
                 padding-right:25px;  
  font-family:arial, sans-serif;  
                 background-image:url(img/btn.jpg);  
                 background-repeat:no-repeat;  
                 background-position:-0px 0px;  
                 display:block; width:131px; height:28px; border:0;}  
  
#btn8 a:hover      { display:block; width:131px; height:28px; border:0;}  

das Problem ist das die Funktion bei btn 1-4 einwandfrei funktioniert aber bei btn 5-8 geht es einfach nicht !! der link rutscht nach ausen aber das Bild (btn.jpg) rutscht nicht nach !

MfG tiGGu

[Malcolm Beck´s]

hi,

So Sorry wegen der Komplikationen jetzt folgt der Code und das genaue problem

Oi, whas haben wir denn da.

~~~CSS

/* wofür diese vielen hover, die bewirken doch gar nichts
#btn1 a:hover { display:block; width:131px; height:28px; border:0;}
*/

#btn1, #btn2, #btn3, #btn4,
#btn5, #btn6, #btn7, #btn8
{
 position:absolute;
 z-index:0;
 font-family:arial, sans-serif;
 background:url(img/btn.jpg) 0 0 no-repeat;
 display:block;
 width:131px;
 height:28px;
 border:0;
}
#btn1, #btn2, #btn3, #btn4
{
 right:79%;
 padding-left:25px;
}
#btn5, #btn6, #btn7, #btn8
{
 left:79%;
 text-align:right;
 padding-right:25px;
}

#btn1  { top:150px; }
 #btn2  { top:180px; }
 #btn3  { top:210px; }
 #btn4  { top:240px; }
 #btn5  { top:150px; }
 #btn6  { top:180px; }
 #btn7  { top:210px; }
 #btn8  { top:240px; }

  

> das Problem ist das die Funktion bei btn 1-4 einwandfrei funktioniert aber bei btn 5-8 geht es einfach nicht !! der link rutscht nach ausen aber das Bild (btn.jpg) rutscht nicht nach !  
  
Ok, probiere es mal mit der verkürzten Version, am besten wäre natürlich, wenn du das ganze Online stellst, so wie jetzt wäre es nur raten, "was es sein könnte", wie sieht denn dein HTML aus?  
  
grüße  

-- 
[I have a Dream...](http://www.myvideo.de/watch/2503116/I_have_a_dream_Will_I_AM_feat_Common)  
  
Bugs erzeugen gegenbugs.  
Wir müssen Bugs mit Bugs bekämpfen!

[tiGGu]

/* wofür diese vielen hover, die bewirken doch gar nichts
#btn1 a:hover { display:block; width:131px; height:28px; border:0;}
*/

ja eigentlich klingt es voll sinnlos aber es funktioniert komischerweise und zwar das hover bewirkt das der breich vom link erweitert wird und somit der button scheinbar nach ausen rutscht ! Ich weiß auch nich wie ich drauf gekommen bin aber iwie hat es dann geklappt und ich war happy !

Ok, probiere es mal mit der verkürzten Version, am besten wäre natürlich, wenn du das ganze Online stellst, so wie jetzt wäre es nur raten, "was es sein könnte", wie sieht denn dein HTML aus?

grüße

»»

ok es ist ein weiteres problem aufgetreten :(
ich hatte mit phase5 gearbeitet und bei dieser vorschau sieht es anders aus als im Firefox da sie von IE ist ! deshalb kann ich dir nur die seite zeigen wie es aussehen soll. die beschriftung musst du dir einfach dazu denken !

http://tiggu.ti.funpic.de/

hierbei funktionieren auch wieder nur die linken wobei ich einen anderen code hab und in dem anderen teil werden im ff die buttons nicht dargestellt wenn du eine unkomplizierte lösung für meinen wunsch hast wäre das natürlich perfekt und ich wäre sehr dankbar !

MfG

[Beat]

ok es ist ein weiteres problem aufgetreten :(
ich hatte mit phase5 gearbeitet und bei dieser vorschau sieht es anders aus als im Firefox da sie von IE ist ! deshalb kann ich dir nur die seite zeigen wie es aussehen soll. die beschriftung musst du dir einfach dazu denken !

http://tiggu.ti.funpic.de/

hierbei funktionieren auch wieder nur die linken wobei ich einen anderen code hab und in dem anderen teil werden im ff die buttons nicht dargestellt wenn du eine unkomplizierte lösung für meinen wunsch hast wäre das natürlich perfekt und ich wäre sehr dankbar !

OK.
Ich muss jetzt leider mit einer Fehleranalyse deines HTML beginnen.
Du gibst keine DOCTYPE an.

Die wohl verzeihlichste Form einer DOCTYPE wäre diese
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
welche dich in den Browser Quirks Mode bringt.
Sie ist in der erste Zeile des Quellcodes zu schreiben.

Dann hast du weiter unten gravierende Fehler.

<div id="btn1"><a href="#"><img src="img/Btn.jpg" width="131" height="28" border="0" alt=""></div></a>

oder einmal etwas strukturiert dargestellt:

<div id="btn1">
   <a href="#">
     <img src="img/Btn.jpg"
          width="131"
          height="28"
          border="0"
          alt=""
     >
</div>
</a>

Dass ist eine falsche Folge der Tags:
   x   y    /x   /y
wenn es heissen müsste:
   x   y    /y   /x

was also heisst:

<div id="btn1">
   <a href="#">
     <img src="img/Btn.jpg"
          width="131"
          height="28"
          border="0"
          alt=""
     >
   </a>
</div>

Korrigiere diese Fehler damit die Browser eine bessere Chance haben, dein HTML zu verstehen und das CSS darauf anzuwenden.

Du kannst hier immer deinen Code validieren lassen:
http://validator.w3.org/#validate_by_uri+with_options

Ich lasse mal weiteren Kommentar.

mfg Beat

[tiGGu]

»» Ich lasse mal weiteren Kommentar.

mfg Beat

entschuldige das ich dem inet sowas antue aber ich hab noch nicht so viele praktische dinge mit html gemacht und deswegen ist klar das ich fehler mach so wie sie warscheinlich jeder Anfänger macht :( ich danke dir das du mich drauf aufmerksam gemacht hast und ich werde in zukunft besser darauf achten.

MfG

[Malcolm Beck´s]

hi,

ich hab noch nicht so viele praktische dinge mit html gemacht und deswegen ist klar das ich fehler mach so wie sie warscheinlich jeder Anfänger macht :(

Wie weit bist du denn mittlerweile mit deinem Problem? Hat sich schon was getan?

grüße

[tiGGu]

Wie weit bist du denn mittlerweile mit deinem Problem? Hat sich schon was getan?

grüße

ich überlege krampfhaft wie ich die sache anders löse ! aber irgendwie geht ne einfach positionsänderung mit hover nicht ich weiß nicht wieso :( das wär perfekt wenn es so einfach ginge naja muss halt noch viel lernen hehe jeder fängt mal klein an :P

MfG

[Malcolm Beck´s]

hi,

ich überlege krampfhaft wie ich die sache anders löse ! aber irgendwie geht ne einfach positionsänderung mit hover nicht ich weiß nicht wieso :( das wär perfekt wenn es so einfach ginge naja muss halt noch viel lernen hehe jeder fängt mal klein an :P

Hast du denn Beats Post berücksichtigt? Nein. Nicht wirklich.

Also, mal kurz zusammen fassen.

an oberster Stelle deiner HTML Datei fügst du einen http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Doctype hinzu:

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

Dann validierst du deine Datei

 <div id="btn1">  
   <a href="#">  
    <img src="img/Btn.jpg" width="131" height="28" border="0" alt="">  
 </div>  
</a>

konkret geht es zum folgende 3 Zeilen

  
    <img src="img/Btn.jpg" alt="" /> <!-- img muss geschlossen werden -->  
 </div>       <!-- hier hast du was verdreht -->  
</a>

Und dann weiterschauen.

grüße