zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ausrichtungsproblem mit Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.06.2009, 14:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2009
Beiträge: 2
Christin befindet sich auf einem aufstrebenden Ast
Standard Ausrichtungsproblem mit Firefox

Hallo

habe mich nach langer Auszeit im Bereich Webseitenerstellung mal wieder an das ganze herangewagt. Nachdem ich festellen musste, dass "Tabellen" out sind und css nun das Mittel der Wahl ist, habe mich in den letzten Tagen ein wenig mit css beschäftigt und ein layout erstellt.
Funktioniert alles bisher ganz gut, auch wenn ich vielleicht mit Umwegen zum
Ziel gekommen bin. Allerdings rätsel ich jetzt seit einigen Stunden an einem Darstellungsproblem. Im Internet-Explorer wird die Seite so wie sie sollte angezeigt.
Internet Explorer korrekte Anzeige - Firefox falscher Abstand

Im Firefox wird der Teil "content" ein Stück nach unten gesetzt.
Das Merkwürdige: Sobald ich die Border um den Content auf 1 setze, ist auch im Firefox alles in bester Ordnung. Nur die Border soll da nicht hin.

Internet Explorer korrekte Anzeige - Firefox falscher Abstand

Wenn einer eine Lösung dafür weiss, wäre ich sehr dankbar. Verzweifel hier langsam

CSS ist noch in der html Seite enthalten, da ich noch am probieren bin, kann also beim Aufruf des Seitenquelltextes gleich mit angeschaut werden.

Lieben Gruß und danke schonmal im voraus

Christin
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2009, 15:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Ich weiß nicht, wo ich anfangen soll.

Zunächst fällt auf, dass der Umstieg von "Tabellenlayouts" zu semantischen HTML und CSS-Formatierung absolut missglückt ist. Dein Code ist die reinste Div-Suppe. Es ist nichts außer divs zu sehen. Eine Navigation gehört z.B. in einer unsortierte Liste <ul>. Mach dich am besten als erstes schlau über semantisches Markup.

Zitat:
Nachdem ich festellen musste, dass "Tabellen" out sind und css nun das Mittel der Wahl ist
Wer hat dir denn das gesagt? Tabellen sind nicht out. Man soll sie aber für den eigentlichen Zweck nutzen. Für Designzwecke sind Tabellen nicht zu nutzen. Das heißt aber nicht, dass du nun deine Seite mit CSS erstellst. CSS formatiert die im HTML-Teil angegebenen Elemente. Aber deine Seite sollte auch ohne CSS nutzbar sein.

Dann ist dein Code voller Fehler: [Invalid] Markup Validation of http://www.schattengedanken.de/test1/index2.html - W3C Markup Validator

Geändert von regloh (21.06.2009 um 15:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2009, 16:12
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Regloh hat mit seinen Hinweisen selbstverständlich recht, aber das eigentliche Problem liegt im margin-top von #c1. --> Collapsing Margins.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2009, 16:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2009
Beiträge: 2
Christin befindet sich auf einem aufstrebenden Ast
Standard

Danke ersteinmal für die schnelle Hilfe
Werde also nocheinmal in mich gehen und ersteinmal die Navi umstricken.
Dann das Problem mit den Margins mal genauer betrachten.
Aller Anfang ist halt schwer

Lg
Christin


Edit:
Nach einigem Lesen wird alles irgendwie immer unklarer.
Die Möglichkeit eine horizontale Navigation zu erstellen ist mir jetzt so halbwegs klar.
Nur noch mal zur Sicherheit ob ich das richtig verstanden habe:
Ich definiere zb. nav1, nav1 ul, nav1 li und habe nur noch einmal div in dem ich dann mit
einem div am anfang der liste und einem zum abschliessen alles schön formatiert habe.
Funktioniert auch. Jetzt habe ich das ganze mal zum testen mit Bildern gemacht.
Klappt auch prima.
Jetzt kommt der Teil an dem ich irgendwie hänge. Die Buttons sollen beim Mouseover wechseln
und jeder Button sieht anders aus und hat eine andere grösse. Da komme ich dann wieder bei
vielen divs an - für jeden Button einen da ich ja jedem Link einen anderen Button zuweise.
Oder habe ich da nur einen riesen Denkfehler?

Wahrscheinlich eine grauenvolle Anfängerfrage, aber möchte eine "schöne" Lösung für
das Layout der Seite in CSS. Habe im Moment die Zeit mich ein wenig damit zu
befassen und muss die Seite nicht in einem "Schnellgang" dahinfrickeln und das
Layout mal wieder einfach in eine Tabelle drücken und die Mouseover mit Javascript
realisieren. Denke wenn ich da mit CSS angefreundet habe, dann wird es die Arbeit
erleichtern und es wäre die elegantere Lösung für das Layout.

Wäre toll, wenn mir da jemand noch ein wenig zur Seite stehen könnte.

@EvT: Die groben Codefehler habe ich erst einmal behoben. Da muss sich einiges
beim hin und her kopieren von einer Seite in die nächste Version ergeben haben,
auf anderes habe ich überhaupt nicht geachtet - Danke.

Geändert von Christin (21.06.2009 um 18:25 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2009, 12:55
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ich glaube du hast einen Denkfehler :P Aber die hatte ich als ich angefangen habe mit CSS auch alle :P

Dein Navigation sieht ja so aus (behaupte ich jetzt einfach mal :P):
HTML-Code:
<div id="navi">
  <ul>
    <li><a href="#" title="LINK">Seite1</a></li>
    <li><a href="#" title="Link">Seite2</a></li>
  </ul>
</div>
Das ist eine ganz normale Liste.
Über CSS bekommt die jetzt eine Formatierung.
Code:
div#navi ul {
  list-style:none; /* Wir wollen keine Listenzeichen vor den Punkten */
}

div#navi ul li {
  float:left; /* Die Liste horizontal */
  margin-left:25px; /* Abstand zwischen den Punkten */
}

div#navi ul li a,
div#navi ul li a:link,
div#navi ul li a:visited { /* Und jetzt kommen die Links */
  background-image:url('bild.jpg'); /* Hintergrundbild */
  background-repeat:no-repeat; /* Wiederholungseigenschaft des Bildes */
  display:block; /* Element als Blockelemt ausrichten, damit wir Höhe und Breite zuordnen können /*
  height:30px; /* Höhe */
  width:50px; /* Breite */
  color:#000; /* Linkfarbe */
  text-decoration: none; /* Der Strich unterm Link verschwindet */
  text-align:center; /* Textausrichtung mittig (wenn gewünscht) */
  padding-top: 7px; /* Vertikale ausrichtung - Padding _muss_ man von Höhe bzw. Breite abziehen, da es addiert wird. Bsp: Breite 30px + Padding 7px = tatsächliche Breite 37px.
    Um wieder 30px in der Breite zu bekommen muss man Breite auf 23px angeben.*/
}

div#navi ul li a:hover,
div#navi ul li a:active,
div#navi ul li a:focus { /* Nun kommen noch die Hover-Effekte */
  color:#fff; /* Farbe nach weiß ändern */
  text-decoration:underline; /* Der Link soll unterstrichen werden */
  background-image:url('bild_hover.jpg'); /* Ein anderes Bild zeigen */
}
Nun haben wir alle Links mit den gleichen Eigenschaften. Um den Links entsprechend andere Eigenschaften zuzuordnen musst du über Klassen gehen. Diese bekommen die Links, nicht das div oder die Liste.

Viel Erfolg
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Benötige dringend Hilfe mit CSS in Firefox & IE :( r4m0n CSS 3 20.03.2009 12:12
Synchroner XMLHttpRequest und Firefox reagiert nicht mehr kristian Javascript & Ajax 3 05.08.2008 17:10
Problem mit 3-spaltigem Layout im Firefox Imhotep CSS 4 08.07.2008 18:17
Firefox 1.5 Beta 1 Pablo Offtopic 19 13.09.2005 19:56
Bitte testen mit Firefox und IE (Vergleich!) Spider Site- und Layoutcheck 8 23.09.2004 23:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:09 Uhr.