[Party]

so hab jetzt einmal das ganze design in CSS gemacht und bin eigendlich stolz drauf das ich es doch irgendwie hergebracht hab

aber im firefox wird es noch fehlerhaft angezeigt und ich glaub man könnte noch was ändern bzw besser machen... könnt ihr mir bitte sagen was ich ändern muss/soll?

Seite zurzeit:
http://www.ascherpatrick.com/new


Danke im vorraus

Angehängte Datei(en)

•  style.css (1,3K)
  Anzahl der Downloads: 87
•  index.rar (957bytes)
  Anzahl der Downloads: 108

[axx]

Schön, dass du diesen Weg gehst, aber noch kein Grund sich auf die Schulter zu klopfen.

Du solltest einen Gecko-Browser als erste Überprüfung statt des Internet Explorers benutzen. Im Gegensatz zu richtigen Browsern dehnt der IE < 7 das Elternelement aus, wenn das Kindelement mehr Platz beansprucht, siehe logo.
Noch besser ist natürlich, immer gleich mindestens IE6 + 7beta sowie einen Gecko-Browser heranzuziehen.

navibox und eventbox enthalten Auflistungen und sollten als solche ausgewiesen werden: ungeordnete Listen.

Es gibt keine Überschriften, Grafiken sind als Überschriften denkbar ungeeignet. Wenn du auf die Grafiken nicht verzichten willst / kannst, benutze sie als Hintergrundbild einer Überschrift.

<span style="color:#C0C0C0"> ist überflüssig. Die Farbe solltest du dem Element #eventbox a zuweisen.

Relative sind abloluten Einheiten vorzuziehen, da sie im IE < 7 sonst nicht skalieren.

Eingabefelder sollten ein Label erhalten.

Ist die Verwendung des Elementes <center> der einzige Grund, weshalb du den Dokumententyp XHTML 1.0 Transitional (statt Strict) verwendest?

Für den Anfang sieht das schon ganz gut aus, weiter so.

[Party]

Zitat

Du solltest einen Gecko-Browser als erste Überprüfung statt des Internet Explorers benutzen. Im Gegensatz zu richtigen Browsern dehnt der IE < 7 das Elternelement aus, wenn das Kindelement mehr Platz beansprucht, siehe logo.
Noch besser ist natürlich, immer gleich mindestens IE6 + 7beta sowie einen Gecko-Browser heranzuziehen.

Ok werde ich heute am abend auf meinen Rechner installieren

Zitat

navibox und eventbox enthalten Auflistungen und sollten als solche ausgewiesen werden: ungeordnete Listen.

ok du meinst:

           
<div id="navibox">
   <ul>
          <li>News</li>
          <li>Events</li>
          <li>.....</li>
   </ul>
</div>

das problem ist da erscheint dann immer ein PUNKT vor dem Text und das ganze rückt ein.... oder kann man das irgendwie ausstellen?
edit: hab hier das gefunden:
<ul style="list-style-type:none">
kann man das einrücken auch noch ausschalten?
da in der Eventbox dann die ganzen einträge aus einer mysql datenbank ausgelesen werden und das mit dem einrücken dort einwenig blöd aussehen würde...

Zitat

Es gibt keine Überschriften, Grafiken sind als Überschriften denkbar ungeeignet. Wenn du auf die Grafiken nicht verzichten willst / kannst, benutze sie als Hintergrundbild einer Überschrift.

mhm...meinst du so?
css:

h1 span {display: none}

html:

<h1>
   <span>
          Hier steht der Beschreibungstext für das Hintergrundbild
   </span>
</h1>

Zitat

<span style="color:#C0C0C0"> ist überflüssig. Die Farbe solltest du dem Element #eventbox a zuweisen.

ok. das funktioniert dann so oder?

a.eventbox:link ...?

Zitat

Relative sind abloluten Einheiten vorzuziehen, da sie im IE < 7 sonst nicht skalieren.

Ja das hab ich auch schon gehört das "absolut" nicht verwendet werden soll bzw in meinem fall halt nicht.
was ist der unterschied zwischen absolut und relative in diesem fall?

Relativ: Das Element wird vom zur Position verschoben. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben.

Absolut:Absolut positionierte Elemente sind außerhalb des normalen Textfluß.Sie liegen sozusagen über den anderen Elementen.

Lieg ich da mit meiner vermutung richtig? wenn nicht könnte mir das jmd genauer erklären?

Zitat

Eingabefelder sollten ein Label erhalten.

danke werde ich auch machen

Zitat

Ist die Verwendung des Elementes <center> der einzige Grund, weshalb du den Dokumententyp XHTML 1.0 Transitional (statt Strict) verwendest?

mhm... nein das hat mein editor automatisch reingemacht. ich habe mich mit dem Thema Dokumententypen noch nie richtig beschäftigt (was ich aber in nächster zeit vorhabe). also soll ich lieber Strict verwenden?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">


vielen Dank für deine Antwort axx das hilft mir sehr viel weiter.
mit freundlichen grüßen
ParTy

Dieser Beitrag wurde von Party bearbeitet: 07. August 2006 - 09:27

[Gitarremann]

das einrücken in der liste verhinderst du mit

<ul style="list-style:none; margin:0;padding:0;">
...

allerdings kannst du das auch über eine id oder klasse machen.

für überschriftenhintergrundbilder schreibst du in die css datei einfach

h1
{
        width:400px;
        height:40px;
        background-image:url(pfad/zum/bild.gif);
}

(breite und höhr natürlich entsprechend deines bildes, und dann hätten alle als h1 ausgewiesenen überschriften dieses format mit dem entsprchenden bild.

mit den links wäre das so

#eventbox a { ...}

dann wäre es für alle linkvarianten in der eventbox. oder du machst das einzeiln - hover mal separiert wäre das dann so möglich:

#eventbox a:link, #eventbox a:visited, #eventbox a:active, #eventbox a:focus {...}
#eventbox a:hover { was anderes}

dann wäre beim drüberfahren der andere linkstyle gültig.

[Party]

vielen Dank werd ich gleich mal alles probieren.

eine frage hätte ich noch bezüglich der positionierung:
also hab ja 2 mal "absolut" verwendet und sollte lieber relativ verwenden? wesshalb genau? ich hab bei css4you gesehen das jeder browser absolute, relative, static darstellen kann. also wo liegt genau der unterschied zwischen absolute und relative? also ich hab mich schon in ein paar internetseiten darüber informiert und mein entschluss daraus gezogen den ich ja oben beschrieben habe. jetzt ist meine frage noch ob ich das auch richtig verstanden habe?

lg party

[[Elite-|-Killer]]

Zitat (Party: 07.08.2006, 08:05)

mhm... nein das hat mein editor automatisch reingemacht. ich habe mich mit dem Thema Dokumententypen noch nie richtig beschäftigt (was ich aber in nächster zeit vorhabe). also soll ich lieber Strict verwenden?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
vielen Dank für deine Antwort axx das hilft mir sehr viel weiter.
mit freundlichen grüßen
ParTy

Ich würde XHTML1.0 Strict nehmen, dann passts
Zum Thema Testen:
Ich würde mindestens die Website auf IE6 & IE7, dem FF in aktueller Version und Opera 8 oder 9 testen, das letzte hat den Grund, dass Opera gerne mal etwas wählerisch mit CSS ist, hat sich seit der Version 9 sehr gebessert, bei 8.X war das noch nicht der Fall, da hatt es u.a. mit

margin:

seine Probleme.

[Party]

aha ok danke werde ich machen...


So hab mittlerweile schon einwenig rumprobiert. Nun ist mein größtes problem wenn ich mit
position: relative; arbeite dass die NAVI zwar gut klappt so wie sie jetzt ist aber der content nicht. da wenn ich jetzt in die navi,,navinews,eventliste eintrage (also die navi nach unten geht) verschiebt es automatisch den content nach unten...

html code:

  <body>
        <div id="navigation">  
           <div id="headbox">
           <div><center><img src="bild.gif"></center></div>
           <div><center><input1...><input2.../><input3... /></center></div>
        </div><br/>
        <div id="navibox"></div><br/>
        <div id="newsbox"></div><br/>
        <div id="eventbox"></div>
        </div>

        <div id="content">
           <div id="entry"></div>
           <div id="footer"></div>
        </div>
  </body>

CSS:
[hier]

hab die seite auch schon upgelodet
hier



wie kann ich das ganze regeln das es funktioniert ohne absolute zu verwenden?oder wie würdet ihr das lösen

lg ParTy

Dieser Beitrag wurde von Party bearbeitet: 07. August 2006 - 15:23

[Party]

edit: ich glaub das muss ich in diesem fall wohl mit absolute regeln also zumindest das content

Dieser Beitrag wurde von Party bearbeitet: 07. August 2006 - 19:29

[flo]

Zitat

edit: ich glaub das muss ich in diesem fall wohl mit absolute regeln also zumindest das content

Das glaub ich nicht, was genau klappt nicht?

Edit: Und wirlich sematisch ist der Quellcode nicht grade... und im FF wird sie auch nicht wirklich richtig angezeigt..

Dieser Beitrag wurde von Flo bearbeitet: 07. August 2006 - 20:21

[Party]

ja hab den ganzen code mittlerweile überarbeitet und das problem behoben. bin mit dem CSS/Design mittlerweile geritg und jetzt gehts ans coden. Ich poste den Link zur page wenn ich damit fertig bin.

Danke für die Hilfe
mfg party

[axx]

Noch ein paar Anmerkungen:
Listenelemente werden von Browsern eingerückt und mit Punkt dargestellt, weil es im browsereigenen Stylesheet so festgelegt ist. Grundsätzlich hat ein HTML-Element gar kein Aussehen. HTML hat mit design gar nichts zu tun. Willst du also eine Liste, die nicht eingerückt ist, musst du mit einem eigenen stylesheet die entsprechende Eigenschaft überschreiben wie oben schon beschrieben.

Überschriften sind entscheidend für die Struktur des Dokumentes. Versuche, die Seite wie eine Maschine oder der Textbrowser lynx zu lesen, kein CSS, keine Grafiken, kein clientseitiges Scripting. Die Struktur muss stimmen, um auch mit lynx lesbar zu sein. Alles Andere ist design.

Eine Überschrift muss also Text sein. Wenn ich jetzt aber ein Hintergrundbild dahinterlege, das auch Text enthält, sieht es vermurkst aus. Will ich also unbedingt eine Grafik als Überschrift, schreibe ich sie als Text und lege ein Element, das die Grafik als Hintergrundbild erhält darüber. Diese Vorgehensweise ist als image peplacement bekannt. Es gibt mehrere Möglichkeiten, wobei sich in meinem Fall die Gilder-/Levin-Methode bewährt hat. Das Testen mit möglichst vielen Browsern ist unvermeidbar.

Als ich von relativen Einheiten sprach, meinte ich die relative Einheit 'em'. 1em = Standardschriftgröße des Betriebssystems, bei Windows 16px, dieser Wert ist aber vom Benutzer veränderbar.
In manchen Fällen ist auch % sinnvoll, keinesfalls aber px.

Absolute Positionierung ist grundsätzlich auch nicht wünschenswert, sollte dir aber erstmal nicht so viel Sorgen machen. Absolute Positionierung wird dir im Wege stehen, wenn du dir Gedanken darüber machst, wie die Seite auf verschieden Ausgabegeräten aussieht, gerade kleinen Displays von Mobiltelefonen.

In deinem Fall ist gar keine Positionierung nötig. #navigation und #content fließen nebeneinander, wenn du #navigation eine feste Breite gibst.

Zitat

Relativ: Das Element wird vom zur Position verschoben. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben.

Absolut:Absolut positionierte Elemente sind außerhalb des normalen Textfluß.Sie liegen sozusagen über den anderen Elementen.

Lieg ich da mit meiner vermutung richtig? wenn nicht könnte mir das jmd genauer erklären?

Das siehst du ganz richtig. Ein relativ positioniertes Element wird nicht aus dem Fluss gerissen, sondern wird relativ zur Position, die es im Fluss hätte, verschoben.
Ein absolut positioniertes Element wird aus dem Fluss gerissen und relativ zum Browserfenster positioniert.

Den Dokumententyp XHTML 1.0 Transitional verwendet man, wenn veraltete Elemente wie z.B. <center> oder veraltete Attribute wie z.B. target verwenden will/muss.
Ansonsten ist der Typ Strict vorzuziehen, da nach meiner Beobachtung die Arbeit einfacher ist. Dafür muss man allerdings wissen, dass es verschiedene Darstellungsmodi der Browser gibt (standard, quirks, almost-standard). Der verwendete Dokumententyp beeinflusst, welchen Darstellungsmodus ein Browser benutzt. Ich lasse immer alle Browser (soweit mir bekannt) im Standard-Modus arbeiten.