positionierung des tables

Status
Nicht offen für weitere Antworten.

berit

Grünschnabel
hallo zusammen,

ich baue gerade an meiner ersten website herum und habe ein problem. Ich habe bisher ein hintergrundbild und eine navigation bar und das sieht auch im browser alles klasse aus..., aber dann habe ich noch im unteren balken 3 Links. Die Navigation bar und die links sind in tables gebaut. Das problem ist nun, dass die 3 Links im browser immer viel weiter unten sind als in der ansicht in dreamweaver. ich finde den fehler einfach nicht...
mein code sieht folgendermaßen aus:

Code:
<td><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25
		  " height="1" /></p>
            <p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="0" /></p></td>
          <td>&nbsp;</td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('terms','','images/buttons/terms_down_26.jpg',1)"><img src="http://www.tutorials.de/forum/images/buttons/terms_26.jpg" alt="terms of use" name="terms" width="79" height="19" border="0" id="terms" onclick="MM_openBrWindow('http://www.universalpictures.com/legal/index.html','TermsOfUse','')" /></a></td>
        </tr>
        <tr>
          <td><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25" height="1" /></p>            </td>
          <td>&nbsp;</td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('privacy','','images/buttons/privacy_down_22.jpg',1)"><img src="http://www.tutorials.de/forum/images/buttons/privacy_22.jpg" alt="Privacy Policy" name="privacy" width="87" height="19" border="0" id="privacy" onclick="MM_openBrWindow('http://www.universalpictures.com/legal/privacy.html','PrivacyPolicy','')" /></a></td>
        </tr>
        <tr>
          <td><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25" height="1" /></p>            </td>
          <td>&nbsp;</td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('feedback','','images/buttons/feedback_down_29.jpg',1)"><img src="http://www.tutorials.de/forum/images/buttons/feeback_29.jpg" alt="Feedback" name="feedback" width="60" height="19" border="0" id="feedback" onclick="MM_openBrWindow('http://www.universalstudios.com/homepage/html/contact_us/contact_form.cgi?email_id=9','Feedback','')" /></a></td>
        </tr>
        <tr>
 
Hi,

kannst du mal zum Vergleich zwei Screenshots (Browser vs. Dreamweaver) anhängen und den übrigen Quellcode der Tabellenstruktur posten, damit man einen Anhaltspunkt hat?

Und bitte achte in deinen Beiträgen auf eine durchgängige Groß- und Kleinschreibung, siehe Netiquette #15. Vielen Dank!
 
Anbei der übrige Quellcode meiner Tabellenstruktur:

Code:
<body class="body" onload="MM_preloadImages('images/buttons/story_down.jpg','images/buttons/story_over.jpg','images/buttons/behind_down_07.jpg','images/buttons/behind_over_07.jpg','images/buttons/cast_down_11.jpg','images/buttons/cast_over_11.jpg','images/buttons/audio_down_15.jpg','images/buttons/audio_over_15.jpg','images/buttons/links_down_18.jpg','images/buttons/links_over_18.jpg','images/buttons/terms_down_26.jpg','images/buttons/privacy_down_22.jpg','images/buttons/feedback_down_29.jpg')">
<div class="bg_layer" id="Layer1"></div>
<table width="841" border="0" align="center" cellpadding="0" cellspacing="0" class="bg">
  <tr>
    <td style="text-align:center"><div class="bg">
      <table width="841" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="741" height="107"><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="0" /></p>
            <p>&nbsp;</p></td>
          <td width="10">&nbsp;</td>
          <td width="90">&nbsp;</td>
        </tr>
        <tr>
          <td height="431"><table width="176" height="400" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td height="61"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','story','images/buttons/story_down.jpg',1)" onmouseover="MM_nbGroup('over','story','images/buttons/story_over.jpg','images/buttons/story_down.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.tutorials.de/forum/images/buttons/story.jpg" alt="Story" name="story" width="80" height="45" border="0" id="story" onload="" /></a></td>
              </tr>
              <tr>
                <td height="95"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','behind_the_scenes','images/buttons/behind_down_07.jpg',1)" onmouseover="MM_nbGroup('over','behind_the_scenes','images/buttons/behind_over_07.jpg','images/buttons/behind_down_07.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.tutorials.de/forum/images/buttons/behind_07.jpg" alt="Behind the scenes" name="behind_the_scenes" width="140" height="62" border="0" id="behind_the_scenes" onload="" /></a></td>
              </tr>
              <tr>
                <td height="82"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Cast_Crew','images/buttons/cast_down_11.jpg',1)" onmouseover="MM_nbGroup('over','Cast_Crew','images/buttons/cast_over_11.jpg','images/buttons/cast_down_11.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.tutorials.de/forum/images/buttons/cast_11.jpg" alt="Cast + Crew" name="Cast_Crew" width="98" height="61" border="0" id="Cast_Crew" onload="" /></a></td>
              </tr>
              <tr>
                <td height="86"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','audio_video','images/buttons/audio_down_15.jpg',1)" onmouseover="MM_nbGroup('over','audio_video','images/buttons/audio_over_15.jpg','images/buttons/audio_down_15.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.tutorials.de/forum/images/buttons/audio_15.jpg" alt="" name="audio_video" width="105" height="57" border="0" id="audio_video" onload="" /></a></td>
              </tr>
              <tr>
                <td height="60"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','links','images/buttons/links_down_18.jpg',1)" onmouseover="MM_nbGroup('over','links','images/buttons/links_over_18.jpg','images/buttons/links_down_18.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.tutorials.de/forum/images/buttons/links_button.jpg" alt="Links" name="links" width="85" height="42" border="0" id="links" onload="" /></a></td>
              </tr>
            </table>
            <p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="0" /></p></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25
		  " height="1" /></p>
            <p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="0" /></p></td>
          <td>&nbsp;</td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('terms','','images/buttons/terms_down_26.jpg',1)"><img src="http://www.tutorials.de/forum/images/buttons/terms_26.jpg" alt="terms of use" name="terms" width="79" height="19" border="0" id="terms" onclick="MM_openBrWindow('http://www.universalpictures.com/legal/index.html','TermsOfUse','')" /></a></td>
        </tr>
        <tr>
          <td><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25" height="1" /></p>            </td>
          <td>&nbsp;</td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('privacy','','images/buttons/privacy_down_22.jpg',1)"><img src="http://www.tutorials.de/forum/images/buttons/privacy_22.jpg" alt="Privacy Policy" name="privacy" width="87" height="19" border="0" id="privacy" onclick="MM_openBrWindow('http://www.universalpictures.com/legal/privacy.html','PrivacyPolicy','')" /></a></td>
        </tr>
        <tr>
          <td><p><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25" height="1" /></p>            </td>
          <td>&nbsp;</td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('feedback','','images/buttons/feedback_down_29.jpg',1)"><img src="http://www.tutorials.de/forum/images/buttons/feeback_29.jpg" alt="Feedback" name="feedback" width="60" height="19" border="0" id="feedback" onclick="MM_openBrWindow('http://www.universalstudios.com/homepage/html/contact_us/contact_form.cgi?email_id=9','Feedback','')" /></a></td>
        </tr>
        <tr>
          <td><img src="http://www.tutorials.de/forum/images/spacer.gif" width="25" height="1" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="0" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
</td>
  </tr>
</table>
 

Anhänge

  • ansicht im browser.jpg
    ansicht im browser.jpg
    43,5 KB · Aufrufe: 20
  • ansicht in dw.jpg
    ansicht in dw.jpg
    62 KB · Aufrufe: 21
Bei mir werden die drei Grafik-Links in allen mir zur Verfügung stehenden Browsern innerhalb der Tabelle angezeigt.

Wie lautet denn das Stylesheet für die Klasse .bg?
 
Ich weiß leider gerade nicht genau, welche class du wissen wolltest, deshalb habe ich nun alle aus dem Code copiert. Hoffe du findest so das Problem.

Code:
.bg {
z-index:1;
background-image:url(images/bg.png);
background-repeat:no-repeat;
height: 600px;
width: 841px;
}

.buttonstory {
position:absolute;
	left:auto;
	top:auto;
	width:106px;
	height:79px;
	z-index:2;
}
#Layer1 {
	position:absolute;
	left:274px;
	top:144px;
	width:628px;
	height:350px;
	z-index:1;
}
.bg_layer {
	font-family: Arial, Verdana, "Times New Roman";
	font-size: 11px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: fixed;
	background-color: #333333;
	background-repeat: repeat;
	letter-spacing: normal;
	text-align: left;
	word-spacing: normal;
}
 
Hi,

ich kann da noch immer kein "Überlappen" der drei Grafik-Links auf der rechten Seite feststellen - siehe angehängten Screenshot.

Ansonsten versuch es mal mit den folgenden Stylesheet-Ergänzungen:

Code:
img {
display: block;
}

p {
margin: 0;
padding: 0;
}
 

Anhänge

  • demo_berit.jpg
    demo_berit.jpg
    70,1 KB · Aufrufe: 18
Status
Nicht offen für weitere Antworten.
Zurück