• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Header soll sich automatisch anpassen!

Status
Für weitere Antworten geschlossen.
N

nipoda

Neues Mitglied
Hallo!

Auf meiner Homepage [ SC Freiburg 1904 - Das Magazin zum SCF ] soll sich der Header automatisch an die Auflösung des Bildschirms anpassen, er soll sich nicht verkleinern,sondern wie bspw. hier Startseite , dann abgeschnitten werde.

Versteht ihr was ich meine?

Hier mein Code vom Kopf:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SC Freiburg 1904 - Das Magazin zum SCF</title>
<font face="Arial">
<body style="margin: 0;">
<img src="http://web25.webs01.comc.name/bilder/Header_mit_Wappen.png">
</head>
 
Werbung:
Bevor man jetzt dieses Problem angeht:
Deine Seite ist leider das reinste Chaos. Da stimmt du Grundstruktur überhaupt nicht, weil die zwingende Reihenfolge bestimmter Tags nicht eingehalten wird.
Deshalb solltest du zunächst die Seite valide machen und diese Fehler bereinigen:
[Invalid] Markup Validation of http://scfreiburg1904.de/startseite.htm - W3C Markup Validator

Den grundsätzlichen Aufbau findest du hier erklärt: SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei
Der gesamte Inhalt muss zwischen <body> und </body> rein. Formatierungen am besten auslagern in eine CSS-Datei. Aber dazu solltest du dir zunächst etwas Grundlagenwissen aneignen.

Danach solltest du dir das Layout nochmal überlegen. Ich würde ein fixes Layout mit festen Breiten nehmen, sonst werden bei größeren Viewports die Textzeilen viel zu lang und lassen sich schwer lesen. Damit wäre dann auch das Grafikproblem gelöst, denn die Grafik müsste dann lediglich so breit sein wie deine Breitendefinition der Seite.
 
Zuletzt bearbeitet:
css

Arbeitest du mit css?

wenn ja, dann mache einen div für den header.

css code:

#header
{
width:1280px;
height: 150px;
margin: auto;
}

//mit margin: auto wird es automatish verkleinert und vergrössert.


html code:

<div id="header">
<img src="dein_bild_für_den_header.png">
</div>
 
Werbung:
Maarjan schrieb:
wenn ja, dann mache einen div für den header.
Zum Vergrößern anklicken....
Arbeitest Du mit HTML? Wenn ja, warum bleibt dann die Semantik auf der Strecke? Bei einem header würde ich zunächst auch an einen solchen denken (<h1>) und nicht an ein allgemeines Block-element zum Gruppieren mehrerer Elemente.
 
Efchen schrieb:
Arbeitest Du mit HTML? Wenn ja, warum bleibt dann die Semantik auf der Strecke? Bei einem header würde ich zunächst auch an einen solchen denken (<h1>) und nicht an ein allgemeines Block-element zum Gruppieren mehrerer Elemente.
Zum Vergrößern anklicken....

Seehr richtig.
Ich finde man sollte solche Beiträge zensieren.
Ist nichts persönliches, aber mit div für alles befinden sich leider sehr viele Leute auf dem Holzweg.

Zur Seite:
der Code ist ja schon etwas gruselig.
Das da ein einigermaßen Vernünftiges Ergebnis dabei rauskommt ist fast schon bemerkenswert!

Tipp: Schau doch mal bei ein paar anderen validen Webseiten, wie die ihren Aufbau machen.
Da lernst man oft am besten.

Gruß KY
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben