• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Variabale genau platzieren

F

Frank5

Neues Mitglied
Hallo,
ich möchte in einem Bild an bestimmten Stellen eine Variable genau platzieren.
Das erste div kann ich genau da hinsetzen wo ich es will. Das zweite aber nicht mehr.
Was mach hier falsch?
Achtung Anfänger!
Gruss
Frank
Code:
********
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
//body { margin:0; padding:0; height:1500px; }
//div { border:1px solid #000000; }



#a1 { margin-top:185px; margin-right:180px;} //aussen

#a2 { margin-top:10px; margin-right:10px;} //keller

#a3 { margin-top:1px; margin-right:2px;} //Heizung



/*

#a4 { position:absolute; top:350px; left:380px; width:150px; height:150px;
z-index:1; }

#a5 { position:absolute; top:420px; left:690px; width:150px; height:150px;
z-index:1; }

#a6 { position:absolute; top:570px; left:340px; width:150px; height:150px;
z-index:1; }

#a7 { position:absolute; top:630px; left:500px; width:150px; height:150px;
z-index:1; }

#a8 { position:absolute; top:620px; left:740px; width:150px; height:150px;
z-index:1; }*/



</style>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="10">
</head><body>



<center>



<?php

mysql_error();
/* Verbindung zu mySQL aufbauen, Auswählen einer Datenbank */
$link = mysql_connect("xxx", "xxx", "xxx") // Anmelden bei der Datenbank
or die("Keine Verbindung möglich: " . mysql_error() . "<br>");

mysql_select_db("home") or die("Auswahl der Datenbank fehlgeschlagen<br>");


$now = time();
$Nunc = date('Y-m-d',$now);

// SQL Abfrage
$query = "SELECT UNIX_TIMESTAMP(zeit),aussen ,keller,heizung ,wohnzimmer ,flur ,schlaffzimmer ,bad ,felix FROM home WHERE zeit >= Date_Sub(Curdate(), Interval 1 day) ORDER BY zeit";

//$query = "SELECT aussen, keller FROM home";
//$query = "SELECT UNIX_TIMESTAMP(zeit), aussen, keller FROM home";
$result = mysql_query($query);

$i=0;
while ($array=mysql_fetch_array($result)) {
$datax[$i]= $array[0];

$adata[1] = $array[1]; // aussen
$bdata[2] = $array[2]; // keller
$cdata[3] = $array[3]; // heizung
$ddata[4] = $array[4]; // wohnzimmer
$edata[5] = $array[5]; // flur
$fdata[6] = $array[6]; // schlafzimmer
$gdata[7] = $array[7]; // bad
$hdata[8] = $array[8]; // felix
$i++;


};







mysql_free_result($result);
/* Schliessen der mySQL Verbinung */
mysql_close($link);




echo "<div id=\"a1\"> $adata[1]</div> ";
echo "<div id=\"a2\"> $bdata[2]</div> ";
echo "<div id=\"a3\"> $cdata[3]</div> ";
/*
echo "<div id=\"a4\"> $ddata[4]</div> ";
echo "<div id=\"a5\"> $edata[5]</div> ";
echo "<div id=\"a6\"> $fdata[6]</div> ";
echo "<div id=\"a7\"> $gdata[7]</div> ";
echo "<div id=\"a8\"> $hdata[8]</div> ";*/
?>
<body style="background: #ffffff url(wohnung_2.jpg) no-repeat fixed center center;">



</body>

</html>
 
Du zeigst hier PHP-Code, obwohl es dir um eine Darstellung (CSS) geht. Bitte zeig den erzeugten HTML-Code wenn man die Darstellung genau beurteilen soll. Momentan kann ich z.B. keine Grafik erkennen, außer in dem zweiten <body>-Tag der den HTML-Code momentan nicht valide macht.
 
@threadi
entschulidung das es ein wenig konfus erscheint, aber ich versuche mich gerade in die Darstellung ein zu arbeiten. Was meisnt Du mit erzeugten HTML Code?
Der Code oben ist eine .php seite die ich aufrufe und in der das Bild wohnung_2.jpg aufgerufen wird und fest in der Mitte des Bildes stehen bleiben soll.
Es stellt eim Umriss der Wohnung da, in der die Temp. Werte an genauen Positionen eingeblendet werden sollen. Das die Werte an immer der gleichen Stelle stehen, habe ich jetzt so:
#a1 { position:relative; top:25px; right:90px;
z-index:1; }

#a2 { position:relative; top:30px; right:90px;
z-index:2; }
hinbekommen. Das Probelm ist jetzt nur, dass das Bild sich je nach eingestellter Auflösung und ob man z.B. die Sidebar im FF auf hat, die Zuordnung der Zahlen zum Bild ändert?
Kann man das irgendwie abfagen und jeweils der Auflösung(Sidebar auf/zu) einstellen, sodass egal was für ein Browser/Auflösung, die Werte imer an der gleichen Stelle stehen?
Wie z.b. bei diesem Bild.
Für Hilfe wäre ich sehr dankbar.
Frank
 
Mit erzeugtem HTML-Code meine ich den der letztlich im Browser angezeigt wird (Quelltextansicht). Der ist für die Darstellung einer Seite relevant, nicht die Programmierung dahinter die den HTML-Code erzeugt.
 
Alles klar!
hier der Code vom FF:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
//body { margin:0; padding:0; height:1500px; }
//div { border:1px solid #000000; }


#a1 { position:relative; top:2px; right:80px; //aussen
z-index:1; }

#a2 { position:relative; top:6px; right:80px; // keller
z-index:2; }


#a3 { position:relative; top:8px; right:80px; //heizung
z-index:3; }

#a4 { position:relative; top:190px; right:180px; //wohnzimmer
z-index:4; }

#a5 { position:relative; top:250px; left:150px; //flur
z-index:5; }

#a6 { position:relative; top:450px; right:240px; //schlafzimmer
z-index:6; }

#a7 { position:relative; top:440px; right:70px; //bad
z-index:7; }

#a8 { position:relative; top:420px; left:160px; //felix
z-index:8; }



</style>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="10">
</head><body>



<center>



<div id="a1"> 21</div> <div id="a2"> 22</div> <div id="a3"> 19</div> <div id="a4"> 23</div> <div id="a5"> 30</div> <div id="a6"> 25</div> <div id="a7"> 24</div> <div id="a8"> 22</div>
<body style="background: #ffffff url(wohnung_2.jpg) no-repeat fixed center center; ">



</body>

</html>
 
Wieso hast Du jetzt relative Positionierung verwendet?
Wieso ist der HTML-Code noch nicht korrigiert? (doppelter <body>-Tag)
 
Hallo,

wie könnte ich es denn anstatt position:relative anders machen?
Ich bin noch Anfänger und wäre über jeden Tip dankbar!
Gruss
Frank
 
Hallo,
ja, aber damit geht es ja auch nicht wirklich. Ich habe noch das Problem, dass wenn ich beim FF den Schriftgrad mit Strg++ oder Strg-- ändere, die Zahlen kleiner und größer werden, und damit von ihrer Position auf dem Bild wegwandern. Wenn ich den IE nehme oder der PC hat eine andere Bildschirmauflösung siehts auch wieder kpl anders aus. Man müßte die Zahlen und das Hintergrund verschmelzen lassen? Oder geht das auch anders?
Gruss
Frank
 
Du bastelst und probierst herum ohne viel darüber nachzudenken. Natürlich gibt es Verschiebungen wenn man eine Positionierung ungleich static für Elemente vergibt. Eine Webseite passt man nicht an Auflösungen an sondern wenn dann an Viewports oder an ein festes Maß. Ich weiß gerade nicht recht wo man da bei dir anfangen soll, wenn Du zwischen allen Beiträgen deine Strategie änderst :|
 
O.K. dann lassen wir meine Bastel Lösung mal weg. Wie sollte man es denn richtig machen. Ich will es ja lernen. Ein Link oder ein paar Schlagworte, und ich versuch es zu lernen. Oder kann man soe eine Seite garr nicht an alle Möglichen Auflösungen u.s.w. anpassen?
Danke und Gruss
Frank
 
Formuliere nochmal was Du genau erreichen willst. Nicht vom HTML oder CSS her, sondern inhaltlich. Wieso willst Du etwas auf eine bestimmte Art und Weise anordnen? Was soll das werden?
 
Also, ich habe ein Bild von meiner Wohnung als Umriss. in diesem Bild will ich an bestimmten Stellen, Temperaturwerte einblenden. Das ganze sollte eigentlich immer so aussehen, dass egal welchen Browser oder deren Auflösung ist, die Werte immer an der gleichen Stelle des Bildes stehen bleiben. Auch beim scrollen sollte diese Werte ihre Position nicht verändern. Im Moment verschieben sich die Werte ja schon, wenn ich nur die Sidebar FF einblende. Das ist natürlich blöd, wenn der Wert von der Küche nach rechts verschoben wird und dann z.b. im Wohnzimmer ist. Ich hoffe ich habe mich einigermassen verständlich ausgedrückt um was es mir geht.
Danke für deine Hilfe!
Gruss
Frank
 
Ja, das war eine gute Beschreibung :)

Du solltest dich aber von der Anpassung an die Auflösung verabschieden. Nicht nur, dass eine Webseite nicht eine komplette Auflösung einnehmen kann. Es führt auch wie Du merkst zu deutlichen Problemen in der Darstellung. Du solltest dich darauf beschränken das Bild in einer festen Breite und Höhe darzustellen. Idealerweise irgendwas zwischen 900 und 990 Pixel breite sollten völlig ausreichend sein um die Seite auf möglichst vielen Viewports identisch anzeigen zu lassen. Eine dynamische Breite bringt in deinem Fall wenig und bereitet nur noch mehr Arbeit.

Ein Bild mit bestimmten markierten Stellen wäre ja normalerweise ein Einsatzgebiet für eine ImageMap. In deinem Fall willst Du ja eigentlich nichts verlinken sondern an den Punkten etwas darstellen. Das ginge dennoch mittels einer ImageMap wenn Du bei den <area>'s die Temperatur mittels Mouse-Over einblendest. Beispiel:

HTML: 
<img src="wohnung.png" width="990" height="990" border="0" alt="Wohnung" usemap="#wohnung" id="wohnungsgrafik">
  <map name="wohnung">
    <area shape="rect" coords="11,10,59,29" href="#" alt="Küche" class="kueche" title="Küche" onmouseover="document.getElementById('wohnungsgrafik').src='wohnung_kueche.png';">
  </map>

Wenn Du die Temperatur als Text auf die Grafik legen willst, könntest Du dafür auch CSS verwenden:
Code: 
area.kueche { content: "40 Grad"; }

Wobei ich mir da unsicher bin, ob das in jedem Browser funktioniert.

Alternative wäre weiterhin absolute Positionierung, wie Du sie im allerersten Beitrag gezeigt hast. Nur eben bezogen auf einen Bereich mit einer festen Breite, nicht flexibel.
 
Hallo threadi,
vielen Dank für die Antwort. Ich werde mich damit mal befassen. Die lösung mit dem ImageMap klingt ja schon ganz gut. Muss nur mal gucken, wie man die Temp. Werte da genau sichtbar macht.
Gruss
Frank
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben