✔ Scrollbalken für 1 Sekunde, warum?

Status
Nicht offen für weitere Antworten.
-mephisto-

-mephisto-

Mitglied
Stehe mal wieder vor einem Problem bei meiner Seite.
Wenn man die einzelnen Links anklickt und die neue Seite geladen wird, erscheinen für 1 Sekunde Scrollbalken. Dann sind sie weg!
Einzig bei dem Link "Impressum" tauchen sie nicht auf. Bloß warum bei den anderen...?
Das stört mich irgendwie. Weiß jemand Abhilfe? Falls jemand auch Fehler im Quelltext findet wäre ich über eine kurze Mitteilung dankbar.

Hier der Link zu meiner Seite: http://oppelt.loftgroup.de
 
Hi,

das hängt wohl mit dem gepunkteten Fokus-Rahmen zusammen, den die Links beim Anklicken mit der linken/rechten Maustaste erhalten.
 
Hmm...
aber wenn du zum Beispiel oben auf das Logo klickst (ist ebenfalls ein Link, nämlich auf den Index)
taucht kein gepunkteter Rahmen auf, und dennoch erscheinen kurz die Scrollbalken... :mad:

Und mal angenommen es würde doch daran liegen, wie bekomme ich die Rahmen denn weg?

DAU läßt grüßen! ;)
 
Du kannst den Anzeigebereich der Links mit overflow:hidden begrenzen und so die Scrollbalken unterbinden:

Code: 
<div id="navigation">
             <div id="button_impressum">
                <a href="impressum.html" id="h_button_impressum"><i>Impressum</i> </a> </div>
             <div id="mittelstueck"></div>
             <div id="button_gaestebuch">
                <a href="gaestebuch.html" id="h_button_gaestebuch"><i>Gaestebuch</i> </a> </div>
             <div id="button_kontakt">
                <a href="mailto:test@web.de" id="h_button_kontakt"><i>Kontakt</i> </a> </div>
             <div id="mittelstueck_unten"></div>
             <div id="button_wappen">
                <a href="wappen.html" id="h_button_wappen"><i>Wappen</i> </a> </div>
             <div id="button_links">
                <a href="links.html" id="h_button_links"><i>Links</i> </a> </div>
             <div id="button_extras">
                <a href="extras.html" id="h_button_extras"><i>Extras</i> </a></div>
</div><!-- Ende #navigation -->
Code: 
#navigation                                             {
                                                        width:1024px;
                                                        height:175px;
                                                        overflow:hidden;
                                                        position:absolute;
                                                        top:425px;
                                                        left:0px;
}
Die top-Positionswerte der DIVs innerhalb von #navigation müssen dementsprechend heruntergerechnet werden: 425px -> 0px, 483px -> 58px, 542px -> 117px.
 
Also den Aufbau der einzelnen Seiten so umschreiben...?
Maik hat gesagt.:
Du kannst den Anzeigebereich der Links mit overflow:hidden begrenzen und so die Scrollbalken unterbinden:

Code: 
<div id="navigation">
             <div id="button_impressum">
                <a href="impressum.html" id="h_button_impressum"><i>Impressum</i> </a> </div>
             <div id="mittelstueck"></div>
             <div id="button_gaestebuch">
                <a href="gaestebuch.html" id="h_button_gaestebuch"><i>Gaestebuch</i> </a> </div>
             <div id="button_kontakt">
                <a href="mailto:test@web.de" id="h_button_kontakt"><i>Kontakt</i> </a> </div>
             <div id="mittelstueck_unten"></div>
             <div id="button_wappen">
                <a href="wappen.html" id="h_button_wappen"><i>Wappen</i> </a> </div>
             <div id="button_links">
                <a href="links.html" id="h_button_links"><i>Links</i> </a> </div>
             <div id="button_extras">
                <a href="extras.html" id="h_button_extras"><i>Extras</i> </a></div>
</div><!-- Ende #navigation -->
Zum Vergrößern anklicken....

Und dies hier mit in die .CSS schreiben?

Maik hat gesagt.:
Code: 
#navigation                                             {
                                                        width:1024px;
                                                        height:175px;
                                                        overflow:hidden;
                                                        position:absolute;
                                                        top:425px;
                                                        left:0px;
}
Die top-Positionswerte der DIVs innerhalb von #navigation müssen dementsprechend heruntergerechnet werden: 425px -> 0px, 483px -> 58px, 542px -> 117px.
Zum Vergrößern anklicken....

So hatte ich es verstanden. Und nach dem Umschreiben war der komplette untere Teil weg. Wie gesagt, bin Anfänger...

Kannst Du mir das idiotensicher erklären? ;)
 
Derzeit hast du die erste Button-Reihe mit top:425px im Anzeigebereich positioniert, die zweite Reihe bei 483px und die letzte bei 542px.

Da aber nun das Eltern-DIV #navigation mit top:425px im Anzeigebereich positioniert ist, und sich die Positionsangaben der eingebundenen Elemente auf seine Boxengrenze bezieht, müssen diese Werte "relativ" zu ihm gewählt werden:

Code: 
#navigation                                             {
                                                        width:1024px;
                                                        height:175px;
                                                        overflow:hidden;
                                                        position:absolute;
                                                        top:425px;
                                                        left:0px;
}

#button_impressum                                        {
                                                        position:absolute;
                                                        top:0px;
                                                        left:0px;
                                                        height:58px;
                                                        width:359px;
                                                        background-image:url(images_ahnenforschung/impressum.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }

#mittelstueck                                {
                                                        position:absolute;
                                                        top:0px;
                                                        left:359px;
                                                        height:58px;
                                                        width:306px;
                                                        background-image:url(images_ahnenforschung/mittelstueck.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }

#button_gaestebuch                                        {
                                                        position:absolute;
                                                        top:0px;
                                                        left:665px;
                                                        height:58px;
                                                        width:359px;
                                                        background-image:url(images_ahnenforschung/gaestebuch.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }


#button_kontakt                                        {
                                                        position:absolute;
                                                        top: 58px;
                                                        left:0px;
                                                        height:59px;
                                                        width:389px;
                                                        background-image:url(images_ahnenforschung/kontakt.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }

#mittelstueck_unten                        {
                                                        position:absolute;
                                                        top:58px;
                                                        left:389px;
                                                        height:59px;
                                                        width:246px;
                                                        background-image:url(images_ahnenforschung/mittelstueck_unten.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }

#button_wappen                                                {
                                                        position:absolute;
                                                        top:58px;
                                                        left:635px;
                                                        height:59px;
                                                        width:389px;
                                                        background-image:url(images_ahnenforschung/wappen.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }

#button_links                                                {
                                                        position:absolute;
                                                        top:117px;
                                                        left:0px;
                                                        height:58px;
                                                        width:512px;
                                                        background-image:url(images_ahnenforschung/links.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }

#button_extras                                                {
                                                        position:absolute;
                                                        top:117px;
                                                        left:512px;
                                                        height:58px;
                                                        width:512px;
                                                        background-image:url(images_ahnenforschung/extras.jpg);
                                                        background-position:center;
                                                        background-repeat:no-repeat;
                                                        }
 
Jetzt habe ich es verstanden. Und sowas ähnliches muß ich dann auch noch mit dem Logo machen, oder?

VIELEN DANK...!




P.S. Du bist ein Genie
 
-mephisto- hat gesagt.:
Und sowas ähnliches muß ich dann auch noch mit dem Logo machen, oder?
Zum Vergrößern anklicken....
Hier reicht die Aufnahme der overflow:hidden-Eigenschaft in der CSS-Regel für das DIV #logo:

Code: 
#logo                                                 {
                                                        position:absolute;
                                                        top:0px;
                                                        left:0px;
                                                        height:125px;
                                                        width:1024px;
                                                        background-image:url(images_ahnenforschung/familie_oppelt.gif);
                                                        background-repeat:no-repeat;
                                                        background-position:center;
                                                        overflow:hidden;
                                                        }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück