Zu doof für Bootstrap - Divs (Bilder) überlagern

braegler · 5 Feb. 2016

Hallo zusammen,
wieder einmal bin ich kurz vorm Verzweifeln.

Und zwar geht es um folgendes:

Ich möchte mittels Bootstrap und php eine Art abgesprecktes SCADA System für ein Terrarium bauen.
Das ganze soll, zwecks Benutzung mit Smarthone, mit Bootstrap verwirklicht werden.

Dazu hab ich einmal die Ansicht von Oben

Nun möchte ich verschiedene Informationen darüber einblenden.
Fertig soll das ganze in etwa so aussehen (Rot = Beleuchtung , Grün = Thermosonden)

Ich hab also einmal das Terrarium als Bild (box.jpg) und möchte nun eine Lampe einbauen.

All meine Versuche sind aber bisher gescheitert CSS und Bootstrap scheinen einfach nicht mit meiner Logik klar zu kommen.

Mein bisheriger Code (Source aus dem Browser kopiert):

[src=html5]
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Live Demo of Bootstrap Tutorial for Beginners</title>



<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">





</head><body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Home</a>
</div>

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">



<li><b>Hallo braegler</b><br><a href="?logout=1">Abmelden</a></li> </ul>
</div>

</div>
</div>
<div class='container'><div class='page-header'><div class="container-fluid">
<img src="img/box.jpg" class="img-responsive">

<div>
<img src="img/box_light.jpg" class="img-responsive">
</div>

</div> 

</div></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

[/src]

Jetzt suche ich nach einer Möglichkeit, das Licht (box_light.jpg) auf der Box zu positionieren, blicke aber einfach nicht durch.

Ich wäre Euch sehr dankbar, wenn Ihr mir anhand eines überlagerten Divs zeigen könntet, wie ich das machen kann.

Vielen Dank für Eure Bemühungen (und Geduld)

dexter · 7 Feb. 2016

Die Einfache Variante: setze box.jpg als Hintergrundbild und füge nach Bedarf Deine Grafiken ein.

KingJamez · 8 Feb. 2016

Wenn ich das richtig verstehe, willst du die beiden Elemente in einem DIV darstellen

Ich kenne Bootstrap nur minimal, ich mag es auch nicht besonders, aber das sollte gehen:
[src=html5]
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">ein "12 Spalter für den grünen knopf"</div>
<div class="col-xs-12 col-md-12">ein "12 Spalter für den roten knopf"</div>
</div>
</div>
[/src]
weiterführender Link Bootstrap/ Grid

Das ganze wäre mit normalem CSS schneller und eleganter gelöst:
[src=html5]
<style>
.box {
width: 50%;
min-height: 300px;
}
.light--top,
.light--bottom {
width: 100%;
}

</style>
<div class="box">
<div class="light--top">inhalt oben</div>
<div class="light--bottom">inhalt unten</div>
</div>
[/src]

Falls du wirklich nur, wie im Bild 2 punkte einsetzt könntest du dir das laden der Bilder sparen, einen kreis kann man in CSS auch ganz einfach zeichnen.

[src=css]
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
}
[/src]

Das ganze soll, zwecks Benutzung mit Smarthone, mit Bootstrap verwirklicht werden.

Bootstrap ist wenn man sich nicht damit auskennt, genauso nicht für ein Smartphone geeignet! Für so einen Minimalen aufwand würde ich auf bootstrap verzichten.
Selbst ein Grid- System zu erstellen wäre für dieses kleine vorhaben schon fast zu viel.
"Responsive" wird eine Page nicht wegen einem tool, sondern wegen seines Entwicklers!

theSplit · 8 Feb. 2016

Ich würde eine Kombination aus dem was Dexter sagt und manuellem CSS verwenden und die Technik zum Zeichnen der Kreiselemente wie KingJamez geschrieben hat, ohne mit einem Grid zu arbeiten da die Bilder (vermute ich jetzt mal) nicht mitskalieren.

Ansonsten muß man halt per Media Queries 3-4 Auflösungen (ohne gleich ein komplettes Grid zu entwerfen) erstellen.

Folgende Idee - einen Div container mit fixer Breite und Höhe wie die Box (box.jpg) - in diesem wird das Bild als Hintergrundbild gesetzt.
In diesem werden dann die beiden "light" und "thermometer" absolute positioniert.

Wichtig hierbei, den Div mit der Box sollte "relativ" positioniert werden.
Damit die Berechnung der Position von diesem Ausgeht und nicht vom Fenster oder einem anderen Element.

Folgender Code dazu, ganze HTML Testseite bei der nun das "box01.jpg" in voller Auflösung verwendet wird.

[src=html5]<!DOCTYPE html>
<html>
<head>
<title>Box Placement</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="box">
<div class="light" id="light1"></div>
<div class="light" id="light2"></div>
<div class="thermo" id="thermo1"></div>
<div class="thermo" id="thermo2"></div>
<div class="thermo" id="thermo3"></div>
</div>
</body>
</html>
[/src]

Sollte sich hierbei etwas ändern, kann man das ganz leicht im CSS abändern (muß als "stylesheet.css" im gleichen Verzeichniss wie die HTML Seite gespeichert sein.
[src=css].box {
position: relative;
background: url("box01.jpg") scroll left top no-repeat;
width: 1163px;
height: 565px;
top: 150px; /* Kann entfallen */
left: 20%; /* Kann entfallen */
}

.thermo {
background-color: #00ff00;
border-radius: 50%;
height: 20px;
width: 20px;
position: absolute;
}

.light {
background-color: #ff0000;
border-radius: 50%;
height: 320px;
width: 320px;
position: absolute;
}

#thermo1 {
top: 485px;
left: 70px;
}

#light1 {
top: 200px;
left: 270px;
}

#thermo2 {
top: 50px;
left: 650px;
}

#light2 {
top: 200px;
left: 760px;
}

#thermo3 {
top: 50px;
left: 1100px;
}[/src]

Für eine andere Auflösung benötigst du ohnehin ein verkleinertes Bild der Box und must die Lichter/Thermostate entsprechend in der Größe reduzieren und die Positionierung neu anpassen.
Ist die Frage wie dynamisch das ganze sein soll und wie viele dieser Grafiken zu gestalten sind.

Aber ich habe im HTML bewusst eine Klasse Licht oder Thermostat vergeben, und zusätzlich eine Id für das genaue Element um die Positionierung zu machen.

Vielleicht hilft dir das ja weiter.

Zu doof für Bootstrap - Divs (Bilder) überlagern

braegler

Aktiver NGBler

dexter

Cloogshicer®

KingJamez

Aktiver NGBler

theSplit

1998