Grafik und Bildschirmauflösung

Kazu · 16. August 2010

Hiho Leute!

Ich habe gerade erst gelernt HTML und CSS zu benutzen. Ich wollte mich nun langsam rantasten und viel kennen lernen.
Ich möchte nun eine Seite erstellen wie hier angegeben: <a class="postlink" href="http://www.html-seminar.de/fertiges-beispiel-css-pur.htm">http://www.html-seminar.de/fertiges-bei ... ss-pur.htm</a>
Ich ändere natürlich Sachen um und dergleichen aber ich taste mich wie gesagt erstmal langsam ran.
Ich möchte nun diese Grafik die dort oben zu sehen ist umändern. Wenn ich aber nun meine eigene Kreation dort
einfüge, hängt es von der Bildschirmauflösung ab wieviel ich vom rechten Teil der Grafik sehe.
Wie mache ich, dass sich die Grafik genau den Bildschirmauflösungen anpasst.
Den Quellcode habe ich erstmal so übernommen von der Seite: <a class="postlink" href="http://www.html-seminar.de/fertiges-beispiel-css-pur.htm">http://www.html-seminar.de/fertiges-bei ... ss-pur.htm</a>
Keine Angst, ich stelle dies nicht online. Ich möchte einen Quellcode nicht klauen, sondern selbt erstellen.
Nur würde ich so gerne anfangen. Hoffe ihr könnt mir helfen.

mfg

Kazu

Basi · 16. August 2010

Mit einem Grafikprogramm kannst du das Bild leider nicht so Anpassen das es überall genau rein passt.

Du kannst mit 2 Bildern arbeiten, eines Rechts anzeigen und das andere Links.

Kazu · 16. August 2010

ich möchte das ja auch nicht mit einem Grafikprogramm machen sondern mit HTML bzw. CSS halt programmieren.

lauras · 16. August 2010

Also eine Grafik so anzupassen geht mit HTML-CSS nicht direkt.
Eine Grafik hat ja immer eine bestimmte Größe. Skalieren könnte man das vielleicht mit Javascript oder ähnlichem, aber nicht mit HTML und CSS.

Was du probieren kannst ist das was der Basiii gesagt hat.
Du hast rechts eine "Endgrafik", die dein Bild abschließt und Links die Grafik. Dann schiebst du die rechte über die linke und so entsteht der Eindruck, dass das eine Grafik ist.
Es muss natürlich passen, von Übergang her.

Wenn das nicht möglich ist:
Eine Grafik nehmen, die sehr breit ist, sodass sie bei kleineren Bildschirmen abgeschnitten wird, aber auf größeren noch sichtbar ist.
Oder eine kleine Grafik nehmen und sie nach rechts wiederholen (bei Mustern, z.B.).

Ansonsten würde mir nichts einfallen

LG
Laura

feinshdens · 17. August 2010

das Bild von der Seite ist über 1800px breit.

also wurde eine der Methoden verwendet die Lauras beschreiben hat^^ (welche? das kannst du mit probieren rausfinden )

Gruß

Basi · 17. August 2010

Ich muss leider dazu sagen das auf <a class="postlink" href="http://www.html-seminar.de/fertiges-beispiel-css-pur.htm">http://www.html-seminar.de/fertiges-bei ... ss-pur.htm</a> das Bild auf meinem Desktop nicht ausreicht, ich kann nicht die komplette Überschrift lesen.

[Blockierte Grafik: http://webdesign.sarkkan.de/html_seminar_beispielseite.jpg]

Sören · 17. August 2010

Zitat von "Basiii"

Ich muss leider dazu sagen das auf <a class="postlink" href="http://www.html-seminar.de/fertiges-beispiel-css-pur.htm">http://www.html-seminar.de/fertiges-bei ... ss-pur.htm</a> das Bild auf meinem Desktop nicht ausreicht, ich kann nicht die komplette Überschrift lesen

Ist bei mir genauso, ist nicht für 1920er Bildschirme ausgelegt.

Man sollte die Grafik mindestens 2000px breit machen, damit sie überall komplett angezeigt wird.

Axel · 17. August 2010

Zitat von "Sören"

Ist bei mir genauso, ist nicht für 1920er Bildschirme ausgelegt.

Man sollte die Grafik mindestens 2000px breit machen, damit sie überall komplett angezeigt wird.

Grafik ist nun breiter- allerdings würde genau genommen auch 2000px nicht reichen - einige Monitore im Profibreich haben höhere Auflösungen

Grafik reicht nun für die HD-Fernsehauflösung

Elroy · 17. August 2010

Zitat von "Sören"

Ist bei mir genauso, ist nicht für 1920er Bildschirme ausgelegt.

Man sollte die Grafik mindestens 2000px breit machen, damit sie überall komplett angezeigt wird.

Blauen Hintergrund der sich wiederholt und die Säulen als Bild dann siehts bei jeder Auflösung perfekt aus und man braucht keine Monstergrafik von 2000px.

Gruss
Elroy

4leafclover · 18. August 2010

Kann man das ganze nicht auch über CSS machen?
So wie ich das verstanden habe möchte er, dass das Bild immer einen bestimmten prozentualen Teil der Bildschirmauflösung einnimmt.

Wenn er über CSS bei dem Bild den width-Tag verwendet müsste das doch gehen.
Zum Beispiel wenn das Bild, den ganzen Bildschirm breit sein soll müsste er nur

Code

{ 
width:100%;
}

verwenden.

timtim · 18. August 2010

Wenn das keine Vektor grafik ist, verzerrt das nur das Bild.

Möglich, das bild auf die breite zu strecken ist es schon, sieht aber nicht schön aus..

Aber für solche probleme gibt es ja Vektor grafiken =).

Greetz TimTim

Kazu · 19. August 2010

ich hab da noch ne weitere frage.
Auf <a class="postlink" href="http://www.wowszene.de">http://www.wowszene.de</a> sieht man wenn man die bildschirmauflösung verändert das das ganze sich in die mitte verschiebt. Die Hintergrundgrafik wird also nicht wie bei
mir nach links oder so geschoben sondern gleichmäig in die mitte. Wie verändere ich das denn?

mfg

Kazu

timtim · 19. August 2010

Ich weis zwar nicht, wie genau deine blöcke, DIV container angeordnet bzw verteilt sind, aber mit

PHP

<span class="syntaxdefault"><br /><br /></span><span class="syntaxcomment">#head{<br /></span><span class="syntaxdefault">margin</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br />}<br /> </span><span class="syntaxdefault"></span>

Kannst du die Div container zentrieren.

und mit

Code

#head{
text-align:center;
}

die inhalte.

Greetz TimTim

lauras · 19. August 2010

Und mit

Code

xxx {
background-position: center;
}

zentrierst du das Hintergrundbild

Schau mal hier:

http://de.selfhtml.org/css/eig…d.htm#background_position

Gruß

Kazu · 23. August 2010

omg ein neues problem

Code

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
}







#hintergrund {
 
  background:url(face.jpg) no-repeat left top;
  position:absolute;
  width:100%;
  height:100%;
  z-index:1;
}




#inhalt {
  margin-left:20%;
}







</style>




</head>




<body>




  <div id="hintergrund"> </div>




<img id="inhalt" src="icon.jpg" />




</body>

Alles anzeigen

so sieht mein code aus. Ich habe halt vor eine Startseite zumachen mit einem Hintergrundbild in Schwarz/Weiß und einem roten Knopf als bild um auf die eigentliche
Seite zu gelangen. Das mit dem Hintergrundbild passt. Es passt sich jeder Hintergrundauflösung an und dergleichen. Top.
Nun möchte ich aber das Icon verschieben, was eine Grafik ist und als Link dient auf die eigentliche Seite.
Wie kriege ich das hin das ich erstens diese Icongrafik auf einen bestimmten Punkt setze und zweitens wie schaffe ich es das sich dieses icon ebenfalls wie der Hintergrund
der Auflösung anpasst?

mfg

Kazu

Elroy · 24. August 2010

Hallo.

Wo möchtest du das Bild denn positionieren, und was bitte ist eine Hintergrundauflösung?

Gruss
Elroy

Kazu · 30. August 2010

das hab ich schon raus aber danke habe nun einanderes problem...mal wieder
hab ne neue seite die ich machen will.
<a class="postlink" href="http://img704.imageshack.us/i/universumk.jpg/">http://img704.imageshack.us/i/universumk.jpg/</a> so sieht der Hintergrund aus. Der wird noch bissl verändert aber das ist erstmal uninteressant.
Ins weiße Feld kommt nun der Inhalt. wenn der inhalt größer als das Bild ist, endet das bild und geht in schwarzen Hintergrund über.
Allerdings möchte ich das dann der Hintergrund auf folgende weise weitergeht <a class="postlink" href="http://img163.imageshack.us/i/repeat.jpg/">http://img163.imageshack.us/i/repeat.jpg/</a>
Meine frage ist nun wie das im Code aussehen sollte.
Mein Code sieht so aus.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />




<style type="text/css">
<!--
* {
  margin:0;
  padding:0;
}




html, body {
  background:url(universum.jpg) no-repeat;
  height:1000px;
  background-position:center;
  font: 80% Verdana, Arial, Verdana, Helvetica, sans-serif;
  background-color: #000000;
  color: #ff0000; 

}







-->
</style>




</head>




<body>




</body>
</html>

Alles anzeigen

Ich hoffe ihr Pros könnt mir wie immer weiterhelfen oder Tipps geben

Sarkkan · 30. August 2010

Zitat von "Kazu"
das hab ich schon raus aber danke habe nun einanderes problem...mal wieder
hab ne neue seite die ich machen will.
<a class="postlink" href="http://img704.imageshack.us/i/universumk.jpg/">http://img704.imageshack.us/i/universumk.jpg/</a> so sieht der Hintergrund aus. Der wird noch bissl verändert aber das ist erstmal uninteressant.
Ins weiße Feld kommt nun der Inhalt. wenn der inhalt größer als das Bild ist, endet das bild und geht in schwarzen Hintergrund über.
Allerdings möchte ich das dann der Hintergrund auf folgende weise weitergeht <a class="postlink" href="http://img163.imageshack.us/i/repeat.jpg/">http://img163.imageshack.us/i/repeat.jpg/</a>
Meine frage ist nun wie das im Code aussehen sollte.
Mein Code sieht so aus.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />




<style type="text/css">

</style>




</head>




<body>




</body>
</html>
Alles anzeigen
Ich hoffe ihr Pros könnt mir wie immer weiterhelfen oder Tipps geben
Alles anzeigen

Öhm.. dieser ein Hintergrund scheint doch einfach nur schwarz zu sein, oder?^^

Code

html {
    background-color: #000000;
    background:url(universum.jpg) no-repeat;
    width: 100%;
    padding: 0 [BREITE EINES DER BILDER];
}
body {
    margin: 0 auto;
    background-color: #FFFFFF;
    ...
}

Alles anzeigen

So geben wir dem html das Hintergrundbild + einen schwarzen Hintergrund.
Dem Body, wo der Inhalt rein kommt, geben wir einen weißen Hintergrund.
Mit dem Padding des html, achten wir darauf, dass nichts über dem Blild liegt (Der Wert sollte die Breite des schwarzen Bereiches sein, mit dem Planeten).

So sollte das auch klappen^^

Kazu · 30. August 2010

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />




<style type="text/css">
<!--
* {
  margin:0;
  padding:0;
}




html {
    background-color: #000000;
    background:url(universum.jpg) no-repeat;
    width: 100%;
    padding: 0 1920;
    margin:auto;
}
body {
    margin: 0 auto;
    background-color: #FFFFFF;

}




-->
</style>
</head>
<body>
 lol test und so                                       
</body>
</html>

Alles anzeigen

Wenn ich das mache habe ich diesen weißen Balken in der Mitte aber das ganze soll sich zusätzlich noch in die mitte verschieben ähnlich wie bei wowszene.de wenn man die bildschirmauflösung ändert und alles von der mtite ausgeht.
zudem habe ich mal im body die worte "lol test und so" eingegeben und von oben geht dann je mehr ich schreibe ein weißer balken runter.
ich habe mal hochgeladen wie die fertige seite denn im grunde aussehen soll von der struktur.

<a class="postlink" href="http://img838.imageshack.us/i/aussehen.jpg/">http://img838.imageshack.us/i/aussehen.jpg/</a>

mfg

kazu^^

Sarkkan · 30. August 2010

Dann schau dir doch mal den Quellcode der Seite aus.. <.<
mal davon abgesehen, dass man kein Tabellen Layout verwendet.. müsste man das etwa so richtig machen:

Code

...
<style>
body {
    background-color: #000000;
}




div#Links {
    background:url('links.jpg') no-repeat right;
    width: auto;
    float: left;
}




div#Content {
    width: 1000px;
    background-color: #FFFFFF;
    float: left;
    margin: 0 auto;
}
</style> <!-- Das lagerst du übrigens aber bald mal aus -->
</head>
<body>
<div id="Links"> </div>
<div id="Content"> Test.. blablabla </div>

Alles anzeigen

Grafik und Bildschirmauflösung

Jetzt mitmachen!

Teilen