Text ausrichten

hannes243 · 20 Dezember 2014

Hey Leute :)
und zwar habe ich folgendes Problem:
Ich möchte gerne auf meiner Seite einen Text unter diese 3 Logos packen:

Wie jedoch zu erkennen ist hängt der Text irgendwo zwischen dem "T-Time" und den Logos.
Hier mein Quelltext:

HTML:

<!DOCTYPE html>
<html>
    <head>      
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>  
</script>
            <style>
                html, body    {
                    background-image:url(/Bilder/Bild2.png);
                    background-size: cover;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    font-family: 'Roboto', sans-serif;
                  
                }
                .überschrift {
                    vertical-align: top;
                }  
                IMG.FBlogo    {
                    margin-top: 200px;
                    margin-left: 23%;
                    margin-right: auto;
                    float: left;
                }
                IMG.YTlogo    {
                    margin-top: 190px;
                    margin-left: auto;
                    margin-right: auto;
                    float: left;
                }  
                IMG.IGlogo    {
                    margin-top: 200px;
                    margin-left: auto;
                    margin-right: auto;
                    float: left;  
                }  
                IMG.banner    {
                    margin-top: 500px;
                    margin-left: 0 auto;
                    border: 0;
                    overflow:hidden;
                    position: relative;
                }      
                  
                .text {
                    position: relative;
                    margin-top: 1000px;
                }
            </style>
        <title>T-Time HANNES</title>
    </head>
    <body>  
        <div id="überschrift" align="center">
            <a href="http://bit.ly/1sYAjQ0" target="_blank"> <img src="/Bilder/t-time.png" alt="T-Time" width="850px" height="190px" href="www.youtube.de/user/ttimevlog"></a>
        </div>
            <a href="http://on.fb.me/1qMbTVp" target="_blank"> <img class="FBlogo" src="/Bilder/FB.png" alt="Facebook.de/ttimevlog" width="320px" height="320px" align="center"></a>
                <a href="http://bit.ly/1sYAjQ0" target="_blank"> <img class="YTlogo" src="/Bilder/YT.png" alt="T-Time" width="340px" height="340px" align="center"></a>
                <a href="http://bit.ly/1zPONlM" target="_blank"> <img class="IGlogo" src="/Bilder/IG.png" alt="Instagram" width="320px" height="320px" align="center"></a>
            <!--<img class="banner" src="/Bilder/banner.png" alt="banner" align="left" height="300" width="1920">    -->  
                <div>
                <p id="text" >Dies ist ein Test Text. Er dient nur zum Test </br>
                        Dieser Text hat nichts zu bedeuten und ist dumm. haha!</p>
                        </div>
    </body>  
</html>

Nun zu meiner Frage:
Wie bekomme ich diesen Text UNTER die 3 Logos?
LG Hannes
PS: Ihr könnt euch die Seite gerne auch "live und in Farbe" ansehen: hannes-lernen.t-time.ws

threadi · 20 Dezember 2014

Korrigiere zunächst mal deinen HTML-Code:
http://validator.w3.org/check?verbose=1&uri=http://hannes-lernen.t-time.ws/

Achte zudem darauf, dass Du für IDs keine Sonderzeichen verwendest. Das kann zu Problemen führen.

Die Links solltest Du mit einem Wrapper umgeben dem Du die Eigenschaft

Code:

overflow: hidden;

gibst. Dadurch wird das floating der Elemente beendet und der Text kann danach angezeigt werden.
Alternativ dazu kannst Du auch die Links statt mit float mit

Code:

display: inline-block;

nebeneinander positionieren.

hannes243 · 21 Dezember 2014

Du weist gar nicht wie sehr ich mich gerade gefreut habe als dieser verdammte Text UNTER den Logos hing.
Vielen dank

Text ausrichten

hannes243

Neues Mitglied

threadi

Moderator

hannes243

Neues Mitglied

Neueste Beiträge