DIVS sind verschoben

[Fäbbe]

Ich bin gerade Dabei eine Homepage mit DIVs zubauen, da ich leider mit DIVs keine Erfahrung habe, da ich bisher mit Tabellen gearbeitet habe, habe ich noch ein paar kleine Probleme. Wie man auf Unbenanntes Dokument sehen kann ist der rechte DIV und dadurch auch der Footer verschoben. Habe schon mit margin-top margin-left etc... versucht die DIVS richtig anzuordnen was aber leider nicht funktioniert hat. Könnt ihr mir da weiterhelfen?

Hier der HTML Code:

<div id="box">
<div id="nav1"><img src="nav_oben.gif" width="872" height="82" /></div>
<div id="main">
<div id="links"></div>
<div id="content"></div>
<div id="rechts"></div>
<div id="footer"><img src="footer.gif" width="872" height="39" /></div>
</div>
</div>

und der CSS Code:

body {
background-color: #bcd2eb;
}

#box {
height: 640px;
width: 872px;
margin: auto;
}

#main {
height: 558px;
width: 872px;
}

#links {
width: 24px;
height: 518px;
float: left;
background-image: url(links.gif);
}

#rechts {
width: 24px;
height: 518px;
float: right;
background-image: url(rechts.gif);
}

#navi1 {
text-align: center;
width: 872px;
height: 82px;
}

#content {
text-align: center;
width: 824px;
height: 518px;
background-color:#FFFFFF;
margin: auto;
}

#footer {
text-align: center;
width: 872px;
height: 39px;
}

 

[Junny]

Hallo Fäbbe,

Du versuchst, Deine Arbeitsweise zu verbessern und ein Layout ohne Tabellen zu erstellen. Wahrscheinlich hast Du irgendwo einen leider weit verbreiteten Satz gelesen wie:

Layout mit Tabellen ist out, das macht man jetzt mit div-Containern!.

Das ist absoluter Blödsinn. Das Aussehen einer Seite macht man weder mit Tabellen noch mit Containern noch mit irgendwelchen anderen HTML-Tags.

Der erste Schritt ist stets, dass man den Inhalt einer Seite mit HTML als das auszeichnet, was am besten seine Bedeutung widerspiegelt: Navigationslisten sind ungeordnete Listen, Überschriften sind Überschriften 1. bis 6. Grades, Absätze sind Absätze und so weiter. Die nach der Bedeutung des jeweiligen Tags richtige Anwendung wird auch Semantik genannt. Zusammengehörende Blockelemente gruppiert man mit div-Containern, wenn es kein Tag gibt, dass für den Inhalt passend ist.

Anschließend kann man das gewünschte Aussehen durch CSS-Regeln beschreiben. Dabei kann jedes HTML-Element selektiert werden, um es zu positionieren, ihm einen Hintergrund zu geben oder es auszublenden etc. Je besser und semantisch reicher der Inhalt gekennzeichnet ist, desto leichter fällt auch die Formatierung.

Wenn Du also wirklich an einer guten eigenen Internetseite interessiert bist, fang nochmal von vorne an: Zeichne den Inhalt so gut wie möglich mit HTML aus. Wenn Du damit fertig bist, kannst Du mit der Formatierung per CSS beginnen.

Gruß
Junny

 

[Fäbbe]

Die Inhalte stehen leider noch nicht komplett fest. Im Moment arbeite ich am Design der Seite. Und wollte das Design nun mit DIVs umsetzten und bin dann beim oben beschriebenen Problem hängen geblieben. Deswegen die Frage ob mir jemand dabei helfen kann.

Gruß

Fabian

[edit: hab es nun selbst hinbekommen @Junny: danke für die Tipps werde es mir zu Herzen nehmen.]

 

[Efchen]

Die Inhalte stehen leider noch nicht komplett fest. Im Moment arbeite ich am Design der Seite.

Das ist insofern ungünstig, als dass Du dann doppelte Arbeit machst. Du schreibst einen HTML-Code für nicht vorhandenen Inhalt und musst den Code dann, wenn Du den Inhalt einfügst, nochmal neu schreiben, weil die <div> da natürlich nicht stehen bleiben können. Das ist ja nicht der Sinn von HTML.
Deswegen machst Du Dir die Arbeit leichter, wenn Du mit dem Inhalt anfängst, den mit HTML auszeichnest und erst dann das Design machst.

Wenn Du mit dem Design anfängst, schreibst Du ja nicht nur unnötigen HTML-Code, den Du hinterher wieder entfernen und durch aussagekräftige Tags ersetzen musst, Du musst dann ja auch Dein ganzes Stylesheet wieder ändern, wenn Du irgendwo auf die Tags reflektierst.

Und wollte das Design nun mit DIVs umsetzten

Design macht man aber mit CSS und nicht mit HTML, <div>s sind HTML. Deswegen hat Junny schon recht, das ist Quatsch.

Deswegen die Frage ob mir jemand dabei helfen kann.

Da steckte schon sehr viel Hilfe drin. Denn es haben zwar viele inzwischen begriffen, dass man keine Tabellenlayouts macht, aber jetzt machen dafür sehr viele - wie auch Du - Layout mit divs, was genausowenig im Sinne von HTML ist, wie Tabellenlayouts. Es ist beides gleichermaßen Unfug und nichts im Sinne von HTML. Man hat früher so viel mit HTML falsch gemacht, dass alle Umsteiger heute eigentlich gar nicht mehr wissen, was HTML eigentlich ist und da die größte Wissenslücke ist.

Und - zuerst den Inhalt zu nehmen, den mit HTML auszuzeichnen, bevor man das Layout/Design macht, ist ja kein Problem, denn HTML ist ja nicht für die Darstellung gemacht, wenn etwas mit HTML ohne CSS sch*lecht aussieht, dann liegt das nicht an den verwendeten Tags, sondern am fehlenden CSS. Tags in HTML wählt man nicht, um damit ein bestimmtes Aussehen zu erreichen, sondern einzig dafür, um eine logische Bedeutung festzulegen.

Gruß,
-Efchen