IPB

Willkommen, Gast ( Anmelden | Registrierung )

5 Seiten V  < 1 2 3 4 5 >  
Reply to this topicStart new topic
> anfänger
Conny
Beitrag 18.04.2008 - 20:39
Beitrag #21


Kommt Zeit, kommt Rat, kommt Conrad!
Gruppensymbol

Gruppe: Mods
Beiträge: 1.169
Mitglied seit: 21.11.2001
Wohnort: Altenkirchen, Westerwald
Mitglieds-Nr.: 42



Hallo,
wenn es erstellte Buttons sind, gehe ich mal davon aus, daß es sich hier um Grafiken handelt.
Die haben eine 'feste' Höhe und Breite (width und height) in der Summe -10 Buttons unter einander- sprengst Du die Höhe der Seite, deswegen klappt es nicht.
Entweder Scrollbalken zulassen, oder overflow auto (gibt auch ein scrollbalken), oder die Buttons kleiner machen, scheint mir hier die Lösung zu sein.

cu
Conny
Go to the top of the page
 
+Quote Post
Flocke
Beitrag 18.04.2008 - 21:25
Beitrag #22


looks good


Gruppe: User
Beiträge: 47
Mitglied seit: 28.03.2008
Wohnort: In der Nähe von Fulda
Mitglieds-Nr.: 7.350



Also bei den Buttons habe ich beim erstellen die Funktion, dass sie die Höhe automatisch anpassen ausgeschaltet. Ich kann sie also wenn ich will total zusammenquetschen in der Höhe, aber die Breite bleibt gleich. Im FireFox wird es ja auch richtig angezeigt, nur im IE nicht. Und eben dieser weiße Balken, der aussieht wie ein zur Seite gekipptes "L", welches aber nur im FireFox so angezeigt wird.
Mich stört es zwar ein wenig den Scrollbalken auf "auto" zu stellen, aber damit kann ich zur not leben. Dieser weiße Balken im FF stört gewaltig, weil er farblich garnicht passt.

Wie kommt es denn dass der IE und der FF ein und die selbe Prozentangabe anders anzeigen? Das einzige was mir bleibt ist jetzt einen fixen Wert anzugeben, aber der passt ja dann auch nur auf meinem Bildschirm so wie ich es will.

Wie gesagt, mit dem Scrollbalken im IE könnte ich zur Not leben, aber FF soll gefälligst 100% auch hundertprozentig umsetzen!

flocke



Habe mal ein Bild davon hochgeladen.

Hier nun auch noch den Quellcode dazu:

Frameset:
</head><frameset border="0" frameborder="no" rows="15%,85%">
...<frame scrolling="no" src="kopfzeile.html" name="kopfzeile">
<frameset border="0" frameborder="no" cols="15%,85%">
<frame scrolling="auto" src="navigation.html" name="navigation">
<frame scrolling="auto" src="startseite.html" name="haupt">
</frameset>

Navigation:
<body topmargin="0" leftmargin="0" text="#000000" bgcolor="#07040C" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<a href="startseite.html" target="haupt"><img src="bilder/startseite.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/startseitemouseover.png';" onmouseout="this.src='bilder/startseite.png';" /></a>
<a href="studium.html" target="haupt"><img src="bilder/studium.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/studiummouseover.png';" onmouseout="this.src='bilder/studium.png';" /></a>
<a href="fun.html" target="haupt"><img src="bilder/fun.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/funmouseover.png';" onmouseout="this.src='bilder/fun.png';" /></a>
<a href="ich1.html" target="haupt"><img src="bilder/ich1.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/ich1mouseover.png';" onmouseout="this.src='bilder/ich1.png';" /></a>
<a href="sheriff/ssjstart.htm" target="haupt"><img src="bilder/ich2.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/ich2mouseover.png';" onmouseout="this.src='bilder/ich2.png';" /></a>
<a href="htmlumfrage.html" target="haupt"><img src="bilder/umfrage.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/umfragemouseover.png';" onmouseout="this.src='bilder/umfrage.png';" /></a>
<a href="gaestebuch.html" target="haupt"><img src="bilder/gaestebuch.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/gaestebuchmouseover.png';" onmouseout="this.src='bilder/gaestebuch.png';" /></a>
<a href="links.html" target="haupt"><img src="bilder/links.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/linksmouseover.png';" onmouseout="this.src='bilder/links.png';" /></a>
<a href="kontakt.html" target="haupt"><img src="bilder/kontakt.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/kontaktmouseover.png';" onmouseout="this.src='bilder/kontakt.png';" /></a>
<a href="impressum.html" target="haupt"><img src="bilder/impressum.png" width="100%" height="10%" border="0" alt=""onmouseover="this.src='bilder/impressummouseover.png';" onmouseout="this.src='bilder/impressum.png';" /></a>

Bei den Buttons oben bin ich ziemlich sicher, dass die die Höhe und Breite nicht automatisch anpassen.

Kopfzeile:
<body topmargin="0" leftmargin="0" text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<img src="bilder/kopfzeile.JPG" width="100%" height="100%" border="0" alt="">
</body>


</body>
</html>
Angehängte Datei(en)
Angehängte Datei  Unbenannt.GIF ( 169.7KB ) Anzahl der Downloads: 3
Angehängte Datei  Unbenannt2.GIF ( 101.32KB ) Anzahl der Downloads: 1
 
Go to the top of the page
 
+Quote Post
Flocke
Beitrag 18.04.2008 - 21:43
Beitrag #23


looks good


Gruppe: User
Beiträge: 47
Mitglied seit: 28.03.2008
Wohnort: In der Nähe von Fulda
Mitglieds-Nr.: 7.350



Wenn ich nun beispielsweise in der "Kopfzeile" das selbstgebastelte Logo mit "60%" anzeigen lasse, bleibt der weiße Strich unten davon unbeeinflusst, es ändert sich wirklich nur der rechts (wird natürlich viel breiter) Das spricht doch auch dafür, dass sich hier Höhe und Breite nicht automatisch anpassen. Bei dem Logo war ich mir nicht so sicher, weil es ein Stückelwerk aus drei Bildern ist, die ich in Paint zu einem zusammengesetzt und dann gespeichert habe. Die Buttons in der Navigation haben diese Funktion auch nicht mehr, die habe ich garnicht erst eingestellt und ich habe den selben Versuch wie in der Kopfzeile gemacht.

flocke
Go to the top of the page
 
+Quote Post
Thomas
Beitrag 19.04.2008 - 3:11
Beitrag #24


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



Kopfzeile:

Das Studium von SELFHTML ergibt: "bewirkt die Angabe width="100%", dass die Grafik über die gesamte Breite des Anzeigefensters (abzüglich der Seitenränder der angezeigten Webseite) dargestellt wird". Mithin musst du also dafür sorgen, dass es keine Seitenränder gibt. CSS ist hier dein Freund und mit folgendem HTML-Code für die Kopfzeile sollte das "L" verschwinden.

HTML
<body style="padding: 0; margin: 0;">
<img src="kopf.gif" width="100%" height="100%" border="0" alt="">
</body>

Auf Sinn und Unsinn dieser Skalierung gehe ich hier nur ganz kurz ein: Da es heutzutage sowohl Bildschirme mit einem 4-zu-3-Seitenverhältnis als auch mit einem 16-zu-9-Seitenverhältnis gibt, wird deine Grafik je nach benutzter Hardware beim Besucher recht seltsam aussehen (und das betrifft nur Browser-Fenster in voller Bildschirmgröße, ist das Fenster selbst noch skaliert, wird es schnell ganz gruselig). Aber damit wird man wohl sowieso leben, wenn man den Browsern das Skalieren überlässt (auch dazu gibt es ja eine kurze Info bei SELFHTML).

Ergänzender Hinweis: Die von dir verwendeten Attribute topmargin und leftmargin beeinflussen nur den oberen und den linken Rand, nicht aber den rechten und den unteren. Zudem sind sie nicht offizieller Sprachbestandteil in HTML 4.x - auch hier hilft gelegentlich eine kurze Nachforschung bei SELFHTML. Und selbst wenn du CSS eigentlich "erstmal lassen möchtest", rate ich dir dringend, nicht mit solchen Attributen aus der Anfangszeit von HTML zu arbeiten - du tust dir damit in meinen Augen keinen Gefallen.
Go to the top of the page
 
