Text komplett nach links ausrichten

[TimoW]

Hallo,

ich weiß, eigentlich ziemlich simpel, aber trotzdem habe ich Probleme und es funktioniert bei mir nicht.
Auf meiner Seite habe ich einen Text im Header. Ich habe "text-align: left;" schon hinzugefügt, doch dann sieht es nur so aus:
http://www.bilder-upload.eu/show.php?file=f24a4e-1452608245.png
Ich möchte also, dass der Text einmal komplett nach links rutscht.

BONUS-FRAGE

Ich habe auch ein Logo, welches an erster Stelle (also noch VOR dem Home-Button) stehen soll. Jedoch sieht es so aus, sobald ich es versuche davor zustellen:
http://www.bilder-upload.eu/show.php?file=965490-1452608104.png

Es soll aber daneben auf gleicher Höhe sein.

Vielen Dank!
LG
-Timo

 

[SpiceLab]

Auf meiner Seite habe ich einen Text im Header. Ich habe "text-align: left;" schon hinzugefügt, doch dann sieht es nur so aus:
http://www.bilder-upload.eu/show.php?file=f24a4e-1452608245.png
Ich möchte also, dass der Text einmal komplett nach links rutscht.

Da der Quellcode nicht vorliegt, ins Blaue geraten:

ul { margin:0;padding:0}

Ich habe auch ein Logo, welches an erster Stelle (also noch VOR dem Home-Button) stehen soll. Jedoch sieht es so aus, sobald ich es versuche davor zustellen:
http://www.bilder-upload.eu/show.php?file=965490-1452608104.png

Grundsätzlich:

img {vertical-align:middle}

Vermutlich, weil auch hier kein Quellcode vorliegt, könnte das <img>-Element mit display:block formatiert sein, was einen Zeilenumbruch für das nachfolgende Element auslöst.

Oder es befindet sich in einem Blockelement, zB <div></div>, was daselbe Ergebnis zur Folge hat.

 

[TimoW]

Da der Quellcode nicht vorliegt, ins Blaue geraten:

ul { margin:0;padding:0}

Grundsätzlich:

img {vertical-align:middle}

Vermutlich, weil auch hier kein Quellcode vorliegt, könnte das <img>-Element mit display:block formatiert sein, was einen Zeilenumbruch für das nachfolgende Element auslöst.

Oder es befindet sich in einem Blockelement, zB <div></div>, was daselbe Ergebnis zur Folge hat.

Stimmt. Wüsste jetzt auch nicht direkt, wo ich das reinpacken würde.

main, article, header, footer, aside {
    display: block;
}

html, body {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}

body {
    font-family: Calibri, 'PT Sans', sans-serif;
    font-size: 1.2em;
    line-height: 1.5;
    background: white;
    color: #333333;
}
header nav a, header nav a:hover {
    transition: all 0.2s ease-in-out 0s;
}

a {
    text-decoration: none;
    color: #0091D2;
}

a img {
    border: 0;
}

header.page {
    border-bottom: 1px solid white;
    padding: 7px 3em;
    margin: 0 0 0 0;
    color: #333;
    background-color: #699cb3;
    background-image: -webkit-gradient(linear, left top, right top, from(#75b0ca), to(#4089aa));
    background-image: -webkit-linear-gradient(left, #75b0ca, #4089aa);
    background-image: -moz-linear-gradient(left, #75b0ca, #4089aa);
    background-image: -o-linear-gradient(left, #75b0ca, #4089aa);
    background-image: linear-gradient(to right, #75b0ca, #4089aa);
}

header.page nav ul {
    padding: 0;
    margin: 0;
    font-size: 1.1em;
}

header.page nav li {
    display: inline;
}

header.page nav a {
    padding: 14px 28px 14px 0;
    margin: 0 15px 0 0;
    height: 32px;
    color: #e3ecf1;
    font-size: .95em;
}

header.page nav a:hover {
    color: white;
}

header.page nav img {
    vertical-align: middle;
}
header nav {
max-width: 1400px;
margin: auto;
}

HTML:

    <header class="page">
    <nav>
    <ul>
    <li><div id="img"><p class="logo"><a href="index.html"><img src="Grafiken/Logo.ico" alt="Logo" width="50" height="50"></a></li></div>
    <li><a href="Home.html" target="">Home</a></li>
    <li><a href="HTML.html">HTML</a></li>
    <li><a href="CSS.html">CSS</a></li>
    <li><a href="JavaScript.html">JavaScript</a></li>
    <li><a href="Kontakt.html">Kontakt</a></li>
    </ul>
    </nav>
    </header>

 

[SpiceLab]

Sag ich doch

Oder es befindet sich in einem Blockelement, zB <div></div>, was daselbe Ergebnis zur Folge hat.

Also:

<ul>
    <li><a href="index.html"><img src="Grafiken/Logo.ico" alt="Logo" width="50" height="50"></a></li>
    <li><a href="Home.html" target="">Home</a></li>
    <li><a href="HTML.html">HTML</a></li>
    <li><a href="CSS.html">CSS</a></li>
    <li><a href="JavaScript.html">JavaScript</a></li>
    <li><a href="Kontakt.html">Kontakt</a></li>
</ul>

 

[TimoW]

Sag ich doch

Also:

<ul>
    <li><a href="index.html"><img src="Grafiken/Logo.ico" alt="Logo" width="50" height="50"></a></li>
    <li><a href="Home.html" target="">Home</a></li>
    <li><a href="HTML.html">HTML</a></li>
    <li><a href="CSS.html">CSS</a></li>
    <li><a href="JavaScript.html">JavaScript</a></li>
    <li><a href="Kontakt.html">Kontakt</a></li>
</ul>

Uiiiiii! Vielen Dank!! *-*