[HaBo]

sulpsulpc · 26.03.11, 16:47

Hallo,

ich habe ein Problem mit dem Ausrichten von Elementen.
Ich möchte wie auf Facebook for Websites - Facebook-Entwickler das Menü oben zentriert haben, allerdings auch fixiert. Jetzt ist es ja so, dass durch die CSS-Eigenschaft

Code:

position: fixed;

das Element automatisch links ausgerichtet wird.
Ich habe auch schon probiert, mit margin-left und margin-right es auszurichten, jedoch klappt das auch nicht.

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <title>{$title|default:"Willkommen"}</title>
        <link rel="stylesheet" type="text/css" href="./lib/index.css">
    </head>
    <body>
        <header>
            <nav><a href="./">Home</a>
            <a href="./impressum">Impressum</a></nav>
        </header>
    </body>
</html>

Code:

body {
    background-image: url(../img/bg.png);
    background-repeat: repeat-x;
    background-attachment: fixed;
    text-align: center;
}
header {
    background-color: #AAA;
    padding: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: fixed;
    margin-left: 50%;
    margin-right: 50%;
    min-width: 200px;
}
nav { padding: 10px; }
nav a { padding: 5px; }
nav a:hover {
    background-color: #FFD700;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
a:link { text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; font-weight: bold; }
a:visited { text-decoration: none; font-weight: bold; }

Hat jemand eine Idee dazu?

beavisbee · 26.03.11, 17:01

für Firefox gibt es so ein schönes Plugin namens FireBug...

laut diesem ist das DIV mit position:fixed auf 100% und darin befindet sich das eigentlich zentrierte DIV.

Anzeige

- Anzeige -

sulpsulpc · 26.03.11, 17:06

Ja schon, aber bei dem Code ist der <nav>-Bereich nicht mittig (seit wann ist ein <nav> gleich einem <div>?)

**xeno** · 26.03.11, 17:20

margin: auto; könnte dir weiterhelfen... und stell die width des body noch auf 100%. Sollte dann eigentlich tun

Nachtrag: fixed ist in der Tat tricky. Aber ein kleiner Workaround hilft (siehe Quellcode): http://www.thehappy.de/~xeno/center.html

beavisbee · 26.03.11, 18:06

Zitat:

Zitat von sulpsulpc

Ja schon, aber bei dem Code ist der <nav>-Bereich nicht mittig (seit wann ist ein <nav> gleich einem <div>?)

Wo bitteschön ist auf der verlinkten Seite denn ein <nav> ?
In meiner Aussage bezog ich mich darauf, wie Facebook bei sich das Problem gelöst hat - und die Facebook-developer-Seite ist XHTML 1.0 Strict und die Navi-Leiste wird dort mit <div>s erstellt. (<nav> gibt es schließlich nur in HTML5)

Mit dem nav-Element in HTML5 in deinem Code sollte es genauso gehen, wenn du den von mir oben genannten Trick (oder den Trick aus xeno's Code) nutzt.

@xeno: <header> gibt es übrigens auch nur in HTML5 - also ma ganz schnell doctype ändern, bevor's noch jemandem auffällt!

sulpsulpc · 26.03.11, 19:16

@beavisbee: Ach so, aber woher sollte ich das bitte wissen?
@xeno: Schäm dich doch, <header> in XHTML

Aber wenigstens geht es. Danke - Problem gelöst

Wollten meine Finger doch glatt "Problem gelöscht" schreiben

**xeno** · 27.03.11, 00:15

Sorry, ist noch mein default-HTML-Header für vim

. Wenn man die in der Signatur verlinkte Blogsoftware anschaut, dann sieht man da schon echtes HTML5...

*vim-template änder*

Außerdem sollte das hier nur zu Demozwecken sein... und überhaupt *g*

beavisbee · 27.03.11, 10:40

Zitat:

Zitat von sulpsulpc

@beavisbee: Ach so, aber woher sollte ich das bitte wissen?

Woher solltest du was wissen? Wie die Seite, deren Design dir gefällt, aufgebaut ist?

STRG+U, um einfach nur den Quelltext anzuzeigen
Plugin "FireBug" installieren und mit F12 aufrufen, um zu den einzelnen Elementen auch gleich die verwendeten CSS-Eigenschaften zu sehen und lokal zu manipulieren, um festzustellen "was passiert, wenn..."

hoffe, ich habe deine Frage richtig verstanden

Anzeige

- Anzeige -

26.03.11, 17:06	#3 (permalink)
sulpsulpc Themenstarter Registriert seit: 20.12.09 Likes: 0	Ja schon, aber bei dem Code ist der <nav>-Bereich nicht mittig (seit wann ist ein <nav> gleich einem <div>?) __________________ Browser: Firefox 4.01 PHP-Version: 5.3 Framework: 2.0.50727, 3.0, 3.5 OS: Windows 7 Home Premium 64-Bit, Ubuntu 11.04

26.03.11, 17:20	#4 (permalink)
xeno Moderator Registriert seit: 09.09.04 Likes: 76	margin: auto; könnte dir weiterhelfen... und stell die width des body noch auf 100%. Sollte dann eigentlich tun Nachtrag: fixed ist in der Tat tricky. Aber ein kleiner Workaround hilft (siehe Quellcode): http://www.thehappy.de/~xeno/center.html __________________ http://www.thehappy.de/~xeno/ http://www.blogthon.de/ Geändert von xeno (26.03.11 um 17:29 Uhr)

26.03.11, 19:16	#6 (permalink)
sulpsulpc Themenstarter Registriert seit: 20.12.09 Likes: 0	@beavisbee: Ach so, aber woher sollte ich das bitte wissen? @xeno: Schäm dich doch, <header> in XHTML Aber wenigstens geht es. Danke - Problem gelöst Wollten meine Finger doch glatt "Problem gelöscht" schreiben __________________ Browser: Firefox 4.01 PHP-Version: 5.3 Framework: 2.0.50727, 3.0, 3.5 OS: Windows 7 Home Premium 64-Bit, Ubuntu 11.04

27.03.11, 00:15	#7 (permalink)
xeno Moderator Registriert seit: 09.09.04 Likes: 76	Sorry, ist noch mein default-HTML-Header für vim . Wenn man die in der Signatur verlinkte Blogsoftware anschaut, dann sieht man da schon echtes HTML5... vim-template änder Außerdem sollte das hier nur zu Demozwecken sein... und überhaupt g __________________ http://www.thehappy.de/~xeno/ http://www.blogthon.de/

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

26.03.11, 17:01	#2 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	für Firefox gibt es so ein schönes Plugin namens FireBug... laut diesem ist das DIV mit position:fixed auf 100% und darin befindet sich das eigentlich zentrierte DIV.

[HaBo]

[Gelöst] Fixiertes Element mittig ausrichten