lukixxx: div-Element positionieren

SELF-Forum

div-Element positionieren

lukixxx
– Informationen zu den Bewertungsregeln

Guten Tag,
ich habe ein Problem mit div-Elementen ! Ich habe 3 Auswahllisten auf einem Bild positioniert. Unter diesem Bild habe ich zwei Buttons eingefügt. Jedoch werden die Button hinter dem Bild und nicht drunter angezeigt !
Ich hoffe Ihr könnt mir helfen !

  
<p><font size"+2"><u><b>7. Beschriften Sie die Gitarre vollständig !</b></u><br>  
<div style="position:absolute;">  
<img src="gitarre.jpg" title="gitarre" style="position:absolute; width:600; height:399,25;">  
<div style="position:absolute; top:55px; left:60px;">  
<select name="Gitarre4" size="1" style="width:75px;">  
<option value="1"></option>  
<option value="">Korpus</option>  
<option value="Kopf">Kopf</option>  
<option value="">Hals</option>  
</select>  
</div>  
<div style="position:absolute; top:140px; left:60px;">  
<select name="Gitarre5" size="1" style="width:75px;">  
<option value="1"></option>  
<option value="Nacken">Nacken</option>  
<option value="Hals">Hals</option>  
<option value="Rücken">Rücken</option>  
</select>  
</div>  
<div style="position:absolute; top:285px; left:60px;">  
<select name="Gitarre6" size="1" style="width:75px;">  
<option value="1"></option>  
<option value="Bauch">Bauch</option>  
<option value="Korpus">Korpus</option>  
<option value="Fuß">Fuß</option>  
</select>  
</div>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<p><div align="center"><input type="button" onclick="abfrage()" name="Pr&uuml;fen" value="Pr&uuml;fen" style="cursor:pointer;">  
<p><input type="reset" name="Alle Eingaben l&ouml;schen" value="Alle Eingaben l&ouml;schen" style="cursor:pointer;"></div>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div-Element positionieren

    Malcolm Beck´s
    – Informationen zu den Bewertungsregeln

    hi,

    ich habe ein Problem mit div-Elementen !

    Ich würde sagen eher mit HTML als ganzes.

    Ich hoffe Ihr könnt mir helfen !

    Ich würde dir raten, das ganze nochmal neu zu machen, mit Sauberem Markup; alles, was für das Design zuständig ist, in eine Seperate CSS.
    Auch bei der Zeichenkodierung musst du dich für eine entscheiden, du mischst hier UTF-8 mit ISO.
    Wenn du möchtest, können wir das ganze ja mal aufbröseln.

    Wenn du an diesem Modell festhalten willst, dann zumindest Validieren.

    http://validator.w3.org/#validate_by_input

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head><title>...</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head>  
<body>  
  
<p><font size"+2"><u><b>7. Beschriften Sie die Gitarre vollständig !</b></u><br>  
<div style="position:absolute;">  
<img src="gitarre.jpg" title="gitarre" style="position:absolute; width:600; height:399,25;">  
<div style="position:absolute; top:55px; left:60px;">  
<select name="Gitarre4" size="1" style="width:75px;">  
<option value="1"></option>  
<option value="">Korpus</option>  
<option value="Kopf">Kopf</option>  
<option value="">Hals</option>  
</select>  
</div>  
<div style="position:absolute; top:140px; left:60px;">  
<select name="Gitarre5" size="1" style="width:75px;">  
<option value="1"></option>  
<option value="Nacken">Nacken</option>  
<option value="Hals">Hals</option>  
<option value="Rücken">Rücken</option>  
</select>  
</div>  
<div style="position:absolute; top:285px; left:60px;">  
<select name="Gitarre6" size="1" style="width:75px;">  
<option value="1"></option>  
<option value="Bauch">Bauch</option>  
<option value="Korpus">Korpus</option>  
<option value="Fuß">Fuß</option>  
</select>  
</div>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<br>  
<p><div align="center"><input type="button" onclick="abfrage()" name="Pr&uuml;fen" value="Pr&uuml;fen" style="cursor:pointer;">  
<p><input type="reset" name="Alle Eingaben l&ouml;schen" value="Alle Eingaben l&ouml;schen" style="cursor:pointer;"></div>  
  
</body>  
</html>

    mfg

    --
    echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
    array(2) {
      ["SELFCODE"]=>
      string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
      ["Meaningful"]=>
      string(?) "Der Sinn des Lebens ist deinem Leben einen Sinn zu geben"
    }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div-Element positionieren

      Lukixxx
      – Informationen zu den Bewertungsregeln

      Ersteinmal vielen Dank für die SCHNELLE Antwort !
      Mir wäre es lieb, wenn Sie mir eine Beispiellösung zeigen könnten. Denn mit CSS habe ich es noch nicht so ganz !
      Vielen Dank im Vorraus !

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. div-Element positionieren

        Malcolm Beck´s
        – Informationen zu den Bewertungsregeln

        hi,

        bitte duzen, ich duze auch ;)

        Mir wäre es lieb, wenn Sie mir eine Beispiellösung zeigen könnten. Denn mit CSS habe ich es noch nicht so ganz !

        An sich hat globe ja die richtigen Hinweise gegeben, da ich jetzt aber das Bsp. Fertig habe, poste ich es einfach mal; globes Posting solltest du aber Definitiv  schritt für schritt durchgehen, dann kannst du so Triviale sachen auch selber in Null,Nix fertig stellen.

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head><title>...</title><meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<style type="text/css">  
[code lang=css]h1 {  
  font-size:1.2em;  
  color:#F90;  
  border-bottom:1px solid  
}  
#select-wrapper {  
  width:600px;  
  height:399px;  
  position:relative;  
  border:1px solid #000;  
  background:#F90 url(gitarre.jpg) no-repeat  
}  
.select-boxes {  
  width:75px;  
  position:absolute  
}  
#select-box-1 {  
  top:55px;  
  left:60px  
}  
#select-box-2 {  
  top:140px;  
  left:60px  
}  
#select-box-3 {  
  top:285px;  
  left:60px  
}  
#select-wrapper p {  
  text-align:center;  
  position:absolute;  
  bottom:5px;  
  left:0;  
  width:100%  
}  
#select-wrapper p input {  
  cursor:pointer  
}

        </style>
        </head>
        <body>

        <h1>7. Beschriften Sie die Gitarre vollständig !</h1>

        <div id="select-wrapper">

        <select id="select-box-1" class="select-boxes" name="Gitarre4" size="1">
        <option></option>
        <option value="Korpus">Korpus</option>
        <option value="Kopf">Kopf</option>
        <option value="Hals">Hals</option>
        </select>

        <select id="select-box-2" class="select-boxes" name="Gitarre5" size="1">
        <option></option>
        <option value="Nacken">Nacken</option>
        <option value="Hals">Hals</option>
        <option value="Rücken">Rücken</option>
        </select>

        <select id="select-box-3" class="select-boxes" name="Gitarre6" size="1">
        <option></option>
        <option value="Bauch">Bauch</option>
        <option value="Korpus">Korpus</option>
        <option value="Fuß">Fuß</option>
        </select>

        <p>
        <input type="button" onclick="abfrage()" name="Prüfen" value="Prüfen">
        <input type="reset" name="Alle Eingaben löschen" value="Alle Eingaben löschen">
        </p>

        </div>

        </body>
        </html>
        [/code]

        mfg

        --
        echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
        array(2) {
          ["SELFCODE"]=>
          string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
          ["Meaningful"]=>
          string(?) "Der Sinn des Lebens ist deinem Leben einen Sinn zu geben"
        }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. div-Element positionieren

          Lukixxx
          – Informationen zu den Bewertungsregeln

          Super ! Habe es jetzt geschafft ! Danke, dass du so schnell und gut geholfen hast ! ;)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. div-Element positionieren

    globe Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    n'abend,

    ich habe ein Problem mit div-Elementen ! Ich habe 3 Auswahllisten auf einem Bild positioniert. Unter diesem Bild habe ich zwei Buttons eingefügt. Jedoch werden die Button hinter dem Bild und nicht drunter angezeigt !
    Ich hoffe Ihr könnt mir helfen !

    position:absolute nimmt das Objekt aus dem (normalen) Dokumentenfluss heraus. Du kannst dieses Objekt zwar positionieren wo auch immer du möchtest, jedoch wird der Platz, den das Objekt normalerweise im Dokument verbraucht hätte dabei freigegeben. Deshalb verschinden deine Buttons (welche sich noch im Dokumentenfluss befinden) quasi hinter dem Bild, da das Bild an einer bestimmten Position einfach über das Dokument gelegt wird. Du musst also dafür sorgen, dass der Platz, den das absolut positionierte Bild verbrauchen würde, auch irgendwie freigehalten wird. In deinem Fall sehe ich aber keinen Grund das Bild zu positionieren.

    <p><font size"+2"><u><b>7. Beschriften Sie die Gitarre vollständig !</b></u><br>

    Das sieht mir schwer nach einer Überschrift aus. Die Schriftgröße, den Unterstrich und die Fettschrift kannst du mittels CSS spezifizieren. Das CSS Kapitel solltest du dir dringend mal durchlesen...

    <div style="position:absolute;">

    Wenn du das Objekt nicht positionieren willst, sondern ermöglichen, dass die Positionierung der Kindelemente relativ zum Objekt passieren kann, solltest du position:relative benutzen.

    <img src="gitarre.jpg" title="gitarre" style="position:absolute; width:600; height:399,25;">

    Du spezifizierst eine Breite von 600. 600 was? 600 Bananen? Vermutlich sprichst du von 600 Pixel: width:600px. Du gibst eine Höhe von "399,25" an. Zum Einen fehlt hier das "px", zum Anderen ist das Komma hier kein valides Dezimaltrennzeichen. Die Computerwelt sieht grundsätzlich den . (Punkt) als Dezimaltrenner an: height:399.25px. <Mutmaßung>Die Angabe des viertel Pixels ist auch fragwürdig, da dieser Wert ohnehin gerundet wird.</Mutmaßung>

    <div style="position:absolute; top:55px; left:60px;">
    <select name="Gitarre4" size="1" style="width:75px;">

    Warum steckst du <select> in ein <div>? Du kannst auch das <select> direkt positionieren.

    <br>
    <br>
    <br>

    Zeilenumbrüche sind uncool.
    Nutze <p> und gib einen Abstand an.

    <p><div align="center"><input type="button" onclick="abfrage()" name="Pr&uuml;fen" value="Pr&uuml;fen" style="cursor:pointer;">

    Du könntest den <p>aragraph auch (ab)schließen, bevor du einen neuen öffnest.

    Du möchtest lernen wie man HTML einsetzt (valide, nur Struktur) und wie man CSS richtig einsetzt (zentrales CSS-Dokument, keine style-Attribute im HTML). Du wirst dich nach der Lernphase wesentlich leichter tun.

    weiterhin schönen abend...

    --
    #selfhtml hat ein Forum?
    sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

  3. div-Element positionieren

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hi,

    ich habe ein Problem mit div-Elementen !

    und eins mit der Interpunktion.

    Jedoch werden die Button hinter dem Bild und nicht drunter angezeigt !
    Ich hoffe Ihr könnt mir helfen !
    <p><font size"+2"><u><b>7. Beschriften Sie die Gitarre vollständig !</b></u><br>

    Dein übermäßiger Gebrauch von Ausrufezeichen ist unschön. In einem normalen Text sollte es eine Ausnahme sein. Außerdem plenkst du.

    [code lang=css]
    <div style="position:absolute;">

    Oops. Wieso zeichnest du einen Code-Block als CSS aus, wenn es sich doch um HTML handeln sollte?

    <p><div align="center"><input type="button" onclick="abfrage()" name="Pr&uuml;fen" value="Pr&uuml;fen" style="cursor:pointer;">

    Die Verwendung von Entity-Referenzen sollte man auf die wenigen Fälle beschränken, wo es zwingend nötig ist. Aber sowohl UTF-8 als auch ISO-8859-1 enthalten die hier verwendeten Zeichen, so dass man sie direkt im Quellcode notieren kann und sollte - so wie du es weiter oben ja auch getan hast. Das ist besser für die Lesbarkeit.

    <p><input type="reset" name="Alle Eingaben l&ouml;schen" value="Alle Eingaben l&ouml;schen" style="cursor:pointer;"></div>

    Bist du sicher, dass du einen reset-Button brauchst? Ich vermisse ja eher einen submit-Button - und eigentlich sogar das ganze Formular drumherum.

    Dass du vergessen hast, deine p-Elemente zu schließen, wurde dir ja schon gesagt.

    So long,
     Martin

    --
    Die letzten Worte der Challenger-Crew:
    Lasst doch mal die Frau ans Steuer!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln