Ruimte tussen <tr></tr> weghalen

Status
Niet open voor verdere reacties.
Z

zamg0d1

Gebruiker
Lid geworden
10 jan 2010
Berichten
46
Hallo,

Ik zit met een probleempje maar kan het zo niet vinden...

Normaal maak ik altijd een layout in Photoshop en dan laat ik de code ook in Photoshop eruit rollen, maar deze keer wil ik een site maken met zo min mogelijk Photoshop en zoveel mogelijk zelf in HTML maken.

Het probleem zit zo.. Ik heb hier http://www.gaming-freak.nl/hillway/new/ een soortvan tabbladen gemaakt (prototypes), maar het probleem is nu dat ze boven de balk waar tekst staat zweven... :( Hoe kan ik dit oplossen en het wel werkbaar maken?

Dit is mijn code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Hillway Testsite</title>
<style>
<!--
BODY {
background: #000000 url(background.jpg);
background-repeat:no-repeat;
background-position:top;
}
table {
  border-collapse: collapse;
} 
-->
</style>
</head>
<body>
<table width="80%" height="100%" align="center" cellspacing="0" cellpadding="0">
    <tr height="15%">
    	<td align="left" bgcolor="">
        	<img src="logo.png" height="100px" width="178" alt="Hillway Header"/>
        </td>
    </tr>
    <tr>
    	<td><img src="tab.png" /> <img src="tab.png" /> <img src="tab.png" /> <img src="tab.png" /></td>
    </tr>
    <tr>
    	<td bgcolor="#b2b2b2">
        	<div align="right">
            	<pre>
                <iframe src="frame.html" name="frame1" scrolling="yes" frameborder="yes" height = "700px" width = "40%"></iframe>	</pre>
             </div>
        </td>
</table>
</body>
</html>
 
Laatst bewerkt:
Minder tabellen, meer stijl! Als je geen tabellen gebruikt voor je layout, maar divjes, wordt alles een stuk makkelijker. Zo worden je tabs zoiets:
HTML: 
<div id='navigatie'>
   <img src='tab.png' alt='tab' />
   <img src='tab.png' alt='tab' />
   <img src='tab.png' alt='tab' />
</div>
PHP: 
/* CSS */

div#navigatie
{
   margin: 0px;
   padding: 0px;
}

div#navigatie img
{
   display: block;   /* met float */
   float: left;
   margin: 0px 25px 0px 0px;
}

overgens kan het iframe beter ook weg, maar dat is niet je vraag ;)
 
Laatst bewerkt:
En hoe zorg ik dan dat ie gelijk loopt met de rest van de tabel? :)

Nu staan de tabs namelijk beetje heel ver naar links... :O
 
http://www.gaming-freak.nl/hillway/new/?act=home en nu staat het ook weer niet goed... :(

Ik heb nu zegmaar één <br />, maar als ik er twee doe dan zit het weer niet goed icm de tabbladen....

PHP: 
    <?php
         $able = array('home', 'band', 'nieuws', 'agenda'); // de pagina's die toegelaten zijn
         $act = 'home'; // de standaard pagina
         if(!empty($_GET['act']) && in_array($_GET['act'], $able)) {
            // toegelaten, dus we laden de meegegeven pagina
            $act = $_GET['act'];
         }
      ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Hillway Testsite</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
				<script language="JavaScript">
					<!--
						if ((screen.width==800) && (screen.height==600))
							{
								document.writeln("<div class='message'>Uit ons waarschuwingssysteem is gebleken dat je de site bekijkt op een te kleine resolutie, gebruik een resolutie van 1024×768 of groter om deze site goed te kunnen bekijken</div>");
							}
					//-->
				</script>
                <img src="logo.png" height="100px" width="178" alt="Hillway Header"/>
	<div class='navigatie'>
        <img src='tab1.png' alt='tab' />
        <img src='tab1.png' alt='tab' />
        <img src='tab1.png' alt='tab' />
    </div>
    <br />
    <div class="content">
    	<?
			include_once("pages/$act.php")
		?>
    </div>
</body>
</html>
 
* De <br /> gelijk voor en gelijk na <div class="content"> kunnen weg. Als je met divs werkt, is het vrijwel altijd niet de beste manier om 'n <br /> te gebruiken voor afstand e.d.

* De inhoud van .navigatie is naar links gefloat. Dat betekent dat die inhoud geen invloed meer heeft op de hoogte van div.navigatie. Normaal genomen wordt 'n div automatisch precies hoog genoeg om de inhoud weer te kunnen geven, maar niet als de inhoud is gefloat. .navigatie heeft dus gewoon geen hoogte, waardoor .content er gewoon naast wordt gezet.
In dit geval moet je dus .navigatie 'met de hand' 'n hoogte geven. Die png's zijn 32 px hoog, als ik aan .navigatie toevoeg
Code: 
height: 32px;
staat het volgens mij goed.
't Is even wennen, divs en zo, maar uiteindelijk werkt het veel en veel makkelijker dan 'n tabel voor opmaak, is beter te onderhouden, flexibeler, beter voor zoekmachines, enz., enz.

Nog wat losse dingetjes.
* Bij de tabs staat alt="tab". 'n Alt-tekst moet óf zinvol zijn (bijvoorbeeld waar de knop naartoe leidt), of alt="" zijn.

* Bij logo.png staat 'n hoogte van 100px. Dat moet gewoon '100' zijn, een van de weinige plaatsen waar 'n eenheid niet nodig is en zelfs niet mag. Dit soort fouten kun je prima vinden met de validator.
Voor html: http://validator.w3.org/
Voor css: http://jigsaw.w3.org/css-validator/

* De tag voor javascript moet zijn:
HTML: 
<script type="text/javascript">
Ook weer iets wat 'n validator meldt.

* Je gebruikt in allerlei bestandsnamen spaties (of %20, dat kan ik niet zien). En er staan hoofdletters in bestandsnamen. Dat kan enorme problemen geven op de server.
Spaties mogen gewoon niet en niet elke server kan er goed mee omgaan.
Vervang de spaties door - of _. - als het twee woorden zijn voor 'n zoekmachine (about-us.html), _ als het als één woord moet worden gezien.
Hoofd- en kleine letters maakt in Windows geen verschil, op de meeste servers zijn het twee totaal verschillende dingen. Dus alleen kleine letters gebruiken.

* Je gebruikt 'n transitional doctype. Dat is bedoeld voor sites die tien jaar geleden al bestonden. Je kunt daardoor tags gebruiken die al tien jaar worden afgeraden. Jij gebruikt die tags helemaal niet. Daarom is 'n strict doctype veel beter, dat voorkomt dat je ze per ongeluk nog gaat gebruiken.
Met 'n strict doctype kun je probleemloos overschakelen naar html5, dat op het ogenblik al wordt ingevoerd. En dus gebruik gaan maken van alle leuke nieuwe dingen daarvan. Als je tags gebruikt die transitional toestaat, moet je je hele site eerst gaan aanpassen voor je html5 kunt gaan gebruiken.
'n Beter doctype is dus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* Er staat 'n spatie of zo voor je <!DOCTYPE. Dat mag niet, want dan slaat die arme Internet Explorer 6, dat kwaliteitsproduct van Microsoft, op tilt. (Officieel: de arme ziel schiet in 'quirks mode').
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan