Seite 1 von 11
Gemeinschaft uCoz » Für Webmaster » Design » Neuer Kasten oben Rechts (Einen Kasten in CSS neben dem Header platziert)
Neuer Kasten oben Rechts
Ekky
Beiträge: 5
Ruf: 0
Beitrag # 1 | 17:37
Hallo uCoz-Gemeinde,
ich bin nicht unbedingt neu hier bei diesem wirklich tollen CMS, allerdings habe ich erst jetzt wirklich angefangen mit den Designs zu experimentieren.

Und dabei habe ich eine Fläche oben rechts neben dem Header platziert.

Code
#upright {
   display: block;
   float: right;
   position:absolute; top:65px;left:850px;right:0px;
   width: 180px;
   height: 100px;
   border: 1px solid #ffffff;
   background: url() no-repeat;
   background-color:;
}


Es hat wunderbar funktioniert und die Box ist jetzt zu sehen, darin steht vorübergehend: "testblock".
Den genauen Zweck für diese Box weiß ich bis jetzt ehrlich gesagt auch noch nicht, aber wahrscheinlich werde ich dann den Login o.ä. darin platzieren.

Jetzt stehe ich allerdings vor folgendem Problem:

Wie man ja weiß, wird mit

Code
position:absolute; top:65px;left:850px;right:0px;


die Box dahingelegt wo ich möchte. Allerdings nur in meiner Auflösung richtig.

Nähere Erklärung:



Gibt es eine andere Möglichkeit den Kasten so zu positionieren, dass er wirklich da bleibt wo er sein soll?

Mit freundlichen Grüßen
ekky

Edit 17.01, 22:19:

Gerade ist mir noch etwas aufgefallen: Wenn ich nicht als Admin eingeloggt bin (Also ganz, auch ohne Adminleiste) dann verschiebt sich die Box nach unten... kann mir jemand sagen, woran das liegt?
Beitrag wurde von Ekky - Donnerstag, 17.01.2013, 23:20 bearbeitet
Kasach
Beiträge: 714
Ruf: 13
Beitrag # 2 | 09:29
Hey Ekky,

also an erster stelle würde ich sagen das liegt an left:850px;, weil du ja damit die Startposition von Links nimmst. Das heißt, das er einen Abstand von 850px von Links macht, also bei dir sieht das ganze OK aus aber bei Benutzer mit einem größerem Monitor, da wird das ganze Problematisch.

Was du jedoch machen könntest, wäre das ganze erstmal zu zentrieren und mit margin den Block nach rechts/links verschiebst.

Ob das ganze hilft, kann ich dir leider nicht versprechen, musst einfach damit rum experimentieren.

Zitat (Ekky)
Gerade ist mir noch etwas aufgefallen: Wenn ich nicht als Admin eingeloggt bin (Also ganz, auch ohne Adminleiste) dann verschiebt sich die Box nach unten... kann mir jemand sagen, woran das liegt?
Das ganze könnte an der Werbung con uCoz liegen...

MfG
Kasach

Neu bei der uCoz Gemeinschaft? Lese unseren Willkommens Thread.

Meine Website: Rampage-Gaming
I changed to IPBoard :)
lilu
Beiträge: 1590
Ruf: 47
Beitrag # 3 | 11:31
Ekky, willkommen bei uCoz! biggrin
Die URL deiner Webseite bitte und wir werden sehen.

MFG

Macht sich mit uCoz FAQ und Forum Regeln bekannt, bevor ihr Fragen stellt.
uCoz Video Tutorials
Ekky
Beiträge: 5
Ruf: 0
Beitrag # 4 | 11:29
Erst einmal: Danke für die schnelle Antwort. (Auf die ich leider wieder etwas spät reagierte :D)

Website: ddtp.do.am

Zitat (Kasach)
Was du jedoch machen könntest, wäre das ganze erstmal zu zentrieren und mit margin den Block nach rechts/links verschiebst.


Das habe ich auch schon probiert, allerdings wurden dabei die unteren Teile der Website verschoben, wie die Navigation und die rechten Blöcke, deswegen habe ich auch "position:absolute" ausprobiert.

Jetzt habe ich es allerdings nochmal so ausprobiert, da mir beim besten Willen keine andere Möglichkeit eingefallen ist und siehe da, es hat funktioniert. Ich glaube, ich habe auch den Fehler gefunden, den ich gemacht habe und der bei Benutzung vom Außenabstand dazu geführt hat, dass alles verschoben wurde.

In der CSS Sektion musste ich ja zuerst die Box definieren:

Code
#upright {
  display: block;
  margin-left: 545px;
  margin-right: px;
  margin-bottom: px;
  margin-top: 8px;
  width: 180px;
  height: 100px;
  border: 1px solid #ffffff;
  background: url() no-repeat;
  background-color:;
}


Dann habe ich dem System natürlich auch gesagt wo ich ihn hinhaben möchte und was darin stehen soll:

Code
<div id="upright">testblock</div>


Diesen Code habe ich dann im Globalen Block "Oberer Teil der Website" eingefügt, da ich ihn ja auch oben haben möchte. Allerdings: Ich habe diesen "testblock" dann dummerweise vor den Header gesetzt. Jetzt habe ich ihn noch im "toptable" positioniert, damit er mir auch nicht wieder wegrutscht:

Code
<div id="top">
<table cellpadding="0" cellspacing="0" border="0" class="toptable">
<tr>
<td class="empty" style="width: 10px;"></td>
<td class="globe">
</div>
     <div id="upright">testblock</div>
</td>
</tr>
</table>


Jetzt funktioniert es und ich habe es auch wieder an meinen beiden Monitoren getestet (Siehe Spoiler erster Beitrag) und es ist bei beiden an der selben Stelle.

Vielen Dank!

Mit freundlichen Grüßen
ekky
Gemeinschaft uCoz » Für Webmaster » Design » Neuer Kasten oben Rechts (Einen Kasten in CSS neben dem Header platziert)
Seite 1 von 11
Suche: