mardi 21 avril 2015

CSS - Positioning aside box

I'am learning html5 and css3 right now. I have to say, I'm a beginner. My problem: I want to place an aside textbox next to article. The textbox should appear at the right side. I've tested something, but nothing leads to my goals. Please, let me know how can I do this? And what about the footer? Why it isn't on the right place (margin of main is ignored).

<main role="main">

<article>
    <h2>Willkommen auf dieser Seite</h2>
    <div class="texte">
    <section>
        <h2>Artikelüberschrift</h2>
        <p>lorem ipüsum geerer nerne enenekn jnsjnfsdlnf sdflnslfnsdf
        skjnsfksjdn sdfjfnskfjndsf dsjfdfjn fgsk sndfns sfdkjnsf sjfnsdf
        sdfjnsdfn sfjdkjdfsnsdfk fsnksdf dsfkjn dfkjnskd</p>
        <p>fdjn fjerg reojn  rjng  jnrg orng ojgn jfng rjng erjng oerjng 
         ndrjgn oerng ng dfjng dfjng dfjng odfngodsgn odifngod fng
          jdfjgn dkjgndfjngsdfjgnsdfugniuvndsiugnerogunerüoig
          dfjnsdondf n on on on erung oirnfgorne oe eongöfjgns
          agodjng skjfgbpsieurgtsdjknipseuhtfgndfslng  fngk jnsrogn 
          jkgndgjn</p>
    </section>
    <section>
        <h2>Artikelüberschrift2</h2>
        <p>lorem ipüsum geerer nerne enenekn jnsjnfsdlnf sdflnslfnsdf
        skjnsfksjdn sdfjfnskfjndsf dsjfdfjn fgsk sndfns sfdkjnsf sjfnsdf
        sdfjnsdfn sfjdkjdfsnsdfk fsnksdf dsfkjn dfkjnskd</p>
        <p>fdjn fjerg reojn  rjng  jnrg orng ojgn jfng rjng erjng    oerjng 
         ndrjgn oerng ng dfjng dfjng dfjng odfngodsgn odifngod fng
          jdfjgn dkjgndfjngsdfjgnsdfugniuvndsiugnerogunerüoig
          dfjnsdondf n on on on erung oirnfgorne oe eongöfjgns
          agodjng skjfgbpsieurgtsdjknipseuhtfgndfslng  fngk jnsrogn 
          jkgndgjn</p>
    </section>
    <div>

</article>
    <div class="sidebox">
    <aside>
        <p>ich in eine asidebox nkdsfnk fnskjnfdskj fsnkfsdkjnf
        sdfjlsdjfos fsdojf sjfosijfosd fsjfosdjf spdijf sdofij 
        sdfijsodfj sdoifj osd jod jodsifjo ijsdof</p>
        <p>djfngdkjfngdfj fjgn dkjn ekn dng odrnjg odn dfjng 
         ndfojgndo indofign odfing doifng odifng  dofign oidfng</p>
    </aside>
    </div


</main>

<footer>
    <!-- Kontakt, Links, Impressum -->
    <a href="#kontakt.html">Kontakt</a>
    <a href="#kontakt.html">Impressum</a>
    <a href="#kontakt.html">Links</a>
</footer>

</body>
</html>

CSS

html { 
box-sizing: border-box; 
} 
*, ::before, ::after { 
box-sizing: inherit; 
}
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
max-width: 60em;
margin: 10px auto;
}
main {
margin: 1em 0 1em 0;
background-color: blue;

box-shadow: -10px -5px 28px -3px #999999;
}


article {

border: 1px solid #7F0B00;

background-color: #ADB4B8;


    }   

.sidebox {

 border: 1px solid black;
width: 12em;
}

.texte {
background-color: white;
}       


footer {

font-size: 10pt;

border: 1px solid #7F0B00;
background-color: #ADB4B8;
box-shadow: -10px -5px 28px -3px #999999;
    }

footer a {
display: inline-block;
text-decoration: none;
background-color: #ADB4B8;
border: 1px dotted #7F0B00;
color: black;
padding: .2em;
margin: .2em;
-webkit-transition: background-color .25s ease-in;
transition: background-color .25s ease-in;
}

footer a:focus,
footer a:hover,
footer span {
color: #7F0B00;
background-color: white;
-webkit-transition: background-color 0.01s;
transition: background-color 0.01s;
}

Aucun commentaire:

Enregistrer un commentaire