bitte hilfe für erste seite

b_sumo

hallo leute,
ich bin anfänger und erstelle gerade meine erste seite.
irgendwie habe ich mich verfranst,denn die unterschiedlichen browser erstellen unterschiedliche bilder.könnt ihr mal bitte nachsehen,wo's hakt?
hier meine probleme:
so ,wie bei test_1 im IE solls aussehen
http://people.freenet.de/b_sumo/test_1/test_1.html
das problem:
-es zeigt sich kein farbiger scrollbalken im IE
-bei Opera/firefox verschiebt sich das lk. kästchen
-Netscape verweigert sich ganz

bei test_2 habe ich einen komment vor doc gesetzt
http://people.freenet.de/b_sumo/test_1/test_2.html
-nun ist der scrollbalken farbig bei IE
aber der obere balken hat sich verschoben
-bei den anderen browsern das gleiche problem ,wie bei test _1

liebe grüsse bianca

b_sumo

hallo ,ich bin's nochmal,weiss denn gar keiner eine antwort?
gruß bianca

sejuma

Die Scrollangaben soll man für head, body und content definieren, z.B. so:

Code

html, body, b4
{ CSS-Angaben für Scollbar}
[code]
siehe [url]http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm[/url]


Die Verschiebungen können mehrere Ursachen haben:


Für margin- und Breitenangaben verwendest du % und Pixel. Da kommen einige Browser mit den Umrechnungen nicht klar. Verwende deshalb mal einheitliche Größenangaben.


Die vielen positions absolute kannst du normalerweise weglassen, falls du bestimmte Container nicht gezielt überlagern willst. Den gleichen Effekt erreichst du bei einem normalen Layout meist unproblematischer mit float-Angaben.


Schließlich kommen noch die Box- und Pixel-Bugs des IE in Betracht.
Deshalb solltest du mal zunächst deine Seite so anpassen, dass sie im FF ordentlich aussieht. Wenn's dann mit dem IE noch nicht hinhaut gibt's einige Tricks, mit denen man auch den IE trimmen kann.

Alles anzeigen

b_sumo

hallo sejuma,danke erstmal für deine hilfe,
-scrollb ist jetzt da,veränderung bei b3 habe ich ausgelassen,da er eine andere scrollfarbe hat

Für margin- und Breitenangaben verwendest du % und Pixel. Da kommen einige Browser mit den Umrechnungen nicht klar. Verwende deshalb mal einheitliche Größenangaben.

-habe ich gemacht,bei morzilla ist es o.k.
-bei opera wird allerdings obere balken verlängert angegeben
-farbe von bi rahmen wird zwar anders dargestellt,damit kann ich aber leben(gibt es eine farbtabelle,deren werte überall ,bei allen browsern ,gleich angezeigt werden?)

Den gleichen Effekt erreichst du bei einem normalen Layout meist unproblematischer mit float-Angaben.

mhm,was ist float?gibt es ein tutorial dafür?

Schließlich kommen noch die Box- und Pixel-Bugs des IE in Betracht.
...und was sind bugs

tja,und firefox verweigert sich immer noch
http://people.freenet.de/b_sumo/test_3/test_3.html
grüsse bianca

sejuma

Mit float kannst du bestimmen, ob die Elemente (div's) links oder rechts stehen bzw. auf welcher Seite sie dann von anderen Elementen "umflossen" werden.
In Verbindung mit entsprechenden margin-Angaben erreichst du dann auch die gewünschte Positionierung.
siehe http://www.css4you.de/float.html
sowie Layout-Beispiele http://www.css4you.de/wslayout1/index.html

Die Pixel-Bugs des IE sind dadurch verursacht, dass der IE die padding- und margin-Abstände in bestimmten Fällen nicht standardkonform berechnet und somit Abstände und Boxgrößen mitunter abweichend von anderen Browsern ausfallen. Lässt sich aber lösen.

Deshalb: Versuch erst mal, dass du alles für den Firefox ordentlich hinbekommst. Später kann man dann für den IE noch optimieren.
Ich seh mir deine Seite heut' Abend nochmal im FF an. Hab momentan keine Gelegenheit dazu.

sejuma

So, hab mal jetzt etwas zusammengebastelt. Wie ich herausbekommen hab' unterstützt der FF keine farbigen scrollbars. Musst dann mit ner grauen leben. Bevor du deinen Code ersetzt, mach dir mal vorsichtshalber eine Sicherungskopie.

viel Erfolg!

CSS:

Code

body{
       background-color:#FFFFCC;
       background-image:url(logo_1.jpg);
       background-repeat:repeat;
       font-family:'Century Gothic','Cataneo BT';
       font-size:100.01%;
       overflow:auto;
       scrollbar-base-color:#FFCC66;
       scrollbar-3d-light-color:#FFCC99;
       scrollbar-arrow-color:#FFCC99;
       scrollbar-darkshadow-color:#990000;
       scrollbar-face-color:#FFCC99;
       scrollbar-highlight-color:#FFFFCC;
       scrollbar-shadow-color:#990000;
       scrollbar-track-color:#FFCC99;
       scrollbar-arrow-color:#990000;




       }


       #all


       { margin: 0 auto;
       	width:800px;}


            #b1 {
            float:left;
            width:100%;
            margin-top:10px;
            background-color:#FFCC99;
            color:#990000;
            font-family:'Century Gothic','Cataneo BT';
            font-size:2em;
            text-align:center;
            font-weight:bolder;
                          }


            #bi {
            float:left;
            width:85px;
            height:91px;
            background-color:#FFCC99;
            border-color:#990000;
            border:5px;
            border-style:solid;
            }
#head {
            float:left;
            width:700px;
            padding-top:30px;
            padding-left:0px;
            height:px;
            background-color:#FFCC99;
            text-align:center;
            }


            #b2 {
            float:left;
            width:130px;
            height:430px;
            background-color:#FFCC99;
            padding-top:50px;
            }




            #b3 {
            float:left;
            width:663px;;
            height:473px;
            background-color:#FF9966;
            border:3px solid #990000;
            overflow:auto;
            text-align:center;
            color:#990000;
            scrollbar-base-color:#FF9966;
            scrollbar-3d-light-color:#990033;
            scrollbar-arrow-color:#990033;
            scrollbar-darkshadow-color:#000000;
            scrollbar-face-color:#FF9966;
            scrollbar-highlight-color:#FFCC99;
            scrollbar-shadow-color:#990000;
            scrollbar-track-color:#FF9966;
            scrollbar-arrow-color:#990000;
            }


        #b2 ul, li
        {margin-left:10px;
        display:block;
        list-style-type:none;}


       a:link {color:#FF9966; text-decoration:none; background-color:#FFCC99; }
       a:visited {color:#FF9966; text-decoration:none; }
       a:hover {font-weight:bolder; color:#990000; text-decoration:none; background-color:#FFFFCC; }
       a:active {color:#990000; text-decoration:none; background-color:#FFCC99; }

Alles anzeigen

HTML zwischen <body> und </body>:

Code

<div id="all">


<div id="b1">
<div id="bi">
</div>
<div id="head">Schrift zum einsetzen</div>
</div>


<div id="b2">
<ul>
[*][url='test_1.html']Seite 1[/url]
  [*][url='test_2.html']Seite 3[/url]
  [*][url='test_3.html']Seite 4[/url]
  [*][url='test_4.html']Seite 5[/url]
[/list]
</div>
<div id="b3">
Der,den Weisheit m&auml;chtig macht,muß g&uuml;tig sein,um die Macht zu erhalten;
                    sonst wird er sie verlieren.






Denjenigen,den Weisheit m&auml;chtig gemacht hat und
                    der durch G&uuml;te diese Macht erhalten kann,wird das gemeine Volk dennoch nicht
                    achten,wenn er nicht W&uuml;rde im Umgang mit dem ihm zeigt.






Der, dem Weisheit Macht
                    gegeben hat und der gütig genug ist,um diese Macht zu erhalten,aber auch Würde im
                    Umgang mit dem gemeinem Volk zeigt, ist trotzdem ein schlechter Herrscher,wenn er nicht
                    im Einklang mit den Riten und Formen handelt.Der,den Weisheit m&auml;chtig macht,muß g&uuml;tig sein,um die Macht zu erhalten;
                    sonst wird er sie verlieren.






Denjenigen,den Weisheit m&auml;chtig gemacht hat und
                    der durch G&uuml;te diese Macht erhalten kann,wird das gemeine Volk dennoch nicht
                    achten,wenn er nicht W&uuml;rde im Umgang mit dem ihm zeigt.






Der, dem Weisheit Macht
                    gegeben hat und der gütig genug ist,um diese Macht zu erhalten,aber auch Würde im
                    Umgang mit dem gemeinem Volk zeigt, ist trotzdem ein schlechter Herrscher,wenn er nicht
                    im Einklang mit den Riten und Formen handelt.Der,den Weisheit m&auml;chtig macht,muß g&uuml;tig sein,um die Macht zu erhalten;
                    sonst wird er sie verlieren.






Denjenigen,den Weisheit m&auml;chtig gemacht hat und
                    der durch G&uuml;te diese Macht erhalten kann,wird das gemeine Volk dennoch nicht
                    achten,wenn er nicht W&uuml;rde im Umgang mit dem ihm zeigt.






Der, dem Weisheit Macht
                    gegeben hat und der gütig genug ist,um diese Macht zu erhalten,aber auch Würde im
                    Umgang mit dem gemeinem Volk zeigt, ist trotzdem ein schlechter Herrscher,wenn er nicht
                    im Einklang mit den Riten und Formen handelt.Der,den Weisheit m&auml;chtig macht,muß g&uuml;tig sein,um die Macht zu erhalten;
                    sonst wird er sie verlieren.






Denjenigen,den Weisheit m&auml;chtig gemacht hat und
                    der durch G&uuml;te diese Macht erhalten kann,wird das gemeine Volk dennoch nicht
                    achten,wenn er nicht W&uuml;rde im Umgang mit dem ihm zeigt.






Der, dem Weisheit Macht
                    gegeben hat und der gütig genug ist,um diese Macht zu erhalten,aber auch Würde im
                    Umgang mit dem gemeinem Volk zeigt, ist trotzdem ein schlechter Herrscher,wenn er nicht
                    im Einklang mit den Riten und Formen handelt.Der,den Weisheit m&auml;chtig macht,muß g&uuml;tig sein,um die Macht zu erhalten;
                    sonst wird er sie verlieren.






Denjenigen,den Weisheit m&auml;chtig gemacht hat und
                    der durch G&uuml;te diese Macht erhalten kann,wird das gemeine Volk dennoch nicht
                    achten,wenn er nicht W&uuml;rde im Umgang mit dem ihm zeigt.






Der, dem Weisheit Macht
                    gegeben hat und der gütig genug ist,um diese Macht zu erhalten,aber auch Würde im
                    Umgang mit dem gemeinem Volk zeigt, ist trotzdem ein schlechter Herr
        </div>
        </div>

Alles anzeigen

b_sumo

hallo sejuma,
ich bin schwer begeistert ,danke ,dass du dir so viel mühe gemacht hast.darf ich deine korrektur für meine private seite übernehmen?
auf die gefahr hin,dass ich nerve,aber noch eine klitzekleine frage(n):

-habe alle varianten durchgespielt,wo denn html hin kommen könnte,
...du schreibst..zwischen body,/body.heisst das,dass html gleich unter body kommt,vor div id="all" und wird er dann ,ganz unten ,unterm text wieder geschlossen,vor /body.
ist vielleicht eine ganz doofe frage,aber ich hatte mal gelernt,dass html ganz oben steht und unten als letztes geschlossen wird,ist das dann nicht richtig?
wie gesagt,habe sämtliche varianten ausprobiert,aber das ergebnis ist bei netscp ,dass das hintergrundbild nun verdoppelt ist.(immerhin zeigt er dank deine hilfe alles an )
-damit ich später mal nicht schon wieder mit problemen mit netscp komme,wo könnte ich denn nachsehen,welche richtige codierung dieser browser benötigt ?
grüße bianca

sejuma

Ja, den Code kannst du übernehmen, passt eh nicht in meine HP
Allerdings unter einer "Bedingung": Arbeite dich mal noch etwas in die Materie ein, damit du ihn auch verstehst. Dann tust du dir künftig mit allem leichter

Der <html> Tag sitzt bei dir schon an den richtigen Stellen, da sollst du auch nichts ändern. Ich meinte damit, dass du meinen HTML-Code innerhalb des body-Bereiches einfügen solltest.
Also nach <body> käme dann <div id="all"> und der Rest.
Ich hab mir lediglich erspart, den kompletten Quelltext deiner html-Datei zu wiederholen, sondern hab nur die für die Seitengestaltung relevanten Angaben reingestellt.

b_sumo

....alles paletti,jetzt habe ich es gerafft ,dann werde ich mich mal schlau machen,wo die gebrauchsanweisung für netscape liegt ,such..such..,bis bald ,gruss bianca

sejuma

Die Extra-Arbeit für den Netscape solltest du dir sparen.
Bis Netscape 4.x hatte der Browser generell Probleme mit CSS und selbst ab Version 6 unterstützt er nicht die aktuelle CSS2-Version bzw. interpretiert sie fehlerhaft.
Ich denk, dass der Netscape eher zu den aussterbenden Browsern gehört, so dass du darauf keine extra Rücksicht nehmen solltest.
Hauptsache es klappt mit IE, FF und Opera.
http://wwwbs.informatik.htw-dresden.de/svortrag/ai99/…terschiede.html

b_sumo

na super,da bin ich ja beruhigt-danke auch für den tollen link,der licht in's dunkel bringt,
einen schönen tag noch,gruss bianca

bitte hilfe für erste seite

Tags

Benutzer online in diesem Thema