Hilfte bei HTML / CSS

Kingslayer · 08. Juli 2009

Code:

<style type="text/css">
<!--
table.Buchungstabelle {
	position: absolute;
	top: 293px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
}
-->
</style>

<FORM METHOD="POST" ACTION=[URL]"http://www.internet-studie.de/mv/bestbolt.cfm"[/URL] enctype="application/x-www-form-urlencoded" NAME="form" onSubmit="return validate_form()">
<TABLE border="4" CELLPADDING="5" cellspacing="5" BORDERCOLOR="#6966A9" bordercolorlight="#817DB7" bordercolordark="#54518E" class="Buchungstabelle" id="Buchungstabelle" align="center">
	<TR> 
        		<TD nowrap colspan="2"><h2>
					Unverbindliche Buchungsanfrage vom <script type="text/javascript">document.write( zeit );</script></h2>		        </TD>
		      </TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>

						Anzahl Erwachsene</td>
					<td valign="MIDDLE">
						<input type="TEXT" name="ERWACH" size="2" maxlength="1">					</td>
				</TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>
					Kinder (unter 12 Jahre)					</td>
					<td valign="MIDDLE">

						<input type="TEXT" name="Kinder" size="2" maxlength="1">					</td>
				</TR>
				<TR>
					<td VALIGN=MIDDLE nowrap>
						Haustiere					</td>
					<td valign="MIDDLE">
						<input type="TEXT" name="Haustiere" size="25" maxlength="60" value="keine">					</td>

				</TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>
						Buchung vom					</td>
					<td valign="MIDDLE">
						<input type="TEXT" name="dat_von" size="10" maxlength="30">
						<font style="font-size: 10px;"> (tt.mm.jjjj)</font>					</td>

				</TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>
						bis (Tag der Abreise)					</td>
					<td valign="MIDDLE">
						<input type="TEXT" name="dat_bis" size="10" maxlength="30"><font style="font-size: 10px;"> (tt.mm.jjjj)</font>
					</td>
				</TR>

				<TR> 
					<td VALIGN=MIDDLE colspan="2" align="LEFT"> 
						Ihre Adresse					</td>
				</TR>
				<TR> 
					<td height="35" width="26%" >
						Anrede					</td>
					<td height="35" width="74%" >
						<select name="Anrede">

							<option value="leer" selected>Bitte wählen</option>
							<option value="Familie">Familie</option>
							<option value="Frau">Frau</option>
							<option value="Herr">Herr</option>
						</select>					</td>
				</tr>

				<tr valign="middle" align="left"> 
					<td height="35" width="26%" nowrap>
						Vorname Name					</td>
					<td height="35" width="74%" nowrap>
						<input type="TEXT" name="Vorname" size="15" maxlength="60">
						<input type="TEXT" name="Name" size="15" maxlength="60">					</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" >

						Strasse					</td>
					<td height="35" width="74%" >
						<input type="TEXT" name="Strasse" size="35" maxlength="60">					</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" >
						Land-PLZ Ort					</td>

					<td height="35" width="74%" nowrap>
						<input type="TEXT" name="LAND" size="1" maxlength="7" value="D">
						- 
						<input type="TEXT" name="PLZ" size="5" maxlength="7">
						<input type="TEXT" name="Ort" size="23" maxlength="50">					</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" nowrap>
						Telefon-Nummer					</td>

					<td height="35" width="74%" >
						<input type="TEXT" name="Telefon" size="35" maxlength="50">					</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" >
						eMail					</td>
					<td height="35" width="74%" >
						<input type="TEXT" name="email" size="35" maxlength="50" onBlur="check_email(this)">					</td>

				</tr>
				<TR> 
		        	<TD colspan=3> 
    			      Hier können Sie weitere Wünsche und Kommentare eingeben<br>
	        		  <textarea name="WUNSCH" cols="80" rows="2"> </textarea>	    	    	</TD>
				</TR>
				<TR> 
		        	<TD colspan=3 align="center"> 
    			        <input name=SENDBUTTON type=SUBMIT value="Anfrage absenden">

					</TD>
				</TR>
		    </TABLE>
        </FORM>

Hab diese Tabelle und ich will sie zentriert einfügen...

mein Versuch

Code:

<html>
<head>
<title>Ferienhaus am Meer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
table.Buchungstabelle {
	position: absolute;
	top: 293px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Unbenannt-2.psd) -->
<map name="Impressum">
  <area shape="rect" coords="756,0,823,17"
href=[URL]"http://www.ferienhaus-am-meer.de/Vermietung/impressum.htm"[/URL]
target="_blank" alt="Impressum">
</map>
<table id="Tabelle_01" width="1000" height="1001" border="0"
cellpadding="0" cellspacing="0" align="center">
<tr>
		<td colspan="11">

			<img src="Bilder/Unbenannt-2_01.gif"
width="1000" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="7">
			<img src="Bilder/Unbenannt-2_02.gif" width="64"
height="999" alt=""></td>
		<td colspan="9">
		  <img src="Bilder/balkenoben.gif" width="872"
height="28" alt=""></td>
		<td rowspan="7">
			<img src="Bilder/Unbenannt-2_04.gif" width="64"
height="999" alt=""></td>

	</tr>
	<tr>
		<td rowspan="5">
			<img src="Bilder/balkenlinkeseite.gif"
width="21" height="970" alt=""></td>
		<td colspan="6">
	    <img src="Bilder/headder.jpg" width="822" height="169"
alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="Bilder/balkenobenrechts.gif"
width="29" height="198" alt=""></td>
	</tr>

	<tr>
		<td colspan="6">
			<img src="Bilder/grenzeheaddercontent.gif"
width="822" height="29" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="Bilder/Unbenannt-2_09.gif" width="1"
height="772" alt=""></td>
		<td><a href="index.html"><img
src="Bilder/registerferienhaus.gif" alt="" width="164" height="32"
border="0"></a></td>
		<td>

		  <img src="Bilder/registerboltenhagen.gif" width="165"
height="32" alt=""></td>
		<td><a href="Plaene.html"><img
src="Bilder/registerplaene.gif" alt="" width="165" height="32"
border="0"></a></td>
		<td><a href="Anreise.html"><img
src="Bilder/registeranreise.gif" alt="" width="164" height="32"
border="0"></a></td>
		<td colspan="2">
	    <img src="Bilder/registerbuchungblank.gif" width="165"
height="32" alt=""></td>
		<td rowspan="3">
			<img src="Bilder/balkenuntenrechts.gif"
width="27" height="772" alt=""></td>
	</tr>
	<tr>

		<td colspan="6" align="center"><img
src="Bilder/contentbuchung.gif" width="823" height="707" alt="">
        <FORM METHOD="POST"
ACTION=[URL]"http://www.internet-studie.de/mv/bestbolt.cfm"[/URL]
enctype="application/x-www-form-urlencoded" NAME="form" onSubmit="return
validate_form()">
			<TABLE border="4" CELLPADDING="5"
cellspacing="5" BORDERCOLOR="#6966A9" bordercolorlight="#817DB7"
bordercolordark="#54518E" class="Buchungstabelle" id="Buchungstabelle"
align="center">
		      <TR> 
        		<TD nowrap colspan="2"><h2>
					Unverbindliche Buchungsanfrage
vom <script type="text/javascript">document.write( zeit );</script></h2>
</TD>
		      </TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>

						Anzahl Erwachsene</td>
					<td valign="MIDDLE">
						<input type="TEXT"
name="ERWACH" size="2" maxlength="1">
</td>
				</TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>
					Kinder (unter 12 Jahre)
</td>
					<td valign="MIDDLE">

						<input type="TEXT"
name="Kinder" size="2" maxlength="1">
</td>
				</TR>
				<TR>
					<td VALIGN=MIDDLE nowrap>
						Haustiere
</td>
					<td valign="MIDDLE">
						<input type="TEXT"
name="Haustiere" size="25" maxlength="60" value="keine">
</td>

				</TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>
						Buchung vom
</td>
					<td valign="MIDDLE">
						<input type="TEXT"
name="dat_von" size="10" maxlength="30">
						<font style="font-size:
10px;"> (tt.mm.jjjj)</font>					</td>

				</TR>
				<TR> 
					<td VALIGN=MIDDLE nowrap>
						bis (Tag der Abreise)
</td>
					<td valign="MIDDLE">
						<input type="TEXT"
name="dat_bis" size="10" maxlength="30"><font style="font-size: 10px;">
(tt.mm.jjjj)</font>
					</td>
				</TR>

				<TR> 
					<td VALIGN=MIDDLE colspan="2"
align="LEFT"> 
						Ihre Adresse
</td>
				</TR>
				<TR> 
					<td height="35" width="26%" >
						Anrede
</td>
					<td height="35" width="74%" >
						<select name="Anrede">

							<option
value="leer" selected>Bitte wählen</option>
							<option
value="Familie">Familie</option>
							<option
value="Frau">Frau</option>
							<option
value="Herr">Herr</option>
						</select>
</td>
				</tr>

				<tr valign="middle" align="left"> 
					<td height="35" width="26%"
nowrap>
						Vorname Name
</td>
					<td height="35" width="74%"
nowrap>
						<input type="TEXT"
name="Vorname" size="15" maxlength="60">
						<input type="TEXT"
name="Name" size="15" maxlength="60">
</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" >

						Strasse
</td>
					<td height="35" width="74%" >
						<input type="TEXT"
name="Strasse" size="35" maxlength="60">
</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" >
						Land-PLZ Ort
</td>

					<td height="35" width="74%"
nowrap>
						<input type="TEXT"
name="LAND" size="1" maxlength="7" value="D">
						- 
						<input type="TEXT"
name="PLZ" size="5" maxlength="7">
						<input type="TEXT"
name="Ort" size="23" maxlength="50">
</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%"
nowrap>
						Telefon-Nummer
</td>

					<td height="35" width="74%" >
						<input type="TEXT"
name="Telefon" size="35" maxlength="50">
</td>
				</tr>
				<tr valign="middle" align="left"> 
					<td height="35" width="26%" >
						eMail
</td>
					<td height="35" width="74%" >
						<input type="TEXT"
name="email" size="35" maxlength="50" onBlur="check_email(this)">
</td>

				</tr>
				<TR> 
		        	<TD colspan=3> 
    			      Hier können Sie weitere Wünsche
und Kommentare eingeben<br>
	        		  <textarea name="WUNSCH" cols="80"
rows="2"> </textarea>	    	    	</TD>
				</TR>
				<TR> 
		        	<TD colspan=3 align="center"> 
    			        <input name=SENDBUTTON type=SUBMIT
value="Anfrage absenden">

					</TD>
				</TR>
		    </TABLE>
        </FORM>
            </td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="Bilder/balkenunten.gif" alt=""
width="823" height="33" border="0" usemap="#Impressum"></td>

	</tr>
	<tr>
		<td colspan="9">
			<img src="Bilder/Unbenannt-2_18.gif" width="872"
height="1" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="64"
height="1" alt=""></td>
		<td>

			<img src="Bilder/Abstandhalter.gif" width="21"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="164"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="165"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="165"
height="1" alt=""></td>

		<td>
			<img src="Bilder/Abstandhalter.gif" width="164"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="163"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="2"
height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="27"
height="1" alt=""></td>
		<td>

			<img src="Bilder/Abstandhalter.gif" width="64"
height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>


</html>

Klappt aber nicht is nicht zentriert !

MfG Kinglsayer

incredible-olf · 08. Juli 2009

Probier mal in deinem unteren Code unmittelbar vor beginn des Formulars ein "<center>" einzufügen.

Kingslayer · 08. Juli 2009

Geht nicht ich habe eine Html page und will eine andere "Tabelle" zentriert in den Fordergrund müsste css sein...

pixelflat · 08. Juli 2009

Ich würde erst mal 2 Dinge empfehlen:

