Element rutscht in nächste Zeile

Status
Nicht offen für weitere Antworten.

Blackylein

Erfahrenes Mitglied
Hallo!

Ich hab 2 Seiten gebasteln und anscheinend beide Male den gleichen Fehler gemacht.

http://st4rburst.st.funpic.de/bl4cky2/index.html
http://st4rburst.st.funpic.de/bl4cky2/css/style.css

hier rutscht der Button "Kontakt" (zumindest in IE) in die nächste Zeile, bei Firefox wird er einfach nicht angezeigt.
Die Breiten hab ich kontrolliert, müsste passen.

http://foren.b-school.at/rstksystems/index2.html
http://foren.b-school.at/rstksystems/css/style.css

Hier ist genau das selbe nur ist der rechte Container nicht sichtbar
Auch hier habe ich die Breiten kontrolliert

Bin mir sicher es ist irgend ein banaler Fehler auf den ich nur gerade nicht komme aber ich hoffe ihr könnt mir helfen.

MfG
Bl4cky
 
Hi,

zum ersten Problem:
Definiere die in .leiste enthaltenen Links mal als Blockelemente und zeichne sie zudem mit float: left aus. Ausserdem werden
die enthaltenen Bilder noch als Blockelemente definiert.
Code:
.leiste a{ display: block;
           float: left;}
.leiste a img{ display: block;}

Zum zweiten Problem:
Hier hast Du ein s vergessen!
Code:
      <div class="rechts">
      </div>
Ciao
Quaese
 
Der Grund für die Verschiebungen in der horizontalen Navigation sind die Leerzeichen / Zeilenumbrüche (= white spaces) im HTML-Quelltext zwischen <div>...</div> und den Grafik-Links.

Notiere daher mal folgende Regel für die Grafiken im Stylesheet:
Code:
img.nav {
display: block;
float: left;
}
HTML:
<div class="leiste">
    <a href="#"><img src="" class="nav"></a>
    <!-- usw. -->
</div>

In der zweiten Seite hast du das "s" der ID #rechts vergessen:

HTML:
<div id="recht">
</div>

[edit] Quaese war fixer ;)
 
Cool danke und vielen Dank für die schnelle Hilfe funktioniert jetzt alles.

Werde hier heute Abend noch ein Problem posten (is wieder so was ähnliches, das ich mit euren Lösungen aber auch nicht hinbekomm). Deswegen markier ich es noch nicht als erledigt.

MfG
Bl4cky
 
Also auf dem Safari 1.3 und dem IE:mac 5.2 besteht das Problem immer noch, und zwar genau so, wie von Dir beschrieben. Zusätzlich rutscht die Copyright-Info beim 2ten Beispiel nach oben in den Contentbereich.
lg
 
Dass bei dir der Fehler immer noch besteht liegt daran, dass ich es noch nicht raufgelade haben. Bin gerade in er Firma und habe es nur lokal auf meinem Notebook ausgebessert.

Dass das Copyright raufrutscht hab ich auch schon bemerkt, tritt allerdings nur in Opera und anscheinend auch Safari auf.
Weißt du vielleicht woran das liegt?

MfG
Bl4cky
 
Hatte noch keine Zeit mir den ganzen Quelltext durchzusehen. Aber bei verschachtelten Containern ist mir das schon aufgefallen. Wenn Du mit divs arbeitest, überprüf doch mal die vertikale Ausrichtung und die Höhenangaben.
Wenn ich nachher nocht Zeit habe kann ich es mir vielleicht anschauen.
lg.
 
Hi,

positioniere das Element mit der Klasse .foot mal relativ.
Code:
.foot{ position: relative;
       /* Deine bisherigen Deklarationen */}
Ciao
Quaese
 
Ja super, jetzt hats geklappt!

Nur das Problem ist, dass es im Opera ein Stück zu weit unten is. Das ist im Firefox nicht.

Wenn ich die Klasse .about auch auf relative setze dann steht zwar der Text schön aber die gesamte Leiste rutscht ein wenig nach rechts.
 
Hi,

bei mir steht die Schrift auch im FF etwas zu weit unten. Durch die Angabe von bottom: 2px; in .about sieht es
bei mir überall gleich aus.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.
Zurück