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

Dynamischer Background & Content oder Statisch?

K

kasmo

Neues Mitglied
Hi zusammen,

ich bin neu hier und freue mich ein forum gefunden zu haben in dem ich mich die nächste Zeit aufhalten werde =)
Freue mich schon auf eine gute "Zusammenarbeit".

Ich bin neu in CSS und HTML, bin mehr auf learning by doing Prinzip nachdem ich Tutorials durchgemacht habe.

Jetzt habe ich eine Webseite mit eiinem Background-Image und dieses wollte ich so optimieren, dass jede Auflösung das bewältigen kann.

Habe im Internet jetzt auch ein paar Lösungsansätze gesehen gehabt mit ("margin-left: -300px bei 600px weight usw). Kann mir die Ansätze nicht erklären, funktionieren auch nciht.

Habe hier den CSS Code mal und würde mich über ein paar Antworten freuen.

HTML: 
html {
 width: 1024px;
 height: 768px;


}

body{
  background-image: url("html/background.png");
 background-repeat: no-repeat;
 background-position: center top;
 background-color: #88a0bf;
 z-index: 1;

}




.content {
 background-image: url("html/content.png");
 position: absolut;

 width: 384px;
 height: 194px;
 margin-left: 15%;
 margin-top: 26%;
 background-repeat: no-repeat;
 z-index: 2;
 background-position: 75% 30%;
 text-align: center;

}

So sieht es bei 1090er Auflösung aus.



Uploaded with ImageShack.us
 
hey und willkommen ;)

setzt doch erstmal ein container drum , der alles zentriert ..
PHP: 
div#container {
margin:0px auto;
width:1000px;
}
.. dadurch ist dann schonmal alles mittig , egal welche auflösung
 
um deinen gesamten body ... also dann zb
PHP: 
<body><div id="container">dein inhalt </div></body>

#edit, was ich gerade noch sehe ... verzichte auf absolute positinoierungen und auch auf % angaben
 
Hallo.

Vergiss den Container.
Das ist eine Standard Antwort von NE4Y die er bei allen Darstellungsproblemen gibt.

Ich nehme an du möchtest das deine Webseite den gesamten Viewport ausfüllt?
Dann ist das hier falsch:
Code: 
html {
 width: 1024px;
 height: 768px;
}
Hier vergibst du eine feste Hähe und Breite, da ist nichts mit dynamisch.

Möchtest du aber das deine Webseite eine feste Breite hat und immer in der Mitte des Bildschirms sitzt dann gib deinen body eine feste Breite und zentriere ihn mit margin: 0 auto;

Gruss
Elroy
 
Hi Elroy,

dankeschön.
Ja das ist mir klar, dass durch die feste Breite im HTML die nicht dynamisch wirkt.
Habe ich auch nur "proforma" gemacht, weil sich sonst ständig mein Content verschiebt bei verschiedenen Auflösungen.

Margin: 0 auto;

hilft mir schonmal weiter.
Jetzt bräuchte ich nur noch eine Idee wie ich die Page auf verschiedene Auflösungen anpassen kann?!
Weil ohne width und height verschiebt sich mein Content bei andere Auflösung =(
 
Hallo.

Die Darstellung deiner Webseite hat nichts mit der Auflösung zu tun sondern ganz alleine mit dem vorhandenen Viewport.

Nimm die absolute Positionierung raus und positioniere deinen Content mit margin und padding.
Verwende ausserdem für die Positionierung keine Prozentwerte.

Gruss
Elroy
 
Ok das hat geklappt danke ;)
Jetzt habe ich aber noch ein Problem, bzw kein Problem (es ist bewältigbar aber aufwendig).
Und zwar immer wenn ich jetzt etwas neues hinzufüge wie z.b. den Facebook-Like Button und dann verschiebt sich mein komplettes Menü und mein Content und alles was nicht der Hintergrund ist.

Ist das lösbar indem ich alle ID's auf position: fixed setze?
Weil so habe ich den Facebook Live Stream ohne Probleme versetzen können?

So regel ich sonst alles mit margin und padding, sobald ich eine Sache veränder, verschiebt sich der Rest auch mit (da fühlt man sich ja wie in Tabellen von HTML =( )
 
Hallo.

Kann man die Seite mal sehen.
Wenn das richtig gemacht ist sollte sich da eigentlich nichts verschieben.

Gruss
Elroy
 
HTML: 
<html>
 <head>
 <title>M.K. Computerservice</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
Du hast keinen Doctype gesetzt, auch die Kodierung (charset) fehlt. Ergänze das bitte und versuch´s erneut.
 
Du schreibst in XHTML, also einen XHTML-Doctype. Für die Kodierung gibt´s verschiedene Varianten, die meist verwendete ist wohl UTF-8. Hier findest Du weitere Infos: Kodierung allgemein. Nach diesem Muster:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
nur auf Deine Bedingungen umgebaut
 
dankeschön, das thema werde ich mir genauer anschauen.

Trotzdem verschiebt sich meine Navigation und alles wenn ich ein Bild auf align="left" setz =(
 
Nein, ich schrieb, den Doctype entsprechend umbauen. Es muss so lauten:
HTML: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Sorry, hätte ihn auch gleich korrekt benennen können. Wenn Du einmal dran bist, setz auch noch noch den charset ein:
HTML: 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Der gehört unterhalb des Starttags "head".
 
jupp, aber jetzt haste 2 charsets drin:
HTML: 
 <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 <title>M.K. Computerservice</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
Nimm bitte den ISO wieder raus.

Ich bin momentan im Büro, da hab ich nur ´nen IE7. Ich kann hier leider keinen FF installieren und daher ein wenig eingeschränkt in meinen Möglichkeiten.

edit: allerdings ist die Darstellung jetzt schon wesentlich gefälliger als bislang
 
oh man ich muss echt mehr lernen xD

So habe es geändert.

Kein Thema ich habe auch noch bis morgen Zeit =)
Hauptsache früher oder später krieg ich das bereinigt damit ich weiter verfahren kann ^^

/edit: gefälliger?
wirklich? Ich finde kein Unterschied bis auf die Umlaute ^^
 
Jupp, Du könntest schon mal die Umlaute überarbeiten. Wenn Du etwas ohne oder mit der falschen Kodierung anlegst und dann auf UTF-8 umbaust, hauts gerne mal die Umlaute raus. Könnte auch an einer Kodierung mit "BOM" liegen. Bitte mal schauen, ob Du in Deinem Editor die Kodierung auf "UTF-8 ohne BOM" umstellen kannst. Dann sollte es funzen.
 
Also die Umstellung auf UTF8 hat geklappt. ... ohne BOM gibt es nicht in meinem Editor, aberr nur UTF8 klappt ja auch =)

//EDIT
Komisch auf meinem Handy ist es nicht verzerrt und wird vollkommen korrekt angezeigt, aber bei Seamonkey (FF) am PC nicht? oO
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben