Hilfe Kontaktbereich

Ionder · 18.01.2020

Moin,

ich benötige Hilfe ich habe ein kleinen Kontaktbereich erstellt und möchte diesen Kontaktbereich mittig im Browser anzeigen lassen.

Mein "Code"

Code:

<!DOCTYPE html>
 <html lang="de">

<head>

    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <title>contact</title>
    
</head>

<body style="background-color:powderblue;">


    <div style="text-align: center">
    
        <h2>Max Mustermann</h2>
        <p>Skybe: Max Mustermann</p>
        <a  href="skype:Max.Mustermann?add">Add to contacts</a>
        <p>E-Mail: [email protected]</p>
        <a  href= "mailto:[email protected]">Send Email</a>

    </div>

    <div style="text-align:left;">

        <img src="1.png">

    </div>

    <div style="text-align: end;">
    
        <a href="https://paypal.me/Maxmustermann" target="_blank">
        <button>donation</a>
        
    </div>

</body>

 </html>

Kann jemand über besagten Code herübersehen und mir Tipps geben wie ich zu der Lösung komme? Verbesserung ist auch erwünscht.

Mit freundlichen grüßen

Ionder

curzon · 23.04.2020

Entwerder mit float:left oder flexbox arbeiten. Ist nur 1 Beispiel:

HTML:

<!DOCTYPE html>
 <html lang="de">

<head>

    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <title>contact</title>
    
</head>

<body style="background-color:powderblue;">

<div class="container" style="display: flex;">
    <div style="float:left;">
        <img src="https://images-na.ssl-images-amazon.com/images/I/61uLuCm4yUL._AC_SY450_.jpg">
    </div>
	
    <div style="text-align: center; margin:auto;">
        <h2>Max Mustermann</h2>
        <p>Skybe: Max Mustermann</p>
        <a  href="skype:Max.Mustermann?add">Add to contacts</a>
        <p>E-Mail: [email protected]</p>
        <a  href= "mailto:[email protected]">Send Email</a>
    </div>
	<div style="clear:float;"></div>
</div>

    <div style="position:absolute; bottom:5px; right:5px;">
        <a href="https://paypal.me/Maxmustermann" target="_blank">
        <button>donation</a>  
    </div>

</body>
 </html>

Ionder · 25.04.2020

Hey vielen Dank !