Beiträge von sdafasdfaf

Zitat von MrMurphy

Hallo

Da du keine Tabellendaten hast ist das table-Element hier sachlich falsch. Du mißbrauchst die Tabelle zum Layouten.

Für dein Beispiel ist Flexbox für das Layout am sinnvollsten.

Ich habe mal eine Testseite erstellt. Rahmen, Schatten, Rundungen, ... können natürlich noch hinzugefügt werden.

Testseite

Wobei die Bezeichnung _mobile in den Klassennamen auf noch vergrabene Probleme hindeutet. Das ist aber erst mal nur ein Bauchgefühl.

Gruss

MrMurphy

Alles anzeigen

^{Hallo, erstmal danke für deine Antwort.}

^{Ich habe gestern Abend das Problem noch behoben indem ich selbst die Tabelle entfernt habe. Im nachhinein weiß ich nicht wirklich warum ich dafür eine Tabelle verwendet habe. Die Klassennamen _mobile sind so gewählt, weil die Seite responsive ist und diese Tabelle nur für die Handy Version sichtbar ist, daher habe ich die Klassen danach benannt um nichts durcheinander zu bekommen.}

^Mfg

Zitat von The-Error

So gehts:

Code

<td style="text-align:center"><img class="groesse_mobile" src="img/bilder/fuehrungen.png" alt="Treppe"></td>

besser wäre Flexbox zu nutzen

Das funktioniert nicht, glaub mir, das war meine erste Idee.

Zitat von Neo_000

Super, danke Dir. Ja manchmal blick ich da ned durch im css. Machs aber auch zu wenig...

Aber es wird besser. Dann kommt die Aufgabe dran das ganze 100% Responsive zu machen.

Hallo,

Ich würde vorschlagen, dass Sie beide Überschriften in zwie verschiedene Classes setzen und dann die Überschriften wiefolgt zentrieren:

.ueberschrift{
    color: #fff;
    display: block;
    font-size: 38px;
    font-family: 'Amatic SC', cursive;
    margin: auto;
}
.ueberschrift2{
    color: #fff;
    display: block;
    font-size: 25px;
    font-family: 'Amatic SC', cursive; 
    margin: auto;
    margin-top: 30px;
}

Beachten Sie die mit Rot markierten beiden Stellen, mithilfe dieser Information werden die Überschriften unabhängig von der device-width immer zentriert sein, auch untereinander.

So sollte Ihr Probelm gelöst sein.

Lg,

8pq8

Hallo,

um die text-decorationzu entfernen schreiben Sie immer wenn Sie einen absoluten oder relativen Link einbauen text-decoration: none;in den dafür vorgesehenen CSS-Style dazu. So wird der Unterstrich vermieden. Ich empfehle eine externe CSS Datei anzulegen, mittlerweile arbeitet man in der Webentwicklung viel mit CSS und daher ist es viel übersichtlicher wenn CSS eine eigene Datei hat.

Diese verknüpfen Sie mit ihrer index.html Datei durch folgende Code Zeile:

<link type="text/css" rel="stylesheet" href="css/DATEI-NAME.css" />

Ich gehe jetzt davon aus, dass Sie in der CSS Datei weiter arbeiten.

Um also die text-decoration zu blockieren schreiben Sie:

a{
    text-decoration: none;
}

Um jetzt noch einen hover zu gestalten so wie Sie ihn wollten schreiben Sie:

a:hover{
    color: red;
}

Bitte beachten Sie, dass meine Beispiel sehr, sehr vereinfacht dargestellt sind und durch verwendung von IDs und Classes so nicht mehr richtig definiert sind.

Ich hoffe trotzdem, dass ich das verständlich erklärt habe.

Lg,

8pq8