Navigation mit CSS

redtiger · 20.01.2009

Hi Leute !!
Ich habe ein Problem,und zwar möchte ich auf einer Page
die Navigation über den Inhalt setzen, und die über den Inhalt,
gleichmässig über die ganze Breite des Inhalts verteilt haben und nicht so wie
da links bündig.Ist wahrscheinlich nur eine Kleinigkeit, aber ich komme nicht dahinter,ich habe die Page vorher mit Tabellen gemacht,aber jetzt will ich es mal mit CSS versuchen.
Gruss und danke schonmal im voraus.
redtiger

stb_87 · 20.01.2009

AW: Navigation mit CSS

Hast du es schon mal versucht, sprich hast du eine Quelltext auf dem wir hier aufbauen können?

Ansonsten schau dir auch mal dieses Tut hier an:

I. d. R. werden Navigationen mit Listen erstellt.
Mit der Eigenschaft display:inline werden die Listenpunkte nebeneinander angezeigt.

tombeat · 20.01.2009

AW: Navigation mit CSS

Vill. hilft das hier weiter:

redtiger · 20.01.2009

AW: Navigation mit CSS

Hi stb_87
Danke für dein Intresse,den Quelltext kannst du doch
unter dem Link oben finden oder denke ich gerade falsch.
Mit display:inline; habe ich es gerade versucht,hat aber nicht gewünschten Effekt.
Gruss redtiger
Danke tombeat,ich werde da auch mal schauen,aber mein english ist nicht so gut.

stb_87 · 21.01.2009

AW: Navigation mit CSS

Du hast deine Liste ja auch falsch aufgebaut.

Die muss im Grundgerüst so aussehen:
<ul>
<li>Text oder so</li>
<li>noch mehr Text</li>
</ul>

Und dann dementsprechend das CSS anwenden.

redtiger · 21.01.2009

AW: Navigation mit CSS

@stb_87
Ich habe es jetzt versucht mit den <li> aber es ist immer noch wie davor.
Habe die veränderte Seite auch wieder hochgeladen,falls du nochmal schauen willst.
Gruss redtiger

stb_87 · 21.01.2009

AW: Navigation mit CSS

Was klappt denn da nicht?

redtiger · 21.01.2009

AW: Navigation mit CSS

@stb_87
Sorry das ich dich nerve,aber ich will halt das die Navi über den
ganzen Bereich des Inhalts gleichmässig verteilt ist und nicht linksbündig.
Und das bekomme ich irgendwie nicht gebacken.
Gruss redtiger

stb_87 · 21.01.2009

AW: Navigation mit CSS

Gib der Navi eine Breite von 100% bzw. so viel, wie auch der Content breit ist.
Ggf. den Listenpunkten noch einen margin verpassen, bis das alles passt.
Ist immer so eine kleine Spielerei.

redtiger · 21.01.2009

AW: Navigation mit CSS

@stb_87
Habe es jetzt auch versucht mit 100% und margin,
aber das klappt auch nicht so richtig.Bekommen die Navi
dann zwar schon Richtung rechts aber nicht genau ans
Ende des Inhalts,sie steht entweder darüber oder nicht
ganz daran.Ich werde am besten noch mal neu anfangen
mit der Grundlage von deinem TUT Link.Eine Frage habe ich
noch,und zwar wie mache ich das mit CSS das ein Link
den ich in der Navi anklicke im content erscheint ohne
iframe,oder muss ich jede Seite komplett machen mit
Header,Navi usw. .
Gruss redtiger

stb_87 · 21.01.2009

AW: Navigation mit CSS

Entweder setzt du auf ein CMS oder du eignest dir ein paar PHP-Grundlagen (wirklich einfach) an und setzt das dann um wie hier beschrieben:

o0Andy0o · 21.01.2009

AW: Navigation mit CSS

jedem navilink im Css eine min-width von 100/[Anzahl der Navilinks]% geben

chaosprinz · 21.01.2009

AW: Navigation mit CSS

Ich bin mir net so 100% sicher was das Problem ist.
Wenn es darum geht die komplette Navi so wie sie is nach rechts zu bekommen würd ich halt noch einen Container rumbauen und diesen rechts floaten.
Wenn es darum geht die einzelnen Punkte der Navi so zu verteilen dass sie halt genau mit dem content anfangen und auch abschließen musst den <li>-Elemten halt prozentuale margins nach rechts zuweisen, außer dem letzten und das ganze solang bis es halt passt. Wobei des auch nichts genaues wird auf verschiedenen Viewports. Das Prob is dass dein Layout halt insgesamt fluid gehalten ist, aber die Schriften ja nicht, was ja auch ganz normal is. Aber dadurch passen halt die margins nimmer wenn sich der Viewport, sprich das Browserfenster größenmäßig verändert. Is ja logisch, weil die Schriften nicht mit wachsen bzw. schrumpfen.
Zusätzlich noch die Schriften an sich mit prozentualen Größen versehen, eventuell.

