PHP-Text mit Abstand nach oben?

Ich bin echt verwirrt, das ist heute schon mir dritter Post mit dem Thema HTML/CSS/PHP. Bin neu in dem Bereich und komme leider ohne Hilfe nicht ganz weiter...

Bild zum Beitrag

Wie man in dem Bild sehen kann ist .test eine Klasse im HTML-Teil. ".test" gibt einen normalen Satz aus. Da ich nicht will, dass der Text genau unter der Navigation erscheint, habe ich "margin-top: 3em;" hinzugefügt.

Als nächstes habe ich versucht einen Text aus einem String in PHP auszugeben. Das war kein großes Problem, danach habe ich dem Text in PHP mit <span id> einen Namen gegeben, um diesen Text in PHP zu bearbeiten. Jetzt möchte ich genau wie oben, dass der Text nicht genau nach der Navigation oben kommt, sondern genau wie bei ".test" auch einen Abstand nach oben hat.

Ich habe vieles versucht, kann mir aber leider nicht erklären warum es in HTML mit .test funktioniert, aber in PHP mit #meintext nicht.

Ich freue mich über jede Antwort, danke!

3 Antworten

verreisterNutzer

22.02.2019, 01:29

Deine Frage als auch deine Kommentare bei buffalo23 seiner Antwort sprechen Bände...

Ich würde dir raten, dich anfangs nur auf HTML und CSS zu beschränken und tatsächlich zu lernen und zu verstehen, wie beide Sprachen funktionieren und wie man sie anwendet. Erst dann, wenn du dich damit auskennst, kannst du dich an PHP wagen.

Denn nur so ersparst du dir und uns solche Fragen, die durch das Erlernen der Grundlagen erst gar nicht entstehen würden. Fragen zu stellen ist gut und notwendig, doch man sollte sich auf das Wichtigste beschränken.

Woher ich das weiß:Berufserfahrung

vaxearts

Beitragsersteller

22.02.2019, 01:31

Erstmal danke für deine Antwort! Du hast Recht, ich sollte das lassen und mich erstmal für lange Zeit an HTML und CSS setzen! Danke. :)

buffalo23

22.02.2019, 01:43

@vaxearts

Ein Crashkurs reicht, das ist keine Rocket Science. Aber es wär schon hilfreich zumindest die Technologien auseinanderhalten zu können

Sonst wirst du auch mit Frameworks wie Angular wahnsinnige Probleme kriegen

Gaskutscher

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

22.02.2019, 07:43

Warum es nicht geht?

Seite im Browser öffnen
Strg + U drücken und den Quelltext anschauen

PHP formatiert keine Seiten. PHP gestaltet keine Seiten. PHP gibt lediglich Code an den Browser aus und der interpretiert dann diesen.

Wenn der ausgelieferte HTML-Code falsch ist -> kann der Browser auch nichts richtig anzeigen.

Sprich: Schau was du per PHP an den Browser auslieferst und wenn das nicht sauberes CSS bzw. HTML ist -> Fehler beheben.

Woher ich das weiß:Berufserfahrung

buffalo23

22.02.2019, 00:57

Was ist das für ein Element auf dem du „.test“ anwendest?

Zeig mal dein Html einfach her dann kann ich es dir sagen

Ich bin kein Experte aber ich glaube du kannst keine margins auf inline Elemente anwenden, du müsstest glaub zB „display: block“ mit aufnehmen oder es auf ein div anwenden

vaxearts

Beitragsersteller

22.02.2019, 00:58

http://prntscr.com/moeqbh

buffalo23

22.02.2019, 00:59

@vaxearts

Ja genau wie ich dachte das eine wendest du auf span an beim anderen aber auf div

Mach ein div aus dem span

Wie gesagt kein margin auf span möglich ausser display:block (oder sowas ähnliches)

vaxearts

Beitragsersteller

22.02.2019, 01:00

@buffalo23

Könntest du mit bitte den Code schreiben, dass ich den PHP-Text mit dem div in CSS einfügen kann? Würde mich sehr freuen, würdest mir sehr helfen! :)

