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

plazierung einer Textbox

H

HumanCell

Neues Mitglied
Hallo liebe HTML'er,

ich habe folgendes kleines Problem.

Ich soll in eine vorhande Website einen Textblock einbinden in dem ein fest definierter Text stehen soll. Da die Homepage leider durch und durch so geschrieben ist, dass sich die Elemente so anordnen, dass diese immer auf einander folgen, kann ich nicht ohne Probleme den Baustein mit hinein setzten. Jetzt zu meiner Frage:

Kann ich einen "Baustein" (Textfeld evtl.) so plazieren, dass dadurch keine anderen Elemente auf der Seite beeinflusst werden und dieser vom IE und von Mozilla mit gleichen biometrischen Daten angezeigt wird?

Der HTML-Code:

Code: 
<div id="div1" style="position:absolute; left:260px; top:400px;"> <!--Test-TEXTBOX RECHTS-->
 <title>NEA_BOX</title>
<b>Überschrift</b><br />
Betreff<br /><br />
</div>
<div id="div2" style="position:absolute; left:260px; top:445px;">
Hauptinformation<br />   <br />
Für weitere Informationen:     <br />
<font size="5"><a href="mailto:[email protected]?subject=Test%20zum%20Testen" class="mail" >[email protected]</a></font>
      </div> <!--CLOSES Test-TEXTBOX RECHTS-->

und die CSS:

Code: 
/*DIV used only TEXTBOX right^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

#div1 {
font:bold 11px/20px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:5px;
width:200px;
height:auto;
background-color:#FF8C00;

}


#div2 {
font: bold 9px/15px Arial, Helvetica, sans-serif;
padding:5px;
width:200px;
height:autox;
background-color:#FFFFFF;

}

Könnt ihr mir hier helfen?

Vielen Dank schon ma.

HumanCell
 
Klar geht das. Ist nur die Frage, ob die Textbox sich auch in die Reihenfolge der anderen Elemente einordnen soll, oder ob sie an einer festen Position stehen soll (bzw. überhaupt, an welcher Position die Textbox stehen soll).
 
Es soll sich einreihen, dies aber außerhalb des #wrapper# und eben passend gleich für beide Browser. Das Problem ist ja, dass die Homepage ein mittig plaziertes "Bild" hat, in diesem findet eigentlich alles statt und außen herum ist es grau:

HTML-Site.JPG

So in etwa, wobei bis jetzt eben alles im gelben Kasten passiert und der weiße angebunden werden soll ohne dass sich der Rest verschiebt, denn dann kann ich gleich alles neu machen.
 
probier es mal mit positoin:absolute; left: 50%; margin: 0 auto; margin-left: *breite des Content*px
irgendwie so sollte es gehen.
 
Habe ich getestet, aber das reist es dann komplett auseinander.

Kannst mir deinen Gedanken ja mal in meinen obrigen Code einsetzten, so wie du es meinst, vllt. mache ich es auch nur falsch!

Ansonsten nehme ich gern noch andere Vorschläge an...

Danke.
 
Zu Anfang erstmal ein Hinweis:
Das <title>-Element definiert nur den Titel der Homepage, gehört also NUR in den <head>. In deiner Textbox solltest du eine Überschrift verwenden, also <h1>, <h2>, ... oder <h6>.

Durch deinen Code seh ich irgendwie nicht richtig durch, deshalb hier mal wie ich es wohl machen würde (ungetestet!):

HTML
HTML: 
<div id="textbox">
  <div id="div1">
    <h1>NEA_BOX</h1>
    <h2>Überschrift</h2><br />
    Betreff<br /><br />
  </div>
  <div id="div2">
    Hauptinformation<br />   <br />
    Für weitere Informationen:     <br />
    <font size="5"><a href="mailto:[email protected]?subject=Test%20zum%20Testen" class="mail" >[email protected]</a></font>
      </div>
</div>

CSS
Code: 
#textbox {
  position: absolute; //Box absolut positionieren
  left: 50%; //Abstand von links -> Box zentrieren
  top: 400px; //Abstand von oben
  margin-left: 400px; //Die negative Hälfte der Textbox-Breite + Content-Breite -> hier: -100px + 500px (je nachdem, wie breit dein Content-Bereich ist) = 400px
  padding: 5px;
  width: 200px;
}

#div1 {
  font: bold 11px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  width: 100%;
  height: 45px;
  background-color: #FF8C00;
}

#div2 {
  font: bold 9px Arial, Helvetica, sans-serif;
  width: 100%;
  background-color: #FFFFFF;
}

So ungefähr sollte es wohl funktionieren...
 
Vielen dank, dass sieht schon sehr schön aus. Der Titel war nur testenshalber dort, sry, den hatte ich vergessen wieder heraus zu nehmen.

Jetzt geht es aber weiter: Außerhalb meines gelben Kastens sieht es in beiden Browsern perfekt aus, aber sobald ich es darauf lege, verrutschen in die Boxen wieder im IE. Hat sicher etwas mit den davor definierten Objekten zu tun, aber man muss es doch auch einfach wie eine "Folie" darüber legen können oder geht das gar nicht?
 
Hallo Leute,

vielen Dank schon mal, so hatte ich es auch schon mal gebaut. Es kommt nur im E-Explorer jedes Mal zu folgender Fehlermeldung:

Details zum Fehler auf der Webseite

Meldung: 'document.getElementById(...)' ist Null oder kein Objekt
Zeile: 164
Zeichen: 3
Code: 0
URI: gelöscht



Kann sich das mal jemand ansehen???? Quelltext könnt ihr euch ja auslesen...

Danke.

MfG

Benni
 
Zuletzt bearbeitet:
Bei mir kommt da keine Fehlermeldung. Allerdings weiß ich auch nicht wirklich in welchem Zusammenhang die auf dieser Seite kommen soll? Hast Du das Problem schon gelöst? Und was ist ein E-Explorer?
 
Hallo zusammen,

wieso der Fehler nicht mehr erscheint kann ich nicht zu 100% sagen, kann durchaus sein, dass er sich selber terminiert hat. Ich habe nur noch einen Fehler in der CSS gefunden und diesen klatt gezogen. Jetzt geht die Seite in beiden Browsern ohne Probleme :shock:

Der E-Explorer ist der Internet Explorer, entschuldigung dass sollte natürlich I-Explorer werden ^^

Naja mal sehen, was nun in anderen Browsern wie Opera passiert... ich hoffe nur es bleibt am Platz...

MfG Benni
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben