• 27.04.2024, 20:31
  • Registrieren
  • Anmelden

  • Sie sind nicht angemeldet.

 

komplexe gestaltung mit css

hobbes_dmS

Moderator

Beiträge: 7 616

komplexe gestaltung mit css

Dienstag, 1. Dezember 2009, 21:33

hi, ich habe eine Gestaltungsfrage und selfhtml hilft mir nicht mehr weiter.

ich möchte im html möglichst wenig vom Design haben, eigentlich nicht viel mehr als

Quellcode

 
1

<div class="ueberschrift">Das ist die Überschrift</div>


und jetzt hätte ich gerne das css so, daß über dem Text ein Bild (dünne, zu den Rändern hin ausfadende Linie), Hinter dem Bild eine Hintergrundfarbe (das ist kein Problem), rechts neben dem Text ein Logo (am rechten Rand der Seite) und unter dem Text noch einmal die gleiche dünne Linie wie überhalb des Textes gezeichnet wird. und das alles in css.

also ungefähr so wie im Anhang.

geht das?
»hobbes_dmS« hat folgendes Bild angehängt:
  • ueberschrift.jpg

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »hobbes_dmS« (1. Dezember 2009, 21:37)

Gute work-live-balance ist, wenn man von seinem Privatleben erschöpfter ist als von der Arbeit.

sebastian

Administrator

Beiträge: 10 519

Dienstag, 1. Dezember 2009, 22:05

da wird gehen, aber ich würde sagen da brauchst du mehr als einen DIV container.

hobbes_dmS

Moderator

Beiträge: 7 616

Dienstag, 1. Dezember 2009, 22:16

jo, ohne die beiden Linien oben und unten hab ich es inzwischen raus - man gibt dem div eine Hintergrundfarbe und ein Hintergrundbild (welches man dann mit "background-image: url(bg.gif); background-repeat:no-repeat; background-position:right center;" dazu bringt sich zu verhalten wie gewünscht)

edit: merke gerade, daß es mit "background-position" nicht möglich ist, das hintergrundbild einen Abstand von n-Pixeln vom rechten Rand halten zu lassen... doof.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »hobbes_dmS« (1. Dezember 2009, 23:34)

Gute work-live-balance ist, wenn man von seinem Privatleben erschöpfter ist als von der Arbeit.

Y0Gi

God

Beiträge: 12 708

RE: komplexe gestaltung mit css

Sonntag, 6. Dezember 2009, 14:36

Zitat von »hobbes_dmS«

ich möchte im html möglichst wenig vom Design haben [...]

So ist es ja auch gedacht. Markup: Struktur und Semantik; CSS: Präsentation, Styling.

Zitat von »hobbes_dmS«

Quellcode

 
1

<div class="ueberschrift">Das ist die Überschrift</div>

Zitat von »hobbes_dmS«

ouch ;)

Junge, `<hX>` ist das Stichwort! :)

Mal davon ab, dass diese fadenden Linien ziemlich hässlich sind, brauchst du mindestens ein Wrapper-Element:

Quellcode

 
1

<div id="header"><h1>ACME Inc.</h1></div>

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12

#header {
  background: url("fade-horizontal-alpha.png') repeat-y;
  padding: 2px 0;
}
h1 {
  background: #666666 url('logo.png') right 10px no-repeat;
  display: block;
  height: 80px;
  line-height: 80px;
  margin: 0 10px 0 0;
  padding: 0 200px 0 0;
}


Idee dahinter:
Der äußere Container erhält keine Hintergrundfarbe, aber ein vertikal wiederholtes Hintergrundbild mit einem Farbverlauf von Transparent zu Schwarz und muss ausreichend breit sein. Dadurch musst du die Hintergrundfarbe der Seite nicht in der Grafik widerspiegeln. Alternativ kannst du auch eine z.B. 100px breite Grafik mit einem Farbverlauf von Weiß zu Transparent benutzen und explizit die Hintergrundfarbe des Headers auf Schwarz setzen. In beiden Fällen reicht eine Höhe von einem Pixel aus, im zweiten Fall kannst du die Farbpalette auf 256 Farben reduzieren um die Datei zu verkleinern (im ersten wird dagegen für die Alphatranparenz IIRC 24-Bit Farbtiefe vorausgesetzt).
Die Überschrift bildet den inneren Container und überdeckt den äußeren bis auf den Rand oben und unten (s. Padding des Headers) mit seiner Hintergrundfarbe. Das Logo wird rechtsbündig mit ein paar Pixeln Abstand nach oben positioniert, durch das Margin rechts wird es vom rechten Rand auf Abstand gehalten (`background-position:` kann zwar - auch negative - Pixelangaben, jedoch nur linksbündig; wir benötigen es aber rechtsbündig), durch das Padding bricht der Text um und überdeckt das Logo nicht (Wert entsprechend an die Breite des Logos anpassen). Die Höhe der Überschrift richtet sich nach der des Logos plus vertikales Padding, der Text selbst sollte auf der vollen Höhe vertikal zentriert werden. Bei einer mehrzeiligen Überschrift müsste man sich evtl. noch was anderes überlegen, für eine feste, kurze Überschrift sollte es so aber reichen. `display: block;` kann möglicherweise entfallen, hier nur sicherheitshalber.
This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Weihnachts_Hobbes

Moderator

Beiträge: 7 616

Sonntag, 6. Dezember 2009, 18:25

du bist ein Gott...
Gute work-live-balance ist, wenn man von seinem Privatleben erschöpfter ist als von der Arbeit.

Ähnliche Themen