buffalo23

22.02.2019, 01:01

@vaxearts

Anstelle von span schreibst du div :D

vaxearts

Beitragsersteller

22.02.2019, 01:04

@buffalo23

Kann ich div in PHP anwenden? http://prntscr.com/moesc1

buffalo23

22.02.2019, 01:06

@vaxearts

Anführungszeichen escapen

vaxearts

Beitragsersteller

22.02.2019, 01:10

@buffalo23

So? http://prntscr.com/moeu0l

buffalo23

22.02.2019, 01:14

@vaxearts

Nein, durch vorangestellten Backslash beim Namen der Klasse

$a = "<div class=\"klasse\">...</>"

vaxearts

Beitragsersteller

22.02.2019, 01:21

@buffalo23

Ich weiß nicht, warum ich das nicht auf die Reihe bekomme. Bin leider erst seit heute wieder in dem Bereich tätig. Wenn dir das zu "blöd" wird, musst du mir nicht weiter helfen. Erstmal danke für die ganze Mühe, aber ich weiß nicht, was ich falsch mache... http://prntscr.com/moewwe

buffalo23

22.02.2019, 01:33

@vaxearts

Anführungszeichen um das Div aussen herum fehlen

$a = "..."

vaxearts

Beitragsersteller

22.02.2019, 01:38

@buffalo23

Es funktioniert, danke!

verreisterNutzer

22.02.2019, 02:57

@vaxearts

Auch wenn es funktioniert, hoffe ich, um des Webs willen, dass du dich dennoch an die Grundlagen setzt.

buffalo23

22.02.2019, 03:00

@verreisterNutzer

Jetzt übertreibst du aber... „um des Webs willen“

verreisterNutzer

22.02.2019, 03:05

@buffalo23

Nein, keinesfalls. Unerfahrene, die sich nicht mit den Grundlagen auseinandersetzen (wollen) und gleich loslegen, müllen das Web nur mit ihrem schlechten Code, welcher meistens reine CopyPasta ist, zu.

Beispiel: Unity3D ist eine Game Engine, die es selbst für Anfänger einfach macht, Spiele zu entwickeln. Aus diesem Grund gibt es viele damit entwickelte Spiele, die aber so dermaßen schlecht sind - bestehend aus reinem unoptimierten, zusammenkopierten Code.

Andere Unerfahrene, die nur die schlechten Unity-Spiele kennen, bezeichnen daher Unity als schlechte Engine.

buffalo23

22.02.2019, 03:15

@verreisterNutzer

Das kann dir doch dann egal sein, sollen die von mir aus damit machen was sie wollen... Solange sie Spaß an der Sache haben ist mir das gleich

Du kannst ja schlechten Code von gutem Code unterscheiden... D.h. keiner schadet dir damit wenn er sowas postet

verreisterNutzer

22.02.2019, 03:22

@buffalo23

Was, wenn er anfängt, anderen das Programmieren "beizubringen" und dadurch noch schlechtere "Entwickler" (rofl) erschafft?

Da Anfänger guten und schlechten Code kaum unterscheiden können, werden sie jeden Code nehmen, der funktioniert (wenn überhaupt) und dadurch entsteht noch mehr Schundware. Wenn solcher Code öffentlich zugänglich ist... Gott [an den ich nicht glaube] bewahre!

Ich baue schließlich auch kein Auto, ohne mich auszukennen. Der "Spaß" wird spätestens dann sein Ende finden, wenn jemand dadurch Schaden nimmt. Sei es ein Mensch (fehlkonstruierte Autos führen zu Unfällen), ein Unternehmen (finanziell; dazu führt schlechter Code nun mal) oder das Web an sich.

buffalo23

22.02.2019, 03:26

@verreisterNutzer

Es gibt so viele schlechte Entwickler die so massiv überbezahlt werden... Immer die ewigen Diskussionen. Warum müssen wir konsequent Konstruktor Inkection nehmen? Warum muss ich die Dokumentation an die Methoden schreiben? Warum verwenden wir Mocks zum Testen

Da kannst du gar nix machen, außer es selber richtig zu machen... Manchmal denk ich mir es wäre gut wenn man Software sehen könnte, so wie ein Haus das gebaut wird

Dann würde man mal sehen was für schrottiges Zeug da gebaut wird Katastrophe!!

verreisterNutzer

22.02.2019, 03:29

@buffalo23

Und genau aus diesem Grund sollte man bei Anfängern ansetzen, um zu verhindern, dass weiterhin schlechte "Entwickler" entstehen. Weist man sie auf den richtigen Weg, gibt es wenigstens eine Chance, dass daraus etwas Gutes wird.

buffalo23

22.02.2019, 03:31

@verreisterNutzer

Genau, und da ist es gut wenn sie viel fragen und kommunizieren und nicht komplett autodidaktisch sich das irgendwo alleine reinziehen sonst werden da so Typen mit langen Haaren und Linux Pinguinen draus :D (Die ich bis dato noch nie in „guten“ Positionen gesehen habe)

verreisterNutzer

22.02.2019, 03:35

@buffalo23

Für die grundlegendsten Grundlagen bedarf aber kaum Fragerei und wenn doch, dann ist bereits alles im Internet zu finden - gut, man sollte wissen, wo man suchen soll...

Auf diesen Fall bezogen: Kein Haus ohne Fundament.

vaxearts

Beitragsersteller

22.02.2019, 13:24

@verreisterNutzer

Ich möchte mich gar nicht an PHP oder so wagen. Ich möchte erst die Grundlagen von HTML und CSS lernen, bevor ich mich daran wage. Meine Frage ist und wird für lange Zeit das einzige sein, was ich mit PHP machen werde. Mir ist bewusst, dass es nichts bringt, jetzt schon mit PHP anzufangen.

Ich wollte einfach nur wissen, wie man etwas von PHP in CSS verändert. Es hat mich einfach nur interessiert, lasse jetzt die Finger davon, keine Angst! :)

Ähnliche Beiträge

HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zum Beitrag

Seite wird bei Weiterleitung nicht richtig angezeigt?

Hey,

Ich programmiere gerade etwas in PHP, CSS, HTML, JS... Ich habe ein Button gemacht und wenn mann auf ihn clickt soll mann weitergeleitet werden (JavaScript Funktion).

Die Weiterleitung funktioniert aber wenn mann auf der Seite ist wird nur der PHP Quell text angezeigt...

Ich bitte um hilfe!

Code:

JavaScript Weiterleitung:

<script type="text/javascript">
window.location = "login.php";
</script>

Button:

<form action="weiterleitung-login.html" method="post" class="buttons"><input type="submit" value="Einloggen" class="login"></form>

MfG Dominik

...zum Beitrag

Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

...zum Beitrag

Wie kann ich in HTML den Text im Rahmen die Schriftart ändern?

Hallo,

ich möchte in html von dem Text der im Rahmen ist, die Schriftart ändern.

Irgendwie klappt das nicht so.

@font-face {

font-family: "Germanica";

src: url("Schrift/germanica/Shadowed Germanica.ttf");

}

#id1 { margin-left: 170px;}

<div id="id1"><div align="center"><p style="font-family:Germanica"><p class="outset"><br><font size="7"><strong>Test </font></strong><br><br> <font size="5"><strong> Der Absatz </font></strong> <br><br></p></div>

...zum Beitrag

Html css Zentrieren?

Moin, ich habe in html 4 Bilder. Darunter will ich jeweils einen Block mit Text

Wie man sieht ist ganz rechts der Block direkt unter dem Bild, das habe ich mit margin gemacht. Bei den anderen Blöcken klappt dies nur nicht mehr. Die Bilder und Blöcke sind in keinem Container oder keiner div soweit ich weiß

Danke

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

Forum nur mit HTML und CSS?

Ist es möglich ein Forum zu erstellen ohne PHP und JavaScript?

Da ich momentan weiterhin nur mit HTML und CSS arbeite, wäre es super, falls es da eine Lösung gibt. Ich will erst mit HTML und CSS sicher sein, bevor ich PHP und JavaScript lerne.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen