zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden dynamische bildgröße und absolute positionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.04.2011, 00:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2011
Beiträge: 2
kalrheinzotto befindet sich auf einem aufstrebenden Ast
Standard dynamische bildgröße und absolute positionierung

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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.04.2011, 00:31
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.005
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.04.2011, 09:17
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 297
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

Code:
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
Mit Zitat antworten
  #4 (permalink)  
Alt 28.04.2011, 09:29
Benutzerbild von hubspe
display:schwarzgelb;
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.068
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 28.04.2011, 15:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2011
Beiträge: 2
kalrheinzotto befindet sich auf einem aufstrebenden Ast
Standard

@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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.04.2011, 15:58
Benutzerbild von hubspe
display:schwarzgelb;
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.068
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von kalrheinzotto Beitrag anzeigen
@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)
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
absolute Positionierung in Buttons - FF Bug? TobiasPl CSS 3 14.04.2010 08:37
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 15:56
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 14:07
IE: absolute positionierung mit width und height auf auto TheSilentOne CSS 4 06.11.2007 16:17
Barrierefreiheit - Absolute Positionierung dbub Barrierefreiheit 19 13.06.2007 16:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.