Verschiebung von Elementen

  • <!DOCTYPE html>

    <html>


    <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=0, minimum-scale=0.9, maximum-scale=0.9">

    <link rel="stylesheet" href="style.css" type="text/css">

    <title>R6 | Home</title>

    </head>

    <body>

    <div class="bgwrapper">

    <div id="wrapper">

    <header>

    <img src="images\logo.png"

    width="355,55"

    height="200">


    </header>


    <section>

    <img src="images\dia.jpg" alt="Dia"

    class="bild"

    width="1000"

    height="550">

    </section>

    <aside>blablablablablablablablablab

    lablablablabla

    blablablablablablablablablablablabl

    ablablablablablabla.</aside>

    <footer></footer>



    <nav>

    <ul>

    <li><a href="index.html">Home</a></li>

    <li><a href="prices.html">Prices</a></li>

    <li><a href="contact.html">Contact</a></li>

    </ul>

    </nav>

    </div>


    </div>

    </body>

    </html>




    R6 | Home



    Css Dazu:

    body{

    }

    #wrapper{
    width: 1620px;
    }

    header{
    height: 150px;
    text-align: center;
    font-size: 39px;
    margin-bottom: 50px;
    margin-top: -20px;

    }
    nav{
    text-align: left;
    height: 1068px;
    width: 300px;
    position: fixed;
    top: 150px;
    left: 0px;

    }
    nav li{
    list-style: none;
    padding: 50px;}

    a{
    color: green;
    text-decoration: none;
    padding: 4px;
    }

    section{
    width: 1100px;
    height: 600px;
    float: center;
    padding-left: 300px;
    }

    aside{
    width: 300px;
    height: 500px;
    float: right;
    font-size: 30px;
    color: white;
    background-color: red;
    padding: 50px;

    }

    footer{
    margin-top: 50px;
    height: 50px;
    clear: both;
    }
    .bild {
    width: 100%;
    height: auto;
    }

    .bgwrapper{
    height: 1080px;
    width: 1920px;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
    background-image: url(images/ela.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    }



    Ich möchte gerne aside verschieben jedoch mit einem Abstand zum bild

    Aber es lässt sich nicht verschieben, jemand ne idee?

  • so ganz was du meinst kann ich nicht erkennen.

    Das ganze mit den festen Werten, und floaten ist nicht optimal

    An besten wäre ja ein Layout mit Flexbox da hat man dieses ganzen Probleme nicht

    Etwas verschieben kannst du mit margin;

    Wenn du positions Angaben hast dann kannst du es mit top und left verschieben.

    Wie soll das den aussehen?

  • Von flexbox hab ich noch nix gehört^^

    Hab mein wissen aus youtube und google...

    Der Text soll halt rechts neben dem Bild stehen jedoch mit einem abstand.

    Links halt die nav leiste

    Margin une padding macht beides halt irgendwie nix

  • Ja die Seite von css Tricks hatte ich auch gefunden^^


    Dann nochmal ne Frage dazu:

    Ich möchte halt links di3 Nav leiste haben

    Mittig ein Bild und daneben text

    Und unterm Bild vllt auch noch eine art text


    Somit wären das ja 4 Boxen

    Alles sind unterschiedlich groß ujd woanders positioniert

    Was ich von den felxboxen bsiher gelesen hab das sich alle aneinander anordnen

    Wie bekomm ich die dann so unterschiedlich hin?

  • Die Größe der Boxen kannst Du über flex-basis, flex-grow und flex-shrink bzw. die Kurzform flex steuern, auch so, dass sie unterschiedlich breit werden. Unter dem Link auf HTML-Seminar wird das erklärt.

    Und sofern sich ein Text auf das Bild bezieht, eine Beschreibung o. ä. dazu ist, bietet sich die Verwendung des figure-Tags an:

    https://wiki.selfhtml.org/wiki…Textstrukturierung/figure


    Versuche am besten, einen Entwurf mit Flexlayout zu machen und wenn dann etwas nicht funktioniert wie gewünscht, poste den Code wieder, damit man es sich ansehen kann.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!