Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Header einfügen

Empfohlene Antworten

Veröffentlicht

Hallo liebe Fachinformatiker Gemeindem,

ich bin ein relativer Neuling in Sachen Webseiten, ich habe Grundlegende Kenntnisse von html und von css. Meine Frage ist wie ich einen Header in meine Webseite einfüge, ob ich das mit php gewältigen muss oder ob es auch mit css möglich ist (es soll ein schöner Programmierstil sein).

ps: php kenntnisse sind bei mir nicht vorhanden.

Vielen Dank schonmal für Antworten!

Mfg jive

Ja richtig das mein ich (:

ich würde gerne wissen wie das funktioniert.

Dann poste mal deine HTML Struktur und deinen CSS Code. Man kann es immer anders machen und es muss an deinen Code angepasst werden.

Die Standard Struktur ist so:


MAIN{
HEADER{}
CONTENT{}
FOOTER{}
}[/PHP]

Grob gesagt.

Ist halt nur das Grundgerüst und ein bisschen was geschrieben aber hier ist es:

HTML


<?xml version="1.0" encoding="iso-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">


<head>

<title>Test</title>

<link rel="stylesheet" type="text/css" href="style.css" />

 <meta http-equiv="content-type"

   content="text/html; charset=iso-8859-1">

</head>



<body>


<h1>Willkommen !</h1>


<p>

Herzlich Willkommen zu der neu erstellten Seite von<span id="mir">mir</span>!

</p>


</body>


</html>

CSS

body

{

  background-color: #B4CDCD;

}

h1

{

  text-align: center;

}

#mir

{

  color: red;

}

Sorry. War grade beschäftigt.

HTML

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
</head>


<body>

<div id='header'><h1>Willkommen.</h1></div>

<p>
Herzlich Willkommen zu der neu erstellten Seite von<span id="mir">mir</span>!
</p>

</body>

</html>[/PHP]

[b]CSS[/b]

[PHP]body
{
background-color: #B4CDCD;
margin:0px auto;
width:900px;
}
h1
{
text-align: center;
}
#mir
{
color: red;
}
#header
{
position:relative;
height:150px;
background-color: #B4CDCD;
border:1px solid;
}

Erklärung: Body mit margin versehen, damit deine Seite schön mittig und nur 900px hat.

Header: Höhe vergeben und einem Border (nur für dich, kannst du ändern, nur damit du den Effekt sehen kannst)

Sollte gehen, habs nicht getestet..

Ich werde es nachher sofort ausprobieren (:

Hat super funktioniert! Vielen, vielen dank.

  • 4 Wochen später...

ich würd dir empfehlen statt id's klassen zu verwenden. also statt ein # ein .header und inner html schreibst du <div class="header"></div>

hat den vorteil, dass du die klasse an anderer stelle nochmal verwenden kannst, was bei idsnicht der fall ist.

Die Darstellung ist nicht die Aufgabe von PHP.

Sich immer wiederholende Inhalte in der Kopfzeile könntest du natürlich einmal erstellen und dann auf den einzelnen Seiten mit PHP einfügen. Änderungen sind dann nur an einer Stelle notwendig.

Für mich persönlich habe ich immer folgende Struktur gewählt:


<div class="main">

  <!-- Style der gesamten Seite -->

  <div class="header">

    <!-- der Kopf -->

  </div>

  <div class="content">

    <!-- Inhalte des Contents -->

  </div>

  <div class="footer">

    <!-- der Fuß -->

  </div>

</div>

So kann man jeden gröberen Teil genau definieren. Den Content könnte man noch in Navigation und Textteil einteilen, einfach wieder 2 Divs dort einfügen. :)

Besonders für Anfänger finde ich das sehr übersichtlich.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.