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

Zentrierung meiner HP ???

Status
Für weitere Antworten geschlossen.
C

chris1982mrw

Neues Mitglied
Hallo,

ich bräuchte unbedingt Hilfe
bei folgendem Problem.

Ich hab mir meine HP so zusammengebastelt, wie ich diese
gerne haben möchte.
Jetzt hab ich nur ein Problem, dass ich mit einer Bildschirmauflösung
von 1024*768 meine HP gut dargestellt bekomme,
mit einer höheren aber verschiebt sich der gesamte Hp-Inhalt
nach links oben.

Wie kann ich das ganze denn so hinbekommen,
dass alles schön mittig bei jeder Auflösung erscheint ?

hier mein Arbeitslink:

Szenetwister.de

gegebenfalls mal Quellcode ansehen.


vielen Dank für Hilfen aller Art.

Lg chris
 
Werbung:
Hi,

Blockelemente, die eine Breite haben, kann man mit
Code: 
margin: 0 auto;
zentrieren. Bei dir stört die absolute Positionierung. Versuche es mal mit margin und float.

Code: 
<body>
  <p>Muh</p>
</body>
Code: 
p {
  margin: 0 auto;
  width: 30em;
}
So ist es bei jeder Auflösung mittig.
 
Werbung:
Mit der Auflösung hat das nichts zu tun, sondern einzig mit dem Viewport im Browser. Das ist der Bereich, der vom Browserfenster übrig bleibt, wenn man Fensterrahmen, Sidebars, Toolbars usw. abzieht.
Hinzu kommt, dass man ein Fenster nicht maximieren muss, man kann also problemlos einen Viewport von 772x981px haben, obwohl die Auflösung 1280x1024 ist. Würde man jetzt an der Auflösung zentrieren, würde das Zentrierte je nach Position des Browserfensters u.U. noch nichtmal im Browser sichtbar sein.
Außerdem kennt CSS die Auflösung nicht. Prozentuale Größenangaben beziehen sich immer auf das Elternelement, und ganz oben auf den Viewport.
 
Kurz gesagt, Ja.

Wenn du dich jetzt fragst, wie, solltest du die Beispiele ausprobieren und etwas mit CSS rumspielen, dann wird es dir ganz einfach fallen.
 
Werbung:
Aber wie ?

Ich weiß überhaupt nicht, wo ich jetzt was wie oft einsetzten soll,
damit das ganze am Ende komplett mittig ist und nicht total durcheinandergewürfelt aussieht.

wo verwende ich diese CSS Fragmente und wie oft
verwende ich solche Fragmente in meinem Code ?
 
Nimm am besten den ganz gewöhnlichen Windows-Editor.
Öffne eine leere Datei und füge darein den gesamten CSS-Code.
Speichere diese Datei z.B. als "style.css" ab und lege sie in das gleiche Verzeichnis wie deine index.html usw.

In deine index.html und die anderen html-Dateien fügst du innerhalb des Headbereiches (z.B. vor </head>) folgendes ein:
Code: 
<link rel="stylesheet" type="text/css" href="style.css">
Damit ist die Verknüpfung zwischen deinen HTML-Dateien und der CSS-Datei, welche lediglich die Formatierungen enthält, hergestellt.

Falls du tiefer in die Materie einsteigen willst: Friedels Homepage - Anleitungen für HTML-Autoren und mehr
 
Werbung:
chris1982mrw schrieb:
wie oft verwende ich solche Fragmente in meinem Code ?
Zum Vergrößern anklicken....
Ständig.

CSS ist die Sprache, die Du benutzt, um das Aussehen (Design&Layout) festzulegen, mit HTML geht das ja nicht.

HTML ist nur dafür da, Deinem Inhalt eine logische Struktur zu geben, alles was mit dem Aussehen zu tun hat, geschieht mit CSS.

Gegebenenfalls solltest Du Dich also noch intensiver mit CSS beschäftigen.
 
Bild per CSS positionieren.

Ich bräuchte mal ne Info, wie ich Bilder per CSS in einem
Container (siehe oben) positioniere (im Container von oben (top ... px) und von links/rechts (left ...px, right ... px)

Danke

chris
 
Werbung:
Positionierproblem

Hallo nochmal,

ich bräuchte mal ne Hilfe.

Ich hab jetzt nen Container erstellt
und dort die ganzen Bilder (.png) in nen
Code: 
<img style="margin-left: 20px; margin-top: 50px;" src=.....>
gepackt.
Jetzt sieht aber alles durcheinandergewürfelt aus
und ich weiß nicht wieso.

Das ist die Seite, welche ich geändert habe (CSS tauglich gemacht):
Szenetwister.de

So sollte es aussehen (Auflösung 1024*768 bitte betrachten).
Szenetwister.de
(DIESE VERSION IST GENAU DAS RESULTAT, WAS ICH HABEN MÖCHTE.
MUSS ICH ABER ÄNDERN, WEIL ES BEI HÖHEREN BILDSCHIRMAUFLÖSUNGEN
NICHT MITTIG ERSCHEINT UND SOMIT NICHT FÜR DIE ALLGEMEINHEIT
TAUGLICH ERSCHEINt.)

Kann mir da bitte jmd. helfen ? :cry:
 
Naja, du hast die Grafik ziemlich zerstückelt, die Einzelteile dann in Absätze gesteckt und diese nicht richtig gechlossen.

Wenn die Grafik immer fix sein kann, dann empfehle ich dir folgendes:

Baue die Grafikeinzelteile zu einer Gesamtgrafik zusammen , vielleicht hast du auch noch eine solche.

Diese Grafik weist du dann einem zentrierten Div als Hintergrund zu.
Mal angenommen, die Gesamtgrafik wäre 950px breit. Dann könntest du das so verwirklichen:

Code: 
<body>
<div style="width: 950px; margin: 50px auto; background: url(hintergrund.png) no-repeat;">
Text und sonstiger Inhalt....
</div>
</body>
 
Das Verwenden einer einzigen großen Hintergrundgrafik ist problematisch.
  • Nutzer mit kleinen Viewportbreiten kriegen nur einen kleinen Teil der Webseite zu sehen und müssen horizontal scrollen, da die gesamte Seite eine feste Breite in Pixeln hat.
  • Beim Vergrößern der Schrift könnte der Text aus dem Hintergrundbild herauswachsen. Das sieht nicht schön aus und kann auch zur Folge haben, dass der Text unleserlich wird.
Wenn Du eine wirklich gute Seite mit maximaler Nutzbarkeit haben willst, fange nochmal ganz von vorne an. Das am meisten unterschätzte Kriterium ist ein guter, semantisch wertvoller HTML-Quelltext. Hier ein paar Regeln, die Du bei einem neuen Anlauf beachten solltest:
  • Alle Tags namens font, b, Attribute names align, text, link, bgcolor etc. (kurz: alles, was das Aussehen beschreibt) fliegen raus. Auch werden keine &nbsp; oder leere p verwendet, um Abstände zu erzeugen. Das wird alles später mit CSS gemacht.
    Mit HTML zeichnen wir ausschließlich Inhalt aus. Das bedeutet, dass wir die Tags wählen, die die inhaltliche Bedeutung am besten beschreiben. Mit h1-h6 zeichnen wir Überschriften, mit p Absätze, mit img Bilder, die Inhalt enthalten, mit a Links und mit ul ungeordnete Listen aus. Um zusammengehörende Elemente zu gruppieren, können div-Tags benutzt werden. Das wars auch schon - mehr Tags benötigst Du für Deine Seite erstmal nicht. Wenn Du richtigen Text einfügst, solltest Du besondere Textteile entsprechend kennzeichnen, aber dazu später.
  • Um uns selber kontrollieren zu können, sollten wir einen Strict-Doctype wählen, dann zeigt ein Validator mehr falsche Tags und Attribute an. Ich bevorzuge XHTML Strict 1.0. Der Doctype dafür lautet
    Code: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Die Reihenfolge der Elemente im Quelltext sollte so sein, dass die Darstellung ohne CSS eine relativ gute Orientierung erlaubt: Die Seitenüberschrift oben, dann das Hauptmenü, dann der Inhalt und zum Schluss weitere Informationen. Dies ist eine gute Faustformel.
  • Bilder werden mit einem Alternativtext versehen, der das Bild ersetzt, wenn es nicht dargestellt wird. So kann kein Inhalt verloren gehen.
Ich habe das für Deine Seite mal getan und komme auf nicht mehr als
  • 1 h1
  • 1 h2
  • 1 p
  • 2 img
  • 1 ul
  • 8 li
  • 8 a
  • 2 div
Die beiden verwendeten Bilder sind
logo-szenetwister.gif
und
book-now.gif
.

Alles Andere gehört nicht zum Inhalt.

Wenn Deine Seite so mit und ohne Bilder aussieht, kann es mit der Formatierung losgehen.

ohne_css-mit_bildern.gif
ohne_css-ohne_bilder.gif


Solltest Du wirklich an einer guten, von allen nutzbaren Seite interessiert sein, dann mach Dir die Mühe und folge dieser kleinen Anleitung. Ich helfe Dir auch gerne bei der weiteren Formatierung mit CSS, damit es am Ende so (oder so ähnlich) aussieht: Screenshot der mit CSS formatierten Seite

Gruß
Junny

edit: Bin heute Abend wieder da, viel Erfolg bis dahin!
 
Zuletzt bearbeitet:
Werbung:
hmmm...
ok, aber die Sterne sind da ja nicht berücksichtigt.
Gehören ja auch auf meine HP.

Kann man am Ende mit CSS alles wieder so designen,
dass der ganze Schmu wieder so aussieht,
wie ich es mir vorstelle, wenn ich jetzt das HTML so systematisiere
wie du es mir sagst ?

lg chris

Das doofe ist ja, dass meine HP ab 01.01. starten soll
und ich unter zeitdruck stehe.

DANKE, dass du mir nen Weg zeigst, wo ich den Quellcode
struktuierter habe kann, was die spätere Arbeit mit CSS
erleichtern soll.

Ich bin halt noch recht ein Anfänger in HTML und so
und brauch da, wenn du mir das noch weiter anbietest auf
jeden fall deine hilfe.

lg chris
 
Selbstverständlich werden die Sterne etc. später hinzugefügt! Sie gehören nur nicht in den HTML-Quelltext, da sie keinen Inhalt darstellen.

Hast Du die kleine Demo übersehen? Ich habe das ganze zum Testen bereits einen Schritt weiter probiert als ich Dir hier erklärt habe. Das Folgende Bild ist ein Bildschirmfoto von der Testseite. Das ganze Aussehen wurde mit CSS und Hintergrundbildern gemacht: http://html-hilfe.julius-rapp.de/szenetwister/vorschau.gif . Der einzige Kompromiss ist der Farbverlauf oben und unten, aber den kann man ohne Probleme auch so machen, wie Du es Dir vorstellst.

Wenn es ausschließlich darum geht, das Layout bis zum 01.01. fertigzustellen, sollte das bei genügend Einsatz Deinerseits kein Problem sein. Ich werde Dir dabei helfen. Es kann natürlich an den Inhalten scheitern, was ich nicht beurteilen kann.

Gruß
Junny
 
Ich versteh halt einfach nicht, wie ich jetzt
die HTML gestalten soll (obwohl du oben die Reihenfolge
ja beschrieben hast).
Ich wüsste da jetzt gar nicht, wo ich anfangen soll.
Wie soll am Ende z.B. die "START SEITE" Szenetwister.de
als HTML aussehen ?

Du hast da ja auch so ne Linkleiste gemacht
die mit Aufzählungszeichen gestalten ist.

Ich frag mich da, wie du aus der HTML dann die Linkliste
(wie im Screen von dir zu sehen) per CSS hinbekommen hast
ohne diese Aufzählungszeichen.
 
Zuletzt bearbeitet:
Werbung:
Die Startseite (nur HTML) sieht im Browser so aus: http://html-hilfe.julius-rapp.de/szenetwister/ohne_css-mit_bildern.gif . Du wolltest sicher wissen, wie der Code dazu aussieht, aber den werde ich Dir nicht liefern. Es ist wirklich nur ganz wenig Arbeit (15 Zeilen im body) und bringt einem im Verständnis um Lichtjahre weiter.

Die Links habe ich in eine ungeordnete Liste gepackt, richtig. Dabei ist es erstmal völlig egal, wie die im Browser dargestellt wird. Es geht einzig und allein darum, das Menü als Liste auszuzeichnen (da es ja eine Auflistung von gleichberechtigten Links ist). Die Aufzählungszeichen und die Anordnung lässt sich unglaublich einfach mit CSS ändern. Damit jetzt schon anzufangen, wäre zu früh. Erstmal geht es um die reine Auszeichnung des Inhalts unabhängig von der Darstellung im Browser.

Hier eine noch konkretere Anleitung:
  1. Erstelle ein HTML-Dokument mit Grundgerüst und Strict-Doctype
  2. Überlege, was die Überschrift 1. Grades ist und zeichne sie mit h1 aus (Tipp: Das ist meistens der Seitenname. Auch Bilder können eine Überschrift 1. Grades sein.)
  3. Packe Dein Menü mit Links in eine ungeordnete Liste. In einem li darf ganz normal ein Link definiert werden.
  4. Die Überschrift 2. Grades ist oft eine Art Untertitel der Webseite oder ein Slogan. Da sowas bei Dir nicht vorkommt, ist es der Name des aktuellen Hauptmenüpunkts. Zeichne ihn also entsprechend aus.
  5. Den Inhalt der Seite packst Du in Einen Absatz p (später können weitere Absätze hinzukommen).
  6. Den weiterführenden Link zum Buchen stellst Du einfach ans Ende.
Wenn Du soweit bist, poste Deinen HTML-Quelltext und wir sehen weiter.

Gruß
Junny
 
Hier nun der Quelltext:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE>Szenetwister.de</TITLE>
<META NAME="Generator" CONTENT="TextPad 4.6">
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">

</HEAD>

<BODY BGCOLOR="white" TEXT="black" LINK="black" VLINK="black" ALINK="black" BACKGROUND="?">

<!-- Überschrift 1.Grades -->
<h1><img src="szenetwisterorange.png" alt="SzenetwisterLogo"></h1>

<!-- Linkleiste -->
<ul>
<li><a href="index.php">START</a></li>
<li><a href="profil.php">PROFIL</a></li>
<li><a href="news.php">NEWS</a></li>
<li><a href="gallery.php">GALLERY</a></li>
<li><a href="gaestebuch.php">G&Auml;STEBUCH</a></li>
<li><a href="friends.php">FRIENDS</a></li>
<li><a href="kontakt.php">KONTAKT</a></li>
<li><a href="impressum.php">IMPRESSUM</a></li>
</ul>
<!-- Überschrift 2.Grades -->
<h2>Szenetwister</h2>
<p>
Hier wird eine allgemeine Erkl&auml;rung zum Szenetwister eingefügt.
</p>
<img src="Booker.gif" alt="BuchungsLogo">

</BODY>
</HTML>

Hoffe, ich kann zufrieden sein =D
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben