✔ Probleme mit pixelgenauem css Design

Status
Nicht offen für weitere Antworten.
doenerpower

doenerpower

Mitglied
hi,
ich wollte jetzt mal eine Homepage entwerfen, die mit möglichst wenig Tabellen auskommt und habe mich deshalb mal an css versucht, aber komme nicht weiter :(

Zur Page

Der relevante Code:
Code: 
<style type="text/css">
<
 #t_muster_rand_l {
                     width:5px;
					 background-image:url(images/muster_rand_l.gif)  
                   }
 #t_muster_rand_r {
                     width:5px;
					 background-image:url(images/muster_rand_r.gif)  
                   }
  table { 
                  margin:0px;
				  padding:0px;
				  border:0px;
				  table-layout:fixed;				  
                }
#main { padding: 0;
        margin: 0 auto;		
		width:1004px; 
      } 
						   				   
</style>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
  
<div id="main">
<table border="0" width="100%" height="100%" align="center" cellSpacing="0" cellPadding="0">
 <tr>  
  <td id="t_muster_rand_l">
  </td>
  <td width="994px" height="160px" cellpadding="0"><img src="images/header.gif"><br>   
   <div style="float:left">
    <img src="images/obere_leiste_grau_klein.gif" height="36px" width="1px">
   </div>
   <div style="float:left">
    <img src="images/obere_leiste_inlay.gif" height="36px">
   </div>
   <div style="float:left; background-image:url(images/obere_leiste_bg.gif); height:36px; width:18px;">     	  
   </div>
   <div style="float:left; ">
    <span style="background-image:url(images/obere_leiste_bg_eingabefeld_o.gif); height:7px; width:138px;"></span>	
    <span>
     <form target="_new" >
      <input type="text" style="background-image:url(images/eingabefeld_login.gif); border:0px; height:22px; width:137px;">
     </form>
    </span>
    <span style="background-image:url(images/obere_leiste_bg_eingabefeld_u.gif); height:7px; width:138px;">
    </span> 
   </div> 
  </td>
  <td id="t_muster_rand_r">   
  </td>  
 </tr>  
</table>
</div>
</BODY>
</HTML>

Meine Probleme sind:
1. Bin ich auf dem richtigen Weg, oder wende ich css völlig falsch an ?
2. wie ordne ich die Grafiken "obere_leiste_bg_eingabefeld_o.gif" und "obere_leiste_bg_eingabefeld_o.gif" ober-und unterhalb des Formulars an ?
3. Im ie schließt der Header sauber an die graue Leiste an, im Firefox ist jedoch so ein kleiner Zwischenraum. Wie bekomme ich den weg ?

Vielen Dank schonmal im Vorraus und frohe Weihnachten :)

mfg
 
Zuletzt bearbeitet:
Hier ein paar grundsätzliche Tipps zum Quelltext deiner verlinkten Seite:

  • Der schliessende Kommentar --> befindet sich nicht am Ende des Stylesheets, sondern mittendrin, was in den Browsers zu Darstellungsfehlern führt.

  • Die Einheit px wird in den Attributen width,height nicht notiert:
Code: 
<td width="994px" height="160px" cellpadding="0">
  • Das img-Element gehört zu den sog. Inline-Elementen und besitzt 'von Natur aus' eine fliessende Eigenschaft. Somit sind die DIVs mit der CSS-Eigenschaft float:left in meinen Augen überflüssig.

  • Im folgenden Abschnitt stimmt etwas nicht mit dem Auskommentieren / Deaktivieren der Elemente:
Code: 
 <div style="float:left; ">
   <span style="background-image:url(images/obere_leiste_bg_eingabefeld_o.gif); height:7px; width:138px;"></span>  
	<!--</div>
	<div style="float:left;">-->
 
ich habe mal nochmal komplett neu angefangen und achte auch jetzt penibel darauf, dass der Code "html 4.01 valid" is :)

http://ullistahl.pytalhost.de/test/gfxtasy_css.php

jetzt gibts jedoch noch 2 (hoffentlich kleinere) Probleme:

- wie ziehe ich das Muster links und rechts bis nach unten ?

- im ie ist die Darstellung korrekt, im Firefox ist jedoch so eine kleine Lücke zwischen dem header und der navigationsgrafik. Wie erreiche ich, dass die 2 Grafiken sauber aneinander schließen ?

mfg ;)
 
In meinem Lösungsvorschlag befindet sich das linke und rechte Muster in einer Grafik mit 1004px Breite, die als Hintergrund für das DIV#main dient und so bis zum unteren Element-Rand reicht.

Das Demo incl. der Hintergrundgrafik, sowie dem modifizierten CSS- u. HTML-Code bzgl. des zweiten Problems hänge ich als ZIP-Datei an ;)
  • Browsercheck: FF 1.5, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Zuletzt bearbeitet von einem Moderator:
wow, vielen Dank für die Mühe die du dir gemacht hast !
Ist zwar schade, dass es keine andere Möglcihkeit gibt, als die Grafiken zu ändern, aber vielleicht muss ich acuh von meiner "Tabellen-Denkart" auf das "css-Denken" umsteigen :D

Noch eine kleine Frage:
Code: 
#platzhalter { /* Für FireFox */
              margin: -5px 0 0 0; /* Aussenabstand oben rechts unten links */
              padding: 0;
              }

ich weiß zwar, was für eine Auswirkung das hat, aber den Grund kenne ich nicht.
Muss ich das nun bei allen Grafiken machen, damits im ff gescheit angezeigt wird ?

mfg :)
 
doenerpower hat gesagt.:
wow, vielen Dank für die Mühe die du dir gemacht hast !
Zum Vergrößern anklicken....
Gern geschehen. Du weisst doch: "Ein Bild sagt mehr, als 1000 Worte" ;)

doenerpower hat gesagt.:
Noch eine kleine Frage:
Code: 
#platzhalter { /* Für FireFox */
margin: -5px 0 0 0; /* Aussenabstand oben rechts unten links */
padding: 0;
}
ich weiß zwar, was für eine Auswirkung das hat, aber den Grund kenne ich nicht.
Muss ich das nun bei allen Grafiken machen, damits im ff gescheit angezeigt wird ?
Zum Vergrößern anklicken....
Diese Maßnahme bezog sich auf die Lücke zwischen den beiden Grafiken (Header + Platzhalter), die in den Gecko-Browsers (FireFox, Mozilla, Netscape) dargestellt wurde.

Wenn mit meinem Lösungsvorschlag das Problem gelöst ist und alles funktioniert, dann markiere das Thema bitte durch einen Klick auf den 'Status-Button' als erledigt.

Vielen Dank ;)
 
naja, hab zwar noch n paar Probs mit css, aber möchte euch nicht noch länger belasten, vielleicht bekomme ich es ja noch hin.
Trotzdem danke für die Starthilfe.

mfg :)
 
Wenn du (noch) Probleme hast, dann schreibe sie hier einfach nieder.

Was meinst du, wofür dieses Forum gedacht ist, und was sich hinter dem Motto 'User helfen Usern' verbirgt? ;)
 
Also meine Probleme sind halt vor allem, dass die Darstellung im ff und ie fast immer unterschiedlich ist...
Außerdem finde ich, dass ein css-Design irgendwie nicht so "logisch" wie ein Tabellen-Design ist, da findet man die Fehler irgendwie viel schneller und es klappt auch mal was auf Anhieb :suspekt:

Wenn du mal Zeit hast, kannst du ja den aktuellen Stand meiner Page ansehen:

http://www.gfxtasy.de/test/gfxtasy_css.php

Ich weiß, dass die Buttons nicht richtig plaziert sind, aber ich habs halt nichtt hinbekommen, dass sich nur die Buttons und nicht auch die Eingabefelder verschieben...
Das ist jedoch nicht das vorrangige Problem, da ich vielleichtt da auch einen anderen Inhalt hinmache.
Viel mehr wurmt mich, dass mein Inhalt ("Linkes Menü" usw.) sich im ff irgendwie nicht im #content <div> tag befindet, obwohl er das sollte und dadurch kann ich jetzt nicht weitermachen :confused:

Und noch eine Frage zum Schluss: Eignen sich reine css Designs überhaupt für eine Anpassung an ein cms ?

Danke für Geduld und Mühe,

mfg ;)
 
Zuletzt bearbeitet:
Was ist denn an einem (z.T. verschachtelten) Tabellen-Design 'logischer', als an einem CSS-basierten Layout? :suspekt:

Anmerkung: Tabellen dienen nicht als 'universelles' Layout-Werkzeug einer (X)HTML-Seite, sofern es sich nicht um das Aufbereiten / Anzeigen von tabellarischen Daten / Inhalten handelt.

Damit die drei floatenden DIVs (linkes Menü, Mitte, rechtes Menü) im FireFox innerhalb des Content-DIVs angezeigt werden, muß nach ihnen ein DIV mit der CSS-Eigenschaft clear:left eingefügt werden, um wieder den normalen Textfluss herzustellen.

CSS-Code:
Code: 
div.clear
 {
 clear: left;
 height: 0;
 font-size: 0;
 margin: 0;
 padding: 0;
 }
HTML: 
<div>
      <div style="float:left;">linkes Menü</div>
      <div style="float:left;">Mitte</div>
      <div style="float:left;">Rechtes Menü</div>

      <div class="clear">&nbsp;</div>
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück