Freitag, 19. Juli 2019, 14:51 UTC+2

Sie sind nicht angemeldet.

  • Anmelden

Lieber Besucher, herzlich willkommen bei: 3D-Gamestudio Hobbyschmiede. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Beiträge: 594

Beruf: Fachinformatiker im Bereich Anwendungsentwicklung

Gamestudio: A8

1

Samstag, 23. Mai 2009, 19:36

CSS Navigationsleiste Zentrieren, WIE?

SO,
scheint als ob ich heut nen Thread-marathon veranstalten würde. Aber ich denke das Thema ist einen eigenen Thread wert(auch wegen der gleich untergehenden übersicht).

ich habe in meiner css datei menu-style.css das aussehen+verhalten der Navigationsleiste eingestellt.
Und in meiner html datei die liste definiert. Problem: die Navigationsleiste bleibt links am rand und ich möchte sie aber gerne so wie sie ist zentrieren können :(.
die liste in einen div tag zu packen mit align="center" ging nicht. Es scheint als müsste ich noch ewas an der css datei verändern??
Da die Navigationsleiste Horizontal angeordnet ist, sollen die hauptpunkte auch nebeneinander bleiben und nicht untereinander rutschen(ist mir schon passiert :huh: )


Hier die css datei:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#menu
{
position:relative;
		list-style-type:none;
}

ul#navlist
{
font-family: sans-serif;
position:absolute;
}

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0;
padding: 0;
list-style-type: none;
}

ul#navlist li
{
float: left;
}

ul#navlist li a
{
width:130px;
height:24px;
text-align:center;
display:block;
background-image:url(p1.gif);
}

ul#navlist li a:hover
{
background-image:url(p3.gif);
}

ul#subnavlist {display:none;}
ul#subnavlist li {float:none;}

ul#subnavlist li a
{
padding:0;
margin:0;
background-image:url(s1.jpg);
}

ul#subnavlist li a:hover
{
padding:0;
margin:0;
background-image:url(s2.jpg);
}

ul#navlist li:hover ul#subnavlist
{
display:block;
position:absolute;
}

ul#navlist li:hover ul#subnavlist li a
{
display:block;
width:10em;
border:none;
padding:2px;
}


und meine test HTML seite:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" href="menu_style.css">
</head>

<body topmargin=0 leftmargin=0>

<ul id="menu">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Projekte</a>
<ul id="subnavlist">
<li><a href="#">Cube</a></li>
</ul>
</li>
<li><a href="#">Über mich</a></li>
</ul>
</ul>

</body>

</html>


Fürchte das es hier jetzt ein bisschen chaotisch aussieht und hoffe trotzdem dass sich einer damit auskennt :|

MFG
Memnarch
Stolzer A5 Standart sowie A7&A8 COM Besitzer 8)
Website(Updates und News über Aktuelle Projekte): SpareTime-Development

UPDATE

Year, offiziell nun Fachinformatiker im Bereich Anwendungsentwicklung, das ist wie Lucy: Fetzig :D


Zeitreise

Fortgeschrittener

Beiträge: 405

Wohnort: Deutschland

Beruf: Gymnasiast

Gamestudio: A7

2

Samstag, 23. Mai 2009, 19:44

Vielleicht bekommst du ja auf folgender Seite den nötigen Denkanstoß. Wenn du XHTML verwendest, musst du jedes Attribut in Anführungszeichen setzen. Ich würde dir aber empfehlen Container zunutzen. Später wirst da da nicht umhin kommen.

selfhtml.de - Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?

Beiträge: 594

Beruf: Fachinformatiker im Bereich Anwendungsentwicklung

Gamestudio: A8

3

Samstag, 23. Mai 2009, 20:02

Ja sapperlot, das hat ja sofort geklappt :D.
Zwar ist meine navleiste nun immer oben und horizontal zentriert, macht aber nix, sie soll sowieso immer da sein.

Könne wir heiraten :D
Ne scherz^^.

Aber ich hatte schon sehr viele anleitungen und die haben alle nicht geklappt. und diese war viel einfacher und ging sofort.

Danke :)

MFG
Memnarch

PS: was meintest du mit Containern? Sowas wie die DIV tags? damit ging es zb nicht.
Stolzer A5 Standart sowie A7&A8 COM Besitzer 8)
Website(Updates und News über Aktuelle Projekte): SpareTime-Development

UPDATE

Year, offiziell nun Fachinformatiker im Bereich Anwendungsentwicklung, das ist wie Lucy: Fetzig :D


Zeitreise

Fortgeschrittener

Beiträge: 405

Wohnort: Deutschland

Beruf: Gymnasiast

Gamestudio: A7

4

Samstag, 23. Mai 2009, 20:07

Mit Containern meine ich den Div-Tag. Du wirst relativ schnell merken, daß du ohne Div-Tags nicht sehr weit kommen wirst. Diese benötigst du um dein Seite richtig gestalten zu können.Man muss sich dies wie einen Karton vorstellen, in dem alles, was dazu gehört zusammengefasst wird. Die Navigation in einem eigenen Container, grade bei dem Inhalt ist dies wichtig. Aber du wirst es noch selbst merken, was passiert, wenn du keine nutzt. ;)

Beiträge: 594

Beruf: Fachinformatiker im Bereich Anwendungsentwicklung

Gamestudio: A8

5

Samstag, 23. Mai 2009, 20:19

JA nutzen tu ich die(sogar sehr gerne) nur im bezug auf meine navileiste wollte das nicht gehen. vllt auch nur falsche parameter ?.?.

Egal, jetzt hab ich noch das problem(liegt vllt am padding, ich bekomm es nicht in den griff), das ganz oben zuerst dass banner und darunter die navileiste sein soll.
Klappt wunderbar. Aber es gibt einen kleinen abstand zwischen banner und oberem fenster rand und zwischen banner und navileiste.
Da mach ich nochimmer was falsch :s.


EDIT: fügen sich nun nahtlos aneinander. in der css datei habe ich margit-top:-5px hinzugefügt damit die leiste sich nahtlos an das bild anschließt und für das bild habe ich noch border="0" eingefügt sowie im body noch einen style definiert:

style="margin: 0; padding: 0;"

Jetzt sind beide teile Nahtlos miteinander verbunden :)

MFG
Memnarch
Stolzer A5 Standart sowie A7&A8 COM Besitzer 8)
Website(Updates und News über Aktuelle Projekte): SpareTime-Development

UPDATE

Year, offiziell nun Fachinformatiker im Bereich Anwendungsentwicklung, das ist wie Lucy: Fetzig :D

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Memnarch« (23. Mai 2009, 20:41)


Zeitreise

Fortgeschrittener

Beiträge: 405

Wohnort: Deutschland

Beruf: Gymnasiast

Gamestudio: A7

6

Samstag, 23. Mai 2009, 20:42

Versuchs mal mit einer Vorlage von denen hier. CSS-Layouts - ein weiterer großer Sammlung von CSS-Layouts.