CSS Problem

bekiro

Senior Member

Monday, October 24th 2005, 10:28pm

1

Ich brauche mal eure hilfe.

Ich möchte für meine homepage eine CSS datei schreiben in der möglichst der "kopf" der homepage enthalten ist. Mit kopf meine ich eine einzige jpg-datei, auf der aber 4 bereiche per hotspot verlinkt sind. Das ganze möchte ich in der CSS unterbringen so das ich, wenn die Kopfdatei mal geändert wird, nur die CSS datei zu ändern habe. In der html datei hatte ich das so umgesetzt:

	Source code
1 2 3 4	<img src="bild.jpg" width="770" height="250" usemap="#kopf"> <map name="kopf"> <area shape="rect" coords="316,195,391,213" href="index.htm" alt="Startseite"> </map>

Weiss jemand ob sich das per CSS realisieren lässt? Ich komm einfach nicht drauf. In SelfHTML habe ich nichts gefunden. :-[

Gruss bekiro

hurra

God

Re: CSS

Monday, October 24th 2005, 10:33pm

2

Hm, ich versteh nicht, was du willst, sorry. Selbst nach mehrmaligen Lesen. ???

Und mit css hat deine Idee auch wenig zu tun.

Du willst deine Homepage in zwei Bereiche teilen?

Kopf
--------
Inhalt
Inhalt
Inhalt

Wobei die Inhaltsseite varriert und der Kopf immer gleich bleibt?

Cu Hurra

Thomas_Haindl

God

Re: CSS

Monday, October 24th 2005, 10:46pm

3

Quoted from "hurra"

... Wobei die Inhaltsseite varriert und der Kopf immer gleich bleibt?

Ein typischer Fall für SSI.
Falls der Server das nicht kann/will, gibt's auch einige HTML-Editoren, die mit Blöcken umgehen können.

mfg, Thomas

bekiro

Senior Member

Re: CSS Problem

Monday, October 24th 2005, 11:12pm

4

hmm, ich hab mich falsch ausgedrückt, bzw. nicht genau. sorry.

ich versuchs mal ausführlicher. auf meiner homepage soll eine bilddatei angezeigt werden. die bildatei soll ganz oben auf der seite stehen. das ist sozusagen das logo und der navigationsbereich in einem. ich hab das ganze als EINE bildatei angelegt. ich kanns ja mal zeigen:

Bilddatei für den Kopfbereich meiner Homepage

die bereiche wo "startseite bildbearbeitung technik fotoalbum" stehen, sollen mit hotspots verlinkt werden. das ganze in html umzusetzten ist ja kein thema. den code hatte ich ja oben schon angezeigt. die bilddatei kommt also auf jeder seiter meiner homepage vor. wenn ich aber mal die bilddatei (zwecks grafischer änderungen) austauschen will, dann muss ich ja jede seite meiner homepage abändern. ich dachte mir jetzt, im html teil einfach nur anzugeben das dort ein bild folgt, aber die ganzen informationen wie die bilddatei heisst, wie groß sie ist und wo die hotspots genau positioniert sind usw. in der css datei festzuhalten. dann bräuchte ich nur die css datei zu ändern wenn ich mal das design der homepage komplett änder. ich will mir also arbeit ersparen.

meine frage ist nun, ob es eine möglichleit gibt in html einen "platzhalter" für ein bild anzugeben, aber die restlichen informationen zum bild (name, größe, hotspot-bereiche) in der css datei festzuhalten.

geht sowas ?

crushcoder

God

Re: CSS Problem

Monday, October 24th 2005, 11:33pm

5

ich denke nicht das es wirklich in allen browsern funktioniert, falls überhaupt.

ich würde sowas machen:

	Source code
1 2 3 4	<div id="head"> <span class="link" id="link1"><a href="link1"></a></span> <span class="link" id="link2"><a href="link2"></a></span> </div>

"#head" hat das bild als "background-image"
"#link1" usw hat dann position:relative, width, height, top, left innerhalb des bildes.
".link" hat color:transparent, background-color:transparent, cursor:hand

was genau, margin, paddings usw muss man ausprobieren.

klar das dann aber nur rechteckige bereiche funktionieren, keine kreise oder gar polygone.

Zitat von »Microsoft-Sprecher Thomas Baumgärtner«

Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.

Chewy

Moderator

Re: CSS Problem

Monday, October 24th 2005, 11:43pm

6

hossa, wo kommst du denn wieder mal her ?

freezefreaks.de - design and silence

bekiro

Senior Member

Re: CSS Problem

Monday, October 24th 2005, 11:48pm

7

@crushcoder: ist schon mal ein ansatz. werd ich mal mit experimentieren.

@chewy: ich war doch nie weg!

achso, du meinst garnicht mich ;D

Y0Gi

God

Re: CSS Problem

Monday, October 24th 2005, 11:56pm

8

du kannst zwar das aussehen deines seitenkopfes in ein CSS-stylesheet auslagern, während du in jeder seite nur z.b. ein <div id="head"></div> belässt. die links mit ihren verweiszielen sind aber semantik und nicht style, d.h. lassen sich nicht per CSS definieren. wenn du den gesamten teil inklusive links auslagern willst, dann musst du das schon dynamisch zusammensetzen lassen (wie von tom genannt über SSI oder je nach belieben über PHP, Python, Perl, C, Bash oder was man sonst so per CGI angeklemmt bekommt).

eine einfache, wenngleich mit einigen nachteilen behaftete lösung wäre auch die verwendung eines frames für die navigation. so musst du diese nur ein mal schreiben und hast sie wartungsfreundlich zentral an einer stelle. zudem kommst du mit statischen dateien aus, so dass das ganze auch lokal aufgerufen im browser funktionieren würde.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

bekiro

Senior Member

Re: CSS Problem

Tuesday, October 25th 2005, 12:20am

9

auf frames wollte ich eigentlich verzichten. wäre natürlich schön gewesen wenn es per css zu realisieren gewesen wäre. ich dachte das es funktionieren müsste. dann werd ich es mal mit php versuchen.

danke euch

bekiro

Senior Member

Re: CSS Problem

Tuesday, October 25th 2005, 1:01am

10

ich hab das nun so gelösst, den kopfteil der seite habe in eine separate html datei geschrieben und den php code füge ich nun in jede seite ein.

der php code der in jeder seite nun vorkommt:

	Source code
1 2 3	<?php include("kopf.html"); ?>

und das ist der html code der in der separaten datei steht:

Source code

<img src="bild/kopf.jpg" alt="" width="770" height="250" border="0" usemap="#kopf">
<map name="kopf">
<area shape="rect" coords="316,195,391,213" href="index.htm" alt="Startseite">
<area shape="rect" coords="393,195,504,213" href="bildbearbeitung.htm" alt="Bildbearbeitung">
<area shape="rect" coords="506,195,564,213" href="technik.htm" alt="Technik">
<area shape="rect" coords="566,195,644,213" href="fotoalbum.htm" alt="Fotoalbum">
</map>

Y0Gi

God

Re: CSS Problem

Tuesday, October 25th 2005, 2:31pm

11

rrrrrrrrrrrichtiiiiiiiich

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

moede

Senior Member

Re: CSS Problem

Tuesday, October 25th 2005, 5:12pm

12

So geht es ja... aber PFUIIIII ist es ja schon sehr.

Mach eine Liste

Source code

<div id="header">
      <ul id="navigation">
            <li id="navStartseite"><a href="#">Startseite</a></li>
            <li id="navBildbearbeitung"><a href="#">Bildbearbeitung</a></li>
            <li id="navTechnik"><a href="#">Technik</a></li>
            <li id="navFotoalbum"><a href="#">Fotoalbum</a></li>
      </ul>
</div>

Dann hätten wir mal den gesammten HTML Teil

Jetzt kommen wir zum css

Source code

* {
      margin: 0;
      padding: 0;
      font-size: 11px;
      font-family: Verdana, Helvetica, sans-serif;
      color: #000;
      background-repeat: no-repeat;
}

#header {
      width: 770px;
      height: 250px;
      background-image: url(./images/header_bg.png);
}

/* -----------------------------------------------
                              NAVIGATION
----------------------------------------------- */
ul#navigation {
      /* Die relative Positionierung mit dem z-index ist wichtig,
      damit die Navigation auf einer höheren Ebene als die Input
      Felder ist da es ansonsten zu einer Überlappung kommt. */
      position: relative;
      z-index: 1;
      margin-right: 30px;
      width: 740px;
      float: right;
}
      
ul#navigation, #navigation ul {
      list-style: none;
}

#navigation li {
      float: right;
}
      
#navigation li a {
      line-height: 20px;
      display: block;
      /* Verstecken des Textes mit text-indent */
      text-indent: -9999px;
}

Jetzt hätten wir mal einen sauberen Aufbau der Navigation mit einer Liste und die dazugehörige Formatierung.

Jetzt kommen wir zum wichtigsten Teil, die einzelnen Navigationspunkte. Ich habe dir hier exemplarisch mal den ersten Punkt formatiert. Der Rest ist ziemlich ähnlich.
Du schneidest den Text mit Hintergrund aus und nimmst ihn als Hintergrundbild für das a Element mit der übergeordeten id navStartsteite, so kannst du auf jeden Punkt einzeln zugreifen.
Beim Hover kannst du nun einfach noch den Hintergrund ändern und hast noch einen schönen Effekt.

	Source code
1 2 3 4 5 6 7 8	#navStartseite a { width: BREITE DES BILDES; background-image: url(./STATSEITE.jpg); } #navStartseite a:hover { background-image: url(./STATSEITE_hover.jpg); }

So ists wirklich sauber, Barrierefrei und ausserdem noch mit Hover, was willst du mehr

peace
moede

bekiro

Senior Member

Re: CSS Problem

Tuesday, October 25th 2005, 7:26pm

13

hey - das ist doch schon fast das was ich wollte

ich werd das mal übernehmen und die kleinen änderungen anpassen. mal schauen wie es dann aussieht.

danke dir moede

crushcoder

God

Re: CSS Problem

Tuesday, October 25th 2005, 7:44pm

14

was willst du denn nun?

die bilder und positionen der links zentral verändern, dann ist moedes oder mein ansatz der richtige,
oder die eigentlichen links zentral anpassen, dann ist der include der richtige ansatz?

beides läßt sich natürlich auch kombinieren.

Zitat von »Microsoft-Sprecher Thomas Baumgärtner«

Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.

moede

Senior Member

Re: CSS Problem

Tuesday, October 25th 2005, 11:03pm

15

@crushcoder
Ich wäre für kombinieren, dann hast du 2in1, fast schon ein Überraschungsei ;D

@bekiro
Fast hät ichs vergessen, wegen dem float:right; ist die Reihenfolge der Links umgekehrt, also genau anders rum als es dann angezeigt wird

Source code

<ul id="navigation">
  <li id="navFotoalbum"><a href="#">Fotoalbum</a></li>
  <li id="navTechnik"><a href="#">Technik</a></li>
  <li id="navBildbearbeitung"><a href="#">Bildbearbeitung</a></li>
  <li id="navStartseite"><a href="#">Startseite</a></li>
</ul>

Y0Gi

God

Re: CSS Problem

Wednesday, October 26th 2005, 12:06am

16

moede:
warum nicht das float auf die gesamte liste anwenden? und durch die verwendung von <dl> statt <ul> und <dt> statt <li> kann man sich sparen, die browserabhängige formatierung der unsortierten liste zu unterdrücken.
außerdem empfehle ich, alle vom stylesheet referenzierten bilder gemeinsam mit dem stylesheet in einen gemeinsamen ordner (z.b. 'style/') zu packen, dann kann man in den url()-werten im stylesheet den pfad weglassen und nur den dateinamen angeben.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

moede

Senior Member

Re: CSS Problem

Wednesday, October 26th 2005, 11:58am

17

Quoted from "Y0Gi"

warum nicht das float auf die gesamte liste anwenden?

Verstehe ich jetzt nich ganz, ist ja auf die gesamte Liste

Quoted from "Y0Gi"

und durch die verwendung von <dl> statt <ul> und <dt> statt <li> kann man sich sparen, die browserabhängige formatierung der unsortierten liste zu unterdrücken.

Ich finde jetzt gerade den Link nicht mehr, es wird aber immer wieder empfohlen <ul> statt <dl> zu verwenden, leider habe ich vergessen was genau der Grund ist.

Y0Gi

God

Re: CSS Problem

Wednesday, October 26th 2005, 2:34pm

18

einer der top-artikel zum thema list-styling ist wohl dieser: http://www.alistapart.com/articles/taminglists/

was das float angeht, das du bei '#navigation li' (also jedem listen-item und nicht einmal zur ausrichtung der gesamten liste) verwendest, da kann man auch ganz drauf verzichten und stattdessen 'display: inline;' verwenden (s. link) - das hat auch weniger unerwünschte nebeneffekte. ein weiterer artikel zu horizontalen listen ohne verwendung von float ist dieser: http://www.cssplay.co.uk/menus/centered2.html

was zu den vorzügen von definition lists gegenüber unordered lists von einem der css-götter, stu nicholls, persönlich: http://www.cssplay.co.uk/menus/definition.html

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)