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?
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: