Hi,
ich habe über <div class="format"> einen 3 Spaltenentwurf erzeugt. Ich würde aber nun gerne über meine Navigation es schaffen, die News in die Mitte zu bringen...
Dazu möchte ich keine neue .html schreiben, in der ich es ja einfach ändern könnte. Dann müsste ich nämlich Änderungen immer in beiden Dateien vornehmen.
Hate jemand eine Idee?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- brauch ich nicht -->
<title>Puma Goettingen</title> <!-- Überschrift im TAB -->
</head>
<body>
<div class="header">
<h1>Puma Göttingen</h1>
</div>
<div class="format"> <!-- Durch Klassenzuweisung bekomme ich den Spaltenentwurf -->
<div class="left_Side">
<h2>Auswahl</h2>
<ul>
<li><a href="Website.html">Home</a></li>
<li><a href="Website.html">Alle News</a></li>
<li><a href="Website.html">Formular</a></li>
</ul>
</div>
<div class="center_Side">
<h2>SV Puma Göttingen</h2>
<p>Wir bieten im Herrenfußball wie im Frauenfußball gebündeltes Expertenwissen und Fußball in angenehmer Atmosphäre mit einer bunten Mischung aus Studierenden, Azubis und Zivilisten (jung & alt). Die Damenmannschaft spielt in der Kreisliga. Unsere beiden Herrenmannschaften spielen in der 2. und 3. Kreisklasse.</p>
</div>
<div class="right_side">
<h2>News</h2>
<p> -- 07.01.2010 - CM10 trifft doppelt --</p>
<p>02.01.2010 -- CM10 trifft dreifach --</p>
<p>07.01.2010 -- MH10 nur auf der Bank --</p>
<p>07.01.2010 -- AG wieder verletzt --</p>
<p>07.01.2010 -- AK in der Zwickmühle --</p>
</div>
</div>
<div class="footer">
© All Rights Reserved.
</div>
<style>
body {
/* gesamten Text und hintergund farblich festlegen */
background-color: FloralWhite;
color: black;
/* Außenabstände definieren */
margin: 0;
}
/* <!-- h1, h2 {
font-family: 'Amatica SC', cursive;
font-weight: 700;
text-align: center;
} -->
<!-- p {
font-family: 'Open Sans Condensed', sans-serif;
} --> */
.header {
font-family: Arial, Helvetica, sans-serif;
color: black;
background-color: Bisque;
height: 100px;
text-align: center;
padding: 1px;
}
.format div {
padding: 1%;
box-sizing: border-box;
border: solid black 1px;
min-height: 700px ;
}
.left_Side {
background-color: #f4f4f4;
width: 25%;
float: left;
}
.right_side {
background-color: #f4f4f4;
width: 25%;
float: left;
}
.center_Side {
width: 50%;
float: left;
overflow: auto; /* automatisch Scrollen */
}
.footer {
clear: both;
font-family: 'Amatica SC', cursive;
background-color: Bisque;
text-align: center;
height: 50px;
padding-top: 10px;
box-sizing: border-box;
}
/* Einstellung vom Design der Listenelemtente */
ul{
margin: 0;
color: blue;
}
li a:hover {
background-color: Bisque;
}
</style>
</body>
</html>