• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle im div positionieren

Status
Für weitere Antworten geschlossen.
bigbootykilla

bigbootykilla

Neues Mitglied
Hi Leute,

ich bastel gerade an meiner eigenen Homepage und manchmal versteh ich gewisse Vorgänge einfach nicht. ;ugl

Ich möchte eine Tabelle anlegen mit 2 Spalten und mehreren Zeilen. Dies klappt soweit auch, jedoch positioniert sich, sobald ich die Tabelle in html code anlegen möchte, die Tabelle unten links. Die Fußzeile versetzt sich in die Mitte der Homepage. Das Layout ist praktisch zerschossen.

Ich möchte die Tabelle zentriert unter der Überschrift <h2> eingefügt haben.

Am besten ich hänge die beiden Dateien mal mit an, so daß ihr vielleicht versteht was ich meine.

Wäre cool wenn mir jemand mal den Fehler erklären könnte, da ich schon seit 2 Tagen denke irgendwas ist da falsch.

Danke im voraus

gruß bigbootykilla

P.S. ich habe ein Kommentar hinzugefügt, was lautet:
"Tabelle für Lebenslauf"
 

Anhänge

  • htmldateien.zip
    1,2 KB · Aufrufe: 3
Werbung:
Gibts das auch als Link anstelle eines unsicheren ZIP-Archivs, das ich mir erst downloaden müsste?
Aber eine HTML-Frage wird das wohl nicht sein, eher eine CSS-Frage, denn Positionierung macht man ja nicht mit HTML.
 
Naja Viren sind keine drinnen ;)

Als Link müßte ich die Seite auf dem FTP Server hochladen. Das werde ich jetzt mal machen, dann kannste auf

private Homepage von Andre Sommer

den Fehler gleich entdecken.


Ist im Moment eben nur eine Testseite.

Bisher sind nur das Home, ueber_mich und lebenslauf online. Die anderen Html Seiten habe ich noch nicht erstellt.

Ahja...so nebenbei ... lösche ich die Tabelle wieder raus, sieht alles wieder ganz normal aus.

gruß
 
Werbung:
bigbootykilla schrieb:
Naja Viren sind keine drinnen ;)
Zum Vergrößern anklicken....

Das wird dein Virenscanner dir bestätigen, wenn er den Virus nicht erkannt hat. :)

1. Doctype fehlt

2. nicht valide [Invalid] Markup Validation of http://andre-sommer1980.de/lebenslauf.html - W3C Markup Validator

3.
Code: 
        <div id="header">
            <img src="Bilder/wasserturm.jpg">
        </div>
Ein Header wird mit <h1> ausgezeichnet, da es eine Überschrift ist. Und das "alt-attribut" fehlt im <img ...>

richtig:
Code: 
<h1> 
[I]<a href="index.htm"> [/I]
<img src="bilder/wasserturm.jpg" width="xxx" height="xxx" alt="Willkommen auf meiner Seite" /> [I]
</a>[/I] 
</h1>
das kursiv geschriebene kannst du auch weglassen. (formatierung hier ist nur so, damit es keinen vertikalen (ist doch von links nach rechts u zurück. oder?) scrollbalken gibt)

4. Ein <ul> braucht kein <div> außenrum. Es ist ein eigenständiges Element was man mit hilfe von css formatieren kann. Eine Pizza packst du doch auch nicht in eine Pizzaschachtelt und diese in einen Karton. Was bringt das? ;)


Behebe mal die Fehler vom Validator und schau mal obs danach geht.

Gruß und viel Erfolg
Loon3y
 
Du hast für
HTML: 
<div id="footer"><a href="mailto:[email protected]"> e-Mail an Andre Sommer</a></div>
per CSS eine Höhe von 620px definiert. Darum wird deine Tabelle erst 620px weiter unten angezeigt.

Du hast nun mehre Möglichkeiten.

1. Du verschiebst die Tabelle in das <div id="footer">
2. Du verschiebst die Tabelle vor das <div id="footer">
3. Du änderst (verringerst) die Höhe des <div id="footer">

Außerdem ist dein <div id="footer"> wohl zu breit (1024px), wodurch dein Content (ungewollt) verbreitert wird.

Lösungsmöglichkeiten:
1. Breite des Footers auf 874px setzen (wie bei Content)
2. Breite des Footers auf 100% setzen
3. Breite des Footers gar nicht definieren

Ich hoffe ich konnte dir helfen.

EDIT: @ Loon3y: Er wollte keine halbe Quelltext-Analyse, sondern wissen warum die Tabelle unten angezeigt wird ...
 
Zuletzt bearbeitet:
Ich denke...

Es könnte auch ganz einfach daran liegen, das du die <table> nicht geschlossen hast. --> </table>.

Liebe Grüße
icon12.gif


iplay
 
Werbung:
Patrick Leuppert schrieb:
EDIT: @ Loon3y: Er wollte keine halbe Quelltext-Analyse, sondern wissen warum die Tabelle unten angezeigt wird ...
Zum Vergrößern anklicken....

Dann hätte er sich in das CSS-UNTERforum gesellen sollen, wenn er denkt das es was mit dem Styleangaben zu tun hat.

Es könnte auch Fehler im html sein, der soetwas verursacht. Valides CSS reicht oftmals nicht aus, um eine Seite korrekt anzuzeigen. Valides html ist ebenfalls die Grundvoraussetzung für fehlerfreie Anzeige in allen Browsern.
Sei es nur, dass er vergisst ein Element zu schließen oder sich verschrieben hat, schon wird etwas nicht richtig dargestellt.

Edit: bzgl der "analyse" zum header und doctype, dies war nur ein Hinweiß auf andere Fehler die ohne Aufwand korregiert werden können um Folgefehler zu verhindern.
 
okay es lag in der Tat an dem </table> da es nicht geschlossen war. Dafür erstmal ein großes Danke.

Aber nun zu 2 Problemen, die ihr bereits schon erkannt habt. Meine Homepage zeigt im valid mode sehr viele Fehler an, speziell in meinem Header. Ich versteh aber gerade nicht warum, da ich mir den in Dreamweaver erstellen lassen hab.

Aber nun zu meinem größeren Problem. Der Fußzeile! Ich hab das bereits erkannt, dass es ein wenig komisch ist, dass ich sie auf height=820px gestellt habe. Das habe ich aber nur gemacht, da die Fußzeile bei 20px unter dem "Content" verborgen bleibt. Wenn ich die width herauslösche, so ist die Fußzeile plötzlich ein paar Pixel größer. Stell ich sie dann auf height=20px, dann ist sie wieder hinter dem "Content" verborgen.

Wo liegt mein Fehler?

gruß
 
Es scheint mir so, als willst du den Footer unbedingt unten haben.
Wieso machst du ihn dann nicht fixed??

Code: 
#footer {
  index.css (Linie 66)
  background-color:silver;
  bottom:0;
  height:20px;
  left:471px;
  margin-top:0;
  position:fixed;
  text-align:center;
  width:874px;
}

EDIT: Könntest du bitte die Datei unter dem URL private Homepage von Andre Sommer mal aktuallisieren, dass man den Fortschritt verfolgen kann ?!
 
Werbung:
so hab die Seite einmal aktualisiert. Jetzt sieht man ja auch schon das nächste Problem. Da die Seite nicht dynamisch ist, muß ich jetzt wohl alles anpassen oder wie mache ich das am besten??

Ich hab in der css Datei den "height" bzw "width" rausgelöscht, jedoch tut sich kaum was. Außer das mein Footer an die linke untere Seite unter die Navigation gesetzt wird.

Bitte da mal um Hilfe bevor ich weitermache.

gruß
 
zu deiner Tabelle noch:

Schulausbildung Feld muß invisible gemacht werden
Zum Vergrößern anklicken....

das sind keine tabellarische Daten, sonderen ist eine Überschrift. Setze das außerhalb der Tabelle in ein geeignetes <hx.

Dann liste deine tabellarische Daten auf, schließe die Tabelle, nä chste überschrift, nächste Tabelle.

Was willst du dynamisch machen? Wenn du willst, dass sich etwas an die höhe und breite des Browserfensters anpasst, vergebe für height und widht Prozentwerte.

Gruß
Loon3y
 
Werbung:
bigbootykilla schrieb:
Aber nun zu 2 Problemen, die ihr bereits schon erkannt habt. Meine Homepage zeigt im valid mode sehr viele Fehler an, speziell in meinem Header. Ich versteh aber gerade nicht warum, da ich mir den in Dreamweaver erstellen lassen hab.
Zum Vergrößern anklicken....
Zunächst mal gibt es keinen "valid Mode", wenn Fehler angezeigt werden, dann kann Deine Seite ja nicht valide sein (valide=fehlerfrei).
WYSIWYG-Editoren sind dafür bekannt, dass sie schlechten Code erzeugen. Mich wundert das nicht.
Außerdem ist HTML dafür da, die logische Struktur festzulegen und sowas kann ein Editor nicht entscheiden. Da ist der Code nur so gut wie der, der die richtigen (oder eben leider falschen) Elemente auf die Seite stellt.

Gruß,
-Efchen
 
Hi, ich hab doch glatt die ganze Nacht rumprobiert und so richtig klappt es einfach nicht. Zuallerest hab ich die Fusszeile nach unten befördern können, indem ich "clear: both;" in der css Datei eingefügt habe. Danach war die Fußzeile wenigstens immer unten. Was macht clear:both denn genau??

So aber nun zu meinen Problemen, die ich festgestellt habe.

Eigentlich könnt ihr euch selbst ein Bild machen und die Seite einfach mal mit dem IE7 öffnen bzw. mit Firefox3. Man kann in groben Zügen erkennen das es sich um die gleiche Seite handelt, jedoch zeigt er im Internetexplorer in der Navi die Listpoints nicht an und auch die Ausrichtung übernimmt er nicht. Die Listpoints im Content nimmt er im IE7 an während sie im Firefox3 nicht sichtbar sind.

Ein ähnliches Problem besteht im Lebenslauf, dort ist die Tabelle im IE7 nach unten verschoben worden.

Ein weiteres Problem ist die Tatsache, dass meine Fusszeile leicht versetzt ist und nicht bündig ist, während es im IE7 besser ist, da ist die rote border Linie wenigstens an der unteren Kante der Fusszeile.

danke für eure Hilfe

gruß und dann mal gute Nacht ;)
 
Zuletzt bearbeitet:
Werbung:
Das unterschiedliche Anzeigen, mag vllt immernoch daran liegen, dass du deiner html-datei keinen Doctype gegeben hast. Desweiterem sind immernoch Fehler in der Datei enthalten.

Einen unterschied im Menu kann meist sein, da die Browser verschiedene Standardwerte für ihre Elemente haben. Setze bei folgendes in css fest:

Code: 
ul {
margin: 0px;
padding: 0px;
[I]list-style: none;[/I]

list-style kannst du bei deinen listen ja selbst auswählen, gibt ja verschiedene:

list-style-type: Aufzählungszeichen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Grüße.
 
So ich habe das mit dem doctype angepasst. Jedoch frage ich mich wofür es da soviele verschiedene Versionen gibt!?

Folgenden doctype habe ich bei mir eingefügt:

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ist das okay? Kann ich den verwenden?

So, aber nun zurück zu meinem "footer". Ich habe das ein wenig angepasst, jedoch glaube ich, ist es, so wie ich es gemacht habe, eher suboptimal.

Ich habe die Breiten und Höhen manuell angepasst und ich verstehe nicht, wie es sein kann, daß wenn ich in der Datei index.html in meinem Container "Height: 982px" angebe und für "width: 1029px" und im Footer "width: 1023px". Die "width" im Footer müßte doch gleich groß sein wie im Container! Oder irre ich mich da?

Liegt das an den "border: 3px;" die man dann dazurechnen muß bzw abziehen muß?

Im Header nahm ich für "width: 1024px" und wie ihr seht, es ist bündig!

Ist das alles in Ordnung so?

Ich glaube der Grund, warum er jetzt noch im IE7 die Listpoints in der Navi nicht anzeigt, liegt daran, daß er im IE7 mit dem Befehl "margin = 0px" zu tun hat. Ich glaube der IE7 hat Probleme mit "margin"

Kann das sein?

gruß bigbootykilla

P.S. Bei dem validtest auf w3c versteh ich nicht, was er mir da teilweise für Fehler ausgibt. Ich kann da nichts erkennen an Fehlern in meiner Seite. :cry:
 
Moin,

bigbootykilla schrieb:
So ich habe das mit dem doctype angepasst. Jedoch frage ich mich wofür es da soviele verschiedene Versionen gibt!?

Folgenden doctype habe ich bei mir eingefügt:

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Ist das okay? Kann ich den verwenden?
Zum Vergrößern anklicken....

neiiiiin!

mit dieser ersten Zeile schickst du den IE6 in den Quirksmodus.
Er kennt kein XML und erwartet den Doctype in der ersten Zeile.

Außerdem ist bei XHTML 1.1 der content="applikation/xml" und nicht content="text/css".

Die ersten beiden Zeilen deines Dokumentes sollten so ausschauen:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Dann bist du im "Always Standard Mode" und hast ihm direkt die richtige Sprache verpaßt.

Höhen werden idealerweise nicht angegeben, damit dein Dokument sich dynamisch anpassen kann.

Dir fehlen offensichtlich die Grundlagen.
Besorg dir Little Boxes.
Das ist unterhaltsam geschrieben und für Anfänger gut geeignet. ;)

koslowski
 
Zuletzt bearbeitet:
Werbung:
Danke das Buch wurde gerade gekauft! Hoffe es ist wirklich gut :shock: Und ich bin gerade dabei zu lernen. Muß es fürs Studium gebacken bekommen.

gruß
 
Moin,

bigbootykilla schrieb:
Danke das Buch wurde gerade gekauft! Hoffe es ist wirklich gut :shock: Und ich bin gerade dabei zu lernen. Muß es fürs Studium gebacken bekommen.

gruß
Zum Vergrößern anklicken....

jep.
Es sind ja drei Bücher:
Band 0 ist bevor man eine Webseite baut.
Band 1 wird eine einfache Webseite gebaut und dabei die Grundlagen erklärt.
Band 2 ist für die etwas Fortgeschrittenen.

koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben