Homepage im IE

[pankraz]

Hallo zusammen,

Bin nun schon seit längerem an meiner Homepage und nähere mich langsam dem Schluss. Ich habe immer mit Mozilla Firefox gearbeitet und nun die Seite im Ie betrachtet. DA hat es mich doch ein bisschen erstaunt was dass alles anders aussieht als im Firefox. Praktisch das ganze LAyout ist kaputt. Die Seite ist valide. KAnn mir jemand ein par tipps geben wie ich die Seite auch im IE einigermassen schön aussehen lassen kann....??

Vielen Dank im voraus.

pankraz

[Malcolm Beck´s]

hi,

Bin nun schon seit längerem an meiner Homepage und nähere mich langsam dem Schluss.

Ich hoffe, ich kann dich vom Gegenteil überzeugen.

Ich habe immer mit Mozilla Firefox gearbeitet und nun die Seite im Ie betrachtet. DA hat es mich doch ein bisschen erstaunt was dass alles anders aussieht als im Firefox. Praktisch das ganze LAyout ist kaputt. Die Seite ist valide.

Die Seite befindet sich auch im sogenannten Quirks-mode, was der IE in diesem tut ist völlig unberechenbar, hole ihn erstmal da raus.
Am schnellsten geht es, wenn du dein Copyright vor dem Doctype entfernst.

KAnn mir jemand ein par tipps geben wie ich die Seite auch im IE einigermassen schön aussehen lassen kann....??

Ja, mit CSS.
Das Design ist dir ganz gut gelungen, nur die Umsetzung mit der Div-Suppe ist nicht wirklich schön.
Das geht einfacher und viel Sauberer.
Versuche es einfach, wenn du Hilfe brauchst, weisst du ja, wo du fragen kannst.

grüße

[pankraz]

Hallo,

Ja, mit CSS.
Das Design ist dir ganz gut gelungen, nur die Umsetzung mit der Div-Suppe ist nicht wirklich schön.

Hmm, meinst du mit div Suppe dass die verschiedenen Div ineinander verschachtelt sind? Wie könnte man das denn ohne verschachteln machen?

Lg

[Beat]

Hmm, meinst du mit div Suppe dass die verschiedenen Div ineinander verschachtelt sind? Wie könnte man das denn ohne verschachteln machen?

Du hast zum Beispiel:

<div id=nav>...</div>

Das lässt sich auch so machen:

<ul id=nav>
 <li><a>...</a></li>
 <li><a>...</a></li>
</ul>

mfg Beat

[Malcolm Beck´s]

hi,

Hmm, meinst du mit div Suppe dass die verschiedenen Div ineinander verschachtelt sind? Wie könnte man das denn ohne verschachteln machen?

Neben der von Beat vorgeschlagenen Liste, die du auch übernehmen solltest:

  
<div id="link_block">  
  
<ul id="navigation">  
 <li><a>Home</a></li>  
 <li><a>Über mich</a></li>  
</ul>  
  
<dl>  
  <dt>  
    <em>22.06.2008</em>  
  </dt>  
  <dd>  
<p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>  
<p><a href="/news.html">Mehr&hellip;</a></p>  
  </dd>  
  
</div>

Versuch dich erstmal mit dem Stück Code, alles, was hier vorliegt kannst du wie ein div formatieren, da du ein ziemliches Chaos hast muss man das Stück für Stück angehen.

Wenn du Lust hast und das lernen möchtest können wir das Stück für Stück durchgehen, und noch bevor dieser Thread im Archiv ist hast du ne Spitzen Seite, Bugfrei versteht sich.

Aber du musst versprechen, das du kein Doppelposting machst. :)

grüße

[Malcolm Beck´s]

hi,

habsch was übersehen.

<div id="link_block">  
  
<ul id="navigation">  
 <li><a>Home</a></li>  
 <li><a>Über mich</a></li>  
</ul>  
  
<dl>  
  
  <dt>  
    <em>22.06.2008</em>  
  </dt>  
  
  <dd>  
<p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>  
<p><a href="/news.html">Mehr&hellip;</a></p>  
  </dd>  
  
</dl>  
  
</div>

grüße

[pankraz]

Hallo,

Ja würde mich sehr freuen. Habe mich jetzt mal rangesetzt und ein bisschen probiert:

  
<div id="link_block">  
  
<ul id="navigation">  
 <li><a>Home</a></li>  
 <li><a>Über mich</a></li>  
</ul>  
  
  
  <dt>  
    <em>22.06.2008</em>  
  </dt>  
 <dl>  
   <dd>  
     <p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>  
   </dd>  
  
     <p id="more"><a href="/news.html">Mehr&hellip;</a></p>  
 </dl>  
  
</div>  

Musste es noch ein bisschen abändern damit es funktionierte. HAbe nun den "Mehr..." link mit einer id belegt. Sollte auch so gehen oder...?

Nun ist einfach noch das Problem mit den Abschtänden zwischen den einzelnen Blöcken und dem rechten Rand. Mit was muss ich das lösen. Mit margin left, oder wie...? Die bugfreie Seite an der ich herumprobiere ist übrigens http://www.pankraz.li/bug.php

[Beat]

Hallo,

Ja würde mich sehr freuen. Habe mich jetzt mal rangesetzt und ein bisschen probiert:

<div id="link_block">

<ul id="navigation">
<li><a>Home</a></li>
<li><a>Über mich</a></li>
</ul>

<dt>
    <em>22.06.2008</em>
  </dt>
<dl>
   <dd>
     <p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>
   </dd>

<p id="more"><a href="/news.html">Mehr&hellip;</a></p>
</dl>

</div>

  
Was sagt der Validator zu deiner Definitionsliste, welche erheblich von Malcolms Beispiel abweicht?  
  
mfg Beat

-- 
<°)))o><   O                      ><o(((°>  
           O \_ |  |\_\_/ ><o(((°>  
  ><o(((°>o   \ \/  
               \|  |\_/            <°)))o><  
     <°)))o><   \ /  \  <°)))o><  
                 |  
        ><o(((°> /\  

[pankraz]

Hallo
Aber laut Malcolms Beispiel sollte ich dann die news und den Link "Mehr..." in einem <dd> Tag haben. Aber DA aber zwei Hintergrundbilder vorliegen weiss ich nicht wie ich das lösen soll.

Lg

[Beat]

Aber laut Malcolms Beispiel sollte ich dann die news und den Link "Mehr..." in einem <dd> Tag haben. Aber DA aber zwei Hintergrundbilder vorliegen weiss ich nicht wie ich das lösen soll.

Persönlich würde ich keine Definitionsliste nehmen.
Ich würde einfach weitere Listenelemente an die bestehende ul anfügen.

wobei
<ul>
...
<li><hx>...Datum...</hx>
    <p>Aktueller Newseintrag
</li>
<li><a>mehr News</a></li>
</ul>

Du solltest generell auch Codeschnippsel validieren. Egal woher sie stammen.
Auch wir machen Fehler.

mfg Beat

[pankraz]

HAllo zusammen,

So, hatte mal wieder Zeit weiter zu machen. Mittlerweile sieht die Navigation gut aus. Passt es so...?

  
<div id="link_block">  
  
<ul id="navigation">  
  <li id="home"><a>Home</a></li>  
  <li class="button"><a>Home</a></li>  
  <li class="button"><a>Über mich</a></li>  
  <li id="newstitel">22.06.2008</li>  
  <li id="news">Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</li>  
  <li id="more"><a href="/news.html">Mehr&hellip;</a></li>  
</ul>  
</div>  

  
#navigation  
{  
 list-style-image: none;  
 width: 231px;  
 margin-left: 0px;  
}  
  
#home  
{  
 background-image: url(images/topnavi.jpg);  
 background-repeat: no-repeat;  
 height: 28px;  
 padding: 55px 0px 0px 60px;  
 color: #FFFFFF;  
 font-family:"Courier New", Courier, monospace;  
 font-size: 19px;  
 font-weight: 900;  
}  
  
.button  
{  
 background-image: url(images/button.jpg);  
 background-repeat: no-repeat;  
 height: 24px;  
 color: #FFFFFF;  
 text-decoration: none;  
 font-family:"Courier New", Courier, monospace;  
 font-size: 18px;  
 font-weight: 900;  
 padding: 3px 0px 0px 55px;  
}  
  
#newstitel  
{  
 background-image: url(images/newstitel.jpg);  
 background-repeat: no-repeat;  
 height: 34px;  
 color: #FFFFFF;  
 text-decoration: none;  
 font-family:"Courier New", Courier, monospace;  
 font-size: 16px;  
 font-weight: 900;  
 padding: 12px 0px 0px 66px;  
}  
  
#news  
{  
 background-image: url(images/news.jpg);  
 background-repeat: repeat-y;  
 color: #ffffff;  
 padding: 0px 10px 5px 20px;  
}  
  
#more  
{  
 background-image: url(images/more.jpg);  
 color: #ffffff;  
 background-repeat: no-repeat;  
 height: 33px;  
 font-family:"Courier New", Courier, monospace;  
 font-size: 16px;  
 font-weight: 900;  
 text-decoration: none;  
 padding: 15px 0px 0px 95px;  
}  
  
#more a  
{  
 color: #ffffff;  
 font-family:"Courier New", Courier, monospace;  
 font-size: 16px;  
 font-weight: 900;  
 text-decoration: none;  
}  
  

Nun habe ich nur noch das Problem dass die ganze Leiste viel zu weit rechts ist. Mit margin-left lässt es sich auch nicht verschieben, was muss ich hier verwenden?

Hier sieht man die momentane Version http://www.pankraz.li/bug.php

Vielen Dank

pankraz

[Beat]

padding:0 für #navigation

mfg Beat

[suit]

So, hatte mal wieder Zeit weiter zu machen. Mittlerweile sieht die Navigation gut aus. Passt es so...?

nicht ganz, das war etwas zu optimisitisch ;) - du hast die restliche seite auch gleich in die navigation gepackt, etwas trennen solltest du das schon ;

versuchs mal eher mit sowas:

  
<h1>Meine Seite</h1>  
<ul id="navigation">  
  <li><a>Home</a></li>  
  <li><a>Über mich</a></li>  
</ul>  
<h2>News</h2>  
<ul id="newsliste">  
  <li>  
    <strong class="datum">22.06.2008</strong>  
    <p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>  
    <a class="more" href="/news.html">Mehr&hellip;</a>  
  </li>  
  <li>  
    <strong class="datum">22.06.2008</strong>  
    <p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>  
    <a class="more" href="/news.html">Mehr&hellip;</a>  
  </li>  
</ul>  

[Malcolm Beck´s]

hi,

So, hatte mal wieder Zeit weiter zu machen. Mittlerweile sieht die Navigation gut aus. Passt es so...?

Es geht schon in die richtige Richtung.
Was mir aber auf den zweiten Blick erst auffällt;
Du formatierst nicht gründlich genug, dadurch heimst du dir auch Bugs ein und wirst sie auch nicht los.

Du musst dir angewöhnen, alles zu formatieren, damit ist jedes div, p, ul, li dl und was sonst so auf deinen Seiten rumschwirrt gemeint.

Die vielen ids auf deiner Beispielseite sind völlig überflüssig, diese Elemente kannst du auch direkt und ohne id ansprechen.

Nehmen und vereinfachen wir suits Beispiel:

  
<ul id="navigation">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">Über mich</a></li>  
  <li>  
    <em>22.06.2008</em>  
    <p>Hallo das sind news</p>  
    <a class="more" href="/news.html">Mehr&hellip;</a>  
  </li>  
  
</ul>

#navigation {  
 margin: 0; padding: 0;  
 width: 231xp;  
 float:left;  
}  
#navigation li {  
 margin: 0; padding: 0;  
}  
#navigation li a:link,  
#navigation li a:link,  
#navigation li em {  
 margin: 0; padding: 0;  
 display: block;  
}  
#navigation li p {  
 margin: 0; padding: 0;  
}

Ungeschmückt und ungetestet.

Nun habe ich nur noch das Problem dass die ganze Leiste viel zu weit rechts ist.

Das verursacht dein body Selektor:

#body  
{  
 padding: 5px 5px 5px 5px;  
}

Kind regards

[Malcolm Beck´s]

hi,

  
<div id="link_block">  
  
<ul id="navigation">  
 <li><a>Home</a></li>  
 <li><a>Über mich</a></li>  
</ul>  
  
<dl>  
  
  <dt>  
    <em>22.06.2008</em>  
  </dt>  
  
  <dd>  
<p>Hallo das sind news hallo das sind die news hallo das sind die news hallo das sind die news</p>  
<p><a href="/news.html">Mehr&hellip;</a></p>  
  </dd>  
  
</dl>  
  
</div>

Musste es noch ein bisschen abändern damit es funktionierte. HAbe nun den "Mehr..." link mit einer id belegt. Sollte auch so gehen oder...?

Das mit der id ist kein Problem, aber wie schon hier erwähnt, den Valligator nie aus den Augen verlieren.

Mal eine zwischenfrage, weisst du, wie du dl, dd und p im dd formatieren kanst?

Nun ist einfach noch das Problem mit den Abschtänden zwischen den einzelnen Blöcken und dem rechten Rand.

Wir gehen es mal langsam an, erstmal alle Elemente zusammenbringen:

#link_block,  
#link_block ul,  
#link_block ul li,  
#link_block dl,  
#link_block dl dt,  
#link_block dl dt em,  
#link_block dl dd,  
#link_block dl dd p  
{  
 margin: 0;  
}

Nach diesem Schema kannst du alles im #link_block einzeln formatieren.

grüße

[Beat]

Da gibt es mehrere Philosophien.

Der einte Ansatz nimmt conditional comments.
Der anderen Vertraut auf die verschiedenen CSS Bugs der Browser.

Der eine macht nur die notwendigen Änderungen im gleichen Stylesheet,
der andere verwendet die eine oder andere Möglichkeit, ein alternatives Stylesheet einzubinden.

Mehr dazu liest du da:
http://de.selfhtml.org/css/formate/box_modell.htm#css_hacks

mfg Beat