Wenn CSS, dann richtig. Im Moment hast du ein Misch-Masch, was bei größeren Seiten schwer zu warten ist. Was mich am meisten verwundert, ist das "position:absolute". Wenn du sowieso nur Tabellen verwendest und die eine Tabelle auch noch in einer anderen steckt, brauchst du das eigentlich gar nicht.
Du wirst vermutlich einen WYSIWYG-Editor verwenden (so wie der Quelltext aussieht). Gerade für den Anfang sind einfache Editoren (Notepad++) besser, weil man mehr Dinge selber schreiben muss und dadurch die Syntax lernt und das Ganze meistens auch besser aussieht (anständig eingerückt usw).

Außerdem ist es ein Qual den Quelltext zu untersuchen, wenn jeglicher Content als Bild eingebunden ist, was aber nicht verfügbar ist... 😡

Hier das Ganze anständig formatiert. Habe nur den CSS-Teil gelöscht und schon ist alles so wie´s soll (Bilder habe ich auch ersetzt):

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Kingslayer · 08. Juli 2009

o0 das eine ist meine Website die ich habe das andere ist ein Kontaktformular was ich da zentriert reinhaben will ! Geht das nicht iwie einfach ? Benutze momentan garkeinen Editor außer Notepad, hab alles mit Photoshop erstellt und jetz nehm ich notepad !

pixelflat · 09. Juli 2009

Ja geht doch einfach. Wie gesagt, ich habe nur das bisschen CSS gelöscht und den Quelltext formatiert - sonst nix. Die Bilder musste ich ersetzen, damit erst mal die Tabellen-Struktur überhaupt sichtbar ist.

Ich glaube, dass es an "position: absolute" liegt. Du kannst kein Element, dem du eine "absolute Position" gegeben hast, relativ zum übergeordnetem Element zentrieren. Fürn Anfang einfach mal auf CSS verzichten und dann komplett umsteigen.

Gelöschter Nutzer 747 · 09. Juli 2009

Guck mal hier:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Schöne einfache Beispiele für 3 spaltige Menüs auch zentriert.

Man brauch keine Tabelle zum zentrieren. Zudem können Crawler und Suchmaschinen Tabellen schlecht intepretieren, wenn Sie als Layout missbraucht werden.

In Tabellen gehört Text, keine Bilder etc 😉.

MFG Michael

EDIT (autom. Beitragszusammenführung):

Ist das position absolute...garnicht so einfach durch zu schauen 😉. Dreamweaver macht zb noch ein Div um die Tabelle mit align center. Aber das ist auch alles nicht so dolle.

MFG Michael

pixelflat · 09. Juli 2009

Natürlich gibts align (horizontal) in Tabellen (valign = vertikal).

Und "table.buchungstabelle" geht genauso.

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Die Verschachtelung kann natürlich fehlerhaft sein. Das bei so einer typischen PS-Slice-Export-Tabelle zu überprüfen ist einfach nur unendlich nervig (colspan, rowspan, colspan, colspan...).

Edit: Beitrag schon wieder editiert. 😉
Wie gesagt, erst mal mit HTML arbeiten, dann _komplett_ auf CSS umsteigen bei allem was Design-Angaben angeht (Größe, Schrift, Farbe, Position...). HTML dient dann nur noch für den Inhalt (Tabellen haben natürlich auch ihre Berechtigung - als Tabellen).

Gelöschter Nutzer 747 · 09. Juli 2009

Grins hab ich ja wieder zurückgezogen... Weißt du wann ich das letzte mal Tabellen benutzt habe grins? Ist schon etwas her 😉.

PS: Sagte ich doch, in Tabellen gehört Text 😉, mehr nicht W3C.

MFG Michael

Hilfte bei HTML / CSS

Kingslayer

New member

incredible-olf

Administrator

Kingslayer

New member

pixelflat

Super-Moderator

Kingslayer

New member

pixelflat

Super-Moderator

Gelöschter Nutzer 747

Guest

pixelflat

Super-Moderator

Gelöschter Nutzer 747

Guest

Online-Statistiken

Neueste Themen

Beliebte Forum-Themen