Beiträge von hampelmann0815

hampelmann0815 · 13. Februar 2018

Hallo zusammen,

so, ich habe es dank Euch in den Griff bekommen:

korrigierte Seite

Vielen Dank.

Gut die CSS muss ich noch auf den neusten Stand bringen. Sonst noch konstruktive Kritik?

VG

hampelmann

hampelmann0815 · 12. Februar 2018

Also nochmal danke Basti,

zeigt er bei dir nicht diese Lücken bei der Version mit include im Vergleich zu der Version ohne include?

Und das mit den dem Platzieren von footer und co werde ich nochmal überarbeiten

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

hampelmann0815 · 12. Februar 2018

Hallo an alle,

und viele Dank für Eure Hilfe. Leider bin ich aus privaten Gründen am WE nicht zum Antworten gekommen. Sorry.

Also wie ich schon mal erwähnte, bin ich Neuling in dem Bereich. Auch hier im Forum. Also habt etwas Geduld mit mir. Danke dafür im Voraus.

Ich habe hier mal zwei Test-Seiten online gestellt (auf einem Temporären Webserver).

http://www.hertweckscloud.myds.me/XYZ/XYZ.php (Beispiel-Seite ohne include)

http://www.hertweckscloud.myds.me/XYZ/XYZist.php (Beispiel-Seite mit include)

Ich hoffe, ihr könnt etwas damit anfangen.

Vielen Dank für Eure Hilfe im Voraus.

hampelmann0815 · 10. Februar 2018

Hallo MrMurphy,

vielen Dank, dass auch du dich hier eingeschaltet hast, um mir zu helfen.

Zitat

Das liegt an deinem CSS. Leider zeigst du uns die entscheidenen Passagen nicht.

Welche sollen das denn sein. Ich habe zwar nur den Code von 2 Dateien die per include geladen werden sollen gepostet, aber mehr steht da nicht drin (auch nicht in den anderen). Solltest du diesen aber zusätzlich benötigen, poste ich den auch noch gerne Code auch noch.

Zitat

Insgesamt fällt auf das deine CSS-Kenntnisse veraltet sind, du solltest dich auf den aktuellen Stand bringen.

Hast du da ein Tipp für mich (z.B. online Tutorial oder Literatur)?

Zitat

Zudem enthalten deine CSS-Angaben Rechtschreibfehler. Dabei kann ein Editor helfen, der solche Fehler farblich hervorhebt.

Auch hier: hast du eine Empfehlung für einen Editor für mich. Habe alles mit dem Windows Notepad geschreiben und nun erstmal Aptana runtergeladen. Gibt es etwas besseres?

Danke auch an dich für die Hilfe im Voraus!

hampelmann0815 · 10. Februar 2018

Hallo Basti,

also erstmal vielen Dank wieder für deine Reaktion.

Das mit den Leerzeichen ist richtig und wird korrigiert. Danke dafür schon mal.

Dann am Besten der Reihe nach (und wenn du etwas nicht von meinem Geschreibsel verstehst, dann liegt das ja wohl nur an mir ).

Habe mal Bilder eingebaut.

1. So sollte es aussehen und so sieht es aus, wenn ich den Code direkt in das Hauptdokument schreibe:

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

Code

<div id="wrapper">    
    
    <header>
        <a href="/XYZ/XYZ.php" title="Hauptmenü">
            <img src="/XYZ/IMG/CC_Kopf_1360x70.png" alt="Grafik: Hauptmenü" width="100%" />
        </a>
    </header>
    
    <nav id="steuerungoben">
        <ul>
            <li><a href="/XYZ/XYZ.php">Hauptmenü</a></li>
            <li><a href="/XYZ/kontakt_1.html">Kontakt</a></li>
            <li><a href=" /XYZ/hilfe_1.html">Hilfe</a></li>
        </ul>
    </nav>

Alles anzeigen

2. So sieht es aus, wenn ich den Header und die steuerungoben mit include einbaue (es werden Leerzeilen eingefügt):

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

PHP

<div id="wrapper">    
    
    <?php
        include("PHP/headerINC.php");
        include("PHP/nav_str_obenINC.php");
    ?>

Den Code der beiden Dateien habe ich ja schon oben gepostet.

Danke nochmal für die Hilfe!

hampelmann0815 · 10. Februar 2018

Hallo olkostbe,

hat leider keinen Effekt. Trotzdem vielen Dank für dein Feedback.

Hat noch jemand eine Idee?

VG

hampelmann0815 · 10. Februar 2018

Hallo liebe Helfer,

ich habe ein Problem bei dem Einbinden von Dateien mit include und eine Frage zu dem Erweitern von Dateinamen innerhalb der include-Anweisung mit einer Variablen - oder aber einer Alternative zu dem Vorgehen .

In dem HTML-Dokument soll lediglich der Rahmen aller Seiten festgelegt werden. Mittels der Include-Dateien will ich den Inhalte der Bildschirmbereiche (bis auf die Bereiche aside und section immer den gleichen Inhalt) laden.

1. Problem: Die PHP-Dateien werden mit include geladen, aber es werden Leerzeilen zwischen den Dateien eingefügt bzw. die Blöcke werden verschoben. Woran liegt das und wie kann ich es ändern?

2. Frage: Die Dateiennamen asideINC.php und sectionINC.php haben Inhalt, der von den übrigen Bereichen abweicht. Also ruft der Benutzer nach dem Laden der Hauptseite z.B. die Unterseite "Hilfe" über das Menü in "steuerungoben" (siehe Datei nav_str_obenINC.php unten) auf, soll die Datei aside_hilfe_1INC.php und section_hilfe_1INC.php aufrufen. Um das für alle Unterseiten leichter zu bewerkstelligen, soll der Dateiname in der include-Anweisung mittels Variablen, festgelegt in den jeweiligen Seiten, verändert werden. Wie kann ich das am Besten bewerkstelligen?

3. Frage: Gibt es einen gänzlich anderen Ansatz, mit dem ich es am einfachsten erreiche, dass der feststehenden Bereiche nur einmal programmiert werden muss und dann der Content der Bereiche section und aside nur verändert werden muss, ohne immer den gesamten Code der feststehenden Bereiche zu wiederholen?

Lieben Dank an alle Helfer im Voraus!

Hier mein Code:

1. HTML des Hauptdokuments XYZ.php

PHP

<!DOCTYPE html>

<html lang="de">

<head>
    <meta charset="utf-8">
    <title>XYZ</title>
    <meta name="XYZ" content="XYZ">
    <link href="/XYZ/CSS/SPMainCSS.css" rel="stylesheet">
    <link rel="icon" type="image/vnd.microsoft.icon" href="/XYZ/IMG/SPDeskICO.ico">

</head>

<body>

<div id="wrapper">    
    
    <?php

        include("PHP/headerINC.php");
        include("PHP/nav_str_obenINC.php");
        include("PHP/nav_str_linksINC.php");
        include("PHP/sectionINC.php");
        include("PHP/asideINC.php");
        include("PHP/footerINC.php");
    ?>

</div>

</body>

</html>

Alles anzeigen

Meine CSS:

Code

* {
    margin: 0;
    padding: 0;
    font-family: verdana, arial, sans-serif;
}

body {

}

header, nav, footer, aside, section {
    display: block;
}

#wrapper {
    background-color: #f3f3f4;
    width: 1050px;
    margin: 0 auto;
    text-align: left; 
}

header {    
    background-color: #f3f3f4;
    
    width: 100%;
    margin: 0 auto;
}

#steuerungoben {
    background-color: #f3f3f4;
}

#steuerungoben ul {
    list-style-type: none;
    margin-left: 190px;
}

#steuerungoben li {
    display: inline-block;
}

#steuerungoben a {
    display: inline-block;
    width: 230px;
    background-color: #f3f3f4;
    float: left;
    text-align: center;
    line-height: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    color: #003399;
}

#steuerungoben a:hover {

    background-color: #e5ecf4;
    font-weight: bold;
    text-decoration: underline;

}

#steuerunglinks {

    background-color: #f3f3f4;
    width: 190px;
    float: left;

}

#steuerunglinks ul {

    list-style-type: none;
    background-colcor: #e5ecf4;
    padding-top: 0px;
    padding-bottom: 50px;

}

#steuerunglinks li {
    padding-top: 0px;
    padding-bottom: 5px;
    background-colcor: #e5ecf4;
}

#steuerunglinks li p {

    background-color: #e7e7e7;
    padding-top: 5px;
    padding-bottom: 5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    color: black;
    padding-left: 1em;
}

#steuerunglinks li a {
    
    display: block;
    width: 176px;    
    background-color: #f3f3f4;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    color: #003399;
    padding-left: 1em;

}

#steuerunglinks li a:hover {

    background-color: #e5ecf4;
    font-weight: bold;
    text-decoration: underline;

}

aside {
    background-color: #f3f3f4;
    width: 190px;
    float: right;
    padding-left: 1em;
}

section {
    background-color: #ffffff;
    margin-left: 190px;
    margin-right: 190px;
    width: 652px;
    color: #003399;
    border: 1px solid #e7e7e7;
}

section h1 {font-style: normal; font-variant: normal; font-weight: bold; font-size: 150%;}

footer {
    background-color: #f3f3f4;
    clear: both;
}

footer p {
    font-size: 10px;
    font-weight: bold;
}




.parent {
    position: absolut;
    margin-left: auto;
    width: 500px;
}

span.txtred {color:red;}

#txtleft {
    text-align: left;
        float:left;
    margin-left: 20px;
}

#txtright {
    text-align: right;
    margin-right: 20px;
}

Alles anzeigen

als Beispiel header.php:

Code

<header>
    <a href="/XYZ/XYZ.php" title="Hauptmenü">
        <img src="/XYZ/IMG/CC_Kopf_1360x70.png" alt="Grafik: Hauptmenü" width="100%" />
    </a>
</header>

als Beispiel nav_str_obenINC.php:

Code

<nav id="steuerungoben">
    <ul>
        <li><a href=" /XYZ/XYZ.php">Hauptmenü</a></li>
        <li><a href=" /XYZ/kontakt_1.php">Kontakt</a></li>
        <li><a href=" /XYZ/hilfe_1.php">Hilfe</a></li>
      </ul>
</nav>

hampelmann0815 · 8. Februar 2018

Basti, ich danke dir! Das war es, was ich gebraucht habe.

Code

#steuerunglinks li a {
    
    display: block;
    width: 176px;    
    background-color: #f3f3f4;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    color: #003399;
    padding-left: 1em;

}

Alles anzeigen

manchmal ist es soooooo einfach. Vielen Dank!

Hast du noch allgemeine Tipps für mich?

hampelmann0815 · 8. Februar 2018

Es soll in der linken Steuerleiste so aussehen wie in der oberen Steuerleiste (z.B. bei Hauptmenü). Soll also über die komplette Breite des Bereichs gehen und nicht nur hinter dem Text den veränderten Hintergrund einblenden.

In der linken Steuerleiste funktioniert es bei dem normalen Text (z.B. bei dem Text "Datenbanken").

Ich hoffe, es ist nun klarer geworden :-).

hampelmann0815 · 8. Februar 2018

Hallo ich bin recht neu in der Programmierung mit HTML und CSS und habe nun gleich mal eine Frage:

in meinem html steht:

HTML

<html lang="de">

<head>
    
    <title>XYZ</title>

    <link href="XYZ.css" rel="stylesheet">

</head>

<body>

<div id="wrapper">    

    <header>
        <a href="XYZ.html" title="Hauptmenü">
            <img src="XYZ.png" alt="Grafik: Hauptmenü" width="100%" />
        </a>
    </header>

    <nav id="steuerungoben">
        
        <ul>

            <li><a href="XYZ.html">Hauptmenü</a></li>
            <li><a href="kontakt_1.html">Kontakt</a></li>
            <li><a href="hilfe_1.html">Hilfe</a></li>

          </ul>
    </nav>

    <nav id="steuerunglinks">

        <ul>

                <li><p>Datenbanken</p>

                <ul>

                    <li><a href="/dokdat_1.html">Dokumente</a></li>
                    <li><a href="/wetterdat_1.html">Wetter</a></li>

                </ul>

            </li>

                    ...... USW ....

          </ul>

    </nav>


    <aside>

        <p>
            <b>weiterführende Infos</b>
            news1 <br />
            news2 <br />
            news3 <br />
            news4 <br />

        </p>

    </aside>


    <section>


                    .... Arbeitsbereich ...



    </section>

    <footer>
        <br />
        <p id="txtleft";>Copyright XYZ</p> 
        <p id="txtright";>Version: 1.0.2018 (08.02.2018)</p>
        <br />
    </footer>

</div>

</body>

</html>

Alles anzeigen

und in meinem CSS steht:

Code

* {
    margin: 0;
    padding: 0;
    font-family: verdana, arial, sans-serif;
}

body {

}

header, nav, footer, aside, section {
    display: block;
}

#wrapper {
    background-color: #f3f3f4;
    width: 1050px;
    margin: 0 auto;
    text-align: left; 
}

header {    
    background-color: #f3f3f4;
    
    width: 100%;
    margin: 0 auto;
}

#steuerungoben {
    background-color: #f3f3f4;
}

#steuerungoben ul {
    list-style-type: none;
    margin-left: 190px;
}

#steuerungoben li {
    display: inline-block;
}

#steuerungoben a {
    display: inline-block;
    width: 230px;
    background-color: #f3f3f4;
    float: left;
    text-align: center;
    line-height: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    color: #003399;
}

#steuerungoben a:hover {

    background-color: #e5ecf4;
    font-weight: bold;
    text-decoration: underline;

}

#steuerunglinks {

    background-color: #f3f3f4;
    width: 190px;
    float: left;

}

#steuerunglinks ul {

    list-style-type: none;
    background-colcor: #e5ecf4;
    padding-top: 0px;
    padding-bottom: 50px;

}

#steuerunglinks li {
    padding-top: 0px;
    padding-bottom: 5px;
    background-colcor: #e5ecf4;
}

#steuerunglinks li p {

    background-color: #e7e7e7;
    padding-top: 5px;
    padding-bottom: 5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    color: black;
    padding-left: 1em;
}

#steuerunglinks a {
    
    background-color: #e7e7e7;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    color: #003399;
    padding-left: 1em;

}

#steuerunglinks li a:hover {

    background-color: #e5ecf4;
    font-weight: bold;
    text-decoration: underline;

}

aside {
    background-color: #f3f3f4;
    width: 190px;
    float: right;
    padding-left: 1em;
}

section {
    background-color: #ffffff;
    margin-left: 190px;
    margin-right: 190px;
    width: 652px;
    color: #003399;
    border: 1px solid #e7e7e7;
}

section h1 {font-style: normal; font-variant: normal; font-weight: bold; font-size: 150%;}

footer {
    background-color: #f3f3f4;
    clear: both;
}

footer p {
    font-size: 10px;
    font-weight: bold;
}

Alles anzeigen

Jetzt zu meinem Problem. Ich habe auf der linken Seite eine Steuerungsspalte (#steuerunglinks li) Darin ist einerseits einerseits "normaler" Text drin und zusätzlich auch Links um auf die weiteren Seiten zu verzweigen. Der Text kann über die komplette Breite der Steuerungsspalte (190px) mit einem Hintergrund (ich nenne es mal Balken) hinterlegt werden. Bei den Links funktioniert dies nicht. Da soll der Hintergund sich ändern, wenn ich mit der Maus über den Link fahre. Zwar beginnt der gänderte Hintergrund links am Rand von der Steuerungsspalte, endet aber direkt nach dem Text und setzt den Hintergrund nicht bis zum Ende der Steuerungsspalte fort.

Wie gesagt, ich bin neu in dem Bereich unterwegs und hoffe auf Eure Hilfe. Dafür schon mal Danke!

Beiträge von hampelmann0815

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

Farbbalken hinter Text

Farbbalken hinter Text

Farbbalken hinter Text