nicht angemeldet
Ich habe Probleme mit der Positionierung des Bildes IMG_5347_small.jpg im mainHeader (siehe unten). Es sollte eigentlich am rechten Rand angezeigt werden, bündig mit dem Inhalt. Ich habe jedoch keine Ahnung wie. Google hat auch nicht geholfen.
<!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 © <a href="#" title="couture-anni">couture-anni.ch</a></p>
</footer>
</body>
</html>
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 {
max-width: 30%;
height: auto;
}
.mainHeader img .Margrit {
max-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%;
}
}
Matthias Apsel
MudGuard
Rolf B
Gunnar Bittersmann
marctrix
Auge