• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

scrollbalken beim klicken

Status
Für weitere Antworten geschlossen.
Dark D.

Dark D.

Neues Mitglied
Hallo zusammen,

in einem "alpha-design" von mir (BJW-USH:) kommt beim klicken auf einen link in der Navi immer ein scrollbalken.
Warum?
Wie bekomm ich den weg?

mfG,
Markus

EDIT: Noch ein Problem:
Obwohl ich für die <ul> margin: 1%; angegeben habe, ist links kein Abstand.
 
Zuletzt bearbeitet:
Dark D. schrieb:
..beim klicken auf einen link in der Navi immer ein scrollbalken.
Warum?
Wie bekomm ich den weg?
Zum Vergrößern anklicken....
Beim Draufklicken wird der Link "active". Manche Browser zeichnen dann eine dünne, geriffelte Linie um den Link. Der verbraucht etwas Platz (so meine Vermutung).
Weil du allen Elementen overflow: auto gegeben hast, erscheinen dann die Scrollbalken. Entferne den Eintrag einfach aus der css-Datei.
Code: 
* {
    overflow: auto;
}
Obwohl ich für die <ul> margin: 1%; angegeben habe, ist links kein Abstand.
Zum Vergrößern anklicken....
Doch, daß wird schon berücksichtigt (jedenfalls im ff2.0). Erhöhe den Wert mal auf 5%. Dann wirst du es sehen.
 
Hi,

Dark D. schrieb:
Hallo zusammen,
in einem "alpha-design" von mir (BJW-USH:) kommt beim klicken auf einen link in der Navi immer ein scrollbalken.
Warum?
Wie bekomm ich den weg?
mfG,
Markus
EDIT: Noch ein Problem:
Obwohl ich für die <ul> margin: 1%; angegeben habe, ist links kein Abstand.
Zum Vergrößern anklicken....

Du hast aber noch eine Reihe mehr Probleme:

div#content kommt im Quelltext nach der ul#navi und ul#navi hat float:left.
Wenn du also overflow:auto rausnimmst schiebt sich die navi über div#content.
div#content und ul#navi sind Geschwister.

Bei float:left wandert das gefloatete Element in die obere linke Ecke des Elternelements (body!).

Die h1-Überschrift gehört normal in den header und der kommt im Quelltext normal an den Anfang (so man denn keinen #wrapper hat!).
ul#navi wird links gefloatet und div#content rechts gefloatet (oder auch links).
Dann mußt du natürlich noch clearen, entweder hardcodiert nach div#content (und vor dem footer) oder mit Easy Clearing.

Das mit dem absolut positioierten footer tät ich auch nicht so machen.
Versuchs doch mal mit Foot Sticker Alt.
Das ist sicher die bessere Wahl.

koslowski
 
Das versteh ich nicht :oops::cry:

Kannst du mir das bitte noch einmal langsam erklären?
Ich pass auch gut auf :mrgreen:
 
Also, hab das jetzt mal probiert mit dem H1 am Anfang un div#content rechts zu floaten.
Is das jetz richtig so?
 
Hi,

soll es denn so aussehen, d.h. die navi ganz oben links?

Oder soll es so etwas wie Überschrift ganz oben, dann zwei Spalten (navi und textbereich) und einen footer drunter.
Dann mußt du noch einiges ändern

overflow:auto ist immer noch drin. Schmeiss das raus, das hat da nix zu suchen.

Beschreib doch mal wie es letztlich aussehen soll.
Was soll noch an Inhalten wo rein, soll die Überschrift ganz nach oben etc.

Dann kann ich auch präziser helfen.;)

koslowski
 
Es sollen drei Kästen werden.
Links ein Kasten mit einem kleinem Logo oben und unterhalb die Navi.
Recht soll der umrandetete Content-Kasten sein,
mit, auf Höhe des Logos, der Überschrift und, auf Höhe der Navi, dem Inhalt.
Darunter kommt, mit margin-top: 1%; noch der Footer (wie jetzt schon).

Danke, die scrollbars beim Klicken sind jetzt weg :grin:
 
Hi,

Struktur würde ich so machen:
HTML: 
<body>
  <div id="nav">
       <img....Logo />
        <ul></ul>
   </div>
   <div id="content">
      .....
    </div>
    <div id="footer">
     </div>
</body>
Ich würde #nav noch links floaten lassen, oder du kannst natürlich auch #content und #nav links floaten lassen funktioniert genauso (clearen nicht vergessen!).

Das sieht doch schon besser aus jetzt.;)

koslowski

ps. wenns noch irgendwo haken sollte, poste es einfach hier.
 
Aber dann ist doch H1 nicht ganz oben im Quelltext, sollte das nicht so sein?

Ja, es hackt tatsächlich:
Obwohl ich margin: 1%; für den div#content angegeben habe,
ist der obere Abstand 2% groß.
Wenn ich 0% angebe ist der obere Abstand 1%, aber die anderen natürlich nur noch 0%.
Woran liegt das?
 
Hi,

h1 muss nicht unbedingt ganz oben stehen, sonst musst du eben einen header machen.

#content steht ja noch immer im Quelltext vor #nav und #nav floatet noch immer nicht.

Im IE6 springt deine #navi hoch und runter wenn man sie hovert.

Ursache: ul und li haben kein Layout für den IE6.

Abhilfe:
HTML: 
* html ul    { height:1%; }
* html li   { height:1%; }

So in die CSS reinschreiben dann sieht es nur der IE6, oder noch per Conditionell Comment im <head> einfügen.

Das mit dem Abstand hab ich so nicht feststellen können.

koslowski
 
Dark D. schrieb:
Is es jetz richtig im IE6?
Zum Vergrößern anklicken....
Jetzt passt der Content im IE6 nicht mehr neben Nav. Der content rutscht unter nav. Irgendwie ist content ein 1% zu Breit.

Zum clearen hab ich nav und content mit einem weiteren div umschlossen.
Nach Content und vor dem umschließenden div hab ich mit einem br gecleart

Content und nav html:
Code: 
<div>
<div id ="nav">
<img src="./layout/img/logo-mini.gif" alt="BJW-USH" />
<ul>
<li><a href="./">Startseite</a></li>
<li><a href="./bestellen.html">bestellen</a></li>
<li><a href="./kontakt.html">kontakt</a></li>
</ul>
</div>
<div id="content">

<h1>Startseite</h1>
<h2>Lieber Interessent einer eigene website</h2>
<p>
.. ben&ouml;tigen, ist <strong class="red bold">BJW-USH</strong> genau das Richtige f&uuml;r Sie.
Wir entwickeln websites f&uuml;r Sie,.. vieles mehr...<br />
<em class="red bold italic">BJW-USH</em>
</p>
    </div>
<br style="clear : both;">
</div>
Das Springen der Menüleiste im IE6 kommt vom margin-top in Prozentangaben.
Ich habe es gegen px ausgetauscht.
Die css-Datei für den IE6 kannst du leeren. Am haslayout hat es scheinbar nicht gelegen. Entfernen würde ich sie nicht, da du sie bestimmt später noch mal brauchst.


Content und nav UL css
Code: 
DIV#content { /* --- content --- */
    float: left;
    margin: 1%;
    padding: 1%;
    width: 77%;
    border: 3px solid #AAA;
    text-align: left;
}
DIV#nav UL {
    margin-top: 30px;
}
 
Zuletzt bearbeitet:
Dark D. schrieb:
Ist das wirklich nötig, mit dem <br /> zu clearen?
Zum Vergrößern anklicken....

Ich hab mir gedacht, daß da sowas kommt. Mir viel nur gerade nix anderes ein und du hattest auch sonst unnötige <br /> im Quelltext.

Aber jetzt:
Wenn du dem Umschließenden div für den IE6 height: 1% gibst, geht es auch ohne clearendes <br />.

Jetzt muß nur noch #copy für IE ans Seitenende.
Aber heute mag ich nicht mehr.
 
Dark D. schrieb:
Stimmt die Anzeige im IE6 dann?
Zum Vergrößern anklicken....
Bis auf die Fußzeile schon.
Die erscheint gleich unter content bzw nav. Je nach dem was höher ist.
Eventuell könnte man es auch so lassen.
Ich hab mir die Aufteilung (mit meinen Vorschlägen) im IE6 angesehen:
Sieht nicht unbedingt schlechter aus, nur anders als in anderen Browsern halt.


Auf die Dauer wirst du eine Möglichkeit finden müssen, mit IE6 selber zu prüfen.
Ich habe mir mit dem fertig-script von tatanka.com auf Linux/Debian beholfen. Viele verwenden Virtual PC 2007 (meisst auf win xp).
Wenn du einen alten Rechner oder eine Partition übrig hast, könntest du ein älteres Betriebssystem aufspielen.
Es gibt mehrere Möglichkeiten. Google mal nach IE7 parallel installieren.

Wichtig könnte auch der firefox 1.5 und Safari (alternativ vielleicht Konquerror/Linux) sein.
Inzwischen gibt es auch den aktuellsten Safari (3.1) für Windows-Systeme zum kostenlosen Download
 
Zuletzt bearbeitet:
Windows XP müsste ich eigentlich haben, werd mich mal mit virtuellen PCs auseinandersetzen.

Aber zu Foot Sticker Alt:
In #footer ist die Angabe margin: -7.5em ...
Ich ich gebe meine Größen nicht in em an, funktioniert das trotzdem?
Außerdem ist meine '#non-footer' nicht 100% groß.
Wie mache ich das bei mir?
 
Moin,

zum hasLayout-Prinzip schau dir doch mal folgenden Artikel an:
Über hasLayout

Der IE6 hat oft ein Problem mit %-Angaben für margin und padding, deshalb sollte man für Abstände entweder px oder noch besser em angeben.

Em und px kannst du normal problemlos mischen.

Wenn du ein Problem mit der Darstellung von irgendeinem Element im IE6/IE7 hast, liegt es in den meisten Fällen am fehlenden Layout.

Gib dann einfach mal den betreffenden Elementen probehalber Layout mit:
HTML: 
* html Element { height:1%; }
für den IE6
und
HTML: 
*+html Element  { height:1%; }
für den IE7

Wenn du das per CC einbindest kannst du natürlich das: * html und *+html weglassen weil es eh nur die angesprochene IE-Version sieht.

Dein Footer hat übrigens kein Layout!:wink:

Hier noch ein Link zu IE-Fehlern


Zu Foot Sticker alt:
Der Trick dabei ist das #footer ausserhalb von #all steht.
Da #all, html, body alle height:100%; haben wäre der footer so ausserhalb des Viewports.
Mit der negativen Marginangabe wird er wieder nach oben geholt.
Da mußt du ein bißchen probieren wie hoch die Marginangabe sein muss.

koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben