Hallo,
ich möchte gern, dass Inhalte der Seite zentriert werden - eigentlich ähnlich wie auf „html.de“.
Hintergrundbilder und Navigationsleisten sollen über die gesamte Breite angezeigt werden aber Inhalte (Logo, Menüpunkte, Inhalte…) sollen nur in einem zentralen Bereich angezeigt werden. Jetzt habe ich mir schon den Quelltext von mehreren Seiten angesehen (das hat für mich oft einen Klasse-Lerneffekt) aber ich finde den passenden Eintrag nicht…
Könnt ihr mir einen Tipp geben?
Tipp: Deinen Quellcode hier posten, damit andere Benutzer dir weiterhelfen können.
Grundsätzlich margin:0 auto.
Nur warum nicht besser Google fragen, um entsprechend existierende Anleitungen im Netz zu finden, die die Technik erläutern, um am Ende auch das Verständnis zu gewinnen?
Mit reinem „Copy & Paste“ lernt man es nicht nachhaltig 
„Copy & Paste“ ist gar nicht so meins - das ist ja das Problem. Ich will halt nur schreiben, was ich auch zu 100 Prozent verstanden hab. Das führt dann dazu, dass ich manchmal Stunden zu einem Thema recherchiere und manchmal ist die Lösung am Ende doch so einfach…
Den selfhtml-Artikel hab ich auch schon gelesen aber damit hab ich es nicht geschafft.
Ein sehr gutes Beispiel für die Begrenzung der Inhalte rechts und links, wie ich es gern hätte, ist die Seite von unleashed-design.
Ich hatte überlegt ob das nur funktioniert, wenn ich eine Breite (width) vergebe aber welchem Element muss ich die dann zuteilen? Body?
Wie schon @nookie darauf hingewiesen hatte, solltest Du Deinen aktuellen HTML-/CSS-Code zeigen, damit wir nicht rätseln dürfen, warum es bei Dir nicht funktioniert.
[HTML]
HTML/CSS-Testseite<meta name="description" content="Eine HTML/CSS-Testseite.">
<meta name="keywords" content="blablabla">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- **************************************************************************************************** -->
<!-- favicon & css & fonts -->
<!-- **************************************************************************************************** -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:400,300|Pathway+Gothic+One">
<link rel="stylesheet" type="text/css" href="layout.css">
<!-- **************************************************************************************************** -->
<!-- header -->
<!-- **************************************************************************************************** -->
<header>
<!-- logo -->
<div id="logo"><a href="#startseite"><img src="_img/logo.png" alt="logografik"/></a></div>
<!-- navigation -->
<nav>
<ul>
<li><a href="#startseite">Startseite</a></li>
<li><a href="#projekte_neuigkeiten">Aktuelle Projekte & Neuigkeiten</a></li>
<li><a href="#uebermich">Über mich</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
</header>
[CODE]/* css dokument */
/* **************************************************************************************************** /
/ reset der css-browser-einstellungen /
/ **************************************************************************************************** */
{ padding:0; margin: 0; }
html
{ overflow-y: scroll; }
/* **************************************************************************************************** /
/ html standard tags (alle tags, bei denen die einstellungen gleich sind) /
/ **************************************************************************************************** */
body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
a { text-decoration: none; }
/* **************************************************************************************************** /
/ zusammengefasste klassen /
/ **************************************************************************************************** */
.page
{ background: #444444; }
header, #startseite .h2_balken, #uebermich, #projekte_neuigkeiten, #kontakt .h2_balken, footer
{ background: #fff; }
#uebermich .h2_balken, #projekte_neuigkeiten .h2_balken
{ background: #111; }
p, a, header nav ul li a
{ color: #999; }
header nav ul li a:hover, #uebermich h2, #links p, #projekte_neuigkeiten h2
{ color: #111; }
#startseite h2, #startseite p, #startseite .button, #rechts .motto, #kontakt h2, #kontakt .kontakt, #kontakt .kontakt a
{ color: #fff; }
p, header nav ul li, .button, #kontakt .kontakt, footer
{ font-family: ‚Lato‘, sans-serif; font-weight:300; line-height:25px; word-spacing:3px; }
footer, footer a
{ color: #666; }
h2, #rechts .motto, #projekte_neuigkeiten .projekte_neuigkeiten ul li .text h3
{ font-family: ‚Pathway Gothic One‘, sans-serif; }
header, header nav ul li a, header nav ul, header #logo
{ transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; -transition: all 300ms; }
/* **************************************************************************************************** /
/ umfassende objekte und klassen /
/ **************************************************************************************************** */
.page { width: 100%; min-height: 100%; overflow: hidden; float: left; }
/* **************************************************************************************************** /
/ header /
/ **************************************************************************************************** */
/* fixierung kopfbereich im normalzustand */
header { position: fixed; z-index: 99; top: 0; left: 0; right: 0; width: 100%; height: 50px; border-bottom: px solid #dfdfdf; }
/* platzierung logo */
header #logo { float: left; width: 120px; margin: 10px 0 0 50px; }
header #logo img { width: 100%; height: auto; }
header nav { float: right; height: 40px; margin: 0; padding: 0; }
header nav ul { margin: 10px 8px 0 0; padding: 0; }
header nav ul li { margin: 0 15px 0 0; padding: 0; list-style: none; float: left; }
header nav ul li a { text-transform:uppercase; font-size:12px; }
/* **************************************************************************************************** /
/ header vergrößerung (hover) /
/ **************************************************************************************************** */
header:hover { height: 80px; }
header:hover > #logo { width: 180px; margin: 15px 0 0 50px; }
header:hover >nav ul { margin: 25px 20px 0 0; }
header:hover >nav ul li a { font-size: 15px; }
/* **************************************************************************************************** /
/ startseite /
/ **************************************************************************************************** */
#startseite h2 { text-align:left; margin:450px 0 0 50px; font-size:120px; line-height:110px; }
#startseite .h2_balken { margin:0 0 20px 50px; }
#startseite { background:url(…/_img/bg_startseite.jpg); position:relative; background-position:center center; background-size:cover; background-attachment:fixed; }
#startseite p { margin:0 0 20px 50px; max-width:300px; }
#startseite .button { border:2px solid #fff; }[/CODE]
Das sind die „Basisdaten“ der Seite/Kopfzeile (Header). Funktioniert, aber der Text/die Inhalte der Kopfzeile werden rechts und links ganz außen platziert - und eigentlich will ich ja einen „Rand“ ohne Inhalte (außer Hintergrundbild und Kopfzeilenhintergrund…
Hallo
Für dein Layout solltest du als übergeordneten Container das body-Element verwendet, margin von body wird auf Null gesetzt.
Auf der nächsten Ebene werden dann die grundsätzlichen Container erstellt, zum Beispiel header, main und footer. Falls erforderlich können natürlich noch weitere erstellt werden.
main und footer bekommen dann mittels Media Queries aber einer bestimmten Größe (in meinem Beispiel 800px) eine prozentuale Größe und eine Höchstgröße.
So wird bei schmalen Fenstern die gesamte Fensterbreite genutzt, ansonsten hat nur der header die gesamte Breite. Das ganze kann natürlich noch durch zusätzliche Media Queries und Anpassung der Werte verfeinert werden.
Nachfolgend mein Beispiellayout:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Zentrieren 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media all {
body {
background-color: teal;
margin: 0;
}
header {
background-color: skyblue;
padding: 0.5rem;
}
main,
footer {
background-color: plum;
padding: 0.5rem;
}
}
@media only screen and (min-width: 800px) {
main,
footer {
max-width: 60rem;
width: 80%;
margin: 0 auto;
}
}
</style>
</head>
<body>
<header>
<p>header</p>
</header>
<main>
<p>main</p>
</main>
<footer>
<p>footer</p>
</footer>
</body>
</html>Oder mal etwas erweitert mit einem nav-Element über die gesamte Breite, wobei der Inhalt des nav-Elements nur genau so breit wie die restlichen Container sein soll. Das kommt deinen Vorstellungen wohl näher:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Zentrieren 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media all {
body {
background-color: teal;
margin: 0;
}
nav {
background-color: skyblue;
margin: 0 auto;
}
nav div {
background-color: orange;
padding: 0.5rem;
}
header,
main,
footer {
background-color: plum;
padding: 0.5rem;
}
}
@media only screen and (min-width: 800px) {
nav {
margin: 0 auto 1rem auto;
}
nav div {
padding: 0.5rem;
}
nav div,
header,
main,
footer {
max-width: 60rem;
width: 80%;
margin: 0 auto 1rem auto;
}
}
</style>
</head>
<body>
<nav>
<div>
<p>nav</p>
</div>
</nav>
<header>
<p>header</p>
</header>
<main>
<p>main</p>
</main>
<footer>
<p>footer</p>
</footer>
</body>
</html>Gruss
MrMurphy
Ich werd das gleich mal testen, wenn ich am Rechner bin…
Danke vorab!!!
Wenn du schon die Seite von unleashed design als Beispiel nimmst, solltest du wissen dass es auch einen Youtubekanal von der Seite gibt, auf dem genauso etwas anhand der Seite gezeigt wird.
Vielleicht ist es hilfreich wenn du dir mal den Kanal anschaust
Japp, den Kanal kenn ich und die Videos von Johannes find ich wirklich Klasse. Allerdings ist das Zentrieren der Inhalte bisher in seinen Videos nicht thematisiert worden - deshalb hab ich (absoluter Beginner) angefangen zu recherchieren. Ich glaube der Ansatz von MrMurphy ist gar nicht so verkehrt. Muss das nur an mein Testgebilde (so nenn ich das jetzt mal) anpassen und das ist gar nicht so einfach…
Danke an Alle für die schnelle Hilfe!!!