Hilfte bei HTML / CSS

Kingslayer

Kingslayer

New member
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
 
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
 
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 !
 
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.
 
Guck mal hier:
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

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
 
Zuletzt bearbeitet von einem Moderator:
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).
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Online-Statistiken

Zurzeit aktive Mitglieder
0
Zurzeit aktive Gäste
19
Besucher gesamt
19
Die Summen können auch versteckte Besucher enthalten.

Neueste Themen

Beliebte Forum-Themen

Zurück
Oben Unten