Beiträge von stupsi01

stupsi01 · 18. August 2018

Du hast recht. "setTimeout" macht in meinem Fall keinen Sinn. Wenn ich stattdessen einfach das normale Skript verwende funktioniert es.

Code

<script>$("#skel-layers-wrapper").height($(document).height());</script>

Vielen Dank!

stupsi01 · 18. August 2018

Ich habe ein Skel Skript, über welches ich den Wrapperbereich festlegen muss, je nach Grösse:

<script>setTimeout(function ajust_size(){ $("#skel-layers-wrapper").height($(document).height()); }, 100);</script>

Wie baue ich das jetzt mit "onresize" ein? Wenn ich folgendes probiere ändert sich nichts:

Code

<body onresize="ajust_size()">
Code
</body>

stupsi01 · 18. August 2018

Hallo zusammen

Gibt es eine Möglichkeit Javascript (im HTML eingebettet mit <script>Code</script>) erneut auszuführen, sobald sich die Seitengrösse ändert?

Ich habe ein Skript, welches den Footer korrekt platziert. Beim Ändern der Seitengrösse soll jetzt dieses Script automatisch erneut ausgeführt werden (ohne dass die Seite neugeladen werden muss).

Gibt es so eine Möglichkeit? Ich bin Anfänger und habe bei Google leider nichts hilfreiches gefunden...

Vielen Dank und Liebe Grüsse

stupsi01

stupsi01 · 25. Juli 2018

Kenne mich mit js nicht aus, wie funktioniert das dort?

stupsi01 · 24. Juli 2018

Okay. Vielen Dank für eure Antworten. Wäre es denn als Alternative möglich, den style im HTML fix zu vergeben, sodass kein CSS und Script nötig ist?

stupsi01 · 24. Juli 2018

Wie kann ich die Klasse denn auch der mobilen Version zuweisen? Der Html-Code ist doch derselbe - egal welche Ansicht?

stupsi01 · 23. Juli 2018

Das verstehe ich. Aber weshalb bleiben die Links denn nicht rot? Die Klasse wurde ihnen ja unabhängig vom CSS zugewiesen mit <li class="active" ..und sollten doch auch so bleiben?

Sorry, bin Anfänger

stupsi01 · 23. Juli 2018

Es ist ein Template, welches ich jetzt auf meine Bedürfnisse anpasse. Das mit dem activehabe ich schon eingefügt im "narrower.css".

Allerdings ist der Text nur während dem Klicken rot und bleibt nicht so:

Code

#navPanel .link:active {
                color: red;
            }

stupsi01 · 23. Juli 2018

Leider verstehe ich auch nicht weshalb. Vielleicht verstehst es du, wenn du den Code ansiehst (ich verstehe es nicht )

stupsi01 · 23. Juli 2018

Entschuldige, ich habe den Code jetzt nochmals angepasst: Link. Das Menü "Home" soll rot sein, wenn man auf der Seite "index.html" ist.

Das Menü "Untermenü" soll rot sein, wenn man auf der Seite "untermenü.html" ist.

Dies funktioniert im Desktoplayout (siehe Anhang).

Im Mobilelayout will ich jetzt das selbe erreichen.

Vielen Dank!

stupsi01 · 23. Juli 2018

Das klappt schon, allerdings möchte ich die Menüpunkte mit der Klasse "active" rot haben, nicht der Erste.

Bin ich auf Home ist Home rot, bin ich auf dem ersten Untermenü ist dieses rot, usw.

stupsi01 · 23. Juli 2018

Genau. Ich meine das Mobile-Menü (welches sich über Hamburgermenü öffnen lässt). Das Desktopmenü funktioniert ohne Probleme.

Die Seite ist jetzt auf meinem Server online geschalten: Link

Das meiste unnötige ist rausgelöscht, sodass nur noch das Menü übrig bleibt..

Vielen Dank

stupsi01 · 22. Juli 2018

Achso, sorry^^

HTML:

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Solarize by TEMPLATED</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.dropotron.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
    <body class="homepage">

        <!-- Header Wrapper -->
            <div class="wrapper style1">
            
            <!-- Header -->
                <div id="header">
                    <div class="container">
                            
                        <!-- Logo -->
                            <h1><a href="#" id="logo">Solarize</a></h1>
                        
                        <!-- Nav -->
                            <nav id="nav">
                                <ul>
                                    <li class="active"><a href="index.html">Home</a></li>
                                    <li>
                                        <a href="">Dropdown</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Magna phasellus</a></li>
                                            <li><a href="#">Etiam dolore nisl</a></li>
                                            <li>
                                                <a href="">Phasellus consequat</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Phasellus consequat</a></li>
                                                    <li><a href="#">Magna phasellus</a></li>
                                                    <li><a href="#">Etiam dolore nisl</a></li>
                                                    <li><a href="#">Veroeros feugiat</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Veroeros feugiat</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="left-sidebar.html">Left Sidebar</a></li>
                                    <li><a href="right-sidebar.html">Right Sidebar</a></li>
                                    <li><a href="no-sidebar.html">No Sidebar</a></li>
                                </ul>
                            </nav>
    
                    </div>
                </div>
    </body>
</html>

Alles anzeigen

style.css

CSS

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
/* Basic */

    body {
        background: #222222;
    }

        body.loading * {
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -o-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }

    body, input, select, textarea {
        color: #555555;
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
        font-weight: 300;
        line-height: 1.65em;
    }

    a {
        color: #82b440;
        text-decoration: underline;
    }

    strong, b {
        font-weight: 700;
    }

    em, i {
        font-style: italic;
    }

    p, ul, ol, dl, table, blockquote {
        margin: 0 0 2em 0;
    }

    p {
        line-height: 1.8em;
    }

        p.medium {
            font-size: 1.4em;
        }

    h1, h2, h3, h4, h5, h6 {
        color: inherit;
        font-weight: 700;
    }

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            color: inherit;
            text-decoration: none;
        }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.25em;
    }

    sub {
        font-size: 0.8em;
        position: relative;
        top: 0.5em;
    }

    sup {
        font-size: 0.8em;
        position: relative;
        top: -0.5em;
    }

    hr {
        border-top: solid 1px #82b440;
        border: 0;
        margin-bottom: 1.5em;
    }

    blockquote {
        border-left: solid 0.5em #82b440;
        font-style: italic;
        padding: 1em 0 1em 2em;
    }

    section.special, article.special {
        text-align: center;
    }


/* Header */

    #header {
        color: white;
        height: 4em;
        background: rgba(0, 0, 0, 0.5);
    }

        #header .container {
            position: relative;
        }

    .homepage #logo {
        display: none;
    }

    .homepage #nav {
        position: static;
        right: none;
        text-align: center;
    }

    #logo {
        line-height: 2em;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 2em;
        font-weight: 400;
    }

        #logo h1 {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

        #logo a {
            color: inherit;
        }

    #nav {
        position: absolute;
        top: 0;
        right: 0;
    }

        #nav > ul {
            margin: 0;
        }

            #nav > ul > li {
                border-radius: 4px;
                display: inline-block;
                margin-left: 0.5em;
                padding: 0 0.5em;
            }

                #nav > ul > li a {
                    color: inherit;
                    line-height: 4em;
                    letter-spacing: 2px;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-weight: 400;
                    font-size: 1em;
                }

                #nav > ul > li:first-child {
                    margin-left: 0;
                }

                #nav > ul > li.active a {
                    color: white;
                }

                #nav > ul > li > ul {
                    display: none;
                }

/* Dropotron */

    .dropotron {
        top: 2em;
        background: rgba(32, 32, 32, 0.75);
        border-radius: 4px;
        color: inherit;
        min-width: 12em;
        padding: 1em 0;
        color: white;
    }

        .dropotron > li {
            line-height: 2em;
            padding: 0 1em;
        }

            .dropotron > li > a {
                color: inherit;
                letter-spacing: 2px;
                text-decoration: none;
                text-transform: uppercase;
            }

            .dropotron > li.active > a, .dropotron > li:hover > a {
                color: inherit;
            }

        .dropotron.level-0 {
            border-radius: 0 0 4px 4px;
            font-size: 1em;
            margin-left: -0.5em;
        }

Alles anzeigen

style-narrower.css

CSS

/* Basic */

    #skel-layers-wrapper {
        padding-top: 44px;
    }

    p {
        line-height: 1.8em;
    }

    header.major h2 {
        font-size: 1.8em;
    }

    header.major .byline {
        font-size: 1.1em;
    }

/* Layers */
#navPanel {
background: #000;
}

#navPanel .link {
border-top: solid 1px rgba(0, 0, 0, 0.15);
color: #888;
display: block;
height: 44px;
line-height: 44px;
padding: 0 1em 0 1em;
text-decoration: none;
}

#navPanel .link:first-child {
border-top: 0;
}

#navPanel .link.depth-0 {
color: #fff;
}

#navPanel .link .indent-1 {
display: inline-block;
width: 1em;
}

/*Diese Zeile wurde von mir eingefügt!*/
/*Der Link bleibt aber nur während dem Klicken rot und bleibt leider nicht so..*/
#navPanel .link:active { color:red !important; }

Alles anzeigen

Musste wegen Zeichenlimit unnötige Zeilen löschen. Mein Wunsch: Auf der Seite Home soll Home rot sein:

html-seminar.de/woltlab/attachment/1632/

Danke für die Hilfe - Falls irgendwer das schaffen sollte gibt's ne Belohnung von mir

stupsi01 · 22. Juli 2018

Zitat von basti1012

Das problem ist das es sich keiner runterladen wird um dir zu helfen.

Du sagst das es in der Mobilen Ansicht ist. Kuck mal in der Css Datei nach ob da irgendwo was von @media queries steht. Da wirst du die Daten wahrscheinlich ändern müssen.

Kannst du dein Html und Css mal posten wenn es nicht zu groß ist ?

Klar. Ich habe mittlerweile etwas Fortschritt gemacht :). Wenn ich im "style-narrower.css" die Zeile "#navPanel .link:active { color: red; }" einfüge sind die Linke beim anklicken rot. Allerdings bleibt dies leider nicht so sondern das rot bleibt nur während dem Klick

Sorry, aber wie geht das mit den Anhängen? Bei mir erscheint immer ein "unbekannter Fehler".

Kannst die Files von meinem Server herunterladen: Download dann auf "Ordner herunterladen" (Einzige Änderung von mir ist Zeile 192-196 im style-narrower.css)

Vielen Dank für deine Hilfe. Ich glaube langsam aber sicher verzweifle ich

Beiträge von stupsi01

<script> beim Ändern der Seitengrösse erneut ausführen

<script> beim Ändern der Seitengrösse erneut ausführen

<script> beim Ändern der Seitengrösse erneut ausführen

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht

:active Menüpunkte in der mobilen Ansicht