Eingebundene Bilder in HTML anpinnen (locken)

Vasilyevich · 19. Februar 2014

Hi,

Ich habe für eine EVE Online Corp (Gilde) eine sehr einfache Webseite gebastelt die im Grunde nur aus Buttons (die aus eingebundenen Bildern bestehen) besteht die dann auf andere Websites weiterleiten die mit EVE zutun haben.

https://dl.dropboxusercontent.com/u/46305113/radio_izmir/radio_izmir.html

Wenn man die Seite offen hat und das Browser Fenster kleiner schiebt passiert folgendes

http://abload.de/img/beispiel1e3xad.jpg

Ich finde einfach keinen Weg die Buttons fest anzuordnen :/ Ausserdem verhält sich der Hintergrund auch sehr "merkwürdig" Eigendlich sollte es sich verhalten wie hier EVE Online is a Massive Multiplayer Online Roleplaying Space Game - EVE Online Alles bleibt wo es sein soll und der Hintergrund wird je nach bedarf größer.

Ja es ist meine erste Webseite, sie ist quasi nur für Corp (Gilden) interne nutzung und stark an die EVE-Online Homepage angelehnt

- Vasili

PS: Den weißen Rand krieg ich auch nicht weg :/

MysticBinary82 · 19. Februar 2014

1. Du hast kein Doctype definiert.
<!DOCTYPE html>
2. Würde ich die Styles in eine CSS Datei auslagern
3. Entweder floatest du die <p> tags oder klatschst jede horizontale Reihe in eine fest definierte <div>
4. Den weißen Rahmen um deine HTML bekommst du weg, wenn du in deiner css Datei folgendes schreibst:
*, html, body{margin:0;padding:0;}
5. Um das Backgroundimage zu skalieren bedarf es wohl eines einfachen Java-Skriptes wo du prüfst wie die Fenstergröße ist und entsprechend dem das Hintergrundbild skalierst.

Crysis nerd · 19. Februar 2014

Mein Vorposter hat zwar in allen Sachen Recht, aber hier ein einfacher "Tipp": Probier aus, bis zu welcher Größe es noch geht. Und dann machst du
<body style="min-width: XXXpx">
wobei XXX natürlich dem Wert entspricht, der gerade noch geht. Wenn der Nutzer danach das Fenster kleiner macht, bekommt er einen Scrollbalken.
Also das ist jetzt das einfachste und schnellste.
Wenn du allerdings generell die Homepage schön machen möchtest, guck dir nochmal alle Punkte von MysticBinary82 an.

Grüße

Rho · 19. Februar 2014

Source: https://gist.github.com/anonymous/49923d73f9a735d405b2
Preview: http://codepen.io/anon/pen/ExvjC

Vasilyevich · 19. Februar 2014

Rho schrieb:
Source: https://gist.github.com/anonymous/49923d73f9a735d405b2
Preview: http://codepen.io/anon/pen/ExvjC

\o/ das ist ja großartig! vielen dank

Dank auch an MysticBinary82 und Crysis nerd.

Eingebundene Bilder in HTML anpinnen (locken)

Vasilyevich

Schraubenverwechsler(in)

MysticBinary82

Software-Overclocker(in)

Crysis nerd

Freizeitschrauber(in)

Rho

Guest

Vasilyevich

Schraubenverwechsler(in)

Ähnliche Themen