Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

21

Samstag, 21. Mai 2005, 18:33

[q=malligan]Danke für Deine Demoseite, LapisInfernalis :thumbsup:[/q]
Gern geschehen... Dafür bin ich ja hier... ;)

[q=malligan]Bei Eurer anderen Diskussion lass ich Euch gerne alleine, denn ich bin ja jetzt schon überfordert :D[/q]
Sorry für die Abschweife. Die WebDesignerei bietet wunderbar viele Punkte, die Anregungen für die eine oder andere Diskussion bieten. Natürlich ist das auch gut so, allerdings sollte dabei der eigentliche Thread nicht aus den Augen verloren, oder gar zugepostet werden...

[q=malligan]Man kann nicht genug lernen und dies dann auch üben, und wenn ich die gleiche Seite doppelt mache :-) nur eben mal mit einer anderen Menüleiste[/q]
Das ist die richtige Einstellung! Nur nicht entmutigen lassen... :thumbsup:
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

22

Sonntag, 22. Mai 2005, 13:40

Zitat von »LapisInfernalis«


Sorry für die Abschweife. Die WebDesignerei bietet wunderbar viele Punkte, die Anregungen für die eine oder andere Diskussion bieten. Natürlich ist das auch gut so, allerdings sollte dabei der eigentliche Thread nicht aus den Augen verloren, oder gar zugepostet werden...


Ihr könnt gerne weiterdiskutieren :) Werde einfach ruhig mitlesen und verwirrt sein :happy:
Auf jeden Fall mache ich mich jetzt mal hinter Deine Vorschläge!
Signatur von »malligan« Grüsse vom Malligan

23

Sonntag, 22. Mai 2005, 15:43

Hi,
da wir weiterdiskutieren dürfen... ;-)

Zitat von »LapisInfernalis«

Verpasse ich aber dem Seiteninhalt einen so breiten Rand, damit die seitliche Navigation nicht umflossen werden muss, so verliere ich doch weitaus mehr Platz für den Inhalt, als im vorhergehenden Fall, oder nicht?

Und was ist mit der Skalierbarkeit? Will man diese Gewährleisten, so schrumpft der Platz für den Seiteninhalt noch weiter.


Umflossene Navigationen sind ja recht selten zu sehen; weitaus häufiger wird für die Navigation (und evtl. weitere Elemente) eine "Spalte" reserviert. Wenn dem so ist - was durchaus auch der Übersichtlichkeit dienen kann - dann spricht mMn auch nichts gegen eine Fixierung.

Daß hierbei der Platz für den Inhalt verloren geht, ist klar. Aber eine Beschränkung der Textbreite dient ja auch der Lesbarkeit. In Punkto Skalierbarkeit würde eine Breite in EM optimal für eine sinnvolle Zeichenanzahl/Zeile sorgen. Natürlich kann das - besonders i.V. mit einer Navigations"spalte" - in zu kleinen Fenstern wiederum problematisch werden.
Eine Beschränkung in px andererseits hat andererseits wieder Probleme bei der Skalierung.
Eine Lösung, die beidem gerecht wird, sehe ich nicht. Man muß im Einzelfall schon abwägen, was man nutzt.

Nur finde ich - besonders in Anbetracht der doch am häufigsten genutzten Fensterbreiten von 1024px und größer - gar keine Beschränkung des Inhaltsbereiches und damit extrem breite Zeilen unpassend. Ein solches Fenster würde ich wohl, um besser lesen zu können, zusammenschieben. Hierbei würde ein fixierter Bereich in der Horizontalen natürlich dann stören, d.h. den scrollbaren Bereich einschränken.
Bei einer (fixierten) seitlichen Navigation ist dies nicht der Fall. Im Gegenteil: sie übernimmt für mich die Redizierung der Textbreite.

Gruß
Ingo

24

Montag, 23. Mai 2005, 15:03

Hollaaaaaaaaaaaaaa

Aaaaaaaaalso, ich hab diese Demo mal studiert :-) es ist mir schon einiges klarer geworden jetzt. Aber ich hab halt doch noch ein paar Fragen offen.
Wenn ich jetzt Navigationsbuttons, oder ein Bild als Banner einfügen will, mach ich das im screen.css, screen_ie.css oder im index.htm?
Und warum hat es im screen_ie.css bei dem Banner und der Navigation kein Werte?
Ach ja, was auch noch ist, wenn ich die Seite mit dem IE angucke, dann funktioniert überhaubt nichts. Da hab ich ober den Bannerbereich, dann kommt anschliessend der Navigationsbereich gefolgt vom Inhalt. Und wenn ich Scrolle, dann scrollt alles mit :D Das hab ich zuhause im Firefox nicht.
Bin mal gespannt auf Deine Antwort!
Übrigens, Deine Erklärungen sind echt geil und verständlich geschrieben, da komm sogar ich nach! :thumbsup:
Signatur von »malligan« Grüsse vom Malligan

25

Montag, 23. Mai 2005, 15:33

[q=malligan]Aaaaaaaaalso, ich hab diese Demo mal studiert fröhlich es ist mir schon einiges klarer geworden jetzt. Aber ich hab halt doch noch ein paar Fragen offen.[/q]
Gar kein Problem... Immer her damit... :D

[q=malligan]Wenn ich jetzt Navigationsbuttons, oder ein Bild als Banner einfügen will, mach ich das im screen.css, screen_ie.css oder im index.htm?[/q]
Immer in die HTML-Datei. In die CSS-Datei schreibst Du nur Informationen über das Layout, bzw. das Erscheinungsbild des Bildes. Also ob z.B. ein Rahmen drum herum soll, oder so...

In die CSS-Datei trägst Du das Bild, bzw. den Bildnamen nur dann ein, wenn Du das Bild als Hintgerundbild benutzen willst.

[q=malligan]Und warum hat es im screen_ie.css bei dem Banner und der Navigation kein Werte?[/q]
Keine Werte stimmt nicht ganz... Dort ist ja noch die Positions-Angabe...

Warum sonst keine Werte drin stehen hat folgenden Grund: Wenn Du einen Blick auf den Quellcode wirfst siehst Du, dass zunächst das Stylesheet "screen.css" geladen wird. Dies ist aber nicht browserspezifisch. Diese Datei liest jeder Browser, also auch der IE.

Anschließend lädt nur der IE die zweite CSS-Datei "screen_ie.css". Weil im ersten Stylesheet aber schon die ganzen Informationen zum Banner drin stehen, hat der IE diese im Speicher. Es werden nur diese Angaben überschrieben, die in beiden Stylesheets drin stehen.

Genutzt wird dann immer nur die zu letzt geladene Angabe.

Ein kleines Beispiel:

In einem ersten Stylesheet setzt Du die Schriftfarbe auf grün und die Schriftstärke auf fett. Dadruch wird in allen Browsern die Schrift grün und fett dargestellt.

Lässt Du nun den IE ein zweites Stylesheet - wie auf der Demoseite - laden, in welchem Du die Schriftstärke auf normal setzt, so werden bei allen Browsern die Schrift grün und fett und beim Internet Explorer nur grün angezeigt.

Ich hoffe, ich konnte dies ein wenig klar darstellen.

[q=malligan]Ach ja, was auch noch ist, wenn ich die Seite mit dem IE angucke, dann funktioniert überhaubt nichts. Da hab ich ober den Bannerbereich, dann kommt anschliessend der Navigationsbereich gefolgt vom Inhalt. Und wenn ich Scrolle, dann scrollt alles mit großes Grinsen Das hab ich zuhause im Firefox nicht.[/q]
Danke für den Hinweis! Ich habe das Problem gefunden. Ich hatte vergessen, den letzten Kommentar vor dem Conditional Comment (also dem Kommentar, wo die Bedingung für das Laden des zweiten Stylesheets drin steht) mit "-->" zu schließen.

Jetzt sollte es aber funktionieren...

[q=malligan]Übrigens, Deine Erklärungen sind echt geil und verständlich geschrieben, da komm sogar ich nach! :thumbsup:[/q]
Na das freut mich aber... :approve:
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

26

Montag, 23. Mai 2005, 16:09

Joooooooooooooooo :-)
Das heisst wenn ich bilder einfügen möchte, muss ich das in diesem Beisbiel in etwa so machen:

Vorher:
<div id="navigation"><p>Navigationsbereich</p></div>
<!-- Hier beginnt die Navigation -->

Nachher:
<div id="navigation"><p>Navigationsbereich</p>
<img src="../1.gif" width="84" height="20"></div>
<!-- Hier beginnt die Navigation -->

Dann hab ich noch eine generelle Frage zu den Bildern... Wie kann ich die Bilder genau psitionieren? Wenn ich zum Beispiel zwischen den Buttons einen gewissen Abstand haben will, wie mach ich das? Ich hab es mal als Bild angehängt was ich meine:
Signatur von »malligan« Grüsse vom Malligan

27

Montag, 23. Mai 2005, 16:16

Da ich nicht zwei Bilder einfügen kann, muss ich hier weiter machen :)

Wenn ich nun die Seite anschaue, sieht man unten dass der Scrollbalken wie abgesägt ist. An was liegt das?
Danke für des Rätsels Lösung :-)
Signatur von »malligan« Grüsse vom Malligan

28

Montag, 23. Mai 2005, 16:31

Hallo Malligan!

Du kannst ganz einfach mehr als ein Bild in Deinem Posting unterbringen:

1. Du lädst es auf einen Server und postest hier den Link zum Server
oder besser:
2. Du benutzt den WSB.imageupload-Service

Zu Deinen Problemen:

1. Bildabstand

Dieses Problem kannst Du auf verschiedene Weisen lösen. Einige Zeitgenossen positionieren einfach ein transparentes GIF zwischen die Bilder, und verpassen diesem Bild einfach die Breite, die dem gewünschten Abstand entspricht.

Diese Methode ist hier aber nur der Vollständigkeit halber aufgeführt. Ich würde sie Dir nicht empfehlen, da Du

a) Dir damit unnötig viel Arbeit machst, und

b) Elemente zweckentfremdet verwendest


Einfacher und besser geht dies mit CSS. Du kannst in das normale Stylesheet einfach folgende Angabe schreiben:

Quellcode

1
2
3
4
#navigation img
{
margin: 0 10px 0 10px;
}


Dies verpasst allen Bildern (img) innerhalb des "navigation"-Elements einen Abstand von 10 Pixeln rechts und 10 Pixeln links. Macht summa sumarum 20 Pixel Abstand.


2. Der "abgeschnittene" Scrollbalken

Dieses Phänomen ist leider der Nachteil bei dem ganzen Workaround. Der Scrollbalken, den Du siehst, ist ja nicht der Scrollbalken der Seite, sondern der Scrollbalken des Bereichs für den Inhalt. Da die Naviagtion aber darüber liegt, um den unteren Teil des Inhalts zu überdecken, wird auch der Teil des Scrollbalkens verdeckt.

Leider habe ich noch keine andere Möglichkeit gefunden, dies zu umgehen.
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

29

Montag, 23. Mai 2005, 16:43

Aha, so ist das also :)

Danke vielmals!

Wo genau muss ich denn diesen code im css einbauen? Ich hab das jetzt mal getan, aber es tut sich so nichts auf der Seite. Was ich noch gemerkt habe, wenn ich zum Beispiel den Banner im css ändere von
#banner {
position : fixed;
top : 10px;
left : 10px;
width : 10%;
height : 114px;
margin : 0;
padding : 0;
color : black;
background-color : #EEEEEE;
text-align : left;
z-index : 200;
border : none;
text-align : center;
}

auf
#banner {
position : fixed;
top : 10px;
left : 10px;
width : 10%;
height : 80px;
margin : 0;
padding : 0;
color : black;
background-color : #EEEEEE;
text-align : left;
z-index : 200;
border : none;
text-align : center;
}

passiert überhaubt nichts :undecided: Was mach ich denn dabei falsch?
und was bedeutet im css eigentlich all das

a:link, a:visited {
color : #D60000;
background-color : white;
text-decoration : none;
}

a:hover {
color : #D60000;
background-color : white;
text-decoration : underline;
}

und so weiter??

Sorry für die vielen Fragen, aber ich kann mir beim Besten Willen nichts darunter vorstellen, ich glaub ich werd :irre:
Signatur von »malligan« Grüsse vom Malligan

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »malligan« (23. Mai 2005, 16:44)


30

Montag, 23. Mai 2005, 17:12

Hi malligan...

Du packst den CSS Code einfach irgendwo an eine freie Stelle. Vorzugsweise unter #navigation.

Was den a.irgendwas kram angeht: Das ist für die Formatierung von Hyperlinks:

link = alle Hyperlinks
visited = besuchte Links
hover = wenn die Maus über den Link fährt
active = wenn man den Link anklickt

Was hat es mit dem CSS-Code auf sich, den Du gepostet hast? Und wieso 80 Pixel Höhe rot hervorgehoben? Hat das einen Grund?
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

31

Montag, 23. Mai 2005, 18:15

Hi LapisInfernalis

Danke für Deine Erklärung :) Nun das mit dem Code und den 80px rot, ich wollte eigentlich fragen, warum mein Banner sich nicht von 114 auf 80 ändert wenn ich diesen Code abändere?
Habs wahrscheinlich ein bisschen undeutlich formuliert. Tschuldigung
Signatur von »malligan« Grüsse vom Malligan

32

Montag, 23. Mai 2005, 18:34

Die Höhenangabe ändert nur die Höhe für den Bereich, in welchem sich der Banner befindet. Nicht aber der Banner selbst. Bei diesem musst Du die Höhe beim Einbinden ins HTML festlegen...
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

33

Montag, 23. Mai 2005, 18:52

Ja eben, das ist doch der Bereich der grau hinterlegt ist? Der Banner selbst ist ja ein gif, jpeg oder so, den muss ich ja in Photoshop anpassen. Wie muss dann der Code aussehen im html?
Signatur von »malligan« Grüsse vom Malligan

34

Montag, 23. Mai 2005, 19:33

Wenn der Banner 80 Pixel hoch ist, und der Bereich des Banners auch 80 Pixel hoch sein soll, dann ist der von Dir gepostete CSS-Code schon in Ordnung.

Ich dachte nur, dass Du versuchst, mit der CSS-Angabe die Höhe des Bildes zu verändern. Einbinden tust Du den Banner dann wie jedes normale Bild auch...

Doch was ich nicht ganz verstehe ist, dass der Banner-Bereich (grau) nicht auf die geänderte Höhe reagiert hat. Habe ich das so richtig verstanden?
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

35

Montag, 23. Mai 2005, 19:38

:D ja genau, so ist es. Ich wollte den Bannerbereich verändern, doch der hat leider nicht reagiert :disappointed:
An was kann das liegen?
Signatur von »malligan« Grüsse vom Malligan

36

Montag, 23. Mai 2005, 19:49

Also eigentlich sollte das kein Problem sein. Ändere neben der Höhe auch mal die Farbe, bzw. gib für die Höhe einen stark übetriebenen Wert an.

Auf diese Weise kannst Du testen, ob die Seite überhaupt auf das Stylesheet reagiert. So kannst Du mögliche Fehlerquellen eingrenzen...
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

37

Dienstag, 24. Mai 2005, 10:25

Hallo und guten Morgen :)

ist ja schon interessant. Als ich gestern Abend zuhause den Bannerbereich änderte, hat es ohne Probleme funktioniert. Zuhause hab ich de Feuerfuchs von Mozilla. Hier im Geschäft läuft leider alles über den Internetexplorer :undecided:

Auf jeden Fall danke vielmals für die Hilfe!! Aber Ruhe habt Ihr glaube ich noch nicht von mir, denn es tauchen sicher wieder Fragen auf *g*
Signatur von »malligan« Grüsse vom Malligan