Vom gestalterischen her würde ich die Navigation sowie so zusammen lassen und rechts bzw. mittig setzen, aber das is natürlich Geschmacksfrage.
Viel Glück beim Unterfangen, und würd mich interessieren wenn du es hinbekommen hast.

cebito · 21.01.2009

AW: Navigation mit CSS

Naja, du könntest schon die Prozentwerte nehmen und mit der Border ein wenig tricksen, nur bei ner skalierung unter ca. 600px wirds halt häßlich. Das Padding im li ist, damit auch der letzte Menüpunkt nicht so weit links ist, wie oben schon gesagt - mit den Werten spielen...

Code:

#navigation {
    margin-left: 15%;
    margin-right: 15%;[COLOR=Red]
    border-top: solid  1px #FFFF00;[/COLOR][COLOR=Red]
    border-right: solid  1px #FFFF00;[/COLOR]
[COLOR=Red]     height: 24px;[/COLOR]
}
  
#nav li {
    text-align:center;[COLOR=Red]
    border-left: solid  1px #FFFF00;
    height: 24px;[/COLOR]
    float:left;    
    [COLOR=Red]padding: 1px;[/COLOR]
    [COLOR=Red]width: 16%;[/COLOR]
    list-style:none;
}  

#inhalt p {
    background-color: #0033ff;
    [COLOR=Red]margin-top: 0;[/COLOR]
    margin-left: 15%;
    margin-right: 15%;
    border:solid;
    border-color:#FFFF00;
    border-width:1px;
    height: 600px;

}

Edit: Screenshot...

redtiger · 21.01.2009

AW: Navigation mit CSS

@chaosprinz
@o0Andy0o
Danke auch an euch zwei,ich versuche halt erst CSS zu lernen und
da ist es immer gut wenn man einen Schups in die richtige Richtung bekommt.
@stb_87
Das mit dem CMS oder php werde ich mal schauen wenn ich das Layout der Page
so habe wie ich sie haben will.Bei meinem Webspace habe ich noch kein php mit dabei.
Wenn ihr die Page sehen wollt wie sie mit Tabellen usw. ist Hier .Ich habe auch noch meine private Page auf der ich meine Grafiken die ich mit Cinema4d und Photoshop erstellt habe zu sehen sind.Die ist Hier , aber die werde ich auch die nächste Zeit überarbeiten,würde mich aber trotzdem
über eure Meinungen freuen.
Gruss redtiger
@cebito
Danke,das werde ich mir auch mal anschauen.

Chickenshooter · 22.01.2009

AW: Navigation mit CSS

Moin,

für was auf Deiner Seite hastt Du C4D hergenommen?

und wenn es was gibt warum?

MfG Chick

redtiger · 22.01.2009

AW: Navigation mit CSS

@Chickenshooter
Hi Das was auf meiner Page mit C4d zu tun hat bezieht sich auf meine
private (nicht auf die Fanfarenzug Page) Page Hier ,
und da unter Grafik oder auch Animationen(unten),habe mich nicht richtg ausgedrückt.
Gruss redtiger
Ich habe jetzt mit Hilfe von stb_87`s TUT Link die Page(Fanfarenzug) nach meiner Vorstellung
erstellt,habe aber schon wieder das nächste Problem. Denn das Header Image wird im Internet explorer
nicht dargestellt,aber mit Firefox schon(wie immer),ist wahrscheinlich wieder einfach,aber ich bin
halt noch ein Noob.Neuer Link Hier der alte ist gelöscht.

serverhombre · 22.01.2009

AW: Navigation mit CSS

ich tipp jetzt mal auf ein fehlendes Leerzeichen:

Code:

[COLOR="Red"]background: url(image/03.4.png)no-repeat;[/COLOR]

Code:

[COLOR="Green"]background: url(image/03.4.png) no-repeat;[/COLOR]

evtl. könnte man den Bildnamen "03.4.png" auch noch ändern. :rolleyes:

Chickenshooter · 22.01.2009

AW: Navigation mit CSS

Moin,

lass mal den H1 und den Span Tag weg und nimm statt

dessen einen Div und formatiere diesen dann mit Deinem CSS-File

MfG

redtiger · 22.01.2009

AW: Navigation mit CSS

@serverhombre
Danke es war das Leerzeichen.
Gruss redtiger
@chaosprinz
Habe die Page jetzt fertig. ,
falls sie dich (euch) noch interessiert.Wenn ihr
Fehler findet,wäre ich euch dankbar,wenn ihr sie postet.
Danke nochmal an alle !!!