Non-Profit Studiumsprojekt braucht Hilfe

Hallo Leute,

hab mit in den letzten Tagen fast rund um die Uhr HTML, CSS & Co. eingetrichtert. Bin also noch mehr als Neuling, muss aber eine Arbeit vorran bringen. Nun bin ich an einer Stelle angekommen an der ich alleine nicht weiter komme. Hoffe für euch ist das ein leichtes.

Zum einen wäre ich ganz froh wenn ihr was zum Code allgemein sagen könnet. Zu den ganzen CSS-Klassen zum Beispiel. Auslagern kann ich diese noch nicht da der µC/WebServer das irgendwie noch nicht mag.

Und zum anderen hätte ich zwei probleme.

  1. Warum ist die Checkbox hinter Regelung aktiv so hoch versetzt? Wenn ich doch den

    text auf float: left gesetzt habe, müsste diese doch direkt hinter dem Text mittig erscheinen?

  2. Was ist das Problem bei meinem Endlagen div? Wenn ich zum Beispiel zwischen die divs

    test

    schreibe wird das layout verändert. Bei allen anderen divs (Bsp Winkel) klappt das ohne Probleme. Dabei seh ich keinen Unterschied zu den anderen.

Hier noch der Code

[HTML]

HP Titel #kopfbereich { background:url(bsp.jpg) no-repeat left top; height: 200px } #steuerung { background-color: #ceb98e; padding-left:1em; } #schatten { background-color: grey; height: 4px; } #endlagen { width: 650px; height:150px; margin-left: 700px; background-color: orange; } #regelung { width: 300px; height:150px; background-color: brown; float: left; } #bedienung { width: 400px; height:250px; background-color: blue; float: left; } #modellbild { position: relative; width:950px; height:400px; margin-left: 400px; background-color: green; } #winkel { position: relative; clear: both; width:400px; height:300px; float: left; background-color: yellow; } #kopfbereich p { color:black; text-align:left; font-size:2em; padding:0.4em 0 0 0.4em; } #button_init { position: relative; left: 90px; } #button_up { position: relative; left: 150px; width: 40px; height: 40px; } #button_left { position: relative; left: 110px; width: 40px; height: 40px; float: left; } #button_right { position: relative; left: 150px; width: 40px; height: 40px; float: left; } #button_down { position: relative; left: 150px; width: 40px; height: 40px; } .button_format { width: 40px; height: 40px; } html,body { font: 100% Arial, Helvetica, sans-serif }
<div id="kopfbereich">
<p>Von xxx</p>
<h1> Verladebrücke </h1>
</div>

<div id="steuerung">
Steuerung
</div>

<div id="schatten">
</div>

<div id="bedienung">
<h2 style="margin-left:120px" > Bedienung </h2>
<div id = "button_init"> <button type="button" id="btn_init"                                onclick="" >Initalisierungsfahrt starten</button><br /><br /> </div>
<div id = "button_up">     <button type="button" id="btn_up"             class = "button_format" onclick="" > /|\ </button><br /><br /> </div>
<div id = "button_left"> <button type="button" id="button_format"    class = "button_format" onclick="" > <- </button><br /><br /> </div>
<div id = "button_right"><button type="button" id="btn_right"        class = "button_format"    onclick="" > -> </button><br /><br /> </div>
<div id = "button_down"> <button type="button" id="btn_down"         class = "button_format"    onclick="" > \|/ </button><br /><br /> </div>

</div>

<div id="regelung">
<h2 style = "margin-left: 80px"> Regelung </h1>
<p style = "float:left" > Regelung aktiv </p>
<input type= "checkbox">

</div>

<div id="winkel">
winkel
</div>



<div id="endlagen">
endlagen       
</div>


<div id= "modellbild">
modellbild
    <p style = "margin-top: 40px " > test </p>

</div>
[/HTML]

Vielen Dank und liebe Grüße

Hi,

zu 1)
Vergiss das

und etikettiere es richtig :wink:

[HTML]
Regelung aktiv

[/HTML]

Zu 2) Ist bei mir nicht so, oder ich habe dich nicht richtig verstanden.

Zu 3)
Bei Regelung öffnest du h2 und schließt mit h1.

Gruß

Vielen Dank für die Antwort.
Die Art zu etikettieren scheint wohl auf dauer zu mehr Übersichtlichkeit zu führen :slight_smile: gefällt mir!
Und das mit h1 h2 hätte ich wohl erst Tage später gefunden… auch wenn es seltsamerweise keine Auswirkungen hatte.

Und zu den anderen zwei Problemen hab ich hier mal zwei Screenshots.

http://up.picr.de/20032918ar.jpg

Die Checkbox ist irgendwie fehl am Platz. Ich dachte deren Position ist zwangsläufig hinter „Regelung aktiv“

und das andere Problem ist das Endlagen div. Beim oberen Screenshot sah der codeabschnitt so aus:
[HTML]


endlagen
[/HTML]

und beim unteren so:

[HTML]


endlagen


[/HTML]
(Bei

endlage

selbes Problem, liegt also nicht an den h-Tags)

Warum hat das Auswirkungen auf meine Fensteranordnung? Und komischerweise nur bei dem div.
Ein blöder Anfängerfehler den ich nicht sehe?

Vielen Dank und gute Nacht

Hallo.

und

sind Blockelemente die einen voreingestellten Abstand haben. Das solltest du im CSS mit margin: 0 lösen können.

Du solltest dir allerdings auch mal darüber Gedanken machen ob du die div Origie nicht durch eine sinnvolle Auszeichnung ersetzen willst. Ich weiss nicht ob das bei deinem Studiumsprojekt berücksichtigt wird.

Gruss
Elroy

Das ganze ist klasse aber die Semantik ist scheuslich. Wird das bewertet?

Elroy! Das war es! Großes Dankeschön. Ich weiß zwar nicht warum es an der Stelle nötig war aber vielen Dank.

Und an Kujulian, also der Prof ist eigentlich für die Regelungstechnik zuständig, kann aber alles… Da HTML nie Teil einer Vorlesung war hoffe ich mal auf Gnade. Im Vordergrund steht einfach das am Ende die Regelung läuft und alle Aktoren ansteuerbar sind.
Nichts desto trotz wäre ich dankbar wenn du oder ihr mir sagen könntet was anstatt des divs-Salats in der Praxis angewand werden würde.

Das Problem mit der Checkbox hab ich dank google dann doch noch gelöst bekommen.

In den weiteren tollen bunten divs folgen unter anderem noch ein Bild im Bild welches sich in abhängigkeit von Variablen bewegen sollte… könnte sein, dass ich nochmal auf das Forum zurück komme.

Vielen dank.

Hier wird erklärt, welche Elemente man anstelle der div’s verwenden kann / sollte:
http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundstruktur

LG Matthias