Großes Problem bei meiner Menüleiste.

Astinos · 5. Juni 2013

Servus,

da ich zur zeit meine HP versuche neu zu gestalten, bin ich auf einen Fehler gestoßen der mir in den letzten Tagen den geraubt hat.
Zur erklärung: ich habe eine leiste (grafik) die mit schlatern (interne und externe links) versehen werden soll. Die interen sind einfach nur Schriflinks während die externe bildlinks sein sollen. Soweit so gut, nur schaffe ich es nicht das a.) die bildlinks auf die rechte seite zu legen b.) das sie nicht die funktion von den internen links übernehmen. Da diese animiert sind. Ich hoffe man kann folgen. Aber ich habe ja noch den Quellcode!!

HTML

//Quellcode navi//




<nav id="steuerungunten">
<ul>
<li><a href="xxx.htm">tes</a></li>
<li><a href="xxx.htm">test</a>
<li><a href="xxx.htm">test1</a></li>
<li><a href="xxx.htm">teste</a></li>
</ul>
<nav id="steuer2">
<p><a rel="nofollow" href="http://www.imdb.com/name/nm4125422/" target="_blank"><img src="bilder/imdb.png" width="50" height="24"
alt="IMDb" /></a></p>
</nav>

Alles anzeigen

CSS

//quellcode Style//




#steuerungunten {
/*background-color: red; */
background-image: url(bilder/balken_unten.png);
height: 32px;
border-top: 1px solid #5f5c16;
}
#steuer2 a img {
float: left;
margin-right: 20px;
margin-left: 250px;
}
#steuer2 a {
/*font-size: 11pt;*/
display: block;
width: 90px;
/*background: yellow; */
float: left;
/*border-left: 1px solid red; */
text-align: center;
line-height: 32px;
color: #FFF;
text-decoration: none;
}
#steuerungunten ul {
list-style-type: none;
}
#steuerungunten li {
display: inline;
}
#steuerungunten a {
font-size: 11pt;
display: block;
width: 90px;
/*background: yellow; */
float: left;
/*border-left: 1px solid red; */
text-align: center;
line-height: 32px;
color: #FFF;
text-decoration: none;




text-shadow: 0px 0px 0px #e6e6a8;




	-webkit-transition: all 800ms ease-in;
	-moz-transition: all 800ms ease-in;
	-ms-transition: all 800ms ease-in;
	-o-transition: all 800ms ease-in;
	transition: all 800ms ease-in;
}
#steuerungunten a:hover {
background-color: rgba(255, 233, 0, 0.2);




	-webkit-transition: all 400ms ease-in;
	-moz-transition: all 400ms ease-in;
	-ms-transition: all 400ms ease-in;
	-o-transition: all 400ms ease-in;
	transition: all 400ms ease-in;;

Alles anzeigen

Bin für jede Variante, Lösung zu haben.

Also jetzt sieht man ja was los ist!

hier noch ein Beispielbild !

cottton · 5. Juni 2013

Da fehlte bissl was.
Hab Dir das mal hier reingepackt: http://jsfiddle.net/sknkh/

Ich bin nicht gut in css, aber ich kann mir vorstellen, das ein nav im nav nicht sinnvoll ist.

Astinos · 5. Juni 2013

Zitat von cottton

Da fehlte bissl was.
Hab Dir das mal hier reingepackt: http://jsfiddle.net/sknkh/

Ich bin nicht gut in css, aber ich kann mir vorstellen, das ein nav im nav nicht sinnvoll ist.

scheint ja dennoch nicht zu funktionieren, der schalter wird ja dennoch dem Block zugewiesen. Ich brauch ein Befehl wo ich die Animation nicht auf das bild und somit dem schalter zulasse. Da das verschieben ansich ja fuktioniert also das verschieben des img.

Astinos · 6. Juni 2013

So,

von mir aus kann es zu. Habe selber ne Lösung gefunden. Etwas umständlich aber es geht.

Astinos

lauras · 6. Juni 2013

Dann poste doch bitte deine Lösung hier, damit andere die vielleicht mal ein Ähnliches Problem haben darauf zurückgreifen können

Astinos · 7. Juni 2013

Also,

hier erst mal ein Wenig Ordnung rein ...

HTML

//Quellcode Navi//
<nav id="steuerungunten">
        <ul>
            <li><a href="index.htm">Startseite</a></li>
            <li><a href="impressum.htm">Website</a></li>
            <li><a href="sitemap.htm">sitmap</a></li>
        </ul>
    </nav>
    <nav id="steuer2">
        <p>
//ganz wichtig für Leute die der Rahmen stört im o.g. Code, einfach im stylesheet umsetzten und hier die border raus da sie nicht Valide ist und es sollte immer in img Anweisungen ein alt -attribut drin sein (warum auch immer), also wegen der Validität//




            <a href="http://www.imdb.com/name/nm4125422/" target="_blank" ><img src="bilder/imdb.png" width="50" height="24" title="IMDb" alt="IMDb" />
    </a>
    </p>
    </nav>

Alles anzeigen

und hier noch CSS.
Wie man sieht habe ich die Botton Leiste unten einfach geteilt in zwei bottonleisten. Und habe die Zweite dann einfach mit nem float hinter die 1 gebracht. Funktioniert auch nur bei dem Layout oder bei einem welches eine botton leiste besitzt die denn selben Farbverlauf au weißt. Deswegen umständlich, ein paar befehle könnten bestimmt raus aber das mach ich erst zum Schluss. Hätte es gern sauberer gelöst aber so ging es auch.
Habe gesucht wie ein Wahnsinniger um eine andere Lösung zu finden aber mein Verständnis für Html ist noch nicht alt zu Groß. Bin ja ein Anfänger.
Hänge auch schon wieder vor den nächsten Hürden. Aber ich versuch erst mal selber einen weg zu finden. Bekomme aber schon wieder nen Puls von 200
Ich glaube nicht das ich jemanden mit dieser Lösung helfen kann, aber ich habe mit erst mal geholfen!!!

CSS

//CSS Code//
#steuerungunten {
    /*background-color: red; */
    background-image: url(bilder/botton-unten.jpg);
    height: 32px;
    border-top: 1px solid #5f5c16;
    width: 500px;
    float: left;
    clear: both;
}
#steuer2 {
    background-image: url(bilder/botton-unten.jpg);
    float: right;
    height: 32px;
    border-top: 1px solid #5f5c16;
    /*margin-right: 20px;
    margin-left: 500px;*/
    width: 400px;
}
#steuer2 p {
    float: left;
}
#steuer2 a {
    width: 90px;
    /*background: yellow; */
    float: left;
    /*border-left: 1px solid red; */
    text-align: center;
    line-height: 32px;
    /*text-decoration: none;*/
}
#steuer2 a img {
    padding-top: 0.2em;
    text-decoration: none;
}
#steuerungunten ul {
    list-style-type: none;
}
#steuerungunten li {
    display: inline;
}
#steuerungunten a {
    font-size: 11pt;
    display: block;
    width: 90px;
    /*background: yellow; */
    float: left;
    /*border-left: 1px solid red; */
    text-align: center;
    line-height: 32px;
    color: #FFF;
    text-decoration: none;




    text-shadow: 0px 0px 0px #e6e6a8;




	-webkit-transition: all 800ms ease-in;
	-moz-transition: all 800ms ease-in;
	-ms-transition: all 800ms ease-in;
	-o-transition: all 800ms ease-in;
	transition: all 800ms ease-in;
}
#steuerungunten a:hover {
    background-color: rgba(255, 233, 0, 0.2);




	-webkit-transition: all 400ms ease-in;
	-moz-transition: all 400ms ease-in;
	-ms-transition: all 400ms ease-in;
	-o-transition: all 400ms ease-in;
	transition: all 400ms ease-in;;
}

Alles anzeigen

cottton · 7. Juni 2013

Da stimmt was nicht. Guck mal was passiert, wenn deas Fenster "zu klein" oder "zu groß" ist: http://jsfiddle.net/sknkh/1/
(kann Dir dennoch nicht helfen da ich selbst kein Pro in css bin )

Astinos · 7. Juni 2013

Jaaar,

soweit habe ich nicht gedacht. Hmmmmmmmmmmm langsam ist es zum Haare raufen, jetzt habe ich gerade ein andres Problem gelöst und schon bin ich wieder bei meinem ersten (großen).
Also wenn ich möchte das es sich an der rechten Seite ausrichtet, nehme ich float right; da ich aber nicht die Funktion der Button auf dem img haben möchte brauche ich eine Funktion die diese ausstellt oder eine die direkt das bild an spricht und sagt: "nimm nicht die Funktion der Button"!
Hmmmmmmmmmmmmmmm

Ich habe keine Ahnung

So jetzt habe ich wieder Puls

Astinos · 7. Juni 2013

Ach Käse, jetzt hast du mir nen Schreck eingejagt ^^!
Ich habe meine Seite auf 900px gestellt, das heißt die seite hat eine Maximale länge von 900px, sollte es kleiner werden, bleibt die Größe dennoch erhalten. Da ich als bezugsquelle erst mal die Telefon und Taplets ausschließe.
Aber trotzdem werde ich dran bleiben um das Problem anderes zu lösen. Das muss ich ja, da sich der trend der Smart geräte immer weiter fortsetzt. Aber dazu reicht mein Know how noch nicht aus !!!

Jetzt ist der Puls wieder unten, vorerst. Noch so viele Baustellen!!!

cottton · 7. Juni 2013

Ich kenne das
Meistens schmeiss ich alles über den Haufen, wenns mal nicht will.
Einfach komplette Kopie der Webseite machen und den Teil, der nicht funktioniert nochmal schreiben
Und viel abgucken/ausprobieren.
Durchs ausprobieren passieren manchmal "Unfälle", die dann aber irgentwas gutes haben.

Und als Du Tablet usw gesagt hast ist mir mein "Unfall" eingefallen:
Ich wollte meine Button umgestalten und die waren plötzlich ziehmlich groß. Sah aber cool aus.
Und da dacht ich mir das könnte nützlich für Smartphones/Tablets sein.
Also hab ich die einfach als Kachel-Button auf der Hauptseite mit eingebaut =)
die da -> http://i-stats.net/

Großes Problem bei meiner Menüleiste.

Jetzt mitmachen!

Teilen