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

[ERLEDIGT] Fixierung von Text und Bild

Status
Für weitere Antworten geschlossen.
S

SAK

Neues Mitglied
Hallo Community,

ich habe jetzt seit zwei Wochen vergeblich versucht, ein Bild und ein Text auf meiner Seite zu fixieren.

Ich nutze ein Photoshop Template welches ich in ein Html Programm geladen habe und weiter mit funktionen belegt habe. Allerdings habe ich beispielsweise in der Mitte ein Menü angelegt, welches aus einzelnen Texten besteht (Ist auch so gewollt). Wie bekomme ich es hin, dass dieser Text, oder das Bild bei einer Änderung der Fenstergröße bzw. Browsergröße fixiert bleiben?

Ich kann die Seite in der Höhe verstellen und der Text bleibt korrekt in der Position, in der er sein soll. Wenn ich aber die Fenstergröße seitlich kleiner mache, dann verschiebt sich der Text in die Mitte also nach rechts.

Was habe ich übersehen und was kann ich tun?


HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Home</title>
  <meta name="generator" content="S (15,0,3,35)">
  <meta name="viewport" content="width=1080">
  <link rel="stylesheet" type="text/css" href="wpscripts/wpstyles.css">
  <style type="text/css">
  .C-1 { line-height:18.00px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#757575;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }
  a.C-1:link { color:#757575;text-decoration:none; }
  a.C-1:visited { color:#757575;text-decoration:none; }
  a.C-1:hover { color:#c73269;text-decoration:none; }
  a.C-1:active { color:#757575;text-decoration:none; }
  .C-2 { line-height:18.00px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }
  </style>
  </head>
  <body style="height:1440px;background:#ffffff url('wpimages/wp4111cacb_06.png') no-repeat scroll center top;">
  <div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:1440px;">
  <div style="position:absolute;left:960px;top:82px;width:56px;height:23px;overflow:hidden;">
  <p class="Normal2"><a href="page2.html" class="C-1">Team</a></p>
  <p class="Body"><span class="C-2"><br></span></p>
  </div>
  <div style="position:absolute;left:931px;top:118px;width:85px;height:23px;overflow:hidden;">
  <p class="Normal2"><a href="page2.html" class="C-1">Notdienst</a></p>
  <p class="Body"><span class="C-2"><br></span></p>
  </div>
  <div style="position:absolute;left:947px;top:153px;width:69px;height:23px;overflow:hidden;">
  <p class="Normal2"><a href="page2.html" class="C-1">Kontakt</a></p>
  <p class="Body"><span class="C-2"><br></span></p>
  </div>
  <div style="position:absolute;left:947px;top:191px;width:69px;height:23px;overflow:hidden;">
  <p class="Normal2"><a href="page2.html" class="C-1">Anfahrt</a></p>
  <p class="Body"><span class="C-2"><br></span></p>
  </div>
  <div style="position:absolute;left:917px;top:43px;width:99px;height:24px;overflow:hidden;">
  <p class="Body"><a href="page2.html" class="C-1">Philosophie</a></p>
  </div>
  <div style="position:absolute;left:305px;top:461px;width:60px;height:20px;overflow:hidden;">
  <p class="Body"><span class="C-2">HOME</span></p>
  <p class="Body"><span class="C-2">HOME</span></p>
  </div>
  </div>
  </body>
</html>

CSS: 
body {margin:0;padding:0;word-wrap:break-word;}
img {border:none;}
input {border:1px solid black;border-radius:2px;padding:0;}
input[type=image] { border: none; }
textarea {border:1px solid black;padding:0;}
* {box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;}
a:link {color:#393939;text-decoration:none;}
a:visited {color:#393939;text-decoration:none;}
a:hover {color:#393939;text-decoration:none;}
a:active {color:#393939;text-decoration:none;}
.DefaultParagraph { text-align:left;margin:0px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }
.Body { text-align:left;margin:0px 0px 12px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }
.Normal { text-align:left;margin:0px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }
.Normal2 { text-align:left;margin:0px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
SAK schrieb:
Wie bekomme ich es hin, dass dieser Text, oder das Bild bei einer Änderung der Fenstergröße bzw. Browsergröße fixiert bleiben?
Zum Vergrößern anklicken....
Ohne die grafische Aufbearbeitung zu kennen, tippe ich mal darauf, das Hintergrundbild nicht für <body>, sondern für <div id="divMain"> festzulegen.
 
  • Like
Reaktionen: SAK
Danke schon mal für den Tipp.

Wie müsste ich das entsprechend im Code ändern? Weiß da tatsächlich nicht viel darüber.

Die Frage ist, ob es tatsächlich der "Background" ist, oder der einzelne Text der im Code weiter unten zu finden ist. Der ist im endeffekt das Problem, da er beim "skalieren" wandert.

Über eine erweiterte Hilfestellung wäre ich sehr dankbar!
 

Anhänge

  • Screenshot.gif
    Screenshot.gif
    117,2 KB · Aufrufe: 6
Werbung:
SAK schrieb:
Die Frage ist, ob es tatsächlich der "Background" ist, oder der einzelne Text der im Code weiter unten zu finden ist
Zum Vergrößern anklicken....
Kann man so im Blindflug nicht beantworten.

Ist die Seite online verfügbar, um mal das Gesamtbild (inkl. Hintergrundbild) zu sehen?

Ansonsten versuch es mal hiermit:
HTML: 
<body style="background:#fff">
  <div id="divMain" style="background:url('wpimages/wp4111cacb_06.png') no-repeat scroll;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:1440px;">
 
Ich probiere es gleich mal aus, ich habe im letzten Beitrag noch ein Bild angehängt. Dort kann man das Problem deutlich sehen. Das "Home" in schwarz ist nicht mehr da wo es sein sollte. Es sollte bei den anderen texten stehen (Praxis etc..). Der Grund warum Praxis noch an der Stelle ist, besteht darin, dass es noch ein Teil des Photoshop templates ist, dass muss sich aber ändern, ist nur momentan noch nicht passiert.
 
Werbung:
So, ich habe es mit der Codeänderung probiert.

Es ist schonmal ein erster Erfolg da, die Schrift ist jetzt statisch egal ob ich das Fenster verändere. TOP!!! Danke schonmal dafür!

Jetzt habe ich aber das Problem, dass die Seite nicht mehr richtig zentriert ist, der rechte Teil der Seite ist nicht mehr sichtbar.
 
Zuletzt bearbeitet:
Mein Fehler: center top fehlt für's Hintergrundbild.

Übrigens kommt divMain nun zweimal in Deinem Code vor.
 
Ach.... Das hätte ich auch selbst sehen können...

Super!!!! Hab schon gedacht das wird nichts mehr!

Vielen Dank für die schnelle und großartige Hilfe, hat mir wirklich sehr geholfen!!!!!!!!!!!!!!!!!!!!!
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben