1
Ich bin ziemlich neu in CSS und ich bin mit dieser Situation fest.Seitliche Spalten in der Fußzeile
Ich habe eine Kopfzeile, eine Navigationsleiste, eine Haupt- und eine Fußzeile. Ich würde gerne zwei Abschnitte auf der Seite von main setzen, aber sie sind in der Fußzeile gefangen.
Ich habe schon versucht, auf den verschiedenen Seiten zu suchen, aber ich kann wirklich nicht daraus kommen.
Vielen Dank im Voraus.
body {
text-align: center;
margin: 0;
}
h1 {
font-family: Raleway;
color: white;
letter-spacing: 1px;
font-weight: 400;
font-size: 45px;
margin: 0;
}
a {
font-family: Raleway;
letter-spacing: 1px;
font-weight: 400;
font-size: 18px;
border-bottom: 2px solid transparent;
}
a:hover {
border-bottom: 2px solid white;
}
h2 {
font-family: Raleway;
color: #0d2c40;
letter-spacing: 1px;
font-weight: 600;
font-size: 20;
}
p {
font-family: "Droid Serif";
line-height: 26px;
font-size: 18px;
}
header {
background-color: #F15B31;
padding: 30px 20px;
}
main {
width: 850px;
margin: 35px auto;
}
nav {
background: #00A6B3;
padding:20px 0;
}
.navlink {
margin:0 20px;
color: white;
}
img {
margin: 40px 8px;
}
footer {
background-color:#0D2C40;
text-transform: uppercase;
padding: 0 20px;
color: white;
font-size: 14px;
letter-spacing: .08em;
font-weight: 500;
}
.copyright {
font-family: Raleway, sans-serif;
float: left;
}
.message{
font-family: Raleway, sans-serif;
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
font-size: 0;
}
.name {
color:#F15B31;
font-weight: 700;
}
.point-board {
border: 1px, solid, black;
}
aside {
float: left;
margin: 35px auto;
border: 1px solid white;
}
#right-board {
float: right;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Raleway:400,500,600,700" rel="stylesheet">
<title>Marco's memory game</title>
</head>
<body>
<header>
<h1>Marco's memory game</h1>
</header>
<nav>
<a class="navlink" href="#instructions">Instructions</a>
<a class="navlink" href="#facts">Game facts</a>
<a class="navlink" href="#game-board">Play!</a>
</nav>
<main>
<h2 id="instructions">Instructions</h2>
<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game
in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The
object of the game is to turn over pairs of matching cards.</p>
<h2 id="facts">Game's facts</h2>
<p>An other popular memory game is called "Kim's game. Kim's Game is a game or exercise played by Boy Scouts, Girl Scouts
and Girl Guides, and other children's groups.[1] The game develops a person's capacity to observe and remember
details. The name is derived from Rudyard Kipling's 1901 novel Kim, in which the hero, Kim, plays the game during
his training as a spy.
<a href="https://en.wikipedia.org/wiki/Kim%27s_Game">More info...</a>
</p>
<div id="game-board" class="board clearfix"></div>
</main>
<aside id="left-board" class="point-board"><h4>"Left"</h4></aside>
<div id="right-board" class="point-board">"Right"</div>
<footer class="clearfix">
<p class="copyright">Copyright 2017</p>
<p class="message">Created with ♥ by <span class="name"> GA </span></p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Ich nehme an, dass Sie diese Seitenleisten unterhalb der "Haupt" auf mobilen Ansichten richtig positioniert brauchen? – UncaughtTypeError
@UncaughtTypeError Für jetzt erwäge ich nicht Mobile. Es ist eine Vorarbeit für die Codierung von Bootcamps. – Marco