Zaloguj | Zarejestruj | FAQ
Anonymous

Position images how i want?

+ Odpowiedz

Posty: 1 Strona 1 z 1


Position images how i want?

przez Paludis » N wrz 17, 2017 5:08 pm

Kod: Zaznacz cały
<!DOCTYPE html>
<html lang="de">
    <head>
      <title>Couture Anni</title>
      <meta charset="utf-8">
      
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="body">
      <header class="mainHeader">
         <img src="resources/img/Content_variation_800_e.png" alt="Logo">
         <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
         
         <nav>
            
            <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            
          </nav>
      </header>
      
      <div class="maincontent">
         <div class="content">
            <article class="topcontent">
               <header>
                  <h2><a href="#" title="First post">First post</a></h2>
               </header>
                   
                    <footer>
                        <p class="post-info">This post is written by Christianh</p>
                    </footer>
                   
                    <content>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </content>
               
                </article>
               
                <article class="bottomcontent">
               <header>
                  <h2><a href="#" title="Second post">Second post</a></h2>
               </header>
                   
                    <footer>
                        <p class="post-info">This post is written by Christianh</p>
                    </footer>
                   
                    <content>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </content>
               
                </article>
               
            </div>
      </div>
       
        <aside class="top-sidebar">
            <article>
                <h2>Top sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
       
        <aside class="middle-sidebar">
            <article>
                <h2>Middle sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
       
        <aside class="bottom-sidebar">
            <article>
                <h2>Bottom sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
       
        <footer class="mainFooter">
            <p>Copyright &copy; <a href="#" title="couture-anni">couture-anni.ch</a></p>
        </footer>
       
    </body>


</html>




Kod: Zaznacz cały
body {
    background-image: url('img/tape-measure.jpg');
    color: #000305;
    font-size: 87.5%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
   
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

.mainHeader img {
    width: 30%;
    height: auto;
}

.mainHeader img .Margrit {
   width: 30%;
   height: auto;
}

.mainHeader nav {
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li {
    display: inline;
    float: left;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
}

.content {
    width: 70%;
    float: left;
}

.topcontent {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.bottomcontent {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 90%;
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 2% 3%;
}

.middle-sidebar {
    width: 21%;
    float: left;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;

}

.bottom-sidebar {
    width: 21%;
    float: right;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;
}

.mainFooter {
    width: 100%;
    height: 40px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #666;
    margin: 2% 0;
}

.mainFooter p {
    width: 92%;
    margin: 10px auto;
    color: #fff;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
    .body {
        width: 90%;
        font-size: 95%;
    }
   
    .mainHeader img {
        width: 100%;
    }
   
   
    .mainHeader nav {
        height: 160px;
    }

    .mainHeader nav ul {
        padding-left: 0;
    }

    .mainHeader nav ul li {
        width: 100%;
        text-align: center;
       
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        padding: 10px 25px;
        height: 20px;
        display: block;
    }

    .content {
        width: 100%;
        float: left;
        margin-top: 2%;
    }
   
    .post-info {
        display: none;
    }

    .topcontent {
        background-color: #fff;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        margin-top: 3%;
    }
   
   
    .top-sidebar, . middle-sidebar, .bottom-sidebar {
        width: 94%;
        margin: 2% 0 2% 0;
        padding: 2% 3%;
    }
}



I would like to position the second image (IMG_5347_small.jpg) in the mainHeader so that it is always displayed on the right side of the screen aligned with the content.
How do i do that?
I have searched google for this but found nothing useful.
Hope you can help
Avatar użytkownika

Paludis

  • Posty: 1
  • Dołączył(a): N wrz 17, 2017 5:02 pm


+ Odpowiedz

Strona 1 z 1