Problem mit einer DIV

[crus4rd]

Salute,

ich habe nun angefangen von den <table> wegzugehen und in DIV zu Coden.

Nun habe ich jedoch folgendes Problem!

Ich habe im Content 5 Div Boxen für

[Platzhalter] [Content 1] [Platzhalter] [Content 2]

Soweit so gut...

Platzhalter 1 verschiebt sich aber bzw. füllt sich nicht aus, wenn nichts
drinnen steht was bedeutet, dass der gesamte Content zur Seite wandert was er nicht soll :/

Hier der Code

#MainCo_0 { float: left; display: inline-block; width: 1002px; height: auto;  background-image: url(../Images/Tmpl/ctpl_19.png); }
#MainCo_1 { float: left; display: inline-block; width: 22px; height: auto; }
#MainCo_2 { float: left; display: inline-block; width: 710px; height: auto; text-align: left; }
#MainCo_3 { float: left; display: inline-block; width: 30px; height: auto; text-align: left; }
#MainCo_4 { float: left; display: inline-block; width: 240px; height: auto; text-align: left; }
#MainCo_5 { float: left; display: inline-block; width: 1002px; height: 51px; background-image: url(../Images/Tmpl/ctpl_21.png); }

Und hier der Code in meiner index

        <div id="MainCo_0">
            <div id="MainCo_1">.</div>
            <div id="MainCo_2"><?php include "./_content.php"; ?></div>
            <div id="MainCo_3"></div>
            <div id="MainCo_4"></div>
            <div id="MainCo_5"></div>
        </div>

Evtl. sehe ich den Wald vor Bäumen ja nicht

Vielen lieben dank im vorraus!

 

[MrMurphy]

Hallo,

hast du ein Online-Beispiel mit Inhalt? Ich kann deine Fragestellung nicht nachvollziehen. Einerseits sprichst du von Platzhaltern und Content, die sind in deinem Quellcodeschnipseln aber nicht zu erkennen.

Evtl. sehe ich den Wald vor Bäumen ja nicht

Ich habe eher das Gefühl du bist im falschen Wald. Denn

ich habe nun angefangen von den <table> wegzugehen und in DIV zu Coden.

das deutet für mich darauf hin, das du ein Tabellenlayout mit DIV-Containern nachbauen willst. Das ist aber falsch und dafür sind DIV-Elemente auch nicht gedacht. Dann kannst du auch gleich beim Tabellenlayout bleiben.

Wenn du auf ein modernes Layout umsteigen willst, heißt das zunächst einen semantisch korrekten HTML-Quelltext zu erstellen, der dann mittels CSS in Form gebracht wird.

Gruss

MrMurphy

 

[crus4rd]

Hallo Murphy,

vielen dank für deine rasche Antwort. Ein Live-Beispiel findest du hier: Crus4rd.de

 

[Tronjer]

Beim Div-Layout gibt es keine Platzhalter. Der Abstand von Elementen zueinander wird über margin und padding erzeugt.

- Entferne float: left von #MainCo_0
- Lösche die "Platzhalter" #MainCo_1 und #MainCo_3
- Entferne alle height: auto
- Entferne alle display: inline-block

Und gewöhne dich dabei gleich daran, Elemente im HTML mit Kleinbuchstaben zu beginnen. Also lieber #main_co_1 oder als lower camel case #mainCo_1 schreiben.

 

[threadi]

Es gibt kein div-Layout, und Du codest auch nicht in div. Du musst HTML dafür verwenden wie es gedacht ist. Also Überschriften für Überschriften, Absätze für Texte etc. Einzig zum Gruppieren von Elementen um z.B. bestimmte Ansichten oder funktionale Gemeinsamkeiten abzubilden kann man div-Elemente verwenden, aber möglichst sparsam. Seit HTML5 kann man aber auch darauf in vielen Fällen verzichten.

Der von dir geschriebene Code ist allerdings auch ziemlich fehlerhaft. Du solltest dir erst einen validen HTML-Code aufbauen und dich danach über mögliche Darstellungsfehler wundern, falls es diese dann überhaupt noch gibt:
[Invalid] Markup Validation of http://www.crus4rd.de/ - W3C Markup Validator

 

[crus4rd]

Problem gelößt :) Sollte evtl. margin benutzen xD

 

[threadi]

Nein, die HTML-Fehler sind immernoch da. Wenn Du gerade etwas siehst was dir passt, dann muss das nicht zwingend bei jedem Besucher/Browser so sein. Korrigiere die HTML-Fehler damit Du hierbei auch wirklich sicher sein kannst.