Hallo
Der HTML-Quellcode ergibt sich aus den von dir zu Verfügung gestellten Informationen.
Beim CSS kann ich zwar die Farben und Ränder übernehmen, beim Rest muss ich aber raten. Wobei ein Responsive Design heutzutage Pflicht sein sollte.
Ich verwende immer einige CSS-Angaben als Grundlage für meine Seiten, auch wenn nicht alle unbedingt notwendig sind. Das sind folgende CSS-Angaben:
Code
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import url(https://fonts.googleapis.com/css?family=Roboto);
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/*Basisangaben*/
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
/*box-sizing: border-box;*/
min-width: 1px;
}
html {
}
body {
padding: 1rem 0.5rem 2rem 0.5rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/*darkblue*/
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0;
}
}
/*Listen dl*/
@media all {
dl {
margin: 0.5rem 0rem 0.5rem 0rem;
}
dt,
dd {
}
dt {
font-weight: bold;
margin: 0rem 0rem 0rem 0rem;
}
dd {
margin: 0rem 0rem 1rem 0rem;
}
dd p {
margin: 0rem 0rem 0rem 0rem;
}
}Als spezielle Angaben für die Seite könnten dann folgende CSS-Angaben dienen:
Code
/*body*/
@media all {
body {
}
}
@media only screen and (min-width: 1000px) {
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
/*.pageheader*/
@media all {
.pageheader {
background-color: #97FFFF;
border: 1px solid black;
}
.pageheader h1 {
text-align: center;
}
}
@media only screen and (min-width: 1000px) {
.pageheader {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100% - 0rem - 2px - 0rem);
}
}
/*.navigation*/
@media all {
.navigation {
background-color: #63B8FF;
padding: 0.5rem;
margin: 0.5rem 0rem;
}
.navigation p {
text-align: center;
}
.navigation a {
color: #FF0000;
font-weight: bold;
}
}
@media only screen and (min-width: 1000px) {
.navigation {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(250px - 1rem - 2px - 0rem);
}
}
/*.content*/
@media all {
.content {
background-color: #63B8FF;
border: 1px solid black;
padding: 0.5rem;
margin: 0.5rem 0rem;
}
.content h2 {
color: #FFFF33;
text-align: center;
}
.content figure {
max-width: 600px;
margin: 0rem auto;
}
}
@media only screen and (min-width: 1000px) {
.content {
margin: 0.5rem 1rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
}
}
/*.sidebar*/
@media all {
.sidebar {
background-color: #97FFFF;
padding: 0.5rem;
border: 2px solid #63B8FF;
margin: 0.5rem 0rem;
}
}
@media only screen and (min-width: 1000px) {
.sidebar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(250px - 1rem - 4px - 0rem);
}
}
/*.aktuellstesbild*/
@media all {
.aktuellstesbild {
border: 2px solid black;
padding: 0.5rem;
margin: 0.5rem 0rem;
}
.aktuellstesbild h2 {
text-align: center;
}
.aktuellstesbild figure {
max-width: 600px;
margin: 0rem auto;
}
}
@media only screen and (min-width: 1000px) {
.aktuellstesbild {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem);
}
}
/*.pagefooter*/
@media all {
.pagefooter {
padding: 0.5rem;
border: 2px solid black;
margin: 0.5rem 0rem;
}
}
@media only screen and (min-width: 1000px) {
.pagefooter {
background-color: #97FFFF;
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100% - 1rem - 4px - 0rem);
}
}Ich habe mal zum Testen eine einfache Beispielseite erstellt. Das CSS kann natürlich noch verfeinert werden.
Gruss
MrMurphy