✔ [CSS] Beim Laden alle Bilder (Quer/Hochformat) quadratisch

[shutdown]

Hi!

Ich erstelle gerade meine erste Homepage, die zum größten Teil auf CSS basiert.

Nun habe ich folgendes Problem, das ihr euch auf dieser Seite anschauen könnt.

Wenn man diese Seite das erste mal lädt, dann erscheinen alle Bilder, egal ob Quer - oder Hochformat quadratisch.

***Edit:
Mir fällt gerade auf, dass das gleiche Problem im linken Bereich der Seite auch auftaucht.
Der einzige Unterschied zum unten genannten CSS-Teil besteht darin, dass die %-Angaben für die img's nicht beide gleich sind, sondern height größer ist - was aber gar nicht dargestellt wird..

***

Bei erneutem Laden über die Navigationsleiste (Aktualisieren im Browser bringt da wieder genau den gegenteiligen Effekt) erscheinen dann die Bilder im richtigen Format.

Schließt man das Browserfenster und surft die Seite erneut an, dann ergibt sich das selbe Problem wieder - ich gehe also mal davon aus, dass es nicht am Cache liegt.


Hier der das ganze betreffende Code:

Das absolut positionierte div mit den Bildern als Inhalt:

 <div id="right_content">
 
</div>

Der Inhalt dieses divs wird dynamisch mit PHP/MySQL erzeugt. Der Code für ein Bild sieht wie folgt aus:

<a href="./index.php?page=Aquarell&bild=Kaltern"><img src="../bilder/kaltern.JPG"></a>

Und hier die dazu gehörigen Ausschnitte der CSS-Datei:

#right_content
{
    position: absolute;
    left: 256px;
    top: 192px;
    width: 685px;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

#right_content img
{
    width: 15%;
    height: 15%;
    border-color: white;
    padding: 15px;
    vertical-align: middle;
}

Stört euch bitte nicht an den nicht funktionierenden Links - die Seite ist ja noch im Aufbau


Vielen Dank schon mal im Voraus!

cu shutdown

 

[simonef]

Hallo shutdown,

also bei mir (IE) sieht das ganze aus, wie du im Anhang siehst.

Egal ob vor oder nach Reload, die Bilder stimmen immer, und das ganze Div ist aber falsch....

Ganz abgesehen davon, warum "border-color: white;"? (sieht doof aus, wenn man das dann mit der Maus markiert...)

cu
simone

 

[shutdown]

jep sorry - hatte vergessen mitzuteilen, dass ich den Fehler gefunden habe:

Für die Bilder darf nur eine Breitenangabe gemacht werden.

Breite UND Höhe verträge sich nicht - auch wenn ich nicht weiß warum.

border-color: white; deshalb, weil da eventuell noch ne Farbe hinkommt - oder auch nicht, mal schauen ;-)


*edit*

Aber was hast du denn für ne Bildschirmauflösung
Ich hab das nämlich sowohl auf nem 15 Zoll als auch auf nem 17 Zoll getestet und die Positionierung des divs passt da eigentlich (1024x768 Pixel)


*end edit*

 

[simonef]

Hallo shutdown,

die Auflösung hab ich auch.
Hast du vielleicht einen anderen Browser?
Im IE geht sowas nämlich oft nicht, wegen der Breitenangaben.

Tutorial dazu

cu
simone

 

[shutdown]

hmmm...

also ich hab den IE 6 und da funktionierts einwandfrei.

Dann hab ich das ganze jetzt auch noch im Mozilla getestet, da stimmt die Ausrichtung zwar nicht ganz, aber so total falsch wie auf deinem Bild krieg ich's auch da nicht hin

 

[simonef]

Hallo shutdown,

den IE6 hab ich auch.
Liegt auch nicht am Slimbrowser, sieht im "reinen IE6" auch so aus.

Kann das evtl. an der Schrift liegen? (meiner eingestellten incl. Größe)

Weil ich den Rest vom CSS nicht hab, kann ich dir da leider nicht weiterhelfen, sonst könnt ich´s ausprobieren, wie´s bei mir stimmt.

cu
simone

 

[Gumbo]

Befrei das Design erst einmal von seinen Tabellen und ersetze diese durch semantische Elemente. Dann kann ich dir auch weiterhelfen.

 

[shutdown]

nun mit den Tabellen hat das Problem glaub ich nicht viel zu tun.

Die Tabellen-Struktur hab ich auch erst nachträglich wieder eingefügt, aus folgenden Gründen:

- wenn ich div's einsetzte, erscheint der nächste div automatisch UNTER dem letzen
-- wenn ich das aber nicht will, muss ich relativ positionieren
--- wenn ich aber relativ positioniere, dann springt mir das right_content -div aus dem Layout - sprich: Es ist insgesamt größer als der Untergrund (div id=container) - und dieser Untergrund ist nur so groß, wie das größte in ihm enthaltene Element (left_content = Unternavigation)
---- Darum habe ich mit diesen Tabellen ein div eingesetzt, dass NICHT relativ positioniert werden muss, und somit den Untergrund mit ausdehnt. Dieses div (id= right_filler) erzeuge ich dynamisch mit eben der Größe, die ich brauche, um bei entsprechendem Inhalt rechts und zu kurz geratener Navileiste links den Untergrund mit auszudehnen.

Wenn hierfür jemand nen besseren Weg weiß: BITTE SAGT IHN MIR!
Ich fand das nämlich auch ziemlich bescheiden.

Jedenfalls, was die Bildgröße angeht, ist das Problem gelöst (wie gesagt, nur Breite angeben und er skaliert die Bilder richtig)

Allerdings scheint es jetzt Anzeigeprobleme zu geben.

@simonef: Wenn ich die Schriftgröße im Browser ändere, dann verschiebt sich bei mir nur die gesamte Seite nach unten (bedingt durch die Schriftgradänderung). Das relativ positionierte right_content div hängt dann ein wenig hinterher - aber eine Überschneidung links bekomme ich nicht hin

 

[simonef]

Hallo shutdown,

wo ist denn da bitte das Problem


Deine genauen Größen weiß ich natürlich immer noch nicht und das ganze ist in keinster Weise irgendwie optimiert. (Buttons kann man noch von Farbe etc. zusammenfassen)..
Aber 1 Stunde Arbeitszeit reicht, sonst schick ich dir noch ´ne Rechnung

cu
simone

 

[shutdown]

danke schön!

Werd mir das ganze mal genau durchschauen (ist doch noch ziemlich viel drin, was mir neu ist - wie gesagt, mein erstes CSS-Layout)

Vielen Dank nochmal

cu shutdown