Probleme mit meinem CSS

webdoktor

webdoktor

Angesehenes Mitglied
Hallo zusammen,

wer kann mir helfen und zwar habe ich folgendes Problem bei
dieser Seite:

http://www.g-design.ch/kunden/moveyourbike/

Leider wird im Firefox der Footer ganz unten noch nicht richtige
Angezeigt d.h. wenn man die Seite kleiner macht springt der Footer einfach nach oben. Im Internet Explorer
wird alles richtig angezeigt. Wer weiss wieso es in Firefox nicht klappt! Es sollte in Firefox genau so aussehen
wie es Momentan im IE aussieht. Man kann im IE die Seite kleiner machen und der Footer bleibt unten!

Liegt wohl jrgendwie an einem Fehler im CSS! Das CSS findet Ihr hier:

http://www.g-design.ch/kunden/moveyourbike.../stylesheet.css

Danke für Eure Bemühungen.

Marco

 
Grundlegend solltest Du erstmal vernünftiges HTML und CSS erstellen. Wenn schon ein entsprechender Doctype angegeben wird, sollte man sich eigentlich auch besser an diesen halten.


http://validator.w3.org/check?uri=http%3A%...moveyourbike%2F
http://jigsaw.w3.org/css-validator/validat...&usermedium=all


Und füg dies hier mal entsprechenden zu Deiner CSS-Daten ein (ich hoffe, das funktioniert auch):

CODE html, body, #site {
  min-height: 100%;
  width: 100%;
  height: 100%;
}

html>body, html>body #site {
  height: auto;
}

#site {
  position: absolute;
  top: 0;
  left: 0;
}

#footer {
  position: absolute;
  bottom: 0;
}

<edit>Ich hatte den Footer noch vergessen</edit>


Die entsprechende HTML würde so aussehen, also müsste der #footer noch mit ins #site hineingenommen werden:


CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <body>
   <div id="site">
     <div id="header"></div>
     <div id="navi"></div>
     <div id="news"></div>
     <div id="menu"></div>
     <div id="contents"></div>
     <div id="footer"></div>
   </div>
 </body>
</html>




MfG Sascha Ahlers
 
Hallo Sasha

Zuerst mal vielen Dank für die prompte Antwort.
Habe die Fehler noch behoben welche der Validator
herausgegeben hat.

Auch die Änderungen in der css datei und html habe
ich so gemacht wie du geschriben hast. leider funktioniert
es so gar nicht..

was ist falsch...

marco
 
Ich habe gerade gesehen, dass ich ein Komma vergessen habe, ich habe es oben nochmal korrikiert. Auch hast Du vergessen die Anweisung für #site anzupassen.



MfG Sascha Ahlers
 
Hallo Sascha

habe das #site jetzt angepasst und auch das komma eingefügt.
leider geht es immer noch nicht. der footer ist jrgendwo in der
mitte und die seite ist jetzt nicht mehr zentriert.

hmm?

danke für deine hilfe!

marco

 
Hey

Glaube jetzt stimmt der footer oder? nun sollte die seite einfach wieder
in die mitte. das klappt noch nicht.

wäre cool wenn evt. fehler im css noch mitteilen könntest.

nochmals danke für die bemühungen.

marco
 
Jepp, nun geht es, der Fehler war beim #footer-Element, dort folgte nachdem "position: absolute;" bei dir nochmal "position: relative;".
wink.gif


Im ersten Feld vom CSS-Block hatte ich selber noch einen Tippfehler drinne, welchen ich oben bereits korrigiert habe, dort muss statt witdh → width stehen.
Sonst sind keine Fehler mehr vorhanden.



MfG Sascha Ahlers
 
Hallo Sasha

ja jetzt geht es zwar aber es ist nicht mehr zentriert wie du sicher
auch siehst. jetzt nur, dass die seite wieder zentriert ist!

das wäre noch das letzt!

danke nochmals!

marco
 
Änder doch einfach mal
CODE html, body, #site {
min-height: 100%;
width: 100%;
height: 100%;
}


in


CODE html, body, #site {
min-height: 100%;
height: 100%;
}

html, body {
width: 100%;
}


um.



MfG Sascha Ahlers
 
Hallo Sascha

Habe ich so umgewandelt; nützt leider nichts
die seite ist immer noch links-bündig.

hmm?

marco
 
Hallo Sascha,

nochmals danke das du mir mit dem css geholfen hast. ich habe gedacht das ich es jetzt gelöst habe aber habe bemerkt, dass es nun im IE nicht ganz bis nach unten geht. jetzt bin
ich etwas entäuscht :-( der footer stimmt zwar jetzt im Firefox d.h. dort ist er immer schön
unten aber im IE noch nicht.

schau hier:

http://www.g-design.ch/kunden/moveyourbike/

Wär super wenn Du evt. noch ein Tipp für mich hast.

Marco
 
Hi,
habe noch ein paar html Fehler gefunden:
Fehler:
CODE
<p><br>
<h1>Herzlich Willkommen</h1>


.....
.....
....

<h1>Neue hinzugefügte Bikes </h1>
</p>
<img src="images/jpg/temp_velo.jpg" alt="Neue Bikes" width="648" height="150"><br>
<br>
</p>


Richtig:

CODE <br>
<h1>Herzlich Willkommen</h1>
<p>
.....
.....
....</p>
<h1>Neue hinzugefügte Bikes </h1>
<img src="images/jpg/temp_velo.jpg" alt="Neue Bikes" width="648" height="150"><br>
<br>

 
Hallo Sascha

Danke für Dein Feedback! Nun ein Problem habe ich noch; wie obenerwähnt
ist der footer im IE nicht ganz unten d.h. am Browserfenster. Im FireFox funktioniert
es.

Hast Du eine Idee?

Gruss Marco
 
Hallo Sascha

Uff auch das ist geschafft! Nun habe ich die Ergänzungen gefunden und
das Design wird in Firefox sowie IE identisch angezeigt. Bis auf den Scroller
oben die Laufschrift wird in Firefox noch zu weit oben angezeigt. Denke das
liegt daran, dass ich den zweiten Layer neben dem "Aktuelle News" jrgendwie
falsch ausrichte. Idee?

So der erste Teil des Designs ist geschafft! Möchte mich hiermit nochmals für
Deine Bemühungen bedanken! Das gilt übrigens an alle die bei diesem Thema
mitgeschrieben haben!

Gruss Marco
 
Hallo zusammen


grrr zu früh gefreut. wenn ich bei #site das
height: 100%; mache dann zeigt es zwar im
IE nun gut an. Auch im Firefox aber sobald ich
im Firefox das Fenster kleiner mache, dann kommt
der footer mit nach oben.

grr :) wenn ich das height: 100%; wegnehme gehts
im Firefox wieder aber im IE ist es nicht mehr über die
ganze seite d.h. der Footer ganz unten am Browserrand.

Kann man jrgendwie sagen das FireFox das height: 100%;
nicht beachten soll oder gibts eine andere Lösung damit es
auch im IE stimmt.

Marco
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben