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

Auflösung - Grafik verutschen

tarik02

tarik02

Mitglied
Hey,

ich hätte mal wieder ein Problem:
auf meiner Seite verutschen die Grafiken (diese Verzierungen und die Schrift) bei anderen Auflösungen als bei meiner (1680x1050).
Ich hatte schon versucht, alle Angaben auf "%" umzustellen. Geholfen hat es trotzdem nicht.
Ich hoffe ihr könnt mir helfen... :D

Browser: FF 4.0
OS: XP

Danke im Vorraus!

T02
 
Eine Webseite passt man nicht an Auflösungen an. Eine Webseite weiß nämlich nichts über Auflösungen. Eine Webseite nimmt immer nur den Viewport ein und der kann auch mal irgendwas ganz krummes sein.

Dein CSS-Code ist imho nicht richtig durchdacht. Du verwendest margins und absolute Positionierung an Stellen wo das nicht mal nötig wäre. Die Grafiken wie auch die Boxen kannst Du auch anders ausrichten. Angefangen bei der Zentrierung der ganzen Seite ("margin: 0 auto;width: 700px;") bis hin zur Zentrierung der Hintergrundgrafik im Kopfbereich ("background-position: top center;").

Mein Tipp: neu machen. Du hast ja schon einen guten Einstieg gefunden, den musst Du nur noch ausbessern.
 
Hey,

ich habe jetzt ("background-position: top center;"). probiert. So weit klappt es jetzt. Aber diese absolute Positonierungen, sind doch notwendig um die Schrift, auf den Hintergrund des headers zu bringen? Oder gibt es Alternativen? Und wenn ja, welche?

Außerdem, wenn ich z.B. meine Auflösung auf 1024x768 umstellte, veruscht trotzdem alles. D.h. doch das alle die mit dieser Auflösung unterwegs sind. Es genauso sehen?
Wenn ich nur das Viewport ändere, funktioniert die große Verzierung genauso wie sie soll. Aber die Navigation und die kleinere Verzierung , verruscht.

Ich habe das ganze mal hochgeladen: Home - Vistenkarte von TarikB

Vielen Dank schon mal.

T02
 
Nein. Absolute Positionierung ist absolut unnötig.

Wenn Du hinter einem Text Grafiken/Bilder haben willst, verwende die CSS-Eigenschaft background-image.

#Schnoerkel und #header z.B. wäre unnötig, wenn Du diese Schnörkel- und header-Grafik ins Hintergrundbild der Seite selbst integrierst. Gleiches gilt für div#SchnoerkelKlein.

Außerdem ist eine Auflösung für die Webseite uninteressant. Eine Webseite kann nur im Viewport des Browsers dargestellt werden, der durchaus auch einen "krummen" Wert annehmen kann. Durch die Angabe von "1024px" Breite in "h1#header" entsteht derzeit auch der horizontale Scrollbalken. Lass die Angabe weg, brauchst Du an der Stelle gar nicht.
 
threadi schrieb:
threadi schrieb:
#Schnoerkel und #header z.B. wäre unnötig, wenn Du diese Schnörkel- und header-Grafik ins Hintergrundbild der Seite selbst integrierst. Gleiches gilt für div#SchnoerkelKlein.
Zum Vergrößern anklicken....
Wie soll, ich das machen wenn sich die Grafik dem Viewport anpassen soll, d.h. z.B. immer rechts am Rand bleiben soll.? Und das mit dem Hintergrundbild, ist mir noch nicht klar: Ich kann es doch nicht integrieren, da sich der eigentliche Background ja wiederholt, und sich dann diese Vierzierungen mit wiederholen würden?


threadi schrieb:
Außerdem ist eine Auflösung für die Webseite uninteressant. Eine Webseite kann nur im Viewport des Browsers dargestellt werden, der durchaus auch einen "krummen" Wert annehmen kann. Durch die Angabe von "1024px" Breite in "h1#header" entsteht derzeit auch der horizontale Scrollbalken. Lass die Angabe weg, brauchst Du an der Stelle gar nicht.
Zum Vergrößern anklicken....
Hab, ich nun gemacht. Danke.


Danke, T02
Zum Vergrößern anklicken....
 
Dann bau für den Hintergrund im Header ein (1!!) Element welchem Du diese Hintergrundgrafik für den Kopfbereich gibst. Du hast recht, es muss nicht in den Webseitenhintergrund selbst integriert werden. Möglichkeiten gibt es aber viele.

Um ein Blockelement an den rechten Rand einer Seite zu bringen genügt "float: right;" so wie Du es vorhin auch schon verwendet hattest. Du muss lediglich darauf achten, keine Elemente breiter zu machen als die Mindestbreite der Webseite es ermöglicht.
 
threadi schrieb:
Dann bau für den Hintergrund im Header ein (1!!) Element welchem Du diese Hintergrundgrafik für den Kopfbereich gibst. Du hast recht, es muss nicht in den Webseitenhintergrund selbst integriert werden. Möglichkeiten gibt es aber viele.
Zum Vergrößern anklicken....
Meintest du Home - Vistenkarte von TarikB
threadi schrieb:
Um ein Blockelement an den rechten Rand einer Seite zu bringen genügt "float: right;" so wie Du es vorhin auch schon verwendet hattest. Du muss lediglich darauf achten, keine Elemente breiter zu machen als die Mindestbreite der Webseite es ermöglicht.
Zum Vergrößern anklicken....
Okay, danke.

Jetzt bleibt nur das Problem, mit der Verzierung über der Navigation, und die Navi selbst, welche beide noch verrutschen.. >.<

T02
 
An welcher Stelle soll denn die Navigation stehen? Das wie auch die "Verzierung" lässt sich vermutlich durch eine sauberere Definition von Eigenschaften für .Navigation erreichen. Werte wie "-3.5%" sind immer schlecht.
 
Das erreichst Du wenn Du das unnötige Element für den 2. Schnörkel entfernst. Wie schon gesagt, solltest Du das eher als Hintergrundbild an anderer Stelle einfügen.
 
Bei mir wird sie im FF3.6.x mittig angezeigt? Welchen Browser hast Du?

Unabhängig davon gibt es nicht viele Wege um eine horizontale Navigation die gefloatete Elemente enthält zu zentrieren. Das was Du momentan gemacht hast scheint aber erstmal zu funktionieren. Ansonsten schau dir mal Beispiele für horizontal-zentrierte Menüs an.
 
Hallo,
ich habe auch so ein Problem mit dem verrutschen.
Mein kompletter #hauptcontainer verrutscht immer.

<!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>Pasta Pasta</title>
<meta name="author" content="tsuess" />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="slimbox-2.04/js/slimbox2.js"></script>
<link rel="stylesheet" href="slimbox-2.04/css/slimbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="format.css" media="screen"/>
</head>
<body>
<div id="hauptcontainer">
<div id="kopf">
<img src="kopf.png" width="667" height="201" border="0" alt="">

</div>
<div id="navigation">
.
.
.

im css:
*{margin: 0px; padding: 0px;}
body{
font-family: "Calibri","Times new Roman", "Galliard BT", sans-serif;
font-size:15pt;
background-color:#181961;
background-image:url("hintergrundsuess.png");
background-repeat: repeat-y;
background-position:top center;
font-style:italic;
height:100%;}
#hauptcontainer {
width:675px;
margin:0px 180px 190px;}


wäre lieb, wenn ihr mir auch helfen könntet =)
Danke
 
ich zeig dir mal an einem Bild was ich meine:

so ist es in der Schule:
mittig.JPG

und zu Hause (mit einer anderen Bildschirmgröße) so:
nichtmittig.JPG

hab schon versucht mit Prozenten was zu ändern, doch das funktioniert auch nicht wirklich.
 
Tjoa, da ist wohl was verkehrt. Wie wär's, wenn du dazu einen neuen Thread eröffnest mit einem Link zur Seite?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben