verlade_html
Neues Mitglied
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 <p> 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 <p> test </p> 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
Vielen Dank und liebe Grüße
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 <p> 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 <p> test </p> 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:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<title>HP Titel</title>
<style type="text/css">
#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
}
</style>
</head>
<body>
<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>
</body>
</html>Vielen Dank und liebe Grüße
