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

DIV will einfach nicht in DIV ;-)

Status
Für weitere Antworten geschlossen.
chillum

chillum

Neues Mitglied
[gelöst] DIV will einfach nicht in DIV ;-)

Hallo liebe Freunde und Feinde von CSS :),

entschuldigt, dass ich hier so reinplatze und euch um Hilfe bitte, aber ich komme einfach nicht weiter.

Ich habe heute angefangen ne Seite zu basteln, wollte gute alte Frames nehmen, aber habe gemerkt, dass die angelich "out" sind :mrgreen: . Also umgeschaut und CSS angefangen.

Habe es mehr oder weniger alles hinbekommen, aber ich hänge nun schon die ganze Nacht an einem verdammten Fehler :roll:.

Es geht um folgendes Rumgefrickel:

NewTaube

die dazugehörige css Datei:

http://www.chillinkillin.net/css/TaubeNew.css

Aufbau sollte wie folgt sein:

#wrapper , is quasi die Spielwiese,
dann kommt ein #header , welcher das obere banner haelt
und jetzt kommt der spannende teil

#middle

soll quasi den mittelteil darstellen und sich strecken wenn inhalt reinkommt,

darunter liegt dann der #footer(?!:mrgreen:) der dann damit bündig anschließt.

im #middle teil liegt links das menu und in der mitte von #middle
wollte ich #news reinposten, die im grunde nur aus kopfzeile, text und/oder bild besteht, mehrere hintereinander, und #middle streckt sich schön mit ... dachte ich zumindest ;) ...

naja wenn ich bei:
#middle{

background-color: #ebe6e0;
margin-left: 0px auto;
padding: 20px;
text-align: left;
border: 3px double RED;
}

height: blaPX;

dann zeichnet er den Mittelteil auch runter, aber
wenn ichs iwe jetzt weglasse, passiert nix obwohl content definitiv
mit drinhängt, weil wenn ich die width von #middle aendere, aendert sich
#content auch ...

Hoffe ein Fuchs steigt hier durch, entschuldigt evtl. häßliches Zeug, is noch alles zu frisch
:roll:.

Danke für reinschauen,

mfg
chillum
 
Zuletzt bearbeitet:
ich kann das nicht so ganz nachvollziehen, deshalb mal eher einige grundsätzliche Dinge:

Damit der IE das CSS-Boxmodell richtig darstellen kann, benötigt deine Seite einen qualifizierten Doctype.
Für z.B. diesen Code in die allererste Zeile des Quelltextes jeder Seite:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">

Innerhalb #middle ist die geflaotete Navi und der #content.
Innerhalb #content sind weitere gefloatete Elemente.
Deshalb musst du vor dem Schließen von #content und vor dem Schließen von #middle jeweils clearen.
Z.B., indem du an den entsprechenden Stellen noch diesen Code einfügst:
Code: 
<div style="clear: both;"></div>

Hier kannst du dem margin-left-Wert nur einen Wert zuweisen oder lässt die Angabe am besten ganz weg:
Code: 
#middle{

background-color: #ebe6e0; 
margin-left: 0px auto;
padding: 20px;
text-align: left;
border: 3px double RED;
}

Wenn diese Dinge korrigiert sind, dann melde dich nochmal wie's aussieht.
 
Zum Thema grundsätzliche Dinge kann ich in Sachen HTML noch was hinzufügen, auch wenn wir im CSS-Forum sind, ist für CSS doch ein semantisch sinnvoller, valider HTML-Code zumindest extrem hilfreich, wenn nicht sogar zwingend notwendig:

Dein HTML ist unbrauchbar, weil es keinerlei Semantik enthält, Du hast nur berühmte div-Suppe gekocht. HTML dient dazu, dem Inhalt eine logische Bedeutung zu geben. Da zeichnet man Überschriften aus, Textabsätze, Adressen, wichtige Stellen, Zitate usw. Von alledem ist bei Dir nichts zu sehen (durchaus verständlich, es ist ja auch noch kein Inhalt da). Wenn Du aber zuerst mit CSS versuchst, das Layout zu machen und dafür das allgemeine BLock-Element, das auch zum Gruppieren mehrere Elemente benutzt wird, verwendest, musst Du, wenn Du Deinen Inhalt schreibst, wieder viele Tags umändern in was sinnvolleres. Dann fliegen mehr als die Hälfte Deiner divs raus und Dein Stylesheet geht nicht mehr, bzw. muss auch angepasst werden. Du machst Dir also doppelte Arbeit. Sinnvoller ist es, mit dem Inhalt zu beginnen, dann mit der logischen Auszeichnung und erst zum Schluss mit der Optik.
 
prm schrieb:
...

Innerhalb #middle ist die geflaotete Navi und der #content.
Innerhalb #content sind weitere gefloatete Elemente.
Deshalb musst du vor dem Schließen von #content und vor dem Schließen von #middle jeweils clearen.
Z.B., indem du an den entsprechenden Stellen noch diesen Code einfügst:
Code: 
<div style="clear: both;"></div>
[/code]Wenn diese Dinge korrigiert sind, dann melde dich nochmal wie's aussieht.
Zum Vergrößern anklicken....

Das clear hats gebracht ;-) ... Vielen Dank :mrgreen:

Was sagt das clear eigentlich genau aus ?

Nachdem das erledigt war kams fast noch lustiger,
ich vermute mal durch die !DOCTYPE - Angabe war er nichtmehr so gnädig
mit kleine Fehlerchen verzeihen, usw. :D.

Ich probierte und testete und wunderte mich warum margin, padding etc. nix bewirkt ...

Hab dann rausgefunden das ich mir gestern irgendwo abgeschaut hatte die px wegzulassen... :roll: ..


Dein HTML ist unbrauchbar, weil es keinerlei Semantik enthält, Du hast nur berühmte div-Suppe gekocht. HTML dient dazu, dem Inhalt eine logische Bedeutung zu geben. Da zeichnet man Überschriften aus, Textabsätze, Adressen, wichtige Stellen, Zitate usw. Von alledem ist bei Dir nichts zu sehen (durchaus verständlich, es ist ja auch noch kein Inhalt da). Wenn Du aber zuerst mit CSS versuchst, das Layout zu machen und dafür das allgemeine BLock-Element, das auch zum Gruppieren mehrere Elemente benutzt wird, verwendest, musst Du, wenn Du Deinen Inhalt schreibst, wieder viele Tags umändern in was sinnvolleres. Dann fliegen mehr als die Hälfte Deiner divs raus und Dein Stylesheet geht nicht mehr, bzw. muss auch angepasst werden. Du machst Dir also doppelte Arbeit. Sinnvoller ist es, mit dem Inhalt zu beginnen, dann mit der logischen Auszeichnung und erst zum Schluss mit der Optik.
Zum Vergrößern anklicken....
Also quasi mehr HTML eigene Konstrukte benutzen, wie menu, h1, h2, usw. ?

Ja werde ich mir angewöhnen müssen, ich hatte nur mal damaaaals in der Schule mit html zu tun, daher fehlt mir da noch so das Gefühl für, komme eigentlich aus der Java-Ecke ;-), aber Danke für den Hinweis, macht natürlich Sinn, Markup und so :smile:.


Dann hier das vorläufige Ergebnis:
NewTaube

css:
http://www.chillinkillin.net/css/TaubeNew.css


Ich weiß, damit gewinne ich keine Preise, aber bin ersteinmal froh das es läuft.
Mein übergeordnetes Ziel ist da PHP dahinterzuknallen, aber ich denke vorerst werd ichs wohl statisch belassen, vor allen Dingen habe ich gemerkt, dass ich so designtechnisch ja mal voll die Niete bin :lol: ...

Vllt. den Hintergrund ein wenig heller machen ... *grübel* ... ehrmnn ...

nagut ... dann vielen, vielen Dank erstmal für die hilfreichen Kommentare ... und ... ich komm wieder, keine Frage :)


Grüße,
chillum
 
chillum schrieb:
Also quasi mehr HTML eigene Konstrukte benutzen, wie menu, h1, h2, usw. ?
Zum Vergrößern anklicken....
Ähm...nein...<div> ist auch ein "HTML-eigenes Konstrukt" (= "Tag"), genauso wie <html> oder <body>.
HTML ist dazu da, den Inhalt logisch auszuzeichnen. Die Tags vermitteln eine bestimmte Bedeutung. Diese Bedeutung vermittelt man mit HTML. Dazu ist HTML da. Nicht für das Aussehen. <menu> ist übrigens noch kein gültiges Tag bis HTML4 und XHTML1. Menüs zeichnet man mit dem aus, was sie am nächsten kommen: einer Liste.

Ich weiß, damit gewinne ich keine Preise, aber bin ersteinmal froh das es läuft.
Zum Vergrößern anklicken....
Das Problem ist, viele denken das. Aber Dein Text hat z.B. keine Überschrift. Ein "<div class="headline">" macht aus dem Text keine Überschrift. Nur <h1> bis <h6> machen Überschriften.
Außerdem meinst Du mit "es läuft", dass es speziell bei Dir so aussieht, wie Du Dir das vorstellst. Das ist im WWW aber eben nicht alles. Nicht nur, dass andere Menschen ganz andere Hard-/Software verwenden und andere Einstellungen, andere Endgeräte, die Seite dann bei anderen völlig anders aussehen kann, es gibt ja auch nicht nur visuelle Clients. Suchmaschinen z.B. sind auf eine ordentliche HTML-Struktur angewiesen. Ich möchte meinen, auch wenn ich es nicht belegen kann, dass eine Suchmaschine auch nach Überschriften und überhaupt einem ordentlich ausgezeichneten Inhalt sucht. Und den findet er bei Dir (noch) nicht, daher würde eine Suchmaschine womöglich nicht bestätigen können, dass Deine Seite "läuft".

Aber nun gut. Rom wurde auch nicht an einem Tag erbaut. Es gibt noch viel zu tun, packe es an! :-)

Gruß,
-Efchen
 
Das clear hats gebracht :wink: ... Vielen Dank :mrgreen:
Was sagt das clear eigentlich genau aus ?
Zum Vergrößern anklicken....

Gefloatete Elemente sind aus dem normalen HTML-Elementfluss genommen.
Sie werden von den anderen Elementen nicht wirklich beachtet.
Durch den clear-Befehl wird das Elternelement verlängert, so dass es das gefloatete Element umfasst.
Zur Vertiefung:
Float—die Theorie (Webdesign) | andreas-kalt.de
Float: Die Theorie
oder vereinfacht: Firefox stellt Hintergrund nicht vollständig dar
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben