Div Textbox positionieren

[farchris]

Hallo,
ich schreibe gerade eine Seite ins <div> Format um.

Da die komplette Seite ein Design ist, habe ich im Div-Tag des linken Bildes das Rechte eingefügt und mit "margin-left" sozusagen von dem linken Bild abgeschoben. ... hört sich sehr kompliziert an, aber ich denke nachdem der Quelltext aufgerufen wurde, ist es verständlich.

Nun möchte ich allerdings eine Inhaltsbox in der Mitte der Seite haben.
Ich habe es mit der Postition "absolute" probiert. Dies hat funktioniert, aber leider passt sich die Höhe und Breite der Divbox nicht am Design an und auch manuelle Eingaben wie "width: 200px; helfen nicht. Zur Verdeutlichung habe ich einige Zahlen eingetragen. Diese sollte ja eigl. am Ende der Seite auf die zweite Spalte verschieben.

Ich hoffe ihr könnt mir helfen.

Danke!

Hier die Seite: Test

 

[threadi]

Ich glaube du suchst webhosting24 - Login.

 

[Efchen]

Guten Morgen!

Ich würde Dich gerne auf ein paar vermeintliche Kleinigkeiten aufmerksam machen, die, wenn Du sie richtig verstehst, Dir das Leben einfacher machen werden. Also nicht böse sein, wenn es kleinkariert aussieht, ich habe aber schon viele Leute gelesen, die genau an diesen kleinen Verständnisproblemen gescheitert sind.

Titel: Div Textbox positionieren

Ein <div> ist keine Textbox! Ein <div> ist ein allgemeines Block-Element ohne spezifische Bedeutung. Es wird üblicherweise eingesetzt, um mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren. <p> ist eine Textbox. Sie verhält sich genauso wie <div>, hat aber eine semantische Aussage: Ich bin ein Textabsatz. Beides sind Block-Elemente.

ich schreibe gerade eine Seite ins <div> Format um.

Heissa! Da wird mir immer ganz warm und kalt, wenn ich sowas lese.
Ein <div>-Format gibt es nicht!
Und eine Website mit <div> vollzustopfen, ist genauso sinnlos wie das Layout mit Tabellen zu machen. Was Du tun willst, ist: HTML für die Struktur und CSS für das Layout zu verwenden. Strikte Trennung von Inhalt und Layout (nicht nur durch Verwendung eines externen Stylesheets).
Das beinhaltet aber auch, dass man HTML verwendet, wie es gedacht ist, nämlich um die Struktur des Inhalts genau zu definieren. <div> ist dafür in den meisten Fällen ungeeignet! Für Inhalt gibt es immer ein besseres Tag als <div> mit dem man den Inhalt beschreiben kann!
Nur mit <div> um sich werfen ist bekannt als "<div>-Suppe" und hat keinen besseren Ruf als Tabellenmissbrauch (zu Layoutzwecken).

Ich hoffe ihr könnt mir helfen.

Und ich hoffe, Du wirst eines Tages auch verstehen, dass mein Einwand nicht kleinkariert war, sondern grundlegendes Wissen für das Design mit CSS enthält, besser heute als morgen.
Wenn etwas unklar ist, einfach nachfragen!

Danke!

Bitte.

Der Hinweis mit float ist übrigens goldrichtig, nicht dass threadi eine Bestätigung von mir bräuchte, aber in einem anderen Thread wollte jemand nicht so recht glauben, dass float so geeignet ist. In CSS-Layouts ist float aber ein sehr wichtiges Mittel. Wichtiger als ein <div>!

Schönen Tag,
-Efchen

 

[cain]

in sachen float muss ich zustimmen... ich arbeite lieber mit float als mit position: absolute

schreib doch lieber

#box {
float: left;
margin-left: 200px;
}

als position: absolute;
mit margin-left oder margin-right kannst du doch deine box auch in verschiedene richtungen verschieben


ich hoffe ich habe geholfen,
gruß cain

 

[farchris]

Hallo, erstmal danke für alle Antworten!

Guten Morgen!

Ich würde Dich gerne auf ein paar vermeintliche Kleinigkeiten aufmerksam machen, die, wenn Du sie richtig verstehst, Dir das Leben einfacher machen werden. Also nicht böse sein, wenn es kleinkariert aussieht, ich habe aber schon viele Leute gelesen, die genau an diesen kleinen Verständnisproblemen gescheitert sind.



Ein <div> ist keine Textbox! Ein <div> ist ein allgemeines Block-Element ohne spezifische Bedeutung. Es wird üblicherweise eingesetzt, um mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren. <p> ist eine Textbox. Sie verhält sich genauso wie <div>, hat aber eine semantische Aussage: Ich bin ein Textabsatz. Beides sind Block-Elemente.



Heissa! Da wird mir immer ganz warm und kalt, wenn ich sowas lese.
Ein <div>-Format gibt es nicht!
Und eine Website mit <div> vollzustopfen, ist genauso sinnlos wie das Layout mit Tabellen zu machen. Was Du tun willst, ist: HTML für die Struktur und CSS für das Layout zu verwenden. Strikte Trennung von Inhalt und Layout (nicht nur durch Verwendung eines externen Stylesheets).
Das beinhaltet aber auch, dass man HTML verwendet, wie es gedacht ist, nämlich um die Struktur des Inhalts genau zu definieren. <div> ist dafür in den meisten Fällen ungeeignet! Für Inhalt gibt es immer ein besseres Tag als <div> mit dem man den Inhalt beschreiben kann!
Nur mit <div> um sich werfen ist bekannt als "<div>-Suppe" und hat keinen besseren Ruf als Tabellenmissbrauch (zu Layoutzwecken).



Und ich hoffe, Du wirst eines Tages auch verstehen, dass mein Einwand nicht kleinkariert war, sondern grundlegendes Wissen für das Design mit CSS enthält, besser heute als morgen.
Wenn etwas unklar ist, einfach nachfragen!



Bitte.

Der Hinweis mit float ist übrigens goldrichtig, nicht dass threadi eine Bestätigung von mir bräuchte, aber in einem anderen Thread wollte jemand nicht so recht glauben, dass float so geeignet ist. In CSS-Layouts ist float aber ein sehr wichtiges Mittel. Wichtiger als ein <div>!

Schönen Tag,
-Efchen

Ja, ich stimme dir zu, aber ich wüsste keine andere Art bzw. Funktion, mit der man ein solches Design in die richtige Position bringen könnte.
Mit <div> ist es nach meiner Meinung am einfachsten, wobei es dann wohl doch nicht der beste Weg ist.
Könntest du mir vll. ein paar Funktionen nennen, damit ich diese nachschlagen bzw. suchen könnte?

Wie ist es denn möglich, eine Textbox einzubringen, die man an die Größe des Designs anpassen kann bzw. die einen Scrollbalken haben kann?

Vielen Dank!!

Gruß

 

[Efchen]

Ja, ich stimme dir zu, aber ich wüsste keine andere Art bzw. Funktion, mit der man ein solches Design in die richtige Position bringen könnte. Mit <div> ist es nach meiner Meinung am einfachsten, wobei es dann wohl doch nicht der beste Weg ist.

Positionierung ist Bestandteil von CSS. Das geht daher mit jedem Tag. Du kannst ein <address> genauso positionieren wie ein <h1> oder ein <div>.
Aber welches Tag Du benutzt, liegt ja nicht am Layout/Design, sondern am Inhalt!
Denn bevor CSS zum Tragen kommt, muss eine solide Basis aus HTML vorliegen und dazu gehört eine sinnvolle (semantische) Auszeichnung. Und wenn Du das machst, wirst Du feststellen, dass Du zunächst gar kein <div> benötigst. Das wird erst interessant, wenn man Elemente für CSS gruppiert.

Könntest du mir vll. ein paar Funktionen nennen, damit ich diese nachschlagen bzw. suchen könnte?

Hmmm...zu welchem Zwecke jetzt? Positionierung? Da verwende ich in CSS eigentlich fast ausschließlich float. Gepaart mit margin ein mächtiges Instrument, um den Textfluss zu manipulieren.

Wie ist es denn möglich, eine Textbox einzubringen, die man an die Größe des Designs anpassen kann bzw. die einen Scrollbalken haben kann?

Was ist bei Dir die "Größe des Designs"? Die Größe der Website ist ja in der Regel abhängig vom vorhandenen Platz im Browserfenster und von der Schriftgröße, die der Nutzer eingestellt hat. Das Layout passt sich diesen Gegebenheiten an. Am einfachsten geht das, wenn Du bei jeglichen Größenangaben die Einheit "em" verwendest. In Bezug auf den verfügbaren Platz ist "%" u.U. besser.

Ein Scrollbalken kommt immer dann, wenn der verfügbare Platz für den Inhalt nicht ausreicht. Es gibt keinen Grund, einen Scrollbalken auszublenden, und explizit einblenden muss man ihn auch nicht, er kommt ja von selbst. Man muss ggfs. nur den Platz beschränken.

Oder was genau meintest Du?

Vielen Dank!!

Gern geschehen. Wenn ich schon solche Dinge in die Welt setze, bin ich selbstverständlich auch bereit, diese näher zu erläutern!

Schönen Abend,
-Efchen

P.S.: Aber bevor man komplexe CSS-Probleme erörtert, muss man sich im Klaren sein, was HTML eigentlich genau ist. Und damit haben die meisten "Tabellenvergewaltiger" :-) , die zu CSS umsteigen, erhebliche Probleme, weil sie HTML immer als etwas betrachten, was eine unmittelbare Auswirkung auf die Darstellung am Bildschirm hat.

 

[farchris]

Hallo,
der komplette weiße Text im Design soll eine Textbox sein.
Ich habe es nun mal so versucht:

<div id="content" style= "float: left; margin-left: 150px;">
<form style="width:410px;">
<p>
Test
</p>
</form>
</div>

Die Textbox passt sich gut an das Design an. Wenn ich allerdings viele Zeilenumbrüche einfüge, dann geht die Textbox über dass Design unten hinüber.
Durch "height:" wird die Höhe nicht beeinträchtigt.
Kannst du mir vielleicht sagen, wie ich es so mache, dass das Problem nicht auftritt und wenn die maximale Höhe erreicht ist, dass dann in dieser Textbox ein Scrollbalken kommt?

Danke!

 

[karstenHH]

den automatischen scrollbalken bekommst du in deinem fenster über

overflow:auto;

 

[farchris]

Hallo, danke.
Es funktioniert soweit alles ganz gut.

Habe noch eine Frage:
Ich möchte gerne die ganze Seite genau in die Mitte zentrieren.
Habe es folgendermaßen versucht:

body {
font-family: "arial";
font-size: 13px;
margin: auto;
width:80%;
}


Allerdings ist es nicht genau in der Mitte.
Was muss ich verändern?

Und noch einmal: Danke! :)

edit: Ich kann ebenfalls nichts auf die Bilder über das Div-Tag schreiben.
Also z.B.:
<div id="links" style= "background-image:url(z2.jpg);">
<p>Test</p>
<div id="rechts" style= "background-image:url(z8.jpg);">
</div></div>

geht nicht.

 

[Efchen]

der komplette weiße Text im Design soll eine Textbox sein.

Nur eine? Für jeden Absatz brauchst Du eine Textbox (<p>). Wenn es denn mehrere sein sollen, ist ein <div> zum Gruppieren all dieser Inhalte eine gute Idee.

Ich habe es nun mal so versucht:

Wozu ist da ein Formular, wenn Du nur einen Text "Test" hast?

Durch "height:" wird die Höhe nicht beeinträchtigt.

Eigentlich schon. Dafür ist die Eigenschaft ja da.

Kannst du mir vielleicht sagen, wie ich es so mache, dass [...] wenn die maximale Höhe erreicht ist, dass dann in dieser Textbox ein Scrollbalken kommt?

Klar, wenn eine Höhe angegeben ist, mit overflow:auto; Dann kommt ein Scrollbalken, sobald der Inhalt zu groß wird.

Allerdings ist es nicht genau in der Mitte.
Was muss ich verändern?

Eigentlich nichts. "margin:auto;" zentriert horizontal mittig.

Ich kann ebenfalls nichts auf die Bilder über das Div-Tag schreiben.

Was meinst Du mit "über"? Dein Code erzeugt ein Block-Element, in dem ein Textabsatz und ein leeres Blockelement stehen. Das zweite Image wird man also nicht zu Gesicht bekommen, weil das div 0px groß ist.

Gruß,
-Efchen

 

[farchris]

Hallo,
wie kann man es denn so ändern, dass man etwas auf den Div-Block schreiben kann.
Also es sollte so aussehen:
www.mana-festung.de

Auf der linken Seite soll eben ein Menü.


Danke!

 

[Efchen]

Das Menü auf der von Dir verlinkten Seite ist einfach ein Text vor einer Hintergrundgrafik.

Oder Du meinst mit "über" und "vor" vielleicht den "z-index"?
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

 

[farchris]

Hallo,
auf der Seite:
Test

möchte ich auf den Div-Block der linken Seite das Menü auf das Bild machen ...
also wie hier: www.mana-festung.de

 

[Efchen]

Warum ist der Code eigentlich so unglaublich kompliziert und die Grafik in Einzelteile zerlegt?

Ich seh da eigentlich nur einen body mit einer Hintergrundgrafik und ein Element in der Mitte mit einer fixen Höhe und overflow:auto.

Wozu die Zerschnippelung der Grafik? Wozu diese div-Suppe? Wozu eigentlich das Formular, wo kein Formular ist?

Aber genaugenommen ist das Layout eigentlich eh ungeeignet für das WWW, wenn sich alles an der Hintergrundgrafik orientiert. Das fliegt Dir um die Ohren, wenn jemand sein Browserfenster verkleinert oder die Schrift vergrößert.

Auf jeden Fall würd ich den Code komplett neu schreiben, das taugt nichts. Wie oben geschrieben. body+Hintergrundbild und ein div für den Content. Fertig.

Probiers mal!

 

[farchris]

Also du meinst, ich sollte einfach eine Grafikdatei erstellen.
Diese dann in der html Datei angeben und mit einer div Box für den Content und Menü versehen?

Nur dann hat man ja keine dynamische Seitenerweiterung ...
also wenn man viel schreibt, dann geht es ja zumindestens unten über das Design hinaus.

... also bei anderen Designs ...

Gruß
FarChris

 

[Efchen]

Also du meinst, ich sollte einfach eine Grafikdatei erstellen.

Für den Hintergrund, ja. Denn der hat ja eh eine feste Größe, oder?

[/quote]Diese dann in der html Datei angeben und mit einer div Box für den Content und Menü versehen?[/quote]
Jein. Die Hintergrundgrafik wird per CSS dem body-Tag zugewiesen...oder je nach Größe und sonstigen Faktoren einem zusätzlichen div. CSS idealerweise immer in einem externen Stylesheet. Auf jeden Fall nicht in HTML.
Eine div-Box in der Mitte für Deinen Content, ja.
Aber das Menü wird ja wohl eine unordered List <ul> und somit brauchts kein extra div außen rum.

[/quote]Nur dann hat man ja keine dynamische Seitenerweiterung[/quote]

Was erweitert sich denn bisher an diesem Design dynamisch? Doch auch nichts, oder sehe ich das falsch?

also wenn man viel schreibt, dann geht es ja zumindestens unten über das Design hinaus.

Nicht, wenn eine feste Höhe gesetzt ist und dazu overflow:auto. Hattest Du das nicht schon hinbekommen?

... also bei anderen Designs ...

Du hast noch immense Defizite bei HTML, kannst im Kopf noch nicht Inhalt und Layout trennen, und Du stellst das Layout über den Inhalt und bist nicht flexibel genug bei der Umsetzung des Layouts - so und nicht anders darf es sein.
Mach es Dir nicht unnötig schwer! Du denkst irgendwie zu kompliziert, wie jemand, der von Tabellenlayouts umsteigt und diese nicht vergessen kann.

Naja, wir schaffen das noch... :-)

 

[farchris]

hi,
ich habe nun ganz einfach ein neues Design angefangen.
Mit einem kopf.png (Der Kopf des Styles)
Mit einer mitte.png (Die Datei soll horizontal wiederholt werden werden - also wenn der Text größer wird, soll diese Grafik sich ständig wiederholen.)
Mit einer fuss.png (Der Fuß des Styles)

Es klappt aber nicht wie ich es mir vorgestellt habe. Liegt bestimmt an den Divs.
Hier mal die Seite:
Test

Danke für deine Hilfe!

 

[Efchen]

So,

ich wollte Dich jetzt auch nicht ganz im Regen stehen lassen und hab Dir mal schnell in 20 Minuten ein Beispiel gezimmert, wie ich glaube, dass Du das haben willst.

Ist es das, was Du Dir vorstellst?
Testseite für farchris

ich habe nun ganz einfach ein neues Design angefangen.
Es klappt aber nicht wie ich es mir vorgestellt habe. Liegt bestimmt an den Divs.

Nö. Die divs verhalten sich richtig. Aber wenn Du den divs oben und unten keine Höhe angibst, dann siehst Du natürlich auch nicht die Hintergrundgrafiken, weil ein div ist nur so groß, wie sein Inhalt, und der ist hier nicht existent.

 

[farchris]

wow
So meintest du es also mit dem Hintergrundbild!
Jetzt wird mir auf jedenfall einiges klar!!

Also du hast es eben als Hintergrund gemacht und dann eben mit einer absoluten Positionierung dieses Textfeld ins Design zentriert.

Perfekt, danke!

Nö. Die divs verhalten sich richtig. Aber wenn Du den divs oben und unten keine Höhe angibst, dann siehst Du natürlich auch nicht die Hintergrundgrafiken, weil ein div ist nur so groß, wie sein Inhalt, und der ist hier nicht existent.

ok, dann werde ich das auch mal probieren!

Vielen Dank!!

 

[Efchen]

So meintest du es also mit dem Hintergrundbild!

War also eine gute Idee, das mal schnell umzusetzen ;-)

Jetzt wird mir auf jedenfall einiges klar!!

Das freut mich :-)
Dann kann ich Dir ja jetzt die Wahrheit sagen:

Perfekt, danke!

Mitnichten. Pixelgenaue Layouts sind im Web nicht wirklich zu gebrauchen. Sind die Fenster der Besucher kleiner als das Layout als Mindestgröße vorsieht, müssen die Nutzer ekligerweise scrollen. Ist Dein Fenster z.B weniger breit, scrollst Du, nur um festzustellen, dass da kein Inhalt mehr kommt, sondern nur ein Hintergrundbild.
Und wenn Du erst die Schriftgröße änderst...hmmm wie eklig :-)
Ach ja, machst Du Dein Fenster in der Breite kleiner als #Content, wirst Du noch einen gaaanz tollen Effekt feststellen :-D

Kurz: Ich würde sowas niemals umsetzen und auch nicht wirklich empfehlen. Das Problem ist das Hintergrundbild, das hier auf den Status "Inhalt" hochgepusht wird, obwohl es eigentlich nur Zierwerk sein sollte.

ok, dann werde ich das auch mal probieren!

Zum Testen, Ausprobieren und Verstehen allemal ausreichend!

Gute Nacht! :-)