html - Problemer med tabeller ved billede - Udvikleren.dk

Tags: html css

Bruger #4536 @ 07.12.06 23:29

Hey Folkens!

Hjemmesiden som har problemer er her:
airsoft.frac.dk

Jeg har nu kæmpet lidt frem og tilbage med mine forældres hjemmeside, og er endelig kommet frem til et nogenlunde design. Problemet er bare at mit billede øverst oppe, burde ikke være omringet af ca. 4 px tykke blå linjer. Billedet/banneret og indholdssiden nedenunder er sat i 2 forskellige tabeller, men det er som om den laver en table-border selvom jeg ikke ligefrem har bedt den om det

.

Her er koden til mit billede:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>banner-menu(med effekt)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (banner-menu(med effekt).psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		banner_menu_medeffekt_Venstre_SON_over = newImage("images/banner-menu-medeffekt_Ve-05.gif");
		banner_menu_medeffekt_H_jre_SON_over = newImage("images/banner-menu-medeffekt_H%f8-08.gif");
		banner_menu_medeffekt_English_White_over = newImage("images/banner-menu-medeffekt_En-17.gif");
		banner_menu_medeffekt_Tegnestuen_blue_over = newImage("images/banner-menu-medeffekt_Te-19.gif");
		banner_menu_medeffekt_Projekter_blue_over = newImage("images/banner-menu-medeffekt_Pr-21.gif");
		banner_menu_medeffekt_S_dan_g_r_du_blue_over = newImage("images/banner-menu-medeffekt_S%e5-23.gif");
		banner_menu_medeffekt_Kontakt_blue_over = newImage("images/banner-menu-medeffekt_Ko-25.gif");
		banner_menu_medeffekt_Log_Ind_blue_over = newImage("images/banner-menu-medeffekt_Lo-27.gif");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (banner-menu(med effekt).psd) -->
<table id="Table_01" width="711" height="151" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="12">
			<img src="images/banner-menu-medeffekt_01.gif" width="710" height="7" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="images/banner-menu-medeffekt_02.gif" width="334" height="16" alt=""></td>
		<td colspan="2" rowspan="3">
			<a href="forside.php?side=underside"
				onmouseover="changeImages('banner_menu_medeffekt_Venstre_SON', 'images/banner-menu-medeffekt_Ve-05.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_Venstre_SON', 'images/banner-menu-medeffekt_Venst.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_Venstre_SON', 'images/banner-menu-medeffekt_Ve-05.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_Venstre_SON', 'images/banner-menu-medeffekt_Ve-05.gif'); return true;">
				<img name="banner_menu_medeffekt_Venstre_SON" src="images/banner-menu-medeffekt_Venst.gif" width="113" height="101" border="0" alt=""></a></td>
		<td rowspan="4">
			<img src="images/banner-menu-medeffekt_04.gif" width="34" height="111" alt=""></td>
		<td colspan="2" rowspan="3">
			<a href="forside.php?side=underside"
				onmouseover="changeImages('banner_menu_medeffekt_H_jre_SON', 'images/banner-menu-medeffekt_H%f8-08.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_H_jre_SON', 'images/banner-menu-medeffekt_H%f8jre.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_H_jre_SON', 'images/banner-menu-medeffekt_H%f8-08.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_H_jre_SON', 'images/banner-menu-medeffekt_H%f8-08.gif'); return true;">
				<img name="banner_menu_medeffekt_H_jre_SON" src="images/banner-menu-medeffekt_H%f8jre.gif" width="112" height="101" border="0" alt=""></a></td>
		<td colspan="2" rowspan="4">
			<img src="images/banner-menu-medeffekt_06.gif" width="117" height="111" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/banner-menu-medeffekt_07.gif" width="72" height="95" alt=""></td>
		<td colspan="2">
			<img src="images/banner-menu-medeffekt_MOC-S.gif" width="188" height="62" alt=""></td>
		<td colspan="2" rowspan="3">
			<img src="images/banner-menu-medeffekt_09.gif" width="74" height="95" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="62" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/banner-menu-medeffekt_10.gif" width="188" height="33" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/banner-menu-medeffekt_11.gif" width="113" height="10" alt=""></td>
		<td colspan="2">
			<img src="images/banner-menu-medeffekt_12.gif" width="112" height="10" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<a href="#"
				onmouseover="changeImages('banner_menu_medeffekt_English_White', 'images/banner-menu-medeffekt_En-17.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_English_White', 'images/banner-menu-medeffekt_Engli.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_English_White', 'images/banner-menu-medeffekt_En-17.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_English_White', 'images/banner-menu-medeffekt_En-17.gif'); return true;">
				<img name="banner_menu_medeffekt_English_White" src="images/banner-menu-medeffekt_Engli.gif" width="165" height="32" border="0" alt=""></a></td>
		<td colspan="2">
			<a href="forside.php?side=tegnestuen"
				onmouseover="changeImages('banner_menu_medeffekt_Tegnestuen_blue', 'images/banner-menu-medeffekt_Te-19.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_Tegnestuen_blue', 'images/banner-menu-medeffekt_Tegne.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_Tegnestuen_blue', 'images/banner-menu-medeffekt_Te-19.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_Tegnestuen_blue', 'images/banner-menu-medeffekt_Te-19.gif'); return true;">
				<img name="banner_menu_medeffekt_Tegnestuen_blue" src="images/banner-menu-medeffekt_Tegne.gif" width="129" height="32" border="0" alt=""></a></td>
		<td colspan="2">
			<a href="forside.php?side=projekter"
				onmouseover="changeImages('banner_menu_medeffekt_Projekter_blue', 'images/banner-menu-medeffekt_Pr-21.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_Projekter_blue', 'images/banner-menu-medeffekt_Proje.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_Projekter_blue', 'images/banner-menu-medeffekt_Pr-21.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_Projekter_blue', 'images/banner-menu-medeffekt_Pr-21.gif'); return true;">
				<img name="banner_menu_medeffekt_Projekter_blue" src="images/banner-menu-medeffekt_Proje.gif" width="94" height="32" border="0" alt=""></a></td>
		<td colspan="3">
			<a href="forside.php?side=saadan"
				onmouseover="changeImages('banner_menu_medeffekt_S_dan_g_r_du_blue', 'images/banner-menu-medeffekt_S%e5-23.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_S_dan_g_r_du_blue', 'images/banner-menu-medeffekt_S%e5dan.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_S_dan_g_r_du_blue', 'images/banner-menu-medeffekt_S%e5-23.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_S_dan_g_r_du_blue', 'images/banner-menu-medeffekt_S%e5-23.gif'); return true;">
				<img name="banner_menu_medeffekt_S_dan_g_r_du_blue" src="images/banner-menu-medeffekt_S%e5dan.gif" width="135" height="32" border="0" alt=""></a></td>
		<td colspan="2">
			<a href="forside.php?side=kontaktos"
				onmouseover="changeImages('banner_menu_medeffekt_Kontakt_blue', 'images/banner-menu-medeffekt_Ko-25.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_Kontakt_blue', 'images/banner-menu-medeffekt_Konta.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_Kontakt_blue', 'images/banner-menu-medeffekt_Ko-25.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_Kontakt_blue', 'images/banner-menu-medeffekt_Ko-25.gif'); return true;">
				<img name="banner_menu_medeffekt_Kontakt_blue" src="images/banner-menu-medeffekt_Konta.gif" width="89" height="32" border="0" alt=""></a></td>
		<td>
			<a href="forside.php?side=logind"
				onmouseover="changeImages('banner_menu_medeffekt_Log_Ind_blue', 'images/banner-menu-medeffekt_Lo-27.gif'); return true;"
				onmouseout="changeImages('banner_menu_medeffekt_Log_Ind_blue', 'images/banner-menu-medeffekt_Log-I.gif'); return true;"
				onmousedown="changeImages('banner_menu_medeffekt_Log_Ind_blue', 'images/banner-menu-medeffekt_Lo-27.gif'); return true;"
				onmouseup="changeImages('banner_menu_medeffekt_Log_Ind_blue', 'images/banner-menu-medeffekt_Lo-27.gif'); return true;">
				<img name="banner_menu_medeffekt_Log_Ind_blue" src="images/banner-menu-medeffekt_Log-I.gif" width="98" height="32" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="32" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="95" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="40" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="54" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="59" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="70" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="19" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="98" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Og her er koden til min forside.php (som er midterste frame når man kommer ind på index.php, som deler indholdssiden og banneret op i tabeller):

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mogens & Ole Chr. Sørensen Arkitekter A/S</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>

<table style="background:#084371;">
<tr>
<td style="height:151px;" border="0">
<?php
include 'banner.php';
?>
</td>
</tr>
<tr>
<td style="border:none; border-width:0; border-style:0; border-color:#084371; height:355px;" rules="none">
<?php
     $side = $_GET['side'];
     $home = "underside.php";
     if (!isset($side)||$side == ""){
      include($home);
     } else if (is_file($side . ".php")) {
      include($side . ".php");
     } else {
      echo "<font class='small'><br />Der opstod en fejl, siden kunne ikke findes. 
      Tryk <a href='forside.php?side=underside'>her</a> for at vende tilbage til forsiden</font>";
     }
 ?>
 </td>
 </tr>
 </table>
<table>
<tr>
<td style="border:none; height:40px;">
<?php
include 'botbanner.php';
?>
</tr>
</td>
</table>
</body>
</html>

3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 8 karma

Sorter efter stemmer Sorter efter dato

Bruger #5297 @ 08.12.06 04:53

Hey Folkens!

Hjemmesiden som har problemer er her:
airsoft.frac.dk

Jeg har nu kæmpet lidt frem og tilbage med mine forældres hjemmeside, og er endelig kommet frem til et nogenlunde design. Problemet er bare at mit billede øverst oppe, burde ikke være omringet af ca. 4 px tykke blå linjer. Billedet/banneret og indholdssiden nedenunder er sat i 2 forskellige tabeller, men det er som om den laver en table-border selvom jeg ikke ligefrem har bedt den om det .

Så vidt jeg husker at have lært, så har det noget at gøre med at uanset om man sætter border til eller fra, så vil tabellen altid fylde 1px hele vejen rundt. Altså 1px top, 1px højre, 1px venstre og 1px bund.

På grund af dette vil designet ikke komme til at passe. Løsningen på dit problem kunne være at lave designet i CSS og HTML uden brug af tables. Det kan lade sig gøre og jeg kan anbefale dig at kigge på CSS Zen Garden, som er en side, som er bygget op om den samme HMTL kode, men alle de designs der findes på siden er lavet med forskellige CSS's. Det vil gøre det nemmere for dig for dig fremover, hvis du skal opdatere eller redesigne siden.

Håber det gav dig svar på dit problem.

Mvh

Sol

Bruger #3710 @ 09.12.06 11:02

cellpadding og cellspacing vil på en tabel som default være alt andet en 0.

prøv med <table cellpadding=0 cellspacing=0> på alle dine tables.

Bruger #5297 @ 07.03.07 06:18

Problemet er bare at mit billede øverst oppe, burde ikke være omringet af ca. 4 px tykke blå linjer.

Hejsa

Tror det her er løsningen. Du bruger muligvis dit billed, som et link og derfor kommer der en border rundt om billedet, for at vise det er et link.

Tilføj til dit CSS:

Kode

img {
 border: 0px;
}

Så burde du have løst dit problem.

Mvh

Sol

Problemer med tabeller ved billede

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler