Navigation - Brauche Hilfe

dctrjns · #1 (**permalink**) 15.02.2013, 17:28

Hallo Leute,

Also ich bin noch ziemlich Neu in des Szene und brauche mal eure Hilfe.

Bin gerade dabei mein Portfolio mittel HTML und CSS anzupassen.

Jedoch kriege ich meine NAvigation nicht so hin, wie ich es will.

Hier mal ein Link zur Seite: iNfectedMedia

Wie ihr seht, stehen die Links bzw. die NAvibilder unter der eigentlichen Navigation.

Habe schon mit position absolute bzw. relative gearbeitet, hat aber nicht funktioniert.

den HTML Code könnt ihr euch ja selbst ansehen.

Hier der Inhalt der CSS-Datei:

Code:

* { margin: 0px; padding: 0px; }

body {
    background: url(images/bg.png) repeat-x;
}

#main-container {
    background: url(images/main_bg.png) repeat-x;
    width: 1250px;
    height: 1100px;
    margin: 0 auto;
}

#header {
    position: relative;
    height: 78px;
}

#header img, #header .navigation {
    position: absolute;
}

#header img {
    top: 60px;
}

#header .navigation {
    top: 57px;

}


#header ul.navigation {

    background: url(images/navi_bg.png) no-repeat;
    height: 66px;
    left: 433px;
    right: 133px;
    list-style-type: none;





}

#header ul.navigation li {
    display: block;
    float: left;





}

#header ul.navigation li a{
    display: block;
    margin: 50px;


}

Danke für Eure Hilfe

gaby · #2 (**permalink**) 15.02.2013, 18:23

Zitat:

Zitat von dctrjns

Wie ihr seht, stehen die Links bzw. die NAvibilder unter der eigentlichen Navigation.

Das liegt daran, daß im Selektor

#header img { top: 60px; }

das "top" nicht nur auf das Logo-Bild angewendet wird, sondern auch noch auf die Bilder-Links.

BTW:
Es mag zwar stylish sein, die Links bis auf Fliegensch...größe zu verkleinern, und zusätzlich noch einen farblich fließenden Übergang zum Hintergrund zu erzeugen, aber benutzerfreundlich ist das nicht mehr, weil bei Textvergrößerung die Bilder nicht mitskalieren.

Ich mußte erstmal eine ganze Minute auf das Bild starren, bevor ich die Links zufällig entdeckt habe. :/

dctrjns · #3 (**permalink**) 15.02.2013, 20:03

Danke, es funktioniert jetzt!

Habe aber ein neues Problem.

Wollte eine Hover-Grafik einfügen, jedooch verschiebt sich beim hover die Navigation.

Code:

* { margin: 0px; padding: 0px; }

body {
    background: url(images/bg.png) repeat-x;
}

#main-container {
    background: url(images/main_bg.png) repeat-x;
    width: 1250px;
    height: 1100px;
    margin: 0 auto;
}

#header {
    position: relative;
    height: 78px;
}

#header img, #header .navigation {
    position: absolute;
}

#header .logoimg {
    top: 60px;
}

#header .navigation {
    top: 57px;

}


#header ul.navigation {

    background: url(images/navi_bg.png) no-repeat;
    height: 66px;
    left: 433px;
    right: 133px;
    list-style-type: none;
    overflow: hidden;





}

#header ul.navigation li {
    display: block;
    float: left;







}

#header ul.navigation li a {
    display: block;
    margin-left: 64px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 29px;

}


ul.navigation li a:hover {
    background: url(images/hover.png) no-repeat;
    height: 40px;
    width: 91px;
    padding-top: 9px;
    padding-left: 29px;

}

Ich hoffe ihr verzeiht mir mein fehlendes Wissen :P

Manfred62 · #4 (**permalink**) 15.02.2013, 22:07

Zitat:

Zitat von dctrjns

Ich hoffe ihr verzeiht mir mein fehlendes Wissen :P

Code:

<meta name="description" content="Webdesign and Web Development" />

hmm, irgendwie...

dctrjns · #5 (**permalink**) 15.02.2013, 22:33

Ich geh mal davon aus, du hast nie angefangen und konntest es von Geburt aus?

Natürlich ist das optimistisch aber ich denke doch, dass ich das vielleicht in Zukunft irgendwann mal kann

gaby · #6 (**permalink**) 16.02.2013, 03:30

Zitat:

Zitat von dctrjns

Ich geh mal davon aus, du hast nie angefangen und konntest es von Geburt aus?

Natürlich ist das optimistisch aber ich denke doch, dass ich das vielleicht in Zukunft irgendwann mal kann

dann biete doch bitte auch erst ab diesem Zeitpunkt deine Dienstleistungen an.

Wenn du einen Dienstleister engagierst, erwartest du doch auch professionelle Arbeit für dein Geld, oder?

gaby · #7 (**permalink**) 16.02.2013, 03:32

Zitat:

Zitat von dctrjns

Danke, es funktioniert jetzt!

bitte sehr!

Und was ist mit meinem Argument wegen der Bilder-Links?
Das gleiche Aussehen könntest du auch benutzerfreundlich mit Textlinks und textshadow erreichen.

hubspe · #8 (**permalink**) 16.02.2013, 14:28

Zitat:

Zitat von dctrjns

Danke, es funktioniert jetzt!

äh...ist nicht dein Ernst?!

Der jetzige Zustand ist imho unannehmbar.

Zitat:

Zitat von dctrjns

Wollte eine Hover-Grafik einfügen, jedooch verschiebt sich beim hover die Navigation.

Dein Grundproblem sind die sinnfreien absoluten Positionierungen sowohl der Headergrafik wie auch der gesamten Navigation.
Davon das bei grafischen navis die Bilder keinesfalls hardcodiert in den Quelltext genagelt werden will ich gar nicht erst anfangen.
Da es sich um Schmuckgrafiken handelt gehören die als HG-Bild in die CSS.

Ein Beispiel hält unsere CSS-FAQ unter Punkt 15 bereit.

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Navigation ist nicht mittig	Schokokrapfen	CSS	29	19.09.2011 23:19
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29