CSS Style Sheet

Andi300 · 16.07.2006, 13:59

Hallo!

Habe als vorlage ein CSS Stylesheet von Dreamweaver verwendet mit der navigationsleiste auf der Rechten seite.
Nun habe ich ein Problem und zwar ist die Navigationsleiste auf einer Seite breiter als auf der nächsten!
Wo kann ich die Größe dieser Leiste festlegen?

Mfg Andi

Dome · 16.07.2006, 14:47

Zeig mal den Quellcode!
Und verwende ein Stylesheet für die Seiten, damit alles gleich aussieht...

In der CSS-Datei müsste irgendwas mit

Code:

width=blabla

an der Richitgen stelle stehen, das ist die Breite (wenn hinten mit px dann in Pixel)...

Andi300 · 16.07.2006, 20:01

<!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>

<title>Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#F4FFE4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#D5EDB3">
<td colspan="3" rowspan="2" bgcolor="#000000"> </td>
<td height="50" colspan="3" align="center" valign="bottom" nowrap="nowrap" bgcolor="#000000" id="logo"><span class="Stil2">Test</span></td>
<td width="4" bgcolor="#000000"> </td>
</tr>

<tr bgcolor="#D5EDB3">
<td height="51" colspan="3" align="center" valign="top" bgcolor="#000000" id="tagline"> </td>
<td width="4" bgcolor="#000000"> </td>
</tr>

<tr bgcolor="#99CC66">
<td height="20" colspan="7" bgcolor="#000000" id="dateformat">  <script language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>

<tr>
<td width="191" valign="top" bgcolor="#5C743D">
<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
<tr>
<td width="165"> <br />
 <br /></td>
</tr>
<tr>
<td width="165"><a href="Geschichte.html" target="_parent">Thema1</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Thema2</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Thema3</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Thema4</a></td>
</tr>
</table>
<br />
 <br />
 <br />
 <br /> </td>
<td width="51"><img src="file:///I|/Help/mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
<td colspan="2" valign="top"><img src="file:///I|/Help/mm_spacer.gif" alt="" width="305" height="1" border="0" /><br />
 <br />
 <br />
<table border="0" cellspacing="0" cellpadding="0" width="305">
<tr>
<td class="pageName Stil2">Test</td>
</tr>

<tr>
<td class="bodyText"><p> </p>
<p> </p></td>
</tr>
</table>
<br />
 <br /> </td>
<td width="50"><img src="file:///I|/Help/mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
<td width="439" valign="top"><br />
 <br />
<table border="0" cellspacing="0" cellpadding="0" width="190" id="leftcol">

<tr>
<td width="10"><img src="file:///I|/Help/mm_spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="170" class="smallText"><br />
<p><span class="subHeader">Titel</span><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. </p>

<p><span class="subHeader">Titel</span><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. </p>

<p><span class="subHeader">Titel</span><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. </p>

<br />
 <br /> </td>
<td width="10"> </td>
</tr>
</table> </td>
<td width="4"> </td>
</tr>
<tr>
<td width="191"> </td>
<td width="51"> </td>
<td width="170"> </td>
<td width="138"> </td>
<td width="50"> </td>
<td width="439"> </td>
<td width="4"> </td>
</tr>
</table>
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
So das ist nun der Code.
In der Navigationsleiste Habe ich meine 4 Themen und das erste ist verlinkt zur Geschichte .
Und wo kann ich da das mit der breite umstellen?

His.Master's.Voice · 16.07.2006, 21:02

Hier ist dein Problem:

Code:

<td width="191" valign="top" bgcolor="#5C743D">
<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
<tr>
<td width="165">&nbsp;<br />
&nbsp;<br /></td>
</tr>
<tr>
<td width="165"><a href="Geschichte.html" target="_parent">Thema1</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Thema2</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Thema3</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Thema4</a></td>
</tr>
</table>
<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br /> </td>

Du hast hier gleich mehrere Probleme:
Die Links, Thema 1-4 sitzen in einer Tabelle die nur 1 Spalte hat, diese sitzt wiederum in einer Tabellenzelle.
Da sie einspaltig ist braucht <td width="165px"> nur bei der ersten Zelle stehen, alle nachfolgenden Zeilen erhalten automatische die selbe Breite. Bitte beachte auch, das wohl einige Browser die px Angabe bei den Werten haben wollen, der IE ist da noch sehr tolerant.

Nun sitzt die Tabelle aber in einer Zelle, mit der Breite <td width="191px" valign="top" bgcolor="#5C743D">, d.h selbst wenn du den obigen Wert von z.B. 165px auf 125px änderst, wird sie immer mindestens 191 Pixel breit bleiben, d.h. du solltest beide Werte auf einen einheitlichen Wert ändern.

Übrigens benutzt du als Doc-Type xhtml1.0, damit ist die Page wohl nicht valide, hier wäre wohl eher folgendes angebracht.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">

Andi300 · 16.07.2006, 22:57

wow danke uwe.
Nur eine Frage für was ist der doc type gut?
Kenn mich da nicht so aus.

Mfg Andi und danke für deine hilfe

webcreate · 16.07.2006, 23:09

Hier mal was zum lesen.