cybton.com
Über uns | Jobs | Werbung | Sitemap | AGB | Impressum | Hilfe ?
 Kostenlos anmelden)
wichtigWir suchen PHP-Entwickler/innen (Freelancer oder Vollzeit)
Forum
Aktuellste Beiträge
Forenregeln

Community
BB-Codes
Tags
Chat
Suche (Web)
Wer ist online?
Top-User

Basar


Statistik
Mitglieder gesamt: 69389
Mitglieder online: 0
Gäste online: 0
mehr...

Anzeige
Forum » Forum: Website & Webprogrammierung » Thread: CSS - Div in die rechte obere Ecke

Thread: CSS - Div in die rechte obere Ecke

Tags: CSS , DIV , Positionieren , float

21.03.2009 14:43 Uhr

 

Status: offline
Hi!

Ich habe folgende Homepage:
http://clanhf.pytalhost.com/
Da möchte ich die div-box "rechtso" (mit der Suche und der Sprachauswahl) in die rechte obere Ecke des Containers bringen.
Das Problem dabei ist aber, dass diese Box über der Überschrift <h1> liegen muss. (Auch das habe ich auf der Testpage mal rot umrahmt).

Also nochmal in kurz: Die Box "rechtso" muss nach rechts oben, innerhalb des Containers, aber darf nicht dafür sorgen, dass die h1 einen Absatz macht oder generell nach unten rutscht. h1 muss nach oben hin immer den gleichen Abstand beibehalten.

Wisst ihr wie ich das irgendwie hin bekomme?
Ich verzeifel da grad ein bisschen...  :disappointed: 

Schon mal Danke
MfG
doze
___________________________
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/ _/ _/~MfG doze ~_/ _/ _/ _/
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
21.03.2009 15:18 Uhr

 

Status: offline
Ganz rechts oben?
css:
1
2
3
4
5
6
7
8
9
10
      #rechtso {
            float: right;
            width: 250px;
            margin: 0;
            padding: 0;
            border: 1px solid red;
            position: absolute;
            right: 0;
            top: 0;
      }
Edit: Hab das "Innerhalb des Containers" nicht gelesen :D Aber wenn du die anderen Elemente noch anpasst... Ansonsten bezieht sich das "position: absolute" immer auf den übergeordneten Container mit absoluter oder relativer Positionierung. Muss aber beides explizit angegeben werden.

Edit 2:
Hab mal kurz rumgebastelt. Du brauchst quasi nur die 3 folgenden Elemente etwa so (oder ähnlich) ergänzen:
css:
1
2
3
4
5
6
7
8
9
10
#text {
padding-top:20px;
}
#container {
position: relative;
 
}
#rechtso {
right: 0px;
}
4 mal bearbeitet
___________________________
C++ ist ein Esel mit Ledersitzen und elektrischen Fensterhebern, Java ist auch eine Insel und Python ist eine Schlange...
21.03.2009 16:35 Uhr

 

Status: offline
Ja mit dem position-Attribut kannst du ein Element aus dem Textfluss "herausreißen".
Damit sollte dein Problem gelöst sein - vielleicht musst du noch darauf achten, dass es nicht vererbt wird etc - oder anstatt "absolute" -> "relative" - bin mir da grad unsicher.

Jetzt grad beim Thema eine meiner Fragen: Würde das auch mit dem "z-index" funktionieren?
22.03.2009 15:00 Uhr

 

Status: offline
Habe grade alles angepasst und denk mir "Hey, super es funktioniert!".
Das tuts auch, aber nur im FF  :sad: 
Im IE 7 wird die Box rechtso garnicht angezeigt.
Wisst ihr was man dagegen tun kann?
___________________________
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/ _/ _/~MfG doze ~_/ _/ _/ _/
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
22.03.2009 22:02 Uhr

 

Status: offline
Zitat:
Würde das auch mit dem "z-index" funktionieren?

Nur mit z-index nicht. Du musst dir die Webseite mit einem 3 dimensionales Koordinatensystem vorstellen. x und y-Position ist klar. Der z-Index gibt die "geographische Höhe" eines Elements an. Also in Richtung des Users. Je höher der Wert, desto höher liegt das betreffende Element und über- bzw. unterlagert andere Elemente mit entsprechenden x/y Koordinaten.

Zum IE-Problem: Für den Browser gibt es ein Plugin ähnlich der Webdeveloper Tools des Firefox. Vielleicht kannst du damit den Fehler eingrenzen. So spontan fällt mir dazu nichts ein, außer dass du mal einen höheren z-index des rechtso Elements testen könntest.
___________________________
C++ ist ein Esel mit Ledersitzen und elektrischen Fensterhebern, Java ist auch eine Insel und Python ist eine Schlange...
23.03.2009 17:08 Uhr

 

Status: offline
mit z-index habe ich es versucht - klappt aber leider nicht :/
Hat sonst noch jemand eine Idee?  :glad: 
___________________________
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/ _/ _/~MfG doze ~_/ _/ _/ _/
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
Ähnliche Threads Forum Ähnlichkeitsgrad
 float:left (CSS) + margin left ?? Webdesign 3
 [gelöst]Div Design Problem (Box rechts ausrichten) Website & Webprogrammierung 3
 [problem gelöst!]problem bei div-positionierung mit css + problem mit overflow Website & Webprogrammierung 2
 [gelöst] Problem mit CSS (Div Elemente) Website & Webprogrammierung 2
 CSS Zentrieren von Div Box im Internet Explorer Website & Webprogrammierung 2
 EILT: Tabelle mit <DIV>'s mit sich an den Inhalt anpassenden Breiten Website & Webprogrammierung 2
 Unerklärlicher Fehler (CSS|HTML|PHP) Website & Webprogrammierung 2
nach obennach oben

Copyright © 2014 cybton-network

Google
Partner: #Musik - Dein Internetradio - nexem. - .wir machen news
ANEXIA - PHP Entwicklung - Web-Entwicklung - Fritz!Box Anrufmonitor für Mac OS - Rolladen, Markisen und Jalousien in Stuttgart - Rolladen in Stuttgart - SMSjobs