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

Auflösung-Positions Problem

Status
Für weitere Antworten geschlossen.
F

franz-21

Neues Mitglied
Habe eine Seite mit Photoshop vorgestalltet und zwar in 1600x1200. In der Mitte ist ein weißes Feld welches immer in der Mitte sein sollte, mit der großen Auflösung ist sie zwar dort aber mit kleineren verschiebt sie sich immer weiter nach rechts. Um das weiße Feld ist der Hintergrund. Wie könnte ich das vernünftig wieder ins Lot bringen?

Möchte es ungefähr wie hier machen und wenn man die Auflösung verändert bleibt das in der Mitte!?!?!

Reflections - HTL Ball 2010

mfg
 
Darf man mal den Quelltext sehen?
Ohne können wir nicht helfen.
Und nebenbei. 1600x1200? Hoffe die Seite ist nicht fürs Internet. Denn auf nen Viewport von nem Iphone stell ich mir deine Seite lustig vor.
Seiten sollten so gemacht werden, dass sie überall gut aussehen. Probier dich nicht zu sehr den printmedien zu orientieren mit deinem design. Das Internet ist da eine ganz eigene Geschichte. Aber wie gesgat. Für Hilfe bräuchten wir deinen quellcode. Bzw am besten wenn du die Seite wo hochlädst mit deinen grafiken. :)
Übrigens. Das hat 0 mit Javascript zu tun :D
Eher was mit CSS.
Hast du HTML und CSS schon richtig gelernt? Wenn nicht, würde ich das machen :) Denn so kannst du deine Seite Inhaltsgemäß und danach designtechnisch aufbauen :)
 
franz-21 schrieb:
Habe eine Seite mit Photoshop vorgestalltet und zwar in 1600x1200.
Zum Vergrößern anklicken....
Damit hast Du zwei dicke Fehler begangen.
1) Design macht man mit CSS, nicht mit Photoshop. Vermutlich wirst Du das Design dann "slicen" und so pixelgenau ins WWW stellen. Das funktioniert aber nicht, da es im WWW viel zu viele Variablen gibt. Viewport-Größe und Schriftartgröße werden Dir den größten Strich durch die Rechnung machen. Außerdem erzeugt dieses slicen einen falschen HTML-Code, der zudem nicht barrierefrei ist.
2) Die Auflösung ist im WWW irrelevant.

Wie könnte ich das vernünftig wieder ins Lot bringen?
Zum Vergrößern anklicken....
Mit einem dynamischen Layout mit CSS.

Möchte es ungefähr wie hier machen und wenn man die Auflösung verändert bleibt das in der Mitte!?!?!
Zum Vergrößern anklicken....
Das hat nichts mit der Auflösung zu tun.
 
Danke für die Antworten!

Verstehe was ihr meint, soll die Elemente in Ps vorfertigen und diese später über den Code einbinden und platzieren. Aber wenn man sich den Hintergrund von dieser Seite ansieht bemerkt man das hier nicht immer ein Element wiederholt wird sondern das es ein ganzes img ist, nur wenn man jetzt die Seite mit 800x600 ansieht wird nur rechts und links etwas "weggeschnitten" und das möchte ich gerne wissen wie dies funktioniert.


mfg
 
Verstehe ehdlich nicht so ganz was du meinst.
Wie meinst du das mit: wird links und rechts weggeschnitten?
Erst mal grundsätzlich. Websites haben nichts mit der Auflösung zu tun. Muss meinen browser ja nicht zwingend im Fullscreen Modus benutzen ;)
Und ich versteh nicht was du mit: wir dlinks und rechts abgeschnitten meinst. Screenshots oder Skizzen wären hier wahrscheinlich sehr hilfreich ;)
 
mhm, vielleicht ist es ganz leicht aber stells mr so schwer vor :(

große Auflösung
4b1b_.0000cda6b.jpg


klene Auflösung
4b1a_.0000cbbd2.jpg


So...der Haupteil bleibt immer in der Mitte und der Hintergrund verschwindet zunähmend, spreche nur von der x-Achse. Jedenfalls würde hier ein Scrollbalken für die x-Achse auftauchen müssen, wenn der Hintergrund nicht mehr sichtbar ist, kommt aber nicht! Wie kann man das machen?

Bilder sichtbar??
 
Zuletzt bearbeitet:
Die Bilde rkann man nicht sehen. du musst das 1.2.3.9/cmi/ entfernen. Habs bei mir selbst mit firebug gemacht :P

Du musst eine feste Breite angeben für den Body. Bzw für das Element welches den Hintergrund enthält.
Aber muss man denn wirklich den ganzen background sehen?
 
oh man, wieso hab ich mir das mit Ps angefangen, seh schon das die ganze Arbeit umsonst war. Aber habens die mit margin gemacht???
 
Ps? Photoshop? Naja, das ist ja auch ein Grafikprogramm, kein Programm zur Erstellung von Websites - da kann man schon drauf kommen, dass das nicht geeignet ist ;-)
Mit Word oder Excel erstellt man ja auch keine Websites.

Ansonsten - Du redest leicht kryptisch. "die"? "mit margin"? Die Reflections-Seite? Die haben Tabellen zu Layoutzwecken missbraucht, die Tabelle ist aber auch mit margin, so wie ichs geschrieben habe, zentriert. Weil das nunmal die Methode ist, wie man Block-Elemente horizontal zentriert.
 
Ps? Photoshop?
Es ist ein Grafikprogramm. Es kann keine Websites erstellen. Es war klar, dass das, was am Ende rauskommt, nichts mit HTML zu tun hat. Ein Programm kann außerdem keine Semantik automatisch vergeben. Oder kannst Du in Photoshop irgendwo angeben, welcher Deiner Texte eine Überschrift, was ein Textabsatz oder was eine Adresse ist?

Wo stehen wir jetzt eigentlich mit Deinem Problem?
Abreißen, neu machen?
HTML lernen?

Wie können wir Dir weiter helfen?
 
das ist ein Code den PS erstellen kann:
Code: 
<html>
<head>
<title>Photoshop6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Photoshop6.psd) -->
<table id="Tabelle_01" width="1600" height="1200" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="9">
            <img src="Bilder/Photoshop6_01.png" width="1600" height="21" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/Photoshop6_02.png" width="420" height="1179" alt=""></td>
        <td>
            <a href="www.htl-braunau.at">
                <img src="Bilder/Photoshop6_03.gif" width="112" height="61" border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="Bilder/Photoshop6_04.png" width="13" height="1179" alt=""></td>
        <td>
            <a href="www.htl-braunau.at">
                <img src="Bilder/Photoshop6_05.png" width="114" height="61" border="0" alt=""></a></td>
        <td>
            <a href="www.htl-braunau.at">
                <img src="Bilder/Photoshop6_06.png" width="141" height="61" border="0" alt=""></a></td>
        <td>
            <a href="www.htl-braunau.at">
                <img src="Bilder/Photoshop6_07.png" width="152" height="61" border="0" alt=""></a></td>
        <td>
            <a href="www.htl-braunau.at">
                <img src="Bilder/Photoshop6_08.png" width="114" height="61" border="0" alt=""></a></td>
        <td>
            <a href="www.htl-braunau.at">
                <img src="Bilder/Photoshop6_09.gif" width="114" height="61" border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="Bilder/Photoshop6_10.png" width="420" height="1179" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Photoshop6_11.png" width="112" height="1118" alt=""></td>
        <td colspan="5">
            <img src="Bilder/Photoshop6_12.png" width="635" height="1118" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Ist e wurscht was es kann, werd einfach von vorne Anfangen.

mfg
 
Ja, und das ist krampf. Das ist kein HTML. Das ist Stil der 1990er Jahre, als es noch keine Sprache für Layout&Design (CSS) gab.
 
franz-21 schrieb:
Ist e wurscht was es kann, werd einfach von vorne Anfangen.

mfg
Zum Vergrößern anklicken....

Dein layout sollte sich recht gut slicen lassen. Das HTML kann ich dir in grundzügen mal darstellen.
HTML: 
        <div id="wrapper">
            <!-- Kopf-Bereich -->
            <div id="header">
                <h1><img src="reflections.png" alt="Reflections-Banner" /></h1>
                <ul>
                    <li class="menuItem1">Algemeines</li>
                    <li class="menuItem2">Aktuelles</li>
                    <li class="menuItem3">Karten</li>
                </ul>
            </div>
            <!-- Content-Bereich -->
            <div id="content">
                <h2>Allgemeines</h2>
                <p>Content zeugs</p>
            </div>
            <!-- Sponsoren -->
            <div id="sponsoren">
                <h2>Sponsoren</h2>
                <ul>
                    <li><img src="sponsor1.png" alt="Sponsor 1" /></li>
                    <li><img src="sponsor2.png" alt="Sponsor 2" /></li>
                </ul>
            </div>
        </div>
Wäre nur ein Beispiel wie das aussehen würde. So ist der inhalt richtig ausgezeichnet. Hat noch nichts mit dem Design als solches zu tun. :)
Soll nur eine Anregung sein. Das Design musst nicht wegschmeissen. Musst es halt nur von Hand slicen und die Grafiken selber einbauen ;)
Dafür solltest du dich aber am besten erst mal mit HTML beschäftigen und danach mit CSS :)

P.S.:
Vielelicht kann Efchen das HTML absegnen ;) Will dir ja keinen Mist verkaufen ^^
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben