• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Buttons

Status
Für weitere Antworten geschlossen.
H

housefr3@k

Neues Mitglied
Hi,
bin auf der Suche für mein Problem auf dieses Forum gestoßen. Vlt könnt ihr mir ja weiterhelfen:

Zu meinem Problem.
Ich habe eine Website mit dem "Slice-Werkzeug" von Photoshop erzeugt, da es mir die Umsetzung meiner Designvorstellungen erheblich erleichtert hat. Einige dieser Bilder habe ich verlinkt um aus ihnen Navigationsbuttons zu erstellen. Das ganze hab ich zur optischen Verschönerung mit einem mouseover-Effekt versehen. Wenn ich nun allerdings mit dem Mauszeiger über einen dieser Buttons fahre, verschiebt sich dieser rund 2-3 Pixel nach oben, was er natürlich nicht soll. Darunter bleibt ein weißer Streifen. Wenn ich mit dem Mauszeiger wegbewege, geht der Button wieder in seine Ausgangsposition zurück.
Weiß jemand von euch eine Lösung zu dem Problem?

Bin für jede Hilfe dankbar.

mfg
housefr3@k
 
*Glaskugel rauskram*
Ommm....
Ich sehe...
Dunkelheit...
Nein!
Jemand hat ein Problem...
...ein Code-Problem...
...vermutlich CSS-Abstände...
...Dunkelheit...

Ich kann nichts mehr sehen!
 
Danke erstmals für die Antwort.

Ich hoffe ich habe sie richtig interpretiert.
Wenn ich dem Bild nun folgendes zuweise, ändert sich leider auch nichts.

HTML: 
#image
{
padding:0px;
margin:0px;
}
Was ich vlt noch dazusagen sollte ist, dass die Website durch das Slice-Werkzeug nun als Tabelle aufgebaut ist.
 
Efchen meint: "Code her, sonst fällt die Hilfe schwer!" (Gerade selbst ausgedacht!)
Edit: "Link her, sonst fällt die Hilfe schwer!" ist wohl angebrachter ;)

PS: Tabellen-Layout = schlecht.
 
Zuletzt bearbeitet:
Sry, hier der Code:

Code: 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css_formatierung.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function austausch(URL1,F1,URL2,F2) 
{
Frame1=eval("parent."+F1);
Frame2=eval("parent."+F2);

Frame1.location.href = URL1;
Frame2.location.href = URL2;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (banner_navi3_sliced.psd) -->
<table id="table" width="773" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="12">
            <img src="http://www.html.de/images/banner_navi3_sliced_01.png" width="773" height="3" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="http://www.html.de/images/banner_navi3_sliced_02.png" width="7" height="176" alt=""></td>
        <td>
            <a href="javascript:austausch('link1','navi','link2','content')">
            <img src="http://www.html.de/images/banner_navi3_sliced_03.png" width="111" height="127" alt="Zurück zur Startseite" border="none" title="Zurück zur Startseite"></a></td>
        <td colspan="10" rowspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_04.png" width="655" height="132" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.html.de/images/banner_navi3_sliced_05.png" width="111" height="5" alt=""></td>
    </tr>
    
    <tr>
        <td colspan="2" id="button">
            <a href="javascript:austausch('link3','navi','link4','content')">
            <img src="http://www.html.de/images/banner_navi3_sliced_06.png" alt="" name="Image1" width="139" height="19" border="none" id="Image1" onMouseOver="MM_swapImage('Image1','','images/banner_konzept8_selected_03.png',0)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td rowspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_07.png" width="14" height="44" alt="">        </td>
        <td id="button">
            <a href="javascript:austausch('link5','navi','link6','content')">
            <img src="http://www.html.de/images/banner_navi3_sliced_08.png" alt="" width="139" height="19" border="none" onMouseOver="MM_swapImage('Image2','','images/banner_konzept8_selected_05.png',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
        <td rowspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_09.png" width="15" height="44" alt=""></td>
        <td id="button"><a href="javascript:austausch('link7','navi','link8','content')"><img src="http://www.html.de/images/banner_navi3_sliced_10.png" alt="" width="139" height="19" border="none" onMouseOver="MM_swapImage('Image3','','images/banner_konzept8_selected_07.png',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td rowspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_11.png" width="15" height="44" alt=""></td>
        <td id="button">
            <a href="javascript:austausch('link9','navi','link10','content')">
            <img src="http://www.html.de/images/banner_navi3_sliced_12.png" alt="" width="139" height="19" border="none" onMouseOver="MM_swapImage('Image4','','images/banner_konzept8_selected_09.png',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td rowspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_13.png" width="14" height="44" alt=""></td>
        <td id="button">
            <a href="javascript:austausch('link11','navi','link12','content')">
            <img src="http://www.html.de/images/banner_navi3_sliced_14.png" alt="" width="139" height="19" border="none" onMouseOver="MM_swapImage('Image5','','images/banner_konzept8_selected_11.png',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td rowspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_15.png" width="13" height="44" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="http://www.html.de/images/banner_navi3_sliced_16.png" width="139" height="25" alt=""></td>
        <td>
            <img src="http://www.html.de/images/banner_navi3_sliced_17.png" width="139" height="25" alt=""></td>
        <td>
            <img src="http://www.html.de/images/banner_navi3_sliced_18.png" width="139" height="25" alt=""></td>
        <td>
            <img src="http://www.html.de/images/banner_navi3_sliced_19.png" width="139" height="25" alt=""></td>
        <td>
            <img src="http://www.html.de/images/banner_navi3_sliced_20.png" width="139" height="25" alt=""></td></tr>
...
dazugehörige css-Stylesheet
Code: 
html
{
height:98%;
max-height:98%;
}

body
{
height:100%;
max-height:100%;
margin-top:2px;
}

#button a
{
padding:0px;
margin:0px;
}

#button
{
padding:0px;
margin:0px;
}
Dass es heutezutage nicht mehr sinnvoll ist, Tabellen als Layout zu verwenden, weiß ich, nur leider kenn ich mich mit div-Containern noch weniger aus.

Oh..tut mir leid, vlt kannst mir sagen, wie du es gemeint hast Efchen.
 
Zuletzt bearbeitet:
housefr3@k schrieb:
Dass es heutezutage nicht mehr sinnvoll ist, Tabellen als Layout zu verwenden, weiß ich, nur leider kenn ich mich mit div-Containern noch weniger aus.
Zum Vergrößern anklicken....
Und mit HTML auch nicht. Denn ob man nun Layout mit Tabellen oder Layout mit divs macht ist beides gleich sinnfrei. Layout macht man mit CSS, nicht mit HTML. Und sowohl <table>, als auch <div>, sind HTML. <table> benutzt man, um tabellarische Daten auszuzeichnen, <div> benutzt man, um mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren.

vlt kannst mir sagen, wie du es gemeint hast Efchen.
Zum Vergrößern anklicken....
Ich habe es so gemeint, wie Tar-Minyatur bemerkt hat. Dass ich nur raten kann, wenn ich keinen Link zur Seite habe.

In einer Hinsicht hat Tar-Minyatur aber unrecht. Ich meinte nicht, dass ich Code sehen will, ich will nen Link, weil das immer einfacher ist, als der Code. Es wäre ja auch immerhin möglich, dass das Problem bei den Images liegt, die seh ich aber nicht.

Allgemein möchte ich sagen, dass Du Dir eine aktuelle Arbeitsweise angewöhnen sollst. Du nutzt Tabellen fürs Layout und JavaScript für Bildwechsel. Das hat man letztes Jahrtausend gemacht. Das geht alles mit HTML & CSS viel einfacher. Insbesondere Biuldwechsel lassen sich über die CSS-Pseudoklasse ":hover" viel einfacher und browserübergreifend lösen.

Dann kann man den Code auch wieder lesen und Fehler besser finden - soll heißen, ich sehe für mich keinen Sinn, in dem Code rumzuwühlen, das ist mir zu unübersichtlich.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben