[HTML] Tabellen sind verschoben :-(

P

PunkRatte

Well-known member
17 Februar 2007
134
5
Sers,

bin eben über einer Vereinshomepage und habe das problem das die ich die Tabellen nicht zusammengeschoben bekomme?
Vielleicht hat hier eben mal jemand bisschen lange weile und lust sich das man anzuschauen und findet den Fehler.
Wäre mir echt ne große Hilfe das ich nicht mehr weiter weiß!
Danke im vorraus!

Gruß PR


Edit:
Achja den Link hatte ich ganz vergessen vor lauter denken...:
https://home.arcor.de/fa.fischer/WS Weidhausen/
 
Zuletzt bearbeitet:
In den allermeisten Fällen hilft die Angabe des betroffenen Quellcodesegmentes oder zumindestens einem Link zur Fehlerseite, bis zu meinem Wahrsagerdiplom brauche ich noch eine Weile ;)

Ich tippe aber mal ganz spontan auf die Variante "Text dazwischen", "margin zu groß" oder auch sehr beliebt "HTML-Fehler vorhanden" in Kombination mit "Internet Explorer wird verwendet" :angel:
 
Tja Mike, die Vermutung HTML Fehler hat sich bewahrheitet. Warum habe ich meine Vermutung Tabellendesign nicht auch geäußert :roll:

Die Lösung ist eigentlich ganz einfach. Du baust eine äußere Tabelle ohne weiteren Sinn in der sich zwei weitere Tabellen befinden. Der einen (Menü) gibts du align="left" und der anderen align="right". Ist doch klar, dass sich das dann bei einem breiten Browserfenster auseinander zieht.
 
Wie so häufig kann ich auch hier nur sagen: Tabellen sind nicht zur Formatierung einer Seite gedacht. Dafür benutzt man CSS und div, damit lassen sich solche Probleme dann auch relativ fix lösen.

Desweiteren ist das HTML sehr fehlerhaft - fängt damit an, dass nicht mal ein Dokumententyp angegeben ist.

Da ich gerade Zeit und Lust habe, bastel ich dir es mal um. Dauert nur einen Moment, da ich ein bisschen eingerostet bin, was HTML&CSS angeht.
 
Tyrell schrieb:
Wie so häufig kann ich auch hier nur sagen: Tabellen sind nicht zur Formatierung einer Seite gedacht. Dafür benutzt man CSS und div, damit lassen sich solche Probleme dann auch relativ fix lösen.

Desweiteren ist das HTML sehr fehlerhaft - fängt damit an, dass nicht mal ein Dokumententyp angegeben ist.

Da ich gerade Zeit und Lust habe, bastel ich dir es mal um. Dauert nur einen Moment, da ich ein bisschen eingerostet bin, was HTML&CSS angeht.
Zum Vergrößern anklicken....

Hi,

mit CSS habe ich keine erfahrung. Habe mir das halt irgendwie mal angeeignet und bei Problemen suche ich immer Hilfe in Foren. So lerne ich das am besten. Schon mal vielen dank für deinen Veruch, bin gespannt auf deinen Quelltext.


@joschilein:
Habe eben mal versuch bei der äußeren Tabelle statt eine weight=%, eine angabe mit einer Zahl gemacht. Aber trotzdem das gleiche Problem.
 
Naja wenn Tyrell die Nerven hat sich an den Code zu wagen (Respekt :mrgreen: ), dann warte mal darauf. Deine ganzen Tabellenverschachtelungen sind so seltsam und unnütz, ständig leere Zellen usw.

Statts sich die Fehler in Foren beseitigen zu lassen, könntest du dir aber mal ein paar Tutorials durchlesen. Google mal nach CSS und zur Abschreckung nach Tabellendesign und arbeite dich rein. Das ist im ersten Moment scheinbar schwerer, lohnt sich aber und du lernst viel mehr als wenn andere die Fehler beseitigen
 
Ich bin auch gerade dabei,meine Webseite vom Tabellen-Design auf CSS umzustellen.Es gibt so viele Tutorials um das Thema,dass es relativ (oder wars fix(ed) *g*) leicht zu lernen ist.
Und wenn man es erst mal verstanden hat,macht es tierisch Spass damit zu arbeiten.
 
Vom Aufbau ist es fertig, fehlen nur noch die Schatten an den Boxen. Getestet bisher in Opera und IE6.
 
Sorry, hat nen Moment gedauert, weil noch was dazwischen gekommen ist...
Das Ganze ist eine (so gut es ging) 1:1 Umsetzung deiner Seite.

Hier die HTML-Seite in XHTML1.0 Strict:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
	<head>
		<title>Wintersport - Weidhausen</title>
		<meta name="author" content="Mike Fischer" />
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<link type="text/css" rel="STYLESHEET" href="style.css" />
	</head>
	<body >
		<div class="titlebox">
		</div>
		<div class="shadow">
			<div class="linkbox">
				<p>
					- Home<br />
					- News<br />
					- Bilder<br />
					- Termine<br />
					- Links<br />
					- Impressum<br />
				</p>
			</div>
		</div>
		
		<div class="shadowmain">
		<div class="mainbox">
				<p>
					<b>HERZLICH WILLKOMMEN AUF DER HOMEPAGE DES WINTERSPORT WEIDHAUSEN<br />
					<br />
					<br />
					
					Die Seite ist noch nicht fertig...<br /><br />
					aber des wird scho noch...<br /><br /><br />
					oder schnegge was meinst du?<br /><br />
					ich lieb dich<br />
					ganz ganz sehr<br />
					kuss?<br /></b>
				</p>
			</div>
		</div>

		<div class="shadowfooter">
			<div class="footer">
				<p>
					(c) by Wintersport Weidhausen
					<br />
				</p>
			</div>
		</div>
	</body>
</html>

Hier das CSS-File:

Code: 
div.titlebox{
background: url(./images/header.jpg) no-repeat top left;
width: 980px;
height: 160px;
position: relative;
border-width: 3px;
border-style: double;
margin-bottom: 20px;
border-color: #000000;
}

div.linkbox{
width: 130px;
color: #000000;
font-weight: bold;
position: relative;
padding: 10px;
top: -5px;
left: -5px;
background: #0060FF;
color: black;
}

.shadow {
margin: 4px 0px 0px 5px;
background: url(./images/shadow.png) repeat;
position: relative;
float: left;
}

.shadowmain {
margin-top: 4px;
margin-right: 0px ;
margin-bottom: 0px ;
margin-left:195px;
background: url(./images/shadow.png) repeat;
position: relative;
width:786px;
}

.shadowfooter {
margin: 25px 0px 0px 5px;
background: url(./images/shadow.png) repeat;
position: relative;
float: left;
}

		
div.mainbox{
background-color: #0060FF;
width: 771px;
padding: 15px 0px 15px 15px;
position: relative;
top: -5px;
left: -5px;
}

div.footer{
background-color: #0060FF;
width: 955px;
color: #000000;
position: relative;
padding: 10px;
top: -5px;
left: -5px;
}

body { 
color: #FFFFFF; 
background-color: #FFFFFF;
font-family: verdana;
font-size: 12px;
}

a:link { 
color: #FF0000;
}

a:visited { 
color: #FF0000;
}


shadow.png ist ein 25% transparentes, schwarzes PNG File, es lässt sich aber auch jedes andere beliebige Bild einfügen.
das png

Vorteil am transparenten PNG: Der Schatten überlagert jede Hintergrundfarbe, nicht nur weiß. Somit kann man auch Bilder, etc. als Hintergrund nehmen, die dann vom Schatten überlagert werden, ohne dass man ihn anpassen muss.


Getestet in Opera, IE6 und Firefox 1.0
 
Zuletzt bearbeitet:
Moin,

@ Tyrell

Vielen Dank erstmal für deine Mühe. Habe eben die beiden Codes in den jeweiligen Seiten kopiert. Funktioniert alles super.
Das mit den CSS scheint echt ne super Sache zu sein. Werde mich damit demnächst mal näher befassen. Da hat man eine seite auf der man die den "Aufbau" auf einen Blick hat, und in der anderen eigentlich mehr oder weniger nur die Hauptsächlichen Inhalte, feine Sache.
Ein kleines Problem habe ich noch.
Die Shadow.JPG lässt sich bei mir nicht runterladen :-(

by PR
 
PunkRatte schrieb:
Das mit den CSS scheint echt ne super Sache zu sein.
Zum Vergrößern anklicken....

Japp. Ziel des Ganzen ist es, Design&Aufbau vom Inhalt zu trennen. Wenn du absolute Positionierungen und Größen benutzt, ist es sogar egal, in welcher Reihenfolge der Inhalt im Dokument steht; angezeigt wird er so, wie CSS es vorschreibt.
Mit CSS bekommst du die Designs wirklich genau so hin, wie sie aussehen sollten. Das einzige Problem ist - wie immer - der Internet Explorer, der immer noch enorme Probleme mit CSS hat.
 
@Asmodiel: Danke, hat geklappt!


@Tyrell
Kann ich da jetzt auch noch mit einer %-angabe Angeben damit die Menütabelle bis runter zum Footer geht?
So das sie immer sie selbe Höhe hat wie auch die Tabelle mit den Hauptinhalt.

by PR
 
Um die beiden div-Boxen anzupassen, kannst du eine große (unsichtbare) Box um die Menü- und Inhaltbox machen. Dann kannst du beide bis an den unteren Rand der Box ziehen.
 
@tyrell so hatte ich es anfangs vor...ok

bin jetzt auf der suche nach einen bildergalerie-script in php ohne datenbank, bei den die besucher aber kommentare abgeben können. glaube sowas gibt es nicht. wenn nicht muss ich mich mal selbst daran versuchen.

bin wieder ein bisschen weiter, kannst ja mal schauen: https://home.arcor.de/fa.fischer/WS Weidhausen/
 
Achte darauf, sauberen Code zu schreiben:

https://validator.w3.org/check?uri=http://home.arcor.de/fa.fischer/WS%20Weidhausen/


Der Validator zeigt dir an, welche Fehler du im Dokument hast.

Bei XHTML beachten:

*Tags müssen immer geschlossen werden, also auch einfache Tags wie <br>. Dazu muss man dann nicht <br></br> schreiben, sondern <br /> reicht. Das gleiche gilt für img, meta, etc.

*font Tag wird nicht mehr benutzt - das geht über CSS

*img Tag benötigt zwingend das alt Attribut. Hier wird ein alternativer Text für sehbehinderte Menschen angegeben.
 
Zuletzt bearbeitet:
hmm dann werd ich mich gleich mal auf fehlerbeseitigung begeben.

ähm ja versuche die ganze zeit das ich die "linkbox" auf selbe größe wie die "mainbox" bekomme.
Habe ein <table> rum gelegt und in der css-datei jeweils height: 100%; angegeben.
Irgendwie passiert nichts..., haste vielleicht nen tip für mich? :roll:
 
PunkRatte schrieb:
hmm dann werd ich mich gleich mal auf fehlerbeseitigung begeben.

ähm ja versuche die ganze zeit das ich die "linkbox" auf selbe größe wie die "mainbox" bekomme.
Habe ein <table> rum gelegt und in der css-datei jeweils height: 100%; angegeben.
Irgendwie passiert nichts..., haste vielleicht nen tip für mich? :roll:
Zum Vergrößern anklicken....

wozu ein <table>, wenns in CSS gemacht ist? 8O
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben