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

Grafiken verursachen Fehler im Layout

Status
Für weitere Antworten geschlossen.
O

Oper@ter

Neues Mitglied
Hallo Leute,

ich bin bisher mit meinen Problemen bei Webseiten immer ohne Hilfe ausgekommen. Doch jetzt dachte ich mal ich könnte mich in einem Forum regestrieren, und evt. auch mal anderen Leuten bei ihren Problemen uns helfen.

Naja, erst mal habe ich ein Problem.

Ich habe mir gestern ein neues Design erstellt, es in Stücke geschnitten, und in eine Webseite gebastelt.

Dazu habe ich immer alle Grafik über CSS als background-image in das Layout eingefügt.

Später ist mir denn aufgefallen, dass ich die Buttens für die Navigation auch als background-image eingefügt habe. Deswegen habe ich die Grafiken jetzt nicht mehr als bg drin, sonder eine eine Tabelle eingefügt, und um sie herum ein Link gemacht:

HTML: 
                        <td>
                            <a href="index.php?site=home">
                                <img src="img/nav_home.png" border="0"  id="menu" />
                            </a>                            
                        </td>
Aber seit ich die Grafiken nun als Bild eingefügt habe, habe ich wenn ich mir die Webseite mit dem Internet Explorer anschaue unter den Navigations Grafiken einen weißen Streifen. Mit Firefox (Windows / Linux) oder Konqueror ist dieser Streifen nicht da.

Das ist jetzt warscheinlich wieder nur so ein blödes IE Problem, weil der sich nicht an die Web-Standarts hält. Ist ja auch egal. Welche möglichkeiten gibt es denn diesen Streifen wenzubekommen? Ich habe schon überlegt, ob es eine Möglichkeit gibt die Grafiken doch als bg einzufügen, und dann dort eine Link drüber zulegen, allerdings habe ich keinerlei Ahnung wie dies gehen könnte.


Ich hoffe ihr könnt mir helfen, und wisst was ich meine.
Im Anhang sitzen die Codes meiner Webseite (index + css)


Vielen Dank für eure Antworten und euer Bemühen!
mfg Oper@ter

PS: Wer sich die Webseite mal anchauen möchte: Roberto Schmitz |
 

Anhänge

  • Webseite.zip
    1,1 KB · Aufrufe: 1
Werbung:
1. Dein Quellcode ist nicht valide. Dir fehlt vor allem ein Doctype (ganz wichtig).
2. Versuch es mal so:

Code: 
img { display: block; }

Ansonsten könnte der IE die nach dem Bild folgenden Zeilenumbrüche als neue Zeile ansehen. Hab keinen IE hier, daher kann ichs mir dort nicht anschauen.

PS: wieso noch Tabellen?
 
Hey,
danke für deine schnelle Antwort

1. Ich kenne mich mit doctyps nicht so aus... Soll ich dieses nehmen?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
2. Werde es gleich mal ausprobieren
3. Eigendlich arbeite ich lieber mit Div's, aber irgendwie habe ich bei dieser Seite es nicht hinbekommen. Ich möchte die Seite schnell fertig haben, weil ich sie für eine Bewerbung haben möchte.
Sobald die Webseite läuft, und ich die Bewerbung durchhabe, werde ich die Seite für Div's umbauen.

Meinst du denn das Problem würde sich mit Div's verabschieden???
 

Anhänge

  • IE.JPG
    IE.JPG
    86,9 KB · Aufrufe: 2
Zuletzt bearbeitet:
Werbung:
Oper@ter schrieb:
Meinst du denn das Problem würde sich mit Div's verabschieden???
Zum Vergrößern anklicken....

Höchstwahrscheinlich schon, wär aber ein ähnlicher unsinn wie mit Tabellen.
Schreib einfach deinen Html Quelltext mit deinem Inhalt, zeichne ihn Semantisch korrekt aus.
Und danach mach dir gedanken um das aussehen deiner Site.

Wer weiß, vieleicht brauchst ja nicht mal ein div, da ja <h1><p><ul> usw auch Blockelemte sind, die ganz genau wie ein div positioniert werden können.

div´s sind nur dazu da um verschiedene zusammengehörige Elemente zu gruppieren.

Was den doctype angeht, warum nimmst nicht einfach den aktuellsten, nämlich XHtml strict, hat den Vorteil (manche sehen es als nachteil) das du dir weniger Fehler erlauben darfst.

gruß
csstester
 
hey,

ich habe die Webseite nun doch mal in Div's gepackt.

Naja, jetzt setzt er die Buttens der Navigation untereinander (Firefox) habe leider grad keine IE sonst würd ich auch mal gucken wies da aussieht...

Im Anhang sind wieder meine Quellcodes = )

Site: Roberto Schmitz |
 

Anhänge

  • Archiv.zip
    1,4 KB · Aufrufe: 1
Zur Tabellenvariante:
Die Grafiken sind nicht im Archiv.
Ich habe es mir nicht genau angesehen aber eine Vermutung.
Versuche mal folgendes:
Code: 
#menu{
text-decoration:none;
border:0;
display: block;
}
oder
Code: 
#menu{
text-decoration:none;
border:0;
float: left;
}
Ein möglicher Doctype währe:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Wenn ich mit meiner Vermutung richtig liege, müsste der Abstand ohne oben genannter Änderung (aber mit der Doctype) zunächst in allen Browsern auftreten.
Das währe aber die korrekte Darstellung.

Die Variante mit <div> habe ich mir nicht angesehen.
Wenn du aber jedes einzelne <a> mit einem <div> umschlossen hast ohne zu floaten, werden sie natürlich untereinander dargestellt.
 
Zuletzt bearbeitet:
Werbung:
Hallo! :-)

Oper@ter schrieb:
Ich habe mir gestern ein neues Design erstellt, es in Stücke geschnitten, und in eine Webseite gebastelt.
Zum Vergrößern anklicken....
Grauenvolle Vorstellung. Raus kommt meistens ein pixelgenaues Layout, dass sich weder mit der Fenstergröße ändert, noch mit einer Schriftgrößenänderung.
Huch! Hab mir die Site mal angesehen...verstehe nicht, was man da in Stücke schneidet...

Dazu habe ich immer alle Grafik über CSS als background-image in das Layout eingefügt.
Zum Vergrößern anklicken....
Ganz schlechte Vorgehensweise. Als Hintergrundgrafik fügt man nur ein, was verzieredes Beiwerk ist, Dekoration, Design. Grafiken, die zum Inhalt gehören, wie auch Navigationsbuttons, Bilder zum Text, Logos usw. sollten als <img> eingebunden werden. Denn ins Stylesheet gehören nur Layout+Design, nicht aber Content.

Später ist mir denn aufgefallen, dass ich die Buttens für die Navigation auch als background-image eingefügt habe. Deswegen habe ich die Grafiken jetzt nicht mehr als bg drin, sonder eine eine Tabelle eingefügt, und um sie herum ein Link gemacht
Zum Vergrößern anklicken....
Aua. Eine Navigation ist doch eine Liste, sowas zeichnet man mit <ul> aus. Eine Tabelle ist hier völlig fehl am Platze.

Eigendlich arbeite ich lieber mit Div's
Zum Vergrößern anklicken....
Ganz schlecht. Man arbeitet eigentlich mit HTML. Das heißt, man arbeitet mit dem, was der Inhalt von einem verlangt. Überschriften zeichnet man mit <h1> bis <h6> aus, Textabsätze zeichnet man mit <p> aus, Adressen mit <address> usw. <div> hat die Bedeutung: Gruppiere mehrere Elemente zwecks gemeinsamer Formatierung. So gesehen braucht man <div> eigentlich kaum.

ich habe die Webseite nun doch mal in Div's gepackt.
Zum Vergrößern anklicken....
Du meinst, Du ersetzt eine falsche Auszeichnung durch eine andere falsche Auszeichnung und glaubst, dass sich dadurch die Optik verändert? HTML ist nicht für die Optik da, sondern nur zur Auszeichnung des Inhalts, für eine semantische Bedeutung. Ein visuelles Problem ist, valider und sinnvoller Code vorausgesetzt, immer in CSS begründet.
Eine Seite "in <div>s zu packen" ist genauso großer Unsinn, wie Layout mit Tabellen zu machen.

Naja, jetzt setzt er die Buttens der Navigation untereinander
Zum Vergrößern anklicken....
Ganz normales Verhalten für Block-Elemente, zu denen Du Deine Images im Stylesheet ja gemacht hast (mit display:block;). Das solltest Du wieder entfernen, dann sind sie auch nebeneinander. Jetzt noch ein float einzubauen wäre Unsinn.
Aber vorher solltest Du eigentlich Deine Navigation als <ul> auszeichnen.

Aber bevor Du Darstellungsfehler versuchst, zu beseitigen, solltest Du eine valide und semantisch sinnvolle Basis aus HTML haben. Sonst baust Du hinterher wieder alles um.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben