nicht angemeldet
Layout mit DIV-Containern
Hallo,
ich versuche ein Layout nur mit DIV-Containern hinzubekommen.
Mein problem is, das es mir nicht gelingt den Container mit dem Inhalt (der Rote Rand ist nur zur Veranschaulichung da) so zu "programmieren", das er, unabhäbig von der Fenstergröße in der unteren rechten Ecke endet.
Folgender Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html style="height:100%; width:100%;">
<head>
<title></title>
<style type="text/css">
<!--
.menu {
position: absolute;
top: 90px;
right: 4px;
background-color: orange;
border: 1px solid red;
text-align: left;
margin:0px;
padding:0px;
font-size: 13px;
}
-->
</style>
</head>
<body style="height:100%; width:100%;">
<div style="position:absolute; width:100%; height:97%; margin:0px auto; background-color: yellow; border: 1px solid black; overflow: yes;">
<div style="position:absolute; z-index:1;"><img src="header100.jpg" style="float:right;width:550px;height:85px;" hspace="0" alt="Logo"></div>
<div style="position:absolute; z-index:2;"><img src="header100b.jpg" style="float:left;width:277px;height:99px;" hspace="10" vspace="10" alt="Logo"></div>
<div style="position:absolute; left: 10px; bottom: 1px; z-index:3;"><img src="huhn.gif" width="174" border="0" hight="300" alt="Huhn"></div>
<div class="menu">
Das Menü folgt noch
</div>
<div style="position: relative; left: 190px; top:120px; width: 75%; height: 75%; border: 1px solid red;"></div>
</div>
</body>
</html>
Über jeden Hinweis bin ich dankbar. Oder ist mein Problem überhaupt nicht lösbar??
Viele Grüße
Ole
-
Hallo
Über jeden Hinweis bin ich dankbar. Oder ist mein Problem überhaupt nicht lösbar??
versuch mal
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#bottom
gruß Roni
-
Hey,
vielleicht habe ich mich falsch ausgedrückt.
der Container soll sich zusammen mit der Fenstergröße ändern.
In die untere rechte ecke bekomme ich Ihn. Ber dann ist die linke obere Ecke je nach Fenstergröße entweder mitten im Fenster oder sie Verschwindet bei kleinen Fenstern hinter dem Logo oben links.Ich würde nur gerne, das die Linke obere Ecke immer beim Punkt 150/150 steht und die rechte untere Ecke soweit rechts unten wie es das fenster zulässt.
Viele rüpße
Ole-
Hallo Ole,
Ich würde nur gerne, das die Linke obere Ecke immer beim Punkt 150/150 steht und die rechte untere Ecke soweit rechts unten wie es das fenster zulässt.
bin auch nicht so gut.
fast das gewollte erreicht man mit:<html><head><title>bottom</title>
</head><body bgcolor="FFFFFF" text="#000000"><div style="
position:absolute;
top:150px;
left:150px;
bottom:0px;
width:80%;
height:70%;
border-style:solid;
border-width:1;
border-color:#ff0000;">Ist dieser Rahmen wie er dir gefällt?<br>Nein :(
</div></body></html>
alles andere wäre wohl ein js-script welches bei jeder Änderung den zur Verfügung stehenden platz ermittelt und dem div-Container entsprechend zuweist.
window.innerHeight
-> Speichert die Höhe des Anzeigebereichs eines Fensters. Sehr gut geeignet in Verbindung mit absolutem Positionieren von Elementen.
(leider nicht IE)Beim IE:
document.body.offsetWidthund dann die divs ansprechen, ca so:
document.getElementById("id ses divs").style.width="...";so oder so ähnlich.
Probieren geht über Studieren
(auch nicht immer)Ciao
Roni
-
-
-
Hallo,
ich versuche ein Layout nur mit DIV-Containern hinzubekommen.
Warum dass denn? Was soll das bringen?
Mein problem is, das es mir nicht gelingt den Container mit dem Inhalt (der Rote Rand ist nur zur Veranschaulichung da) so zu "programmieren", das er, unabhäbig von der Fenstergröße in der unteren rechten Ecke endet.
Ähm HTML "programmiert" man nicht, sonst wäre es eine Programmiersprache, nur so nebenbei bemerkt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
Warum XHTML 1.1?
<?xml version="1.0" encoding="iso-8859-1"?>
Das gehört an den Anfang des Dokumentes, nicht irgendwo mitten rein. Es versetzt aber den IE 6 in quirksmodus.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html style="height:100%; width:100%;">Ähm seit wann macht man das <html> Element zwei mal in eine Datei rein, was soll das für vorteile bringen?
<style type="text/css">
Ich empfehle so etwas zu vermeiden und alles in eine separate CSS Datei auszulagern und dann diese einzubinden. All diese style="bla" Sachen gehören raus, und in der externen Datei aufgelistet. Somit spart man nach dem ersten herunterladen jedes mal Zeit und Bandbreite, weil sich all diese Angaben zum Aussehen von irgendwelchen Seiten schon im cache befinden.
Über jeden Hinweis bin ich dankbar. Oder ist mein Problem überhaupt nicht lösbar??
Ich denke es wird schwierig das hinzubekommen ohne Tabellen zu benutzen. Das Problem ist nämlich dass das Dokument immer so groß ist wie der Inhalt. Ist es für das Design eigentlich unbedingt notwendig dass es - auch wenn es nicht genügend Inhalt gibt - immer bis nach ganz unten geht?
Grüße
Jeena Paradies--
Meine Referenzen hat mein alter Hoster als seine angegeben
»Try to make something idiot-proof and someone will make a better idiot.«-
Mein problem is, das es mir nicht gelingt den Container mit dem Inhalt (der Rote Rand ist nur zur Veranschaulichung da) so zu "programmieren", das er, unabhäbig von der Fenstergröße in der unteren rechten Ecke endet.
Ähm HTML "programmiert" man nicht, sonst wäre es eine Programmiersprache, nur so nebenbei bemerkt.hast du deinen Videorecorder tunlichst nicht "programmiert"?
'"programmiert"' man eine Programmiersprache?
-
hi,
Ähm HTML "programmiert" man nicht, sonst wäre es eine Programmiersprache, nur so nebenbei bemerkt.
hast du deinen Videorecorder tunlichst nicht "programmiert"?
doch, vermutlich - mit dem geht das ja auch.
'"programmiert"' man eine Programmiersprache?
natürlich.
aber was hat das mit HTML zu tun? HTML ist _keine_ programmiersprache.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
Hallo,
... unabhäbig von der Fenstergröße in der unteren rechten Ecke endet.
meinst du Ecke des Bildschirms oder Ecke der Seite?
Warscheinlich Seite, dann ist das Problem die Höhe wenn der Bildschirm höher als der Inhalt ist?
Sonst ist ein Liquid Layout oder CSS Layout und float mit drei Spalten mit Fusszeile vielleicht hilfreich,
da könntest du die "Punkt 150/150" vielleicht über Eigenschaften des Body oder per padding des "Inhalt" realisieren.
Bei deinem Code wäre es übrigens hilfreich auf Inlinestyles zu verzichten, dann wird es m.E. übersichtlicher,Grüsse
Cyx23