Neues Design, bitte bewerten!

[Crizzo]

Lies auch mal hier: http://www.thestyleworks.de/tut-art/underbar.shtml

Schmeiß mal das Div raus, die die Grafik zu "Inhalt" darstellt und den Text zu "news" und "inhalt" umschließt. Das Divs, dass die "Grafik-Inhalt" anzeigt, solltest du wieder mit einer Überschrift ersetzen (nicht <h1>) und dann wieder Gilder/Levin anwenden. Bei den umschließenden Divs, lässt du einfach den Text so dort ohne Breite. Sollte er zu weit nach rechts und links gehen, verwende "margin" bzw. "padding".

 

[Dark Hunter]

Ich habe jetzt die beiden Divs durch h1 bzw. h2 ersetzt und margin-left und margin-right angewandt. Jetzt funktioniert es in Firefox, IE7 und Opera 9.25. Das mit der Gilder/Levin-Methode habe ich nicht so richtig hinbekommen. Deshalb habe ich im span-Tag einfach display: none; benutzt. Hoffe, das geht auch in Ordnung

 

[Crizzo]

Zeige mir mal deinen Versuch der Gilder/Levin-Methode (betreffenden HTML und CSS-Code).

 

[Dark Hunter]

Verstecken kann ich den Titel jetzt, allerdings wird die Grafik verschoben. Mit margin kann ich es nicht ausgleichen.

<h1><span></span> Muster</h1>

h1 {
        height: 189px;
        width: 800px;
        position: relative;
    
}

h1 span {
        height:100%;
        width: 100%;
        background: url(images/header.png) no-repeat;
        position: absolute;
}

 

[Crizzo]

Verstecken kann ich den Titel jetzt, allerdings wird die Grafik verschoben. Mit margin kann ich es nicht ausgleichen.

<h1><span></span> Muster</h1>

h1 {
        height: 189px;
        width: 800px;
        position: relative;
    
}

h1 span {
        height:100%;
        width: 100%;
        background: url(images/header.png) no-repeat [COLOR=Red]50% 50%;
        position: absolute;
}

besser?
Wohin wird sie verschoben?

Ausrichtung von Grafiken: http://www.css4you.de/background-position.html

 

[Dark Hunter]

Der Hader wird nach rechts verschoben:

Spoiler

http://darkhunter.pytalhost.com/verschoben.jpg

Und es hat leider nichts gebracht. Auch alle erdenklichen Werte bei background-position nicht.

 

[Crizzo]

Stell das mal so online, dann kann ich das "live" testen.

 

[Dark Hunter]

Stell das mal so online, dann kann ich das "live" testen.

Ist geschehen: Klick

 

[Crizzo]

h1 span {
background:transparent url(images/header.png) [COLOR="Red"]no-repeat  0 0;[COLOR="Red"]display:block;height:100%;
position:absolute;
width:100%;
}

Dann geht es wieder.


Und gibt deinem #wrapper noch "text-align:left" statt "center".

 

[Dark Hunter]

h1 span {
background:transparent url(images/header.png) [COLOR=Red]no-repeat  0 0;[COLOR=Red]display:block;height:100%;
position:absolute;
width:100%;
}

Dann geht es wieder.


Und gibt deinem #wrapper noch "text-align:left" statt "center".

Danke, im Firefox und Opera funktioniert es nun. Im IE wirds nun ein ganz kleines Stückchen nach rechts verschoben. Außerdem wär da noch der Abstand zwischen Header und der restlichen Website.

 

[Crizzo]

Für den IE solltest du "h1 span" noch "top:0; left:0;" geben.

Dann musst du nur noch dies in deine CSS-Datei an den Anfang stellen:

* {margin:0; padding:0; }

Das setzt alle Standardabstände der Elemente auf null. Dies ist wichtig, damit solche Abstände nicht auftauchen und deshalb, weil alle Browser verschiedene Standardabstände verwenden, was wieder rum zu sehr unterschiedlichen Darstellungen führt.

 

[Dark Hunter]

Für den IE solltest du "h1 span" noch "top:0; left:0;" geben.

Dann musst du nur noch dies in deine CSS-Datei an den Anfang stellen:

* {margin:0; padding:0; }

Das setzt alle Standardabstände der Elemente auf null. Dies ist wichtig, damit solche Abstände nicht auftauchen und deshalb, weil alle Browser verschiedene Standardabstände verwenden, was wieder rum zu sehr unterschiedlichen Darstellungen führt.

Prima, es klappt! Nur noch ein Problem, was aber auch nur bei mir vorhanden sein kann: Wenn ich die Website nun minimiert im IE öffne und dann das Fenster maximiere, dann wird der Banner nach links verschoben. Nach einem Reload ist aber alles so, wie es sein soll!

Und nochmal danke für deinen Hilfe! Ich bin halt noch nicht so weit, aber ich denke, das verstehst du schon
Außerdem habe ich mir vor, ein Buch über XHTML und CSS zu kaufen. Dabei bin ich auf "Little Boxes" gestoßen, von dem ich durchweg nur positioves gehört habe! Kannst du mir sonst noch eine Alternative empfehlen, oder meinst du, "Little Boxes" wäre sinnvoll?

 

[Crizzo]

Ich würde dir alle 3(?) Bände der Little Boxes Reih von Peter Müller empfehlen. Sowie "Einführung in XHTML, CSS und Webdesign" und "CSS Mastery". Letzteres ist kein Einsteigerbuch.

@Fehler:
Klingt nach dem Peek-a-boo-Bug.

 

[Dark Hunter]

Ich würde dir alle 3(?) Bände der Little Boxes Reih von Peter Müller empfehlen. Sowie "Einführung in XHTML, CSS und Webdesign" und "CSS Mastery". Letzteres ist kein Einsteigerbuch.

@Fehler:
Klingt nach dem Peek-a-boo-Bug.

Sind soweit ich weiß 2 Bände. "CSS Mastery" - Der Name sagt wohl alles

@ Peek-a-boo-Bug
Mal sehen, was ich dazu finde!

 

[olinatoroli]

Ich zitiere Quax
[Ist ja ganz nett, aber etwas trist. Versuch mal, etwas mehr farbliche Akzente zu setzen, mit Farben wie Gelb, Orange oder Rot.]

aber oben könnte noch ein schönes banner rein, sonst ist es ziemlich gut.

 

[Eddie HD]

Ich zitiere Quax

Äh? Wieso machst du es dir so umständlich? Schon mal den "Zitieren-Button" gesehen?
Sieht so aus:

Einfach auf den Button klicken, von welchen Beitrag du zitieren möchtest und dann geht die Sache seinen Lauf. Ist ein Kinderspiel und gehört zum Standard.