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

IE zieht div-Container nicht auf

OsunSeyi

OsunSeyi

Neues Mitglied
Hi,
hab ein Problem mit der Textbox meiner Website, das ganze ist hier zu begutachten: BIOGRAPHIE

Es geht in der Sache darum, links und oben jeweils eine Navigation fester Pixel-Breite zu haben.

Daraus ergibt sich eine Textbox, die links und oben einen festen Pixelabstand vom Fensterrand hat, sich aber nach rechts und unten bis zum Fensterrand erstreckt und nicht weiter.

Genauer gesagt soll ein fester Rand gewahrt werden, egal wie die Auflösung, Vergrösserung oder Grösse des Browserfensters ist.

Code: 
<html><head><title>TEST</title>

<style type='text/css'> 


  div
    {
         position: absolute;
              top: 80px;
         left: 80px;
        right: 5px;
           bottom: 5px;
         border-style: solid
                                    }
</style>

</head><body>
        <div></div>
</body></html>
Das ergibt mit Gekko einen Kasten, wie gewünscht.
Im IE aber nur einen kleines schwarzes Rechteck (der Rahmen): TEST

Auch, wenn ich dem Body eine Grösse in % zuweise.
Hab es auch mit 'margin' versucht, selbiges Ergebnis.

Der Textbox nicht einen kleinen Rand links und unten in Px zu verpassen, sondern stattdessen % zu verwenden, zieht die Box im IE wohl auf.

Da sich diese Prozentangabe aber auf den Body bezieht (die Navigation nicht abzieht), bekomme ich dann kein schönes Ergebnis mehr...

tom

Ps:

1. selten so ein gut gestaltetes Forum gesehen :-)

2. Sehr schönes Tutorial für Anfänger like me:

http://www.mediaevent.de/tutorial/CSS-Position-absolute-relative.html
 
Zuletzt bearbeitet:
Verwende auch bei Test immer einen Doctype. Denn nur dann ist es auch ein richtiger Test eines HTML-Codes.

Verzichte auf absolute Positionierung, insbesondere in Bezug auf ganze Seiten-Bereiche. Die bringt dich eher noch um den Verstand als das sie praktikabel einsetzbar wäre.

Vergiss den Zusammenhang von Darstellung und Auflösung. Eine Webseite wird nie auf einer Auflösung dargestellt. Sie wird immer im Viewport des Browsers dargestellt, der auch total krumme und unnormale Werte annehmen kann.

Bau die Seite mal mit normalem HTML auf und richte diese Inhaltsbox per float aus.

Code: 
html, body { height: 100%;width: 100%; }
.elemente_zwischen_body_und_content { height: 100%;width: 100%; }
#content {
 border: 1px solid red;
 float: right;
 width: 80%;
 height: 80%;
}

Ungetestet, nur ein Entwurf für die Richtung.
 
Das funktioniert sehr gut, vielen Dank für den Tip.
Solange alles in % dargestellt wird, ist es sofort wunderbar einfach das Gerüst der Website nachzubauen!

Leider scheitert es zZt. an der Navigation, weil diese einen hover-Efekt in Zusammenhang mit einer Grafik beinhaltet:

Code: 
  a.info5:hover span
        {
        display:block; 
        position:absolute; 
        background-image: url(../ABB); 
        width:180px;
        height:422px; 
        top:-235px;
        left:0px;
        }
Ich müsste die hier referenzierte Grafik dazu bringen, ebenfalls skaliert zu werden.
Oder bei einer festen Pixelbreite am linken Rand zu bleiben, und das daneben liegende Textfeld trotzdem dazu bewegen, sich sauber bis genau an den rechten Rand auszudehnen :-?

Abgesehen davon ist eine Aufteilung wie hier: TEST schon genau richtig (ok, das Textfeld folgt nicht einem festen Rand rechts und unten)

Bei entsprechender aber Skalierung reicht das Textfeld über den rechten Rand hinaus. Die Prozentangabe bezieht sich halt auf das Fenster und nicht die Fläche, die eigentlich für das Feld vorgesehen ist. Genau das ist der Grund, warum mir ein fester Rand lieber wäre. Ganz ärgerlich, wenn das Textfeld eine Scrolleiste hat, die ggF hinter dem rechten Rand verschwunden ist...

Auf den Punkt gebracht:

| Navi 20px | Textfeld: Rest der Breite |Rand|
 
Zuletzt bearbeitet:
Bzgl. deinem "Test": valide, schön und gut - aber bitte verzichte doch entweder auf absolute Positionierung oder auf float. Beides zusammen in einem Element bringt rein gar nichts.

Ich würde dir auch weiterhin empfehlen auf absolute Positionierung zu verzichten. Dein Problem mit dem Hintergrundbild kann ich aus diesem Code-Ausschnitt nicht erkennen. Das Element hat eine feste Breite und Höhe - wozu soll es dann noch skaliert werden? Wenn Du ein Hintergrundbild skalieren willst, baue es als <img>-Tag ein und gib diesem Maße in Prozent (Anleitungen dafür gibt es im Forum ausreichend). Wenn Du es nicht hinbekommst, zeig einen "TEST" in dem Du dieses Problem mit eingefügt hast, dann kann man es evtl. nachvollziehen.

Und einen Rand kannst Du mit margin bei dem #content-Element erzeugen.

Code: 
#content {
 border: 1px solid red;
 float: right;
 width: 80%;
 height: 80%;
[COLOR="red"] margin-right: 10px;
 margin-bottom: 10px;[/COLOR]
}
 
Das es nicht möglich ist, einen Container mit einem festen Pixelabstand zu allen vier Browserfensterrändern zu definieren (um nichts anderes geht es ja) und das trotz der ganzen Mächtigkeit von CSS , wundert mich schon einigermassen.

Natürlich ist es sehr viel einleuchtenter, alles Prozentual zu definieren.
(wenn man davon absieht, daß ich die gesamte Css-Datei neu schreiben muss :twisted:)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben