[kalrheinzotto]

Hi,

ich habe eine bildergallerie, in der img's mittels max-width:100%; dynamisch der grösse(breite) des fenster anpassen. die bilder füllen dabei 70% des fensters aus und haben eine mindest und eine maximal grösse. das menü wird dabei einfach nach unten geschoben. das funktioniert soweit auch einwandfrei.

Jetzt habe ich zudem eine slideshow, die die bilder überblendet. das funktioniert alleine auch sehr gut.

Das problem ist wenn ich nun beides zusammen "baue". alle slideshows die ich finden konnte arbeiten mit absoluter positionierung. diese hat jedoch die eigenschaft, andere elemente zu überdecken.

ich verzweifle. bitte schaut es euch doch mal an:

titel

ist das browser-fenster möglichst schmal, so ist das menü zu sehen. wird das browser-fenster jedoch breiter gezogen, wird auch das bild grösser und überdeckt das menü. wie kriege ich es nun hin das das menü nicht überdeckt, sondern nach unten geschoben wird?

ich danke schonmal herzlich für eure antworten!

[andir]

Absolt positionierte Elemente haben die Eigenschaft, auf andere Elemente im HTML keine Rücksicht zu nehmen. Das macht sie nützlich und Sorgen bereitend zugleich.

Du hast keine Möglichkeit, bei breiteren Browserfenstern ( danke für deinen Hinweis...) mit dem derzeitigen Code voranzukommen.

Du kannst die Position deiner Navigation skripten lassen ( Abfrage, wie hoch das Bild ist..., keine Ahnung wie) oder besser noch, als Teil des HTML des variablen Containers coden und mit position:relative oder :absolute die nötigen Werte nach unten schieben, so dass sie immer etwas unter dem Bild ist wie gewünscht. Bei kleineren Browserfenstern allerdings kann es dann passieren, dass die absolute Positionierung dazu führt, dass Inhalte unerreichbar werden. In diesem Fall wäre ein im HTML nachfolgender Container mit ausreichend padding nach unten erforderlich, der das Browserfenster für jeden Fall genügend aufspannt bzw. und ggf. einen Scrollbalken anbietet.

[Chris2011]

body {
    background: none repeat scroll 0 0 black;
    color: grey;
    font-family: arial;
    font-size: 12px;
    padding-top: 20px;
}
img, a {
    border: medium none;
    outline: medium none;
    text-decoration: none;
}
img {
    max-width: 100%;
}
ul, ul li {
    margin: 0;
    padding: 0;
}
ul {
    background: none repeat scroll 0 0 yellow;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
li {
    width: 100%;
}
.imgArea, #logo, #navigation {
    margin: 0 auto;
    max-width: 1300px;
    min-width: 828px;
    position: absolute;
    text-align: left;
    width: 50%;
    z-index: 100;
}
.imgArea {
    height: auto;
    max-height: 675px;
    min-height: 430px;
    position: relative;
}
#logo {
    margin-bottom: 6px;
}
#navigation {
    margin-top: 6px;
}
#menu {
    float: left;
    width: 270px;
}
.dropdown {
    overflow: visible;
    visibility: hidden;
}
.active {
    visibility: visible !important;
}
#motion, #visual, #blog, #contact, #visualactive, #motionactive {
    background-image: url("images/layout/buttons.jpg");
    float: left;
    height: 19px;
    padding-right: 13px;
}
#visual {
    width: 51px;
}
#visual:hover, #visualactive {
    background-position: 0 -20px !important;
    width: 51px;
}
#visual:hover .dropdown, #motion:hover .dropdown {
    visibility: visible;
}
#motion {
    background-position: 0 -40px;
    width: 54px;
}
#motion:hover, #motionactive {
    background-position: 0 -60px;
    width: 54px;
}
#blog {
    background-position: 0 -80px;
    width: 38px;
}
#blog:hover {
    background-position: 0 -100px;
}
#contact {
    background-position: 0 -120px;
    padding: 0;
    width: 71px;
}
#contact:hover, .con {
    background-position: 0 -140px !important;
}
#fashion, #beauty, #people {
    background-image: url("images/layout/buttons.jpg");
    height: 19px;
    width: 66px;
}
#fashion {
    background-position: 0 -160px;
    margin-top: 19px;
}
#fashion:hover, .fon {
    background-position: 0 -180px !important;
}
#beauty {
    background-position: 0 -200px;
}
#beauty:hover, .bon {
    background-position: 0 -220px !important;
}
#people {
    background-position: 0 -240px;
}
#people:hover, .pon {
    background-position: 0 -260px !important;
}
#video, #makingof {
    background-image: url("images/layout/buttons.jpg");
    height: 19px;
    width: 78px;
}
#video {
    background-position: 0 -280px;
    margin-top: 19px;
}
#video:hover, .von {
    background-position: 0 -300px !important;
}
#makingof {
    background-position: 0 -320px;
}
#makingof:hover, .mon {
    background-position: 0 -340px !important;
}
.projInfo {
    font-size: 11px;
    margin-left: 300px;
    padding-top: 2px;
}
#minus, .desc, #plus {
    float: left;
}
#minus, #plus {
    background-repeat: no-repeat;
    height: 15px;
    margin-left: 5px;
    margin-right: 5px;
    width: 15px;
}
#minus {
    background-image: url("images/layout/buttons.jpg");
    background-position: 0 -400px;
}
#minus:hover {
    background-position: 0 -420px;
}
#plus {
    background-image: url("images/layout/buttons.jpg");
    background-position: 0 -360px;
}
#plus:hover {
    background-position: 0 -380px;
}
#cont {
    background: none repeat scroll 0 0 #141414;
    color: #949494;
    font-size: 12px;
    height: 430px;
    margin: 4px auto 0;
    text-align: left;
    width: 828px;
}
#contleft {
    float: left;
    margin-top: 50px;
    padding-left: 50px;
    padding-right: 25px;
    width: 350px;
}
#contright {
    margin-left: 425px;
    padding-left: 25px;
    padding-right: 30px;
    padding-top: 50px;
    width: 320px;
}
.contpoint {
    border-bottom: 2px solid #6E6E6E;
    height: 20px;
    margin-bottom: 10px;
}
.contarea {
    border-bottom: 2px solid #6E6E6E;
    padding-bottom: 2px;
}
.tag {
    float: left;
    height: 20px;
    width: 70px;
}
input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: white;
    font-family: arial;
    font-size: 12px;
    height: 20px;
    margin: 0;
    padding: 0;
    width: 268px;
}
textarea {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: white;
    font-family: arial;
    font-size: 12px;
    height: 200px;
    width: 268px;
}
#send {
    background-image: url("images/layout/buttons.jpg");
    background-position: 0 -440px;
    background-repeat: no-repeat;
    height: 18px;
    margin-left: 306px;
    margin-top: 5px;
    padding-bottom: 1px;
    width: 44px;
}
#send:hover {
    background-position: 0 -460px;
}

Probier das mal aus

[hubspe]

Hi,

zuerst würde ich mal die groben technischen Fehler beseitigen.
Da werden Blockelemente innerhalb von inline-Elementen notiert (div innerhalb von a).

@Chris2011 habs nur kurz überflogen, aber leider ist deine Lösung teilweise unbrauchbar:
Das was mit visibility:hidden versteckt wird lesen auch die Screenreader nicht mehr vor.

[kalrheinzotto]

@chris was hast du denn genau verändert??

@hubspe: ist das so eine grosse sünde?? übrigens screenreader sind mir absolut egal da die seite absolut nur aus fotos besteht

[hubspe]

Zitat von kalrheinzotto

@hubspe: ist das so eine grosse sünde?? übrigens screenreader sind mir absolut egal da die seite absolut nur aus fotos besteht

wenn ich schaue da steht auf der Site Blog und der besteht doch sicher nicht nur aus Fotos.

Wie groß die Sünde ist weiss ich nicht.

Wenn es nach der großen Mehrheit geht ist es null Sünde, da denen Behinderte offensichtlich wurschtegal sind
(sie das aber natürlich nie offen zugeben würden)