[CSS] Positionierung

Phoenix

pro-poster tee

(1 186)

Beiträge: 392

Renommeemodifikator: 11

Danksagungen: 32

1

Samstag, 21. April 2012, 23:13

Frage:
Der tee, die suche und die übersetzung sollen fix an einem ort bleiben.
Derzeit verschieben sie sich wenn man die seite vergrößert/verkleinert bzw ne andere bildschirmauflösung hat.
Wie kann man dass ändern?

index.php?page=Attachment&attachmentID=2962

1. tee
2. suche
3. google translate & flaggen

CSS

PHP-Quelltext

#tee {
position: absolute !important;
z-index: 100;
top: 206px;
right: 460px;
}

#google_translate_element {
position: absolute !important;
top: 490px;
z-index: 100;
right: 160px;
}

#flaggen {
position: absolute !important;
top: 515px;
right: 167px;
}

#search {
background: rgba(255,255,255,.6);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
        margin-bottom:3px;
margin-top: 115px;
margin-right: -33px;
}

zum Lesen den Text mit der Maus markieren

PHP

PHP-Quelltext

<div style="text-align: right;" id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'de',
    autoDisplay: false,
    multilanguagePage: true,
    gaTrack: true,
    gaId: 'UA-28626833-1',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </div>

<div id="flaggen">
<img src="./wcf/dateien/flaggen.png"></img>
</div>

<div id="tee">
{includePHP file='tee.php'}
</div>

zum Lesen den Text mit der Maus markieren

Ω Your place for teeworlds stuff! Ω

Zum Seitenanfang
0

Toast

Pwner!

Beiträge: 1 303

Renommeemodifikator: 14

Danksagungen: 119

2

Samstag, 21. April 2012, 23:16

glaube position: fixed; sollte dein problem lösen
sonst die boxen, weißt was ich mein?, dafür eine neue div erstellen
und die position anpassen.

e: du hast ja immer right: 132px; also von rechts (<-) versuch das mal von links also left: 123px;

teeman
elementary os
provallo cms coming sooner

Kool Savas der beste, der King, der rappende Tony Hawk.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Toast« (21. April 2012, 23:22)

Zum Seitenanfang
0

Pancake

cookie-cutter tee

(227)

Beiträge: 40

Ingame-Name: Pancake

Clan: iPwn

Renommeemodifikator: 7

Danksagungen: 39

3

Samstag, 21. April 2012, 23:19

Is zwar recht simpel, aber schon mal überlegt statt "right" "left" zu verwenden und es darauf anzupassen. Mehr fällt mir jetzt gerade ohne Google-Suche auch nicht ein.

Zum Seitenanfang
0

onoffon

cookie-cutter tee

(134)

Beiträge: 107

Wohnort: Aalen

Ingame-Name: .oT! ono

Clan: Inside.'

Renommeemodifikator: 7

4

Samstag, 21. April 2012, 23:24

Versuchs mal mit margin

Afugrnud enier Sduite an enier elingshcen Unvirestiät ist es eagl,
in wlehcer Rienhnelfoge die Bcuhtsbaen in eniem Wrot sethen,
das enizg wcihitge dbaei ist, dsas der estre und lzete Bcuhtsbae am rcihgiten Paltz snid.
Der Rset knan ttolaer Bölsdinn sien, und du knasnt es torztedm onhe Porbelme lseen.
Das ghet dseahlb, wiel wir nchit Bcuhtsbae für Bcuhtsbae enizlen lseen, snodren Wröetr als Gnaezs.

Zum Seitenanfang
0

Teelevision

cookie-cutter tee

Beiträge: 101

Wohnort: Mönchengladbach

Ingame-Name: Teelevision

Clan: TeeVi

Renommeemodifikator: 10

5

Samstag, 21. April 2012, 23:25

Mit position: absolute positionierst du das Element offenbar am Browserfenster. Damit du es am Header positionieren kannst, muss der Header position: relative sein.

@Toast: das würde bewirken, dass das Element beim Scrollen immer an der selben Stelle in der Ansicht erscheint.

Teeworlds-Server auf TeeVision.eu

Zum Seitenanfang
4

Phoenix

pro-poster tee

(1 186)

Beiträge: 392

Renommeemodifikator: 11

Danksagungen: 32

6

Samstag, 21. April 2012, 23:49

Zitat von »Pancake«

Is zwar recht simpel, aber schon mal überlegt statt "right" "left" zu verwenden und es darauf anzupassen. Mehr fällt mir jetzt gerade ohne Google-Suche auch nicht ein.

left geht schonmal besser
- tee bewegt sich keinen cm mehr vom fleck
- suche bleibt auch immer im gleichen abstand nebem header
- google bewegt sich immer noch (diesmal halt nach links)

Zitat von »Toast«

glaube position: fixed; sollte dein problem lösen
mit fixed bleibt er zwar an der gleichen stelle, scrollt aber mit ^^

margin ändert gar nix

und mit "position:relative" rückt die oberste zeile ( Angemeldet als Phoenix.

Benachrichtigungen ) eine zeile weiter nach unten.

Ω Your place for teeworlds stuff! Ω

Zum Seitenanfang
3

onoffon

cookie-cutter tee

(134)

Beiträge: 107

Wohnort: Aalen

Ingame-Name: .oT! ono

Clan: Inside.'

Renommeemodifikator: 7

7

Samstag, 21. April 2012, 23:55

Wie setzt du margin ein?

Afugrnud enier Sduite an enier elingshcen Unvirestiät ist es eagl,
in wlehcer Rienhnelfoge die Bcuhtsbaen in eniem Wrot sethen,
das enizg wcihitge dbaei ist, dsas der estre und lzete Bcuhtsbae am rcihgiten Paltz snid.
Der Rset knan ttolaer Bölsdinn sien, und du knasnt es torztedm onhe Porbelme lseen.
Das ghet dseahlb, wiel wir nchit Bcuhtsbae für Bcuhtsbae enizlen lseen, snodren Wröetr als Gnaezs.

Zum Seitenanfang
0

Phoenix

pro-poster tee

(1 186)

Beiträge: 392

Renommeemodifikator: 11

Danksagungen: 32

8

Sonntag, 22. April 2012, 00:07

PHP-Quelltext

#google_translate_element {
position:absolute !important;
z-index: 100;
top: 490px;
margin-left: 1500px;
}

#flaggen {
position:absolute !important;
top: 515px;
margin-left: 1515px;
}

Ω Your place for teeworlds stuff! Ω

Zum Seitenanfang
0

Teelevision

cookie-cutter tee

Beiträge: 101

Wohnort: Mönchengladbach

Ingame-Name: Teelevision

Clan: TeeVi

Renommeemodifikator: 10

9

Sonntag, 22. April 2012, 00:15

Gib am besten mal den Link, sonst wird das hier ein Ratespielchen.

Teeworlds-Server auf TeeVision.eu

Zum Seitenanfang
0

Phoenix

pro-poster tee

(1 186)

Beiträge: 392

Renommeemodifikator: 11

Danksagungen: 32

10

Sonntag, 22. April 2012, 00:19

stimmt ^^

http://80.121.113.118/forum/index.php?page=Index <- ist online, solang ich online bin^^

Ω Your place for teeworlds stuff! Ω

Zum Seitenanfang
8

Teelevision

cookie-cutter tee

Beiträge: 101

Wohnort: Mönchengladbach

Ingame-Name: Teelevision

Clan: TeeVi

Renommeemodifikator: 10

11

Sonntag, 22. April 2012, 00:32

Also das grundsätzliche Problem ist, dass sich fast alles auf der Seite verschiebt. Die Seite wird dynamisch Breiter, wenn man das Browserfenster größer skaliert. Entgegen des Rests der Seite ist der Hintergrund nicht zentriert. Ändere beim background-Attribut vom body mal alle "left" zu "center".
Um dann z.B. die Suche relativ zur Mitte auszurichten, musst du so vorgehen:
position: absolute;
left: 50%;
margin-left: 260px; (hier das kannst du anpassen)

Teeworlds-Server auf TeeVision.eu

Zum Seitenanfang
0

Phoenix

pro-poster tee

(1 186)

Beiträge: 392

Renommeemodifikator: 11

Danksagungen: 32

12

Sonntag, 22. April 2012, 00:59

Zitat von »Teelevision«

Also das grundsätzliche Problem ist, dass sich fast alles auf der Seite verschiebt. Die Seite wird dynamisch Breiter, wenn man das Browserfenster größer skaliert. Entgegen des Rests der Seite ist der Hintergrund nicht zentriert. Ändere beim background-Attribut vom body mal alle "left" zu "center".
Um dann z.B. die Suche relativ zur Mitte auszurichten, musst du so vorgehen:
position: absolute;
left: 50%;
margin-left: 260px; (hier das kannst du anpassen)

dass war aber sowas von goldrichtig :D
jetzt bleibt alles da wo es bleiben soll :3
dankö

Ω Your place for teeworlds stuff! Ω

Zum Seitenanfang
0

Teeworlds Friends