Hallo
Damit meinst du das Bild des Hotels oder?
Ja. Aus der Aufgabenstellung geht nicht hervor, ob es sich um ein Bild des Hotels oder dessen Logo handelt. Die Darstellung des Wireframes erscheint mir eher wie ein Logo.
Kannst du mir das was du genau meinst vll bitte mit Code erklären tu mir da immer etwas leichter.
Schwierig. Da ich deinen Wissensstand nicht kenne würde das ein kleines Buch füllen und den Rahmen dieses Forums sprengen. Ich kann dir natürlich meine komplette Lösung als Quelltext zeigen und versuchen, Rückfragen zu einzelnen Anweisungen zu beantworten.
Ich habe im CSS viel mit :nth-child() gearbeitet. Die können natürlich durch class und / oder id ersetzt werden.
Erst mal das liquide Layout:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Aufgabe Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Meine persönlichen Grundeinstellungen für alle Seiten*/
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 100%; /*für die Einheit rem, mit der ich gerne arbeite*/
}
body {
margin: 0;
}
}
/* ==================================================== */
/* ***Ab hier beginnen die Angaben zur Problemlösung*** */
/*Spezielle Einstellungen*/
@media all {
/*In der Aufgabe vorgegeben*/
header, main, footer, article, section, nav, aside, div {
position: relative;
}
body {
height: 100%;
min-height: 100vh;
padding: 1rem;
border: 3px solid gray;
}
body > div {
background-image:
linear-gradient(
transparent 98%, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0.5)
),
linear-gradient(
to right, transparent 98%, rgba(0, 110, 0, 0.5) 2%, rgba(0, 110, 0, 0.5)
);
background-size: 1.65% 2.18%;
width: 96vw;
height: 72.8vw;
border-top: 1px solid transparent; /*Collapsing margins*/
}
header {
background-color: hsla(240,100%,50%,0.1);
width: 94%;
height: 6.6%;
border: 1px solid transparent;
margin: 1.5% 3.2%;
}
header h1 {
margin: 0;
}
main {
width: 94%;
height: 76.5%;
margin: 1.5% 3.2%;
}
main > * {
float: left;
height: 100%;
}
main > :nth-child(1) {
overflow: hidden;
width: 66.8%;
margin-right: 3.4%;
}
main > :nth-child(2) {
width: 29.8%;
border: 2px solid black;
}
main > :nth-child(1) > * {
background-color: hsla(240,100%,50%,0.1);
float: left;
padding: 0.5rem;
margin: 0;
}
main > :nth-child(1) > * > h2 {
margin: 0;
}
main > :nth-child(1) > :nth-child(1) {
width: 58%;
height: 49%;
margin-right: 5%;
margin-bottom: 2.2%;
}
main > :nth-child(1) > :nth-child(2) {
width: 37%;
height: 49%;
margin-bottom: 2.2%;
}
main > :nth-child(1) > :nth-child(3) {
width: 100%;
height: 49%;
}
main > :nth-child(2) > * {
background-color: orange;
width: 89%;
padding: 0.5rem;
margin: 0 5.5%;
}
main > :nth-child(2) > * h2 {
margin: 0;
}
main > :nth-child(2) > :nth-child(1) {
background-color: hsla(240,100%,50%,0.1);
height: 46%;
margin-top: 6%;
margin-bottom: 6%;
}
main > :nth-child(2) > :nth-child(2) {
background-color: hsla(240,100%,50%,0.1);
height: 46%;
}
div.hr {
width: 94%;
height: 1.5%;
border-bottom: 2px solid black;
margin-left: 3.2%;
margin-bottom: 2.4%;
}
footer {
background-color: hsla(240,100%,50%,0.1);
width: 33%;
height: 4.4%;
margin-left: 3.2%;
}
}
/* *** Ende der Angaben zur Problemlösung*** */
/* ===================================================== */
</style>
</head>
<body>
<div>
<header>
<h1>Name des Hotels</h1>
</header>
<main>
<article>
<div>
<h2>Logo</h2>
</div>
<div>
<h2>Adresse</h2>
</div>
<div>
<h2>Hotelbeschreibung</h2>
</div>
</article>
<aside>
<section>
<h2>Pros</h2>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</section>
<section>
<h2>Kontras</h2>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</section>
</aside>
</main>
<div class="hr"></div>
<footer>
<p>Zuletzt aktuallisiert: Datum</p>
</footer>
</div>
</body>
</html>
Um das frozen Layout zu erstellten muss nur dieser CSS-Block
body > div {
background-image:
linear-gradient(
transparent 98%, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0.5)
),
linear-gradient(
to right, transparent 98%, rgba(0, 110, 0, 0.5) 2%, rgba(0, 110, 0, 0.5)
);
background-size: 1.65% 2.18%;
width: 96vw;
height: 72.8vw;
border-top: 1px solid transparent; /*Collapsing margins*/
}
durch diesen ersetzt werden:
body > div {
background-image:
linear-gradient(
transparent 98%, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0.5)
),
linear-gradient(
to right, transparent 98%, rgba(0, 110, 0, 0.5) 2%, rgba(0, 110, 0, 0.5)
);
background-size: 1.65% 2.18%;
width: 1000px;
height: 758px;
border-top: 1px solid transparent; /*Collapsing margins*/
}
Wobei in diesem Block nur width und height geändert werden. Ich verweise nur auf den gesamten Block damit du den richtigen erwischt. Du brauchst also nur width und height zu ändern bzw. unterhalb hinzufügen. Im CSS gelten ja immer die im Text unteren Anweisungen.
Also für liquid
width: 1000px;
height: 758px;
width: 96vw;
height: 72.8vw;
und für frozen
width: 96vw;
height: 72.8vw;
width: 1000px;
height: 758px;
Gruss
MrMurphy