+Quote Post
Thomas
Beitrag 19.04.2008 - 3:34
Beitrag #25


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



Navigation:

Grundsätzlich kann ich für die Eingrenzung solcher Phänomene immer nur empfehlen, dafür zu sorgen, dass man beim Testen sieht, wo die Elemente anfangen und wo sie aufhören. Im aktuellen Fall habe ich das erreicht, indem ich einfach abwechselnd rote und grüne Grafiken von den fast schwarzen Hintergrund gesetzt habe. Da erkennt man deutlich mehr, als wenn man Grafiken mit fast schwarzem Rand vor fast schwarzen Hintergrund setzt. Der Testquelltext sieht dann so aus:

HTML
<body topmargin="0" leftmargin="0" text="#000000" bgcolor="#07040C" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<img src="rot.gif" width="100%" height="10%" border="0" alt="">
<img src="gruen.gif" width="100%" height="10%" border="0" alt="">
<img src="rot.gif" width="100%" height="10%" border="0" alt="">
<img src="gruen.gif" width="100%" height="10%" border="0" alt="">
<img src="rot.gif" width="100%" height="10%" border="0" alt="">
<img src="gruen.gif" width="100%" height="10%" border="0" alt="">
<img src="rot.gif" width="100%" height="10%" border="0" alt="">
<img src="gruen.gif" width="100%" height="10%" border="0" alt="">
<img src="rot.gif" width="100%" height="10%" border="0" alt="">
<img src="gruen.gif" width="100%" height="10%" border="0" alt="">
</body>

Die Darstellung in FF und IE kann man den anhängenden Screenshots entnehmen. Hier erkennt man recht schnell, wo der Hund begraben liegt: Zum einen mal wieder in den Seitenrändern, zum anderen aber auch noch darin, dass die Grafiken im IE Abstand zueinander haben. Dieser Abstand kann jetzt aber ausnahmsweise nicht mit CSS behoben werden, da er dadurch entsteht, dass zwischen den Grafiken im HTML-Code jeweils ein Zeilenumbruch steht. Nimmt man den raus und erzeugt eine einzige Spaghetti-Zeile, gehts auch im IE. Somit also insgesamt:

HTML
<body style="padding: 0; margin: 0;">
<img src="rot.gif" width="100%" height="10%" border="0" alt=""><img src="gruen.gif" width="100%" height="10%" border="0" alt=""><img src="rot.gif" width="100%" height="10%" border="0" alt=""><img src="gruen.gif" width="100%" height="10%" border="0" alt=""><img src="rot.gif" width="100%" height="10%" border="0" alt=""><img src="gruen.gif" width="100%" height="10%" border="0" alt=""><img src="rot.gif" width="100%" height="10%" border="0" alt=""><img src="gruen.gif" width="100%" height="10%" border="0" alt=""><img src="rot.gif" width="100%" height="10%" border="0" alt=""><img src="gruen.gif" width="100%" height="10%" border="0" alt="">
</body>

Der aufmerksame Beobachter wird noch feststellen, dass der IE (zumindest bei mir in der 7er Version) trotz einer Gesamthöhe des Seiteninhalts von 100% einen vertikalen Scrollbalken zeigt. Bei deinem Konstrukt sollte das aber egal sein, da du mit dem Attribut scrolling="no" die Scrollbalken für den jeweiligen Frame abstellen kannst.

Hilft dir das weiter?
Angehängte Datei(en)
Angehängte Datei  ff.gif ( 4.14KB ) Anzahl der Downloads: 4
Angehängte Datei  ie.gif ( 4.71KB ) Anzahl der Downloads: 3
 
Go to the top of the page
 
+Quote Post
Flocke
Beitrag 19.04.2008 - 8:14
Beitrag #26


looks good


Gruppe: User
Beiträge: 47
Mitglied seit: 28.03.2008
Wohnort: In der Nähe von Fulda
Mitglieds-Nr.: 7.350



Danke Thomas, das hat geholfen.

Aber die "topmargin" und "leftmargin" Sachen habe ich gemacht weil Phase 5 mir das angeboten hat wenn ich auf "F10" bin, woher soll ich denn wissen dass man das nicht mehr macht?

Das weiße "L" ist jetzt weg und ich habe diese Einstellung mal für alle Seiten übernommen.

Allerdings macht der FF jetzt wieder Probleme, denn jedesmal wenn ich einen der Button in der Navigation anklicke erscheintdirekt über dem Buttonrand eine feine weiße Linie die aus kleinen Punkten besteht. Bevor ich überall die Hintergrundfarbe entfernt habe, sah diese Linie wieder wie ein zur Seite gekipptes "L" aus. Das macht wieder nur der FF.

Kann man in Phase 5 eigentlich diese nun entstandene "Spaghettireihe" (die im übrigen das Problem im IE vollsteändig gelöst hat, danke dafür) irgendwie etwas übersichtlicher darstellen? Wenn ich jetzt was ändern will muss ich ewig suchen da ja alles in ein er sehr langen Zeile steht....


flocke, die langsam kein "L´s" mehr sehen kann und den FF immer weniger mag...

Der Beitrag wurde von Flocke bearbeitet: 19.04.2008 - 8:36
Go to the top of the page
 
+Quote Post
Flocke
Beitrag 19.04.2008 - 8:47
Beitrag #27


looks good


Gruppe: User
Beiträge: 47
Mitglied seit: 28.03.2008
Wohnort: In der Nähe von Fulda
Mitglieds-Nr.: 7.350



Du hast mich da auf etwas gestoßen, an das ich noch garnicht gedacht habe. Andere Bildschirme, andere Bildschirmformate. Bei einen 16:9 dürfte das ja ziemlich verzerrt werden. Wie kann man das denn Lösen?
Vielleicht gebe ich für die Höhe und Breite meiner Grafik in der Kopfzeile doch einen Fixwert an, setze sie zentral und gebe wieder die Hintergrundfarbe schwarz an. Dadurch würde doch dann mein Logo nicht verezerrt werden, sondern je nach Bildschirm eventuelle ein schwarzer Rand drumherum sein. Oder?

Ist es eigentlich besser Prozentangaben zu machen, oder sollte die Navigation und die Kopfzeile besser eine bestimmte Breite haben. Immerhin will ich dass diese Seite nicht total gruselig aussieht.

flocke
Go to the top of the page
 
+Quote Post
Thomas
Beitrag 19.04.2008 - 13:26
Beitrag #28


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



ZITAT(Flocke @ 19.04.2008 - 9:14) *
Aber die "topmargin" und "leftmargin" Sachen habe ich gemacht weil Phase 5 mir das angeboten hat wenn ich auf "F10" bin, woher soll ich denn wissen dass man das nicht mehr macht?

Das kannst du nur wissen, wenn du dich z. B. bei SELFHTML informierst. P5 ist leider auch nicht 100%ig dagegen gefeit, ab und zu gegen Standards zu verstoßen.

ZITAT(Flocke @ 19.04.2008 - 9:14) *
Allerdings macht der FF jetzt wieder Probleme, denn jedesmal wenn ich einen der Button in der Navigation anklicke erscheintdirekt über dem Buttonrand eine feine weiße Linie die aus kleinen Punkten besteht.

Diese Linie kennzeichnet den angeklickten (aktiven) Verweis. Die erscheint auch, wenn du mit der Tabulatortaste die einzelnen Elemente durchläufst und macht prinzipiell durchaus Sinn. Meines Wissens gibt es keine Möglichkeit, die abzustellen - aber vielleicht kann dir (und mir) da ein anderer der Mitlesenden mehr verraten.

ZITAT(Flocke @ 19.04.2008 - 9:14) *
Kann man in Phase 5 eigentlich diese nun entstandene "Spaghettireihe" (die im übrigen das Problem im IE vollsteändig gelöst hat, danke dafür) irgendwie etwas übersichtlicher darstellen? Wenn ich jetzt was ändern will muss ich ewig suchen da ja alles in ein er sehr langen Zeile steht....

[STRG]-[W] und [STRG]-[ALT]-[W] ("Einstellungen"/"Editor Einstellungen ..."/"Zeilenumbruch" und "Zeilenumbruch am rechten Rand"). Eine andere Alternative (die auch ohne P5 funktioniert) wäre es, innerhalb der Tags Zeilenumbrüche zu platzieren, z. B.
HTML
<body style="padding: 0; margin: 0;">
<img
src="rot.gif" width="100%" height="10%" border="0" alt=""><img
src="gruen.gif" width="100%" height="10%" border="0" alt=""><img
src="rot.gif" width="100%" height="10%" border="0" alt=""><img
src="gruen.gif" width="100%" height="10%" border="0" alt=""><img
src="rot.gif" width="100%" height="10%" border="0" alt=""><img
src="gruen.gif" width="100%" height="10%" border="0" alt=""><img
src="rot.gif" width="100%" height="10%" border="0" alt=""><img
src="gruen.gif" width="100%" height="10%" border="0" alt=""><img
src="rot.gif" width="100%" height="10%" border="0" alt=""><img
src="gruen.gif" width="100%" height="10%" border="0" alt="">
</body>
(man möge mich mit Quellenangabe korrigieren, falls das gegen einen Standard verstößt).

ZITAT(Flocke @ 19.04.2008 - 9:47) *
Vielleicht gebe ich für die Höhe und Breite meiner Grafik in der Kopfzeile doch einen Fixwert an, setze sie zentral und gebe wieder die Hintergrundfarbe schwarz an. Dadurch würde doch dann mein Logo nicht verezerrt werden, sondern je nach Bildschirm eventuelle ein schwarzer Rand drumherum sein. Oder?

Das wäre eine denkbare Lösung.

ZITAT(Flocke @ 19.04.2008 - 9:47) *
Ist es eigentlich besser Prozentangaben zu machen, oder sollte die Navigation und die Kopfzeile besser eine bestimmte Breite haben. Immerhin will ich dass diese Seite nicht total gruselig aussieht.

Elemente, die nicht wirklich skalierbar sind (und dazu zählen in der Regel Grafiken mit Text darin) sollte man nicht skalieren. Elemente, die ein bestimmtes Seitenverhältnis haben (und dazu zählen in der Regel Grafiken, die aus mehr als ein paar Farbflächen bestehen) sollte man nicht so skalieren, dass das Seitenverhältnis verändert wird. Ansonsten ist das eine der Fragen, auf die du 5 verschiedene Antworten erhältst, wenn du 3 Leute fragst. Such mal bei Google nach "liquid layout" oder "fluid layout", dort wirst du jede Menge Stoff zu dem Thema finden. Ich persönlich halte ein fixes Layout in der Regel für angebrachter, da es leichter umzusetzen ist.
Go to the top of the page
 
+Quote Post
Flocke
Beitrag 19.04.2008 - 20:06
Beitrag #29


looks good


Gruppe: User
Beiträge: 47
Mitglied seit: 28.03.2008
Wohnort: In der Nähe von Fulda
Mitglieds-Nr.: 7.350



Ok, danke Thomas.
Werde danach mal googeln.

Was mich aber wundert ist dass diese feine gepunktete Linie vor den Veränderungen nicht da war. Kurzzeitig (ich glaube bis ich top- und leftmargin verändert habe) war es ein zur seite gekipptes "L" und jetzt nur noch diese Linie... Aber egal, damit kann ich leben.

Flocke
Go to the top of the page
 
+Quote Post
Thomas
Beitrag 19.04.2008 - 20:46
Beitrag #30


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



ZITAT(Flocke @ 19.04.2008 - 21:06) *
Aber egal, damit kann ich leben.

Ich auch wink.gif - viel Spaß beim googlen.
Go to the top of the page
 
+Quote Post
Google Bot
Beitrag
Beitrag #


Google Ads









Go to the top of the page
 
Quote Post

5 Seiten V  < 1 2 3 4 5 >
Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 28.03.2024 - 23:36

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here