Portfolio- CSS-Grafiken...werden im IE falsch angezeigt

user-338

14.12.2006 14:17

Hi Leute, ich habe mein neues Portfolio mit Photoshop fertig gestellt, nun heisst es "coden". Doch lang lang ists her das sich mit css gearbeitet habe und dem entsprechend wird das ganze auch in den verschiedenen Browsers angezeigt:

CSS





div.header_top  { background: url(images/header_top.jpg) left repeat-x;

                  width:811px;

                  height:28px;

                }

div.header_logo { background: url(images/header_logo.jpg) left top no-repeat;

                  width:154px;

				  height:57px;

				  margin-left:279px;

				  float:left;

                }

div.header_empty { background: url(images/header_empty.jpg) left top no-repeat;

                   width:552px;

				   height:57px;

				   margin-left:433px;

                }       

div.header_main { background: url(images/header_main.jpg) left top no-repeat;

                  width:706px;

				  height:102px;

				  margin-left:279px;

				  float:left;

                }

div.content_top { background: url(images/content_top.jpg) left top no-repeat;

                  width:487px;

				  height:82px;

				  margin-left:279px;

				  float:left;

                }

    div.new_top { background: url(images/new_top.jpg) left top no-repeat;

                   width:219px;

				   height:82px;

				   margin-left:766px;

				   margin-top:102px;

                }

div.content_main { background: url(images/content_main.jpg) left top no-repeat;

                   width:483px;

				   height:303px;

				   margin-left:279px;

				   float:left;

                }

div.new_main     { background: url(images/new_main.jpg) left top no-repeat;

                   width:223px;

				   height:303px;

				   margin-left:762px;

                }				

div.content_bottom { background: url(images/content_bottom.jpg) left top no-repeat;

                   width:485px;

				   height:82px;

				   margin-left:279px;

				   float:left;

                }

div.content_bottom { background: url(images/content_bottom.jpg) left top no-repeat;

                   width:485px;

				   height:82px;

HTML





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>

  <title>Online Portfolio | </title>

  

  <meta name="ROBOTS" content="INDEX, FOLLOW" />

  <meta name="revisit-after" content="7" />

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  

  <link href="style.css" type="text/css" rel="stylesheet" />

 </head>

  <body bgcolor="#ffffff">

<script type="text/javascript" src="http://www.deine-stimme-gegen-armut.de/banner/banner_klein_rechts.js">

</script><noscript><a href="http://www.deine-stimme-gegen-armut.de/"> http://www.deine-stimme-gegen-armut.de</a></noscript>

<br /><center>

  <div class="header_top"></div></center>

  <div class="header_logo">

    &nbsp;

  </div>

  <div class="header_empty">

    &nbsp;

  </div>

  <div class="header_main">

    &nbsp;

  </div>

    <div class="content_top">

    &nbsp;

  </div>

    <div class="new_top">

    &nbsp;

  </div>

      <div class="content_main">

    &nbsp;

  </div>

        <div class="new_main">

    &nbsp;

  </div>

    </div>

        <div class="content_bottom">

    &nbsp;

  </div>

          <div class="new_bottom">

    &nbsp;

  </div>

            <div class="footer">

    &nbsp;

  </div>

Ich bin für jede Hilfe / Tipps / Tricks / Ideen / Rat-Vorschläge etc. dankbar!

Mfg. Verm.

user-157

14.12.2006 14:47

Hast du ein genaueres Problem?

asdf!

user-338

14.12.2006 14:50

Jop schau dir die gecodete Seite doch mal im IE an lächeln

Verm.

user-118

14.12.2006 14:58

Original von user-157
Hast du ein genaueres Problem?

schau dir den Link an Fettes Grinsen

@topic:

Zuallererst ist es nicht notwendig für jedes Bild, dass du als Designelement einbindest einen eigenen Div-Container zu benutzen.

<br> und <center> sind unschöne Methoden um das Design zu positionieren. Lege an dieser Steller lieber einen Container an, der dann ganzes Design umschließt und gebe diesem die Style-Anweisungen

style="width:800px; margin:10px auto 0;"

Die Breitenangabe musst du je nach belieben anpassen, jedoch ist diese zwingend. Zum horizontalen zentrieren wird dem Container der "Marginwert" auto zugewiesen. Die 10px geben den gewünschten Abstand von der oberen "Browserkante" an.

Es empfielt sich auch noch ein

* {margin:0; padding:0;}

damit du bei den Marginangaben (s.o.) auch die Pixel Abstand hast, die du angibst.

Weiterhin gibt es auch noch das <img> Tag...

Das war zwar nicht direkt dazu, wie du dein Design richtig positionierst aber ich hoffe es hilft dir ein bisschen den Code halbwegs sauber zu gestalten.

mfg Alex

Ich brauche keine Signatur

user-338

14.12.2006 15:07

Hi, was meinst du mit Container? Bzw. wie sieht sowas aus? Wenn nicht mit <div>?

user-118

14.12.2006 15:15

So zum Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>

  <title></title>  

  <meta name="Content-Language" content="de" />

  <meta name="ROBOTS" content="INDEX, FOLLOW" />

  <meta name="revisit-after" content="7" />

  <link href="style.css" type="text/css" rel="stylesheet" />

 </head>

  <body bgcolor="#ffffff">

<script type="text/javascript" src="http://www.deine-stimme-gegen-armut.de/banner/banner_klein_rechts.js">

</script><noscript><a href="http://www.deine-stimme-gegen-armut.de/"> http://www.deine-stimme-gegen-armut.de</a></noscript>

<div id="container">

  <div class="header_top"></div></center>

  <div class="header_logo">

    &nbsp;

  </div>

  <div class="header_empty">

    &nbsp;

  </div>

  <div class="header_main">

    &nbsp;

  </div>

    <div class="content_top">

    &nbsp;

  </div>

    <div class="new_top">

    &nbsp;

  </div>

      <div class="content_main">

    &nbsp;

  </div>

        <div class="new_main">

    &nbsp;

  </div>

    </div>

        <div class="content_bottom">

    &nbsp;

  </div>

          <div class="new_bottom">

    &nbsp;

  </div>

            <div class="footer">

    &nbsp;

  </div>

</div>

</body>

</html>

Nun gibs du in deinem Stylesheet dem div mit der ID container die oben genannten eigenschaften.

du hast übrigens auch </body> und </html> vergessen.

Du kannst viel mit Image Replacement machen.

mfg Alex

Ich brauche keine Signatur

user-338

14.12.2006 15:26

Ohman... ID hab ich noch nie gehört Fettes Grinsen

! Dem nach auch keine ahnung wie ich dass ins style sheet ein bauen müsste und sry aber bei deinem Link versteh ich nur Bahnhof. Ich arbeite immer mit www.css4you.de...

Verm.

// mal den HTML-Code geändert





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>

  <title>Online Portfolio | </title>

 </head>

  <body style="width:800px; margin:10px auto 0;" bgcolor="#ffffff">

<script type="text/javascript" src="http://www.deine-stimme-gegen-armut.de/banner/banner_klein_rechts.js">

</script><noscript><a href="http://www.deine-stimme-gegen-armut.de/"> http://www.deine-stimme-gegen-armut.de</a></noscript>

<div id="container">

  <div class="header_top"></div>

  <div class="header_logo">

    &nbsp;

  </div>

  <div class="header_empty">

    &nbsp;

  </div>

  <div class="header_main">

    &nbsp;

  </div>

    <div class="content_top">

    &nbsp;

  </div>

    <div class="new_top">

    &nbsp;

  </div>

      <div class="content_main">

    &nbsp;

  </div>

        <div class="new_main">

    &nbsp;

  </div>

    </div>

        <div class="content_bottom">

    &nbsp;

  </div>

          <div class="new_bottom">

    &nbsp;

  </div>

            <div class="footer">

    &nbsp;

  </div>

   </div> 

</body>

</html>

Sieht jetzt ehr schlechter aus als vorher frech

Also mein Problem ist es ja, das da sganze nur im FF richtig angezeigt wird! abe rim IE usw. nicht...

user-137

14.12.2006 18:34

Jetzt wirds auch im FF nett mehr richtug angezeigt!

user-118

14.12.2006 18:37

Ich habe das Gefühl, dass du dich erstmal mit den Grundlagen in CSS befassen solltest und dich dann langsam an soetwas rantasten solltest. Alternativ könnte ich dir auch anbieten den Kram für dich umzusetzen, nur wo bliebe da der Lerneffekt ? zwinkern

Ließ dir mal die Kapitel zu float und position durch.

mfg alex

Ich brauche keine Signatur

user-338

15.12.2006 15:09

Alles geht jetzt eigentlich!

-> click

Verm.

user-338

17.12.2006 17:49

Ich Frag mich nur wieso der Link in den News nicht geht lächeln

-> click

Verm.

user-157

17.12.2006 17:53

da liegt bestimmt irgendwas drüber... mach mal bei den divs border: 1px solid black; um zu sehen, wie groß die wirklich alle sind. dann wird sicher eins über dem link liegen.

asdf!