• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kleinere Probleme mit meiner Website

L

ldb

Mitglied
Hallo liebe CSS-ler,
Ich habe meine Website nach den Verbesserungsvorschlägen in "Website checken" ein bisschen überarbeitet. Dabei tauchten zwei, drei kleinere Fragen auf. Ich hoffe mal, ihr könnt mir helfen :) Die Website findet ihr hier: Workbook Lukas Bieri

Ich möchte das Copyright unten rechts zentriert in der Infobox anzeigen. Da aber das Copyright eine absolute Position hat, ist der Abstand je nach Zoomstufe und Browser immer etwas anders.

Wenn ich in der Suchmaschine nach etwas suche (Beispiel: Lorem Ipsum), verschiebt meine loading-gif die ganze Tabelle mit den Suchergebnissen nach unten. Sobald die Suche aber beendet ist, verschwindet das gif und die Tabelle rutscht wieder nach oben. Schöner wäre es, wenn die Tabelle immer an der gleichen Position wäre. Wie lässt sich das bewerkstelligen?

Wenn ich die Seite auf dem iPad anschaue, ist das Eingabefeld der Suche verschoben. Zwar nur um ca. 10 Pixel, aber es sieht nicht schön aus... Was kann ich da machen?

Schönen Abend und Danke schon im Vorraus!

LDB
 
Etwas ist mir noch eingefallen:

Ich möchte die Inhalt-div nicht mit einer Scrollbar versehen, sondern die div gegen unten grösser werden lassen, wenn der Inhalt nicht mehr darin Platz hat. Wenn ich der Inhalt-div eine min-height gebe, dann schaut der Text einfach über den Rand raus, aber die div-Grösse bleibt gleich...
Liegt das vielleicht daran, dass ich darüber noch einen h1-Tag habe?!

Gruss und Dank,
LDB
 
Zu Frage eins:
Wenn du statt bottom:15px ein bottom:1.5em; nimmst, bezieht sich der Abstand auf die aktuelle Schriftgröße und nicht mehr Pixel. Und die Schriftgröße ändert sich ja mit.
 
Zu Frage zwei:
Das Bildchen, das da erscheint, hat die id "loader". Das div, in dem es auftaucht hat die id "searchresult". Wenn du jetzt in dem Div oben ausreichend Platz einräumst (padding?) und es relativ positionierst, kannst du das Bild darin absolut positionieren, ohne dass sich die übrige Geometrie verändert, ob es nun da ist oder nicht.
Leider geht das alles sehr schnell, so dass das im Firebug nicht genauer nachzuvollziehen ist. Aber wenn die Positionierungen stimmen, kannst du das ja in der css-Datei ausknobeln.
 
Zur Frage vier:
Das Div #scrollbar hat auch ne feste Höhe. Außerdem floatet es überflüssigerweise. Hier reicht ne min-height ohne float. Dann geht das auch mit der min-height des #inhalt. Schmeiß außerdem noch das overflow-x: auto; raus ...
 
Hallo bodil,
Danke für den Hinweis mit den em, das hatte ich mal gelesen und schon lange wieder vergessen- jetzt hat es Wunder gewirkt! Damit wären sogar schon zwei Probleme behoben, ich habe dem Suchfeld nämlich auch em-Abstände gegeben und das iPad ist jetzt auch glücklich :)

Es ist noch ein kleineres Problem dazugekommen (danach ist's aber gut!):

Es haben mir einige aus dem Forum empfohlen, dass ich das Hintergrundbild direkt im CSS integrieren soll. Wenn ich allerdings ein div "Hintergrund" erstelle und im CSS

background-image:background.jpg;
background-repeat:none;

einbaue, wird der Background zwar auf die Bildschirmgrösse skaliert, aber beim wegzoomen wiederholt sich der Hintergrund trotzdem...

Gibt es dafür eine Lösung?

Grüsse,
LDB
 
Ups!
Während ich ein Dankeschön für die Erste Lösung geschrieben habe, hast du schon all meine Probleme beseitigt!

Vielen, vielen, vielen Dank! Schneller und besser geht es wirklich nicht mehr!

Schönen Abend!
 
Hallo Bodil,
Danke für den Hinweis, das hatte ich einfach aus dem Kopf so geschrieben, in meiner CSS hatte ich es richtig.

Ich habe zwei Probleme, die aufgetaucht sind. Dazu habe ich die Seite mit den Änderungen hier hochgeladen:
Workbook Lukas Bieri

Wie du sehen kannst, vergrössert sich die "Alles"-div nicht mit. Was kann ich da tun?

Das mit dem Background funktioniert nicht so wirklich, wenn du wegzoomst, kannst du das Problem sehen. Eigentlich sollte der Background immer das volle Browserfenster füllen, egal welche Zoomstufe.

Gruss,
LDB
 
Hallo Tronjer,
Danke für den Link! Leider funktioniert das bei mir nicht so richtig (Aurora/ MacOSX 10.6. )

Bei mir wird der Hintergrund nur gerade in der vollen Grösse angezeigt, aber der Bildschirm ist nicht überall gefüllt. Ein Screenshot findet man hier:
screenshot.jpg

Hoffe, das hilft :)

Schönen Abend,
LDB
 
Um ein Hintergrundbild auf die Größe des Browser-Windows zu bringen, gibt es zwei Möglichkeiten. Die elegantere ist das bereits erwähnte CSS3-Attribut background-size: cover. Mit CSS2 kannst du es so lösen:

HTML: 
html {
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    background: url('path/image.png') no-repeat;
}

Sollte beides nicht funktionieren, liegt dein Problem wo anders.
 
Hallo Tronjer,
Danke für den Tipp! Mit der zweiten Methode wird das Bild zwar so skaliert, dass es das gesamte Browserfenster abdeckt. Wenn man aber wegzoomt, verschiebt sich das Bild nach oben links und wird mitskaliert. Mit meiner alten Methode war das nicht so. Gibt es dafür eine Lösung?
 
Du hast es ja auch nicht so gemacht, wie ich es beschrieben habe, sondern dein Hintergrundbild in ein Div gelegt und dieses mit position: fixed im Viewport des Browsers festgenagelt. Lege es statt dessen auf den Body, dann sollte auch background-size: cover funktionieren.
 
Hallo Tronjer,
Ich nehme an, du gehst von meinem aktuellen Stand online aus? Der ist nämlich noch von gestern. Ich bin im Moment nur am ausprobieren und deshalb ist der Stand online nicht aktuell. Werde trotzdem mal nachschauen, ob das der Fehler ist... :)

Gruss
LDB
 
Ich habe es jetzt mal online gestellt. Wie man sehen kann, erscheinen Scrollbalken, um das Bild in voller Grösse anzuzeigen.

Oder habe ich da was falsch gemacht? Ich habe die Änderung übrigens nur beim index.html vorgenommen
 
Wenn Du noch alle Innen- und Außenabstände zurück setzt, dann sieht es ok aus.

Code: 
* { padding: 0;margin: 0; }
 
Hallo threadi,
Danke für den Tipp. Das Bild wird jetzt zwar schön auf die Grösse des Bildschirmes angepasst, aber wenn ich wegzoome, wird das Bild immer noch kleiner.

Ich glaube, ich lasse das Ganze einfach so, wie es von Anfang an war- und lebe mit dem Wissen, keinen 100%ig perfekten HTML-Code zu haben. Valide ist er ja trotzdem...

Gruss und schönen Abend!
 
Das mit dem Zoom kann ich im Firefox gerade gar nicht nachvollziehen. Was meinst Du genau? Welchen Browser nutzt Du?
 
Ich nutze Aurora- die "Testversion" von Firefox. Kann es sein, dass es daran liegt? Ich werde mir das gleich mal in einem anderen Browser ansehen...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben