Größe des Fensters ändern (CSS DAtei)

renee

Hallo zusammen,
folgede Datei bewirkt, dass sich ein großes Fenster von dem angeklickten Foto öffnet.

Da in der Datei scheinbar eine Größenbergrenzung fehlt, öffnen sich Fotos mit hoher Auflösung weit über den Bildschirm. Also das man mit den Balken skrollen muss.

Nur das Foto anzupassen habe ich hinbekommen, aber der Rahmen war trotzdem an die eigentlich Fotogröße angepasst, so dass man wieder scrollen musste um auf den Next Button zu kommen.

DA ich recht ahnungslos und ein blutiger Anfänger auf dem Gebiet bin, hab ich einfach einen Wert nach dem anderen geändert. Aber ohne Erfolg...

Kann mir einer sagen wo ich die Größe des ganzen Fensters fest definieren kann??? Dies müßte man ja sicherlich in ...px angeben, da bei % sich die Größe wieder nach der AUflösung richten würde...???

Code

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }


#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }


#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}


#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }


#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         


#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Alles anzeigen

threadi

Du kannst keine Webseite an eine Auflösung anpassen. Du kannst sie höchstens an den Viewport, also den Bereich im Browserfenster anpassen den deine Webseite einnehmen darf. Demzufolge kannst Du auch nicht per CSS das Fenster selbst beeinflussen, da CSS nicht dafür gedacht ist in Bereiche des Benutzers einzugreifen.

renee

Hmm, hab es schon geschafft den Bildern eine bestimmte Größe zuzuweisen, das die vor und zurück Buttons angepaßt waren hab ich auch hinbekommen, aber den Rahmen hab ich nicht klein bekommen...

Dass es eigentlich über die HTML Seite am günstigsten wäre habe ich mir auch gedacht, hab es aber nicht hinbekommen... (wie gesagt, bin blutiger Anfänger)
Die Seite soll auch nur Bilder anzeigen, daher hab ich die Beispielseite abgeändert....
Bei meiner Hompage lass ich mir vom Publisher helfen....

HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

    <title>Bilder von uns | Test Page</title>


    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>


    <style type="text/css">
        body{ color: #331; font: 13px 'Lucida Grande', Verdana, sans-serif;    }
    </style>


</head>
<body>




<h1><a href="http://www.----family.homepage.t-online.de">unsere Bildersammlung</em></a></h1>
<p><a href="http://www.-----family.homepage.t-online.de">by René </a></p>




<a href="Bilder/DSC07840.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07840.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07841.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07841.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07842.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07842.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07858.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07858.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07859.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07859.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07860.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07860.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07861.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07861.jpg" width="100" alt="" /></a>
<a href="Bilder/DSC07867.jpg" rel="lightbox[roadtrip]" ><img src="Bilder/DSC07867.jpg" width="100" alt="" /></a>




</body>
</html>

Alles anzeigen

Unregistriert

Hallo ich habe ein Problem, also ich habe meine Internetseite mit CSS formatiert.
Ich habe Grafiken, Texte, ... positioniert mit %.

Problem: Wenn jemand aber eine andere Auflösung hat, dann wird meine Internetseite nicht mehr richtig
dargestellt, dar die Positionierung kaputt geht.

Bsp:

body {margin:0; padding:0; width:100%; height:100%; position:absolute;}

div {}

#banner {position:absolute; width:100%;}
#bild_unter_banner {position:absolute; top:5%; width:100%; height:57.6%;}

#startseite_button {position:absolute; top:1%; left:28%;}

body {margin:0; padding:0; width:100%; height:100%; position:absolute;}

div {}

#banner {position:absolute; width:100%;}
#bild_unter_banner {position:absolute; top:5%; width:100%; height:57.6%;}

#startseite_button {position:absolute; top:1%; left:28%;}

--> meine Auflösung, mit der ich Sie geschrieben habe war 1366 x 768.

Mein Anliegen, ich möchte, das meine Internetseite(CSS-Layout) sich an die Auflösung des Browserfensters anpasst,
damit meine Positionierung nicht kaputt geht.

Würde mich freuen, wenn ich diese Seite nicht in 2 verschieden Auflösungen schreiben müsste.

Hiermit bedanke ich mich schon mal
Hoffe Ihr könnt mir helfen.

threadi

Browserfenster nehmen keine Auflösungen ein. Folglich ist es völlig egal, was für eine Auflösung Du hast. Eine Webseite kann man höchstens an Viewports anpassen - den Bereich den ein Browserfenster einer Webseite zur Verfügung stellt.

Wenn Du willst, dass deine Seite in verschiedenen Viewports einheitlich zu sehen ist, hast Du an sich 2 Möglichkeiten:
- Du passt deine Seite an bestimmte Mindestmaße an. Sollte der Viewport größer sein, bleibt der restliche Platz einfach leer.
- Du baust deine Seite dynamisch auf, so dass sie sich an verschiedene Viewports anpassen kann. So ist z.B. auch dieses Forum hier aufgebaut. Das geht aber nicht bei jedem Design, denn nicht jedes Design ist so flexibel.

Bei deinem Code-Ausschnitt sehe ich bereits ein Verständnisproblem bei dir. Du verwendest zu exzessiv absolute Positionierungen. Diese in Verbindung mit prozentualen Werten zur Positionierung führt garantiert zu Fehldarstellungen. Du solltest dir nochmal anschauen, wie man Elemente richtig platziert, ohne Positionierung.

Unregistriert

Zitat:

"Bei deinem Code-Ausschnitt sehe ich bereits ein Verständnisproblem bei dir. Du verwendest zu exzessiv absolute Positionierungen. Diese in Verbindung mit prozentualen Werten zur Positionierung führt garantiert zu Fehldarstellungen. Du solltest dir nochmal anschauen, wie man Elemente richtig platziert, ohne Positionierung."

Wie meinst du das mit der "exzessiv absolute Positionierungen" ???
Läuft das auf das Arbeiten mit Tabellen aus?

threadi

Nein, mit Sicherheit nicht. Denn Webseiten erstellt man weder mit Tabellen noch mit "div's". Wenn ich von richtiger Positionierung spreche meine ich schon float und Abstände etc. sowie die Verwendung von HTML-Elementen wofür sie tatsächlich gedacht sind: um Inhalte auszuzeichnen.

Unregistriert

Oh danke ...
habe mir das noch mal angeschaut... und jetzt verstanden
danke dir ...

